/* ==========================================================================
   House of Winners — referral landing page

   A gold-title hero band (the shared black/gold streak band, identical to the
   tutorial and rebate heroes) over a row of choice cards. Each card is a link
   into a referral flow: a gold-gradient heading, a one-line pitch, the flow's
   artwork, and a full-width gold CTA with a circular arrow.

   The landing page carries no form controls and no JS of its own — the cards
   just navigate to member/referral/<type>, where the legacy detail views and
   their claim handlers (css/assets/js/home-default.js) still live. So this file
   owns only the hero, the card grid and the card shell.

   Reminder: css/assets/css/style.css sets html{font-size:62.5%}, so 1rem =
   10px here. rem for type, px for structure — same split as the other redesign
   stylesheets. Do not "simplify" 1.4rem to 1rem (that renders 10px).
   ========================================================================== */

.hw-ref{
  background:var(--hw-page-bg,#000);
  padding:0 0 90px;
}

/* --------------------------------------------------------------------------
   Hero — the same band as css/rebate.css .hw-rebate__hero, kept under
   referral-scoped names so each redesigned page owns its own hero classes
   while sharing the artwork in images/heroes/ (hero-band.png desktop,
   hero-band-mobile.png phone). Streaks stand in if those files are missing.
   -------------------------------------------------------------------------- */
.hw-ref__hero{
  position:relative;
  height:250px;
  background:var(--hw-hero-bg,#352A23);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:0 0 60px;
}
.hw-ref__hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 60%,rgba(243,201,97,.10) 62%,transparent 64%),
    linear-gradient(115deg,transparent 66%,rgba(243,201,97,.16) 68%,transparent 71%),
    linear-gradient(115deg,transparent 73%,rgba(243,201,97,.10) 75%,transparent 78%),
    radial-gradient(120% 90% at 90% 50%,rgba(196,150,22,.22),transparent 60%),
    radial-gradient(120% 90% at 10% 50%,rgba(196,150,22,.14),transparent 60%);
  pointer-events:none;
}
/* The view passes the art in as --hw-hero-art (and --hw-hero-art-sm for the
   phone variant) rather than as an inline background-image, so the media query
   below can swap them — an inline style would win over any breakpoint rule. */
.hw-ref__hero--art{
  background-image:var(--hw-hero-art);
  background-size:cover;
  background-position:center;
}
.hw-ref__hero--art::before{display:none;}

