/* ==========================================================================
   House of Winners — VIP page

   A full-bleed hero banner over a five-tier comparison table. Every value in
   the table is admin-managed via the layout record
   (vTicket* / vRebate* / vLevel* / vBday* / vAccDep*) and rendered in
   vip_view.php — this file only skins them. Built on the shared tokens in
   css/tokens.css; classes carry the hw- prefix so they can't collide with the
   legacy theme's .table / .main rules.

   Note the 10px root (style.css sets html{font-size:62.5%}), so 1.4rem = 14px.
   ========================================================================== */

/* The legacy theme paints images/vip_background.png behind #vip-view
   (css/assets/css/main-style.css:227). The redesign is flat black — the
   `background` shorthand clears that image and restores the page colour. The
   id selector matches the legacy rule's specificity and wins on load order. */
#vip-view{background:var(--hw-page-bg,#000);}

/* --------------------------------------------------------------------------
   Hero
   One finished export (vip-bg.png) that already carries its own black-gold
   background, the PRIVILEGE CLUB wordmark and the three perk icons — so there
   is nothing to overlay. Capped at the 1440 design width and centred on black;
   wider screens letterbox rather than upscale the artwork.
   -------------------------------------------------------------------------- */
.hw-vip__hero{background:var(--hw-page-bg,#000);}
.hw-vip__hero-art{
  display:block;
  width:100%;
  max-width:1440px;
  height:auto;
  margin-inline:auto;
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */
.hw-vip{
  max-width:var(--hw-container,1250px);
  margin-inline:auto;
  padding:26px 20px 80px;
}

/* The mobile frame fits all five tiers to the viewport rather than scrolling,
   so the table is fluid (fixed layout + per-breakpoint font sizes). This
   wrapper stays as a safety net only: an ultra-narrow screen that still can't
   fit the columns scrolls sideways with the label pinned, rather than
   overflowing the page. */
.hw-vip__scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.hw-vip__table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.hw-vip__table col.hw-vip__c-label{width:27%;}
.hw-vip__table col.hw-vip__c-tier {width:14.6%;}

/* --------------------------------------------------------------------------
   Badge header row
   The five tier medals double as column headers, so they sit in the same
   fixed grid as the values below and stay aligned to their columns.
   -------------------------------------------------------------------------- */
.hw-vip__badges th{
  padding:8px 10px 30px;
  vertical-align:bottom;
  text-align:center;
}
.hw-vip__badge{
  height:86px;
  width:auto;
  margin:0 auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
}

/* --------------------------------------------------------------------------
   Section header rows (SERVICE SUPPORT, REBATE, GIFTS & TREATS, …)
   Full-width gold band; the gradient text-clip is the same brand gold used on
   the hero headline elsewhere.
   -------------------------------------------------------------------------- */
.hw-vip__sec td{
  padding:30px 0 12px;
  border-bottom:1px solid var(--hw-gold-line,#9F853F);
}
.hw-vip__sec b{
  display:inline-block;
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#F6E395 0%,#E4B24B 52%,#C6902E 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* --------------------------------------------------------------------------
   Data rows
   -------------------------------------------------------------------------- */
.hw-vip__row th,
.hw-vip__row td{
  padding:16px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-weight:700;
  vertical-align:middle;
}
.hw-vip__row th{                     /* left label column */
  text-align:left;
  color:#EDEDED;
}
.hw-vip__row td{                     /* tier value columns */
  text-align:center;
  color:var(--hw-on-surface,#FEFEFE);
}
.hw-vip__row:last-child th,
.hw-vip__row:last-child td{border-bottom:0;}

/* Everything on this page is bold, by request. The row rule above carries the
   weight for the cells themselves; this catches the descendants — the <small>
   rollover and currency lines, and anything the legacy theme would otherwise
   set lighter. Scoped to .hw-vip so it cannot reach another page. */
.hw-vip,
.hw-vip *{font-weight:700;}

/* Sticky first column — keeps the row label visible while the tiers scroll
   sideways on narrow screens. Opaque black so scrolled values pass behind it. */
.hw-vip__table th.hw-vip__stick,
.hw-vip__badges .hw-vip__corner,
.hw-vip__sec td.hw-vip__sticksec{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--hw-page-bg,#000);
}

/* --------------------------------------------------------------------------
   Marks (✓ / ✗) — both white, per review
   -------------------------------------------------------------------------- */
.hw-vip__mark{
  color:var(--hw-on-surface,#FEFEFE);
  vertical-align:middle;
}

/* --------------------------------------------------------------------------
   Money cells
   Gifts show the amount over a secondary "xN Rollover"; the advancement cell
   stacks a small currency label over the threshold amount.
   -------------------------------------------------------------------------- */
.hw-vip__gift{display:block;}
.hw-vip__gift small{
  display:block;
  margin-top:2px;
  color:var(--hw-muted,#B3B3B3);
  font-size:1.2rem;
}
.hw-vip__amt{display:block;}
.hw-vip__amt small{
  display:block;
  color:var(--hw-muted,#B3B3B3);
  font-size:1.2rem;
  letter-spacing:.04em;
}

/* --------------------------------------------------------------------------
   Responsive
   Tablet still fits the desktop sizing comfortably — only the badges shrink.
   Phone follows the 393px frame: the whole grid is squeezed to the viewport
   (no sideways scroll), columns and type step down, and the rollover flows
   inline instead of sitting on its own line.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hw-vip__badge{height:72px;}
  .hw-vip__sec b{font-size:1.4rem;}
}

@media (max-width:767px){
  .hw-vip{padding:14px 9px 50px;}

  /* fixed layout keeps the columns from overflowing, so no min-width/scroll */
  .hw-vip__table col.hw-vip__c-label{width:27%;}
  .hw-vip__table col.hw-vip__c-tier {width:14.6%;}

  .hw-vip__badges th{padding:6px 3px 20px;}
  .hw-vip__badge{height:32px;}

  .hw-vip__sec td{padding:22px 0 10px;}
  .hw-vip__sec b{font-size:1.6rem;}         /* 16px, per the frame */

  .hw-vip__row th,
  .hw-vip__row td{padding:9px 3px;font-size:1.2rem;}   /* 12px labels + rebates */

  .hw-vip__mark{width:20px;height:20px;}

  /* Gifts: continuous white 10px text that wraps, not amount-over-grey-label. */
  .hw-vip__gift{font-size:1rem;line-height:1.15;}
  .hw-vip__gift small{display:inline;color:inherit;font-size:inherit;}
  .hw-vip__gift small::before{content:" ";}

  /* Advancement: white "RM" (12px) stacked over the 10px threshold amount. */
  .hw-vip__amt{font-size:1rem;}
  .hw-vip__amt small{color:var(--hw-on-surface,#FEFEFE);font-size:1.2rem;}
}