.hw-ref__hero-title{
  position:relative;
  margin:0;
  font-family:var(--hw-font);
  font-size:6rem;              /* 60px */
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.05em;
  text-transform:capitalize;
  text-align:center;
  background:linear-gradient(180deg,#CD932C 16.58%,#F3C961 49.59%,#EFCF35 66.1%,#C49616 82.61%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* --------------------------------------------------------------------------
   Card grid
   Two cards across on the 1440 frame, centred in the content column. The grid
   is the only place that decides the card count, so dropping to one card (or
   re-enabling the third target card in the view) needs no CSS change — the
   tracks are `1fr` and auto-flow handles the rest.
   -------------------------------------------------------------------------- */
.hw-ref__cards{
  max-width:1250px;
  margin-inline:auto;
  padding-inline:20px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  /* Grid items default to min-width:auto; keep long CTA labels from widening a
     track past 1fr and scrolling the page sideways. */
  align-items:stretch;
}

/* --------------------------------------------------------------------------
   Card
   A link that fills its column and lays its contents out as a column so the
   CTA can be pinned to the bottom (margin-top:auto) — cards with a shorter
   pitch keep their buttons aligned across the row.
   -------------------------------------------------------------------------- */
/* Background is #0E0E0E — the exact backdrop the card artwork ships on (the
   referral-bonus PNG samples #0E0E0E at its corners; commission-referral is a
   touch darker at ~#040404, an imperceptible ~10-luminance seam). Matching the
   art's own black means each image bleeds into the card with no visible frame,
   while the gold hairline border and 20px radius (Figma card, Frame 1240)
   define the panel on the black page. */
.hw-ref__card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:40px;
  background:#0E0E0E;
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:20px;
  text-decoration:none;
  transition:border-color .15s,transform .15s;
}
.hw-ref__card:hover,
.hw-ref__card:focus{
  border-color:var(--hw-gold,#FACF5A);
  text-decoration:none;
  transform:translateY(-2px);
}
.hw-ref__card:focus-visible{outline:2px solid var(--hw-focus,#FACF5A);outline-offset:3px;}

.hw-ref__title{
  margin:0 0 12px;
  text-align:center;
  font-family:var(--hw-font);
  font-size:4rem;              /* 40px */
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.hw-ref__lead{
  margin:0 auto;
  max-width:34ch;
  text-align:center;
  font-family:var(--hw-font);
  font-size:1.8rem;            /* 18px */
  font-weight:400;
  line-height:1.4;
  color:var(--hw-on-surface,#FFF);
}

/* Artwork — fixed height so both cards' images and their guarded placeholders
   occupy the same band and the CTAs line up. object-fit:contain keeps the
   transparent PNGs from cropping. */
.hw-ref__art{
  display:flex;
  align-items:center;
  justify-content:center;
  height:280px;
  margin:24px 0 28px;
}
.hw-ref__art img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* --------------------------------------------------------------------------
   CTA — full-width gold pill, black label centred, circular arrow pinned
   right. Pushed to the card foot with margin-top:auto so buttons align even
   when one pitch wraps to more lines than the other.
   -------------------------------------------------------------------------- */
.hw-ref__cta{
  position:relative;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
  padding:16px 60px;           /* room for the arrow on the right */
  border-radius:10px;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  color:#111;
  font-family:var(--hw-font);
  font-size:1.6rem;            /* 16px */
  font-weight:700;
  line-height:1.2;
  letter-spacing:.02em;
  text-align:center;
  text-transform:uppercase;
  transition:filter .15s;
}
.hw-ref__card:hover .hw-ref__cta,
.hw-ref__card:focus .hw-ref__cta{filter:brightness(1.05);}

.hw-ref__cta-arrow{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#111;
}
.hw-ref__cta-arrow svg{width:16px;height:16px;display:block;}

/* --------------------------------------------------------------------------
   Artwork placeholder — shares the .hw-ph look from css/home.css but sized to
   the art band, so a missing image renders a labelled box at the right height
   and the layout never shifts. Remove nothing; the guard in the view swaps to
   a real <img> the moment the file lands in images/pages/referral/.
   -------------------------------------------------------------------------- */
.hw-ref__ph{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  padding:10px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:12px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 10px,transparent 10px,transparent 20px);
  color:#9A9A9A;font-size:12px;letter-spacing:.04em;text-align:center;
}

/* --------------------------------------------------------------------------
   Responsive
   The 900px step bridges the two supplied frames (1440 desktop, 393 mobile);
   the 767px step is the real mobile layout and is set to 767 so it flips with
   the header's own mobile switch. Cards stack to one column on mobile.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .hw-ref{padding-bottom:60px;}
  .hw-ref__hero{height:200px;margin-bottom:40px;}
  .hw-ref__hero-title{font-size:4.8rem;}
  .hw-ref__cards{gap:24px;padding-inline:16px;}
  .hw-ref__card{padding:32px 24px;border-radius:20px;}
  .hw-ref__title{font-size:3.2rem;}
  .hw-ref__lead{font-size:1.6rem;}
  .hw-ref__art{height:220px;margin:20px 0 24px;}
}

/* Mobile — from the 393px frame. Single column, square cards. */
@media (max-width:767px){
  .hw-ref{padding-bottom:40px;}

  /* Hero: 150px band, 38px gold title — same as the rebate/tutorial heroes.
     20px gap down to the first card matches the frame's Main auto-layout gap. */
  .hw-ref__hero{height:150px;margin-bottom:20px;}
  .hw-ref__hero-title{font-size:3.8rem;}

  /* Hero art on a phone: prefer the 393x150 band; without it drop the image
     and let the ::before streaks paint (they scale to any width). Same swap
     the rebate hero makes — see css/rebate.css. */
  .hw-ref__hero--art-sm{background-image:var(--hw-hero-art-sm);}
  .hw-ref__hero--art:not(.hw-ref__hero--art-sm){background-image:none;}
  .hw-ref__hero--art:not(.hw-ref__hero--art-sm)::before{display:block;}

  .hw-ref__cards{grid-template-columns:1fr;gap:20px;padding-inline:9px;}

  /* The 375x375 square card (Frame 1240). aspect-ratio keeps it square while
     the page has room but lets the box grow if a translated string runs long —
     a fixed height would clip. Horizontal padding drops to 0 so the artwork can
     bleed edge to edge; the title, lead and CTA carry their own insets. */
  .hw-ref__card{
    aspect-ratio:1/1;
    padding:26px 0;
  }
  .hw-ref__title{font-size:2.8rem;letter-spacing:-.02em;margin-bottom:5px;padding-inline:16px;}
  .hw-ref__lead{font-size:1.4rem;line-height:1.15;max-width:none;padding-inline:24px;}

  /* Full-bleed art: flex:1 centres it in the gap between lead and CTA; the
     610x305 image renders at its natural ~2:1 height across the full width
     (≈187px in a 375 card, matching Frame 1243). */
  .hw-ref__art{flex:1;height:auto;margin:0;}
  .hw-ref__art img{width:100%;height:auto;max-height:none;}

  /* CTA: the 330-wide gold pill (≈22px side margins inside the 375 card), 50px
     tall, 18px label, 30px circle arrow — Frame 1242. */
  .hw-ref__cta{margin-inline:22px;min-height:50px;padding:7px 44px;border-radius:8px;font-size:1.8rem;letter-spacing:-.03em;}
  .hw-ref__cta-arrow{width:30px;height:30px;right:10px;}
  .hw-ref__cta-arrow svg{width:14px;height:14px;}
}

/* ==========================================================================
   Claim modals (Bootstrap #ref-bonus-modal / #ref-commission-modal)

   The cards open these instead of navigating. Structure per the Figma modal:
   a gold-bordered dark panel, a gold-gradient title, a two-column body
   (referral link + COPY, claimable balance, and either the game-select/claim
   or the cannot-claim notice | QR code), a rule, and a centred BACK button.
   Bootstrap owns the show/hide + backdrop; only the surfaces are re-skinned,
   scoped under .hw-ref-modal so nothing else on the page is touched.
   ========================================================================== */

/* Post-claim server flash (rendered on the page, shows after the modal reload).
   :empty collapses it when get_notice_frontend() printed nothing. */
.hw-ref__flash{max-width:800px;margin:0 auto 20px;padding:0 20px;}
.hw-ref__flash:empty{display:none;}
.hw-ref .alert{
  position:relative;margin:0;padding:12px 40px 12px 16px;
  border:1px solid var(--hw-gold-line,#9F853F);border-radius:var(--hw-radius,5px);
  background:rgba(250,207,90,.06);color:var(--hw-gold-mid,#F3C961);
  font-size:1.3rem;line-height:1.5;
}
.hw-ref .alert-success{border-color:rgba(143,209,143,.5);background:rgba(143,209,143,.08);color:var(--hw-success,#8FD18F);}
.hw-ref .alert-danger{border-color:rgba(255,107,122,.5);background:rgba(255,107,122,.08);color:var(--hw-danger,#FF6B7A);}
.hw-ref .alert .close{position:absolute;top:8px;right:10px;padding:0;background:transparent;border:0;color:inherit;opacity:.7;font-size:2rem;line-height:1;text-shadow:none;cursor:pointer;}
.hw-ref .alert .close:hover{opacity:1;}

/* Panel — #171717 with a 2px bright-gold (#F0C040) border and a soft gold glow,
   per the mobile modal frame (Frame 725). Not the card's #0E0E0E: the modal has
   no artwork to blend into, and the raised surface reads better under a bright
   border. */
.hw-ref-modal .modal-dialog{max-width:800px;}
.hw-ref-modal .modal-content{
  background:var(--hw-footer-bg,#171717);
  border:2px solid #F0C040;
  border-radius:20px;
  box-shadow:0 0 50px rgba(250,207,90,.12);
}
.hw-ref-modal .modal-body{padding:36px 44px 32px;}

.hw-refm__title{
  margin:0 0 28px;
  text-align:center;
  font-family:var(--hw-font);
  font-size:3.2rem;             /* ~32px */
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Two-column body */
.hw-refm__grid{display:flex;align-items:stretch;}
.hw-refm__col{flex:1;min-width:0;}
.hw-refm__divider{flex:none;width:1px;align-self:stretch;margin:0 36px;background:rgba(255,255,255,.1);}
.hw-refm__col--qr{flex:none;width:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;}

.hw-refm__label{
  display:block;margin:0 0 8px;
  font-family:var(--hw-font);font-size:1.4rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--hw-on-surface,#FFF);
}
.hw-refm__label--mt{margin-top:24px;}
.hw-refm__label--center{text-align:center;}

/* Referral link + COPY (input rounded left, gold button attached right) */
.hw-refm__link{display:flex;}
.hw-refm__link-input{
  flex:1;min-width:0;height:44px;
  background:#000;border:1px solid var(--hw-gold-line,#9F853F);border-right:0;
  border-radius:8px 0 0 8px;color:var(--hw-on-surface,#FFF);
  padding:0 14px;font-size:1.3rem;font-family:var(--hw-font);
}
.hw-refm__link-input:focus{outline:none;}
.hw-refm__copy{
  flex:none;height:44px;padding:0 22px;border:0;border-radius:0 8px 8px 0;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  color:#000;font-family:var(--hw-font);font-weight:700;font-size:1.3rem;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
}
.hw-refm__copy:hover{filter:brightness(1.05);}

/* Claimable balance */
.hw-refm__amount{
  font-family:var(--hw-font);font-size:4.4rem;font-weight:700;line-height:1;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hw-refm__unit{margin-top:4px;font-family:var(--hw-font);font-size:1.4rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hw-gold,#FACF5A);}

/* Cannot-claim notice — same skin as the rebate warning banner */
.hw-refm__notice{
  display:inline-flex;align-items:center;gap:10px;margin:16px 0 0;
  padding:10px 16px;border:1px solid var(--hw-gold-line,#9F853F);border-radius:6px;
  background:rgba(250,207,90,.06);color:var(--hw-gold-mid,#F3C961);
  font-family:var(--hw-font);font-size:1.3rem;line-height:1.4;
}
.hw-refm__notice-icon{width:18px;height:18px;flex:none;}

/* Claimable state — game select (bonus only) + gold claim button */
.hw-refm__claim-row{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.hw-refm__select{
  height:44px;background:#000;border:1px solid var(--hw-gold-line,#9F853F);border-radius:8px;
  color:var(--hw-on-surface,#FFF);padding:0 14px;font-size:1.3rem;font-family:var(--hw-font);
}
.hw-refm__err{margin:0;color:var(--hw-danger,#FF6B7A);font-size:1.2rem;}
.hw-refm__claim{
  height:46px;border:0;border-radius:8px;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  color:#000;font-family:var(--hw-font);font-weight:700;font-size:1.5rem;
  letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:filter .15s;
}
.hw-refm__claim:hover{filter:brightness(1.05);}
.hw-refm__claim:disabled{opacity:.7;cursor:not-allowed;}

/* QR */
.hw-refm__qr{
  width:200px;height:200px;margin-top:8px;padding:10px;
  background:#FFF;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.hw-refm__qr img{width:100%;height:100%;object-fit:contain;}
.hw-refm__qr-ph{font-size:12px;color:#888;text-align:center;}

/* Rule + BACK */
.hw-refm__rule{height:1px;border:0;margin:28px 0 24px;background:rgba(255,255,255,.1);}
.hw-refm__back{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 auto;min-width:180px;padding:12px 32px;
  background:transparent;border:1px solid var(--hw-gold,#FACF5A);border-radius:8px;
  color:var(--hw-gold,#FACF5A);font-family:var(--hw-font);font-size:1.5rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.hw-refm__back svg{width:18px;height:18px;}
.hw-refm__back:hover{border-color:var(--hw-gold,#FACF5A);background:rgba(250,207,90,.06);}

/* Modal — mobile (393 frame, Frame 725). Single column, but REORDERED: the QR
   moves directly under the title, then a bright-gold divider, then the link and
   balance. Achieved with flex `order` so the desktop DOM (link left, QR right)
   is untouched. Larger QR + 60px amount + 16px labels per the frame. */
@media (max-width:767px){
  .hw-ref-modal .modal-dialog{max-width:none;margin:16px;}
  .hw-ref-modal .modal-body{padding:24px;}
  .hw-refm__title{font-size:2.8rem;margin-bottom:24px;}

  /* Stack + reorder so the QR sits directly under the title. The QR column
     carries BOTH .hw-refm__col and .hw-refm__col--qr, so a generic
     .hw-refm__col{order:2} also hits the QR and (equal specificity) wins by
     source order — which sank the QR to the bottom. Fix: give the QR and
     divider negative orders and leave the link/balance column at its default
     order:0. No rule targets .hw-refm__col for order, so nothing collides.
     Result: QR (−2) → gold divider (−1) → link/balance (0). */
  .hw-refm__grid{flex-direction:column;gap:24px;}
  .hw-refm__col--qr{order:-2;width:auto;align-self:stretch;align-items:stretch;justify-content:flex-start;}
  .hw-refm__divider{order:-1;width:auto;height:1px;align-self:stretch;margin:0;background:#F0C040;}

  /* Labels 16px; the QR label is left-aligned on mobile (not centred). */
  .hw-refm__label{font-size:1.6rem;}
  .hw-refm__label--center{text-align:left;}

  /* QR fills the width (~330px square, Frame 721). */
  .hw-refm__qr{width:100%;height:auto;aspect-ratio:1/1;margin:16px 0 0;padding:0;}

  /* Amount 60px per frame; POINTS 16px. */
  .hw-refm__amount{font-size:6rem;line-height:1.15;}
  .hw-refm__unit{font-size:1.6rem;color:#F0C040;}

  /* Warning pill: 20px glyph, 14px text. */
  .hw-refm__notice{font-size:1.4rem;}
  .hw-refm__notice-icon{width:20px;height:20px;}

  /* Divider before BACK is the dimmer gold (#9F853F); BACK 220 wide, 2px. */
  .hw-refm__rule{background:var(--hw-gold-line,#9F853F);margin:24px 0;}
  .hw-refm__back{width:220px;min-width:0;border-width:2px;}
}