/* ─── Page-scoped overrides ────────────────────────────────────────── */

/* ── FULL-BLEED SHELL (≥1024) ──────────────────────────────────────────
   Figma frame is 1440 = 1200 content + 120px gutter each side. On screens
   WIDER than 1440 the design has no reference, so: backgrounds (dark bands,
   header bar, footer bar) extend to the screen edges while content stays
   1200px centered. Without this the 1442px page-shell cap pins the whole
   layout into a centered island → big empty margins at 1920 ("squished in
   the middle" feedback). Content width is unchanged (still 1200), so the
   1440 render stays pixel-identical to Figma. */
@media (min-width: 1024px) {
  .page-home .page-shell {
    max-width: none;     /* was 1442 — let header/main/footer span full width */
    overflow: visible;   /* home-main owns its own overflow-x: clip for the glow */
  }
}

/* Full-bleed dark bands — Figma Rectangle 85 (y=0..528) + Rectangle 86 (random section).
   Both painted as body gradient → guaranteed 100vw width, no parent clipping.
   Hero-bg is fixed (0..528). Random-bg position is synced from JS via CSS vars
   (--random-top / --random-bottom) so it tracks actual section y after layout. */
@media (min-width: 1024px) {
  body.page-home {
    background-color: rgb(var(--color-body));
    /* Featured dark band (0..528) — Figma both modes (verified Rectangle 85 in light too).
       Random band is DARK MODE ONLY per user/Figma — moved to .dark override below. */
    background-image: linear-gradient(
      to bottom,
      #08090E 0px,
      #08090E 560px,
      transparent 560px
    );
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0 0;
  }
  /* Random dark band — only in dark mode (Figma light has Random on light body bg) */
  .dark body.page-home {
    background-image: linear-gradient(
      to bottom,
      #08090E 0px,
      #08090E 560px,
      transparent 560px,
      transparent var(--random-top, 99999px),
      #08090E var(--random-top, 99999px),
      #08090E var(--random-bottom, 99999px),
      transparent var(--random-bottom, 99999px)
    );
  }

  /* Home has hardcoded dark band at body y=0-528 in BOTH modes (Featured section
     spans into the header zone). In light mode, default --color-lead becomes black
     → logo + items invisible on the dark band. Force header items to look like
     dark-mode (white) on home regardless of mode. Prefixed with :root:not(.dark)
     where needed to beat existing light-mode-only overrides in header-full.css. */
  :root:not(.dark) body.page-home .header-full__logo-img {
    background-color: rgb(255 255 255);
  }
  :root:not(.dark) body.page-home .header-full__hamburger,
  :root:not(.dark) body.page-home .header-full__avatar {
    background-color: rgb(255 255 255 / 0.10);
    border-color: rgb(255 255 255 / 0.20);
    color: rgb(255 255 255);
  }
  :root:not(.dark) body.page-home .header-full__hamburger:hover,
  :root:not(.dark) body.page-home .header-full__avatar:hover {
    background-color: rgb(255 255 255 / 0.15);
  }
  :root:not(.dark) body.page-home .header-full__icon-btn {
    color: rgb(255 255 255);
  }
  :root:not(.dark) body.page-home .header-full__icon-btn:hover {
    background-color: rgb(255 255 255 / 0.08);
  }
  :root:not(.dark) body.page-home .header-full__pill {
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.10);
  }
  :root:not(.dark) body.page-home .header-full__pill-item > a {
    color: rgb(255 255 255);
  }
  :root:not(.dark) body.page-home .header-full__pill-item > a:hover {
    background-color: rgb(255 255 255 / 0.08);
  }
  :root:not(.dark) body.page-home .header-full__pill-item.is-active > a {
    background-color: rgb(255 255 255 / 0.10);
    color: rgb(255 255 255);
  }
  /* When scrolled, header bg defaults to body color (light in light mode) →
     items white-on-light invisible. Keep dark band color (SOLID, no translucency)
     when scrolled so the header reads as a clean opaque bar on home. */
  :root:not(.dark) body.page-home .header-full.is-scrolled {
    background-color: rgb(8, 9, 14);
  }
  .dark body.page-home .header-full.is-scrolled {
    background-color: rgb(8, 9, 14);
  }
  /* Wins pill bg uses --color-body (light in light mode) → pill becomes light
     island on the dark band. Override inner bg to match dark band color so the
     pill blends with the band (Figma intent: pill same as dark mode on home). */
  :root:not(.dark) body.page-home .header-full__wins {
    background:
      linear-gradient(#0E111B, #0E111B) padding-box,
      linear-gradient(169deg, #22D3EE, rgb(var(--color-soft))) border-box;
  }
  :root:not(.dark) body.page-home .header-full__wins-label {
    color: rgb(255 255 255);
  }

}

/* Random carousel — Figma 6035:6 (outside @media for parser + mobile reliability)
   Embla horizontal scroll: cards need explicit width + flex-shrink:0 at ALL
   viewports (mobile too — without it Embla flex-shrinks cards to ~36px). */
.page-home [data-region="random"] .country-row__container { gap: 12px; }
.page-home [data-region="random"] .card-leak {
  width: 282px;
  flex-shrink: 0;
}
/* state badge top:-12px clipped by viewport overflow:hidden — Pitfall #17a */
.page-home [data-region="random"] .country-row__viewport { padding-top: 16px; }
.page-home [data-region="random"] .country-row__head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .page-home [data-region="random"] .country-row__container { gap: 24px; }
}

/* Products carousel — Figma 6036:6 (outside @media for parser reliability) */
.page-home [data-region="products"] .country-row__container { gap: 24px; }
.page-home [data-region="products"] .card-product {
  width: 282px !important;
  max-width: 282px !important;
  flex-shrink: 0 !important;
  flex-grow: 0;
}
.page-home [data-region="products"] .country-row__viewport { padding-top: 16px; }
.page-home [data-region="products"] .country-row__head { margin-bottom: 0; }

.page-home .home-main {
  position: relative;
  width: 100%;
  /* Use overflow-x: clip (not hidden) — `hidden` forces overflow-y to auto, which
     (a) creates a gross inner scrollbar between header and footer, and
     (b) clips home-decor-hero-bg's top:-96px so the header-area band shows
     body bg (#0E111B) instead of #08090E. clip avoids both side effects. */
  overflow-x: clip;
}

.page-home .home-container {
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  /* H-padding: 0 on mobile — page-shell already provides 16px gutter (Pitfall #16) */
  padding: 24px 0 80px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: stretch;
}

/* Section wrapper resets so card-grid margin-top:28px from component works correctly */
.page-home section[data-region] {
  display: block;
  width: 100%;
}

/* Card grid override: rows of 4 with 24px gap, vertical row gap 48 → 24 to match Figma home */
.page-home .card-grid {
  gap: 24px;
  margin-top: 24px;
}

/* ── Section heading sizing (home-D08) ──
   Figma section labels (FEATURED, STATES, COUNTRIES, RANDOM, CREATORS, PRODUCTS,
   REVIEWS) share one type token: style_QQKXYC = 18px / 600 / line-height 36 /
   letter-spacing ≈2px / UPPERCASE. The shared .country-row__heading renders at
   18px/700 (size OK, weight 100 too heavy) and the (now removed) section-row
   variant rendered FEATURED/RECENT at 14px. Normalise every home carousel heading
   to 18px/600 so all section labels match in size AND weight. */
.page-home .country-row__heading {
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 2px;
}

/* ── Decoration: hero-bg (full-width dark band, top:0..528 on desktop) + random-bg (always-dark island 1448..1888) ── */
/* Hero-bg: always-dark backdrop in BOTH modes per Figma */
.page-home .home-decor-hero-bg,
.page-home .home-decor-random-bg-outer,
.page-home .home-decor-random-bg-inner {
  display: none; /* mobile: skip decorations */
}

/* ── Featured (always-dark BOTH modes per Figma) + Random (dark mode only — Figma
   light has no Random dark band) section overrides. Featured rules apply always;
   Random rules are scoped to .dark only. */

/* Featured — always dark in both modes (Figma Rectangle 85 spans header+featured) */
.page-home [data-region="featured"] .card-leak__body {
  background: #1B1F31 !important;
}
.page-home [data-region="featured"] .card-leak__gradient {
  background: linear-gradient(to bottom, transparent 30%, #1B1F31 100%) !important;
}
.page-home [data-region="featured"] .card-leak__title,
.page-home [data-region="featured"] .card-leak__username {
  color: #FFFFFF !important;
}
/* The featured card __body is forced dark above so its white title reads, but the
   __creator-row footer (with the white username) was NOT — and the hero-bg dark
   band is display:none on mobile, so on phones the footer fell on the light page
   and the white username became invisible. Extend the always-dark treatment to the
   footer so each featured card is uniformly dark in both modes/viewports. */
.page-home [data-region="featured"] .card-leak__creator-row {
  background: transparent !important;
}
/* FEATURED is a single-row carousel (country-row markup) sitting on the always-dark
   hero band (Figma Rectangle 85, both modes). The full-bleed band is painted by the
   body gradient (0..528) on desktop in BOTH modes, so featured stays transparent there
   and the body band shows through edge-to-edge. Mobile has no body band, so give the
   featured section its own dark backdrop so the white-forced heading/pager read.
   home-D11: the prior wrapping 5-card grid was ~2 rows tall and spilled BELOW the 528px
   band, leaving the 2nd row of featured cards on the light page bg in light mode. The
   single-row carousel (D06) fits inside the 528px band, so featured no longer bleeds
   onto light bg — the dark band cleanly wraps header + the one featured row in both modes. */
.page-home [data-region="featured"] {
  background: #1B1F31;
}
@media (min-width: 1024px) {
  .page-home [data-region="featured"] {
    /* desktop: body gradient paints the full-bleed dark band (both modes) */
    background: transparent;
  }
}
/* FEATURED/RECENT use the shared country-row carousel; its default 32px top padding
   was tuned for mid-page rows. Tighten the top so FEATURED fits inside the hero band
   and RECENT keeps the original section spacing. */
.page-home [data-region="featured"] .country-row,
.page-home [data-region="recent"] .country-row {
  padding-top: 0;
}
/* FEATURED carousel cards — single row, fixed-width Embla slides (mirrors Random). */
.page-home [data-region="featured"] .country-row__container,
.page-home [data-region="recent"] .country-row__container {
  gap: 12px;
}
.page-home [data-region="featured"] .card-leak,
.page-home [data-region="recent"] .card-leak {
  width: 282px;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .page-home [data-region="featured"] .country-row__container,
  .page-home [data-region="recent"] .country-row__container {
    gap: 24px;
  }
}
/* state-badge top:-12px clipped by viewport overflow:hidden — Pitfall #17a */
.page-home [data-region="featured"] .country-row__viewport,
.page-home [data-region="recent"] .country-row__viewport {
  padding-top: 16px;
}
/* FEATURED heading + pager always read white (they sit on the dark band in BOTH modes). */
.page-home [data-region="featured"] .country-row__heading {
  color: #FFFFFF !important;
}
.page-home [data-region="featured"] .country-row__heading-chevron {
  background-color: #FFFFFF !important;
}
.page-home [data-region="featured"] .country-row__btn {
  color: rgba(255,255,255,0.85) !important;
}
.page-home [data-region="featured"] .country-row__btn:hover {
  color: #FFFFFF !important;
  background-color: rgba(255,255,255,0.08) !important;
}
.page-home [data-region="featured"] .country-row__btn:disabled {
  color: rgba(255,255,255,0.85) !important;
}
.page-home [data-region="featured"] .country-row__dot {
  background-color: rgba(255,255,255,0.30) !important;
}
.page-home [data-region="featured"] .country-row__dot--active {
  background-color: #22D3EE !important;
}

/* Random — dark band ONLY in dark mode. In light mode, Random section uses
   normal light-mode styling (no dark band, normal mode-aware text colors). */
.dark .page-home [data-region="random"] .card-leak__body {
  background: #1B1F31 !important;
}
.dark .page-home [data-region="random"] .card-leak__gradient {
  background: linear-gradient(to bottom, transparent 30%, #1B1F31 100%) !important;
}
.dark .page-home [data-region="random"] .card-leak__title,
.dark .page-home [data-region="random"] .card-leak__username {
  color: #FFFFFF !important;
}
.dark .page-home [data-region="random"] .section-row__heading,
.dark .page-home [data-region="random"] .country-row__heading {
  color: #FFFFFF !important;
}
.dark .page-home [data-region="random"] .section-row__link {
  color: #CBD5E1 !important;
}
.dark .page-home [data-region="random"] .section-row__arrow {
  background: rgba(255,255,255,0.08) !important;
}
.dark .page-home [data-region="random"] .section-row__arrow-icon,
.dark .page-home [data-region="random"] .section-row__heading-icon,
.dark .page-home [data-region="random"] .country-row__heading-chevron {
  background-color: #FFFFFF !important;
}

/* ── Home reviews section ── Figma 6029:2 (1440×490; container 1200×386 with mask).
   4-column masonry grid, cards 282w with varying heights (176/196/248).
   Vertical fade overflow at bottom + centered "Show more..." button. */

.page-home .home-reviews {
  position: relative;
  width: 100%;
}

/* Reviews heading — Figma 6029:2: "REVIEWS" 18px uppercase + small cyan chevron decoration */
.page-home .home-reviews__head {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
}
.page-home .home-reviews__heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600; /* home-D08: Figma style_QQKXYC = 18/600 (was 700) */
  line-height: 36px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(var(--color-lead));
}
.page-home .home-reviews__heading-chevron {
  display: inline-block;
  width: 20px;
  height: 20px;
  /* Hardcoded #22D3EE — Figma uses dark-mode cyan in BOTH modes as a fixed brand
     accent for the chevron (not the mode-aware --color-main which is #0891B2 in light). */
  background-color: #22D3EE;
  flex-shrink: 0;
}

/* VIP Access card variant — darker bg + title/status text instead of paragraph */
.page-home .home-review-card--vip {
  background: rgb(var(--color-mute));
}
.page-home .home-review-card__vip-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-home .home-review-card__vip-title {
  margin: 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: rgb(var(--color-lead));
}
.page-home .home-review-card__vip-status {
  margin: 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--color-lead));
}
/* VIP card uses lighter avatar tone (Figma: slate-400 silhouette) */
.page-home .home-review-card__avatar--light {
  background-color: rgb(var(--color-text));
}

/* Mask container — Figma 741:2238 Rectangle 92 1200×386 clips Group 47 (1200×736).
   Soft fade-to-transparent gradient mask at bottom hides the half-clipped row. */
.page-home .home-reviews__mask {
  position: relative;
  width: 100%;
  max-height: 386px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

/* 4-col masonry on desktop (Figma 1440); mobile-first 1→2→4 ladder */
.page-home .home-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 24px;
  width: 100%;
}
@media (min-width: 640px) {
  .page-home .home-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .page-home .home-reviews__grid { grid-template-columns: repeat(4, 1fr); }
}

.page-home .home-reviews__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Card — Figma soft fill, 24px internal padding, 8px gap between sections */
.page-home .home-review-card {
  background: rgb(var(--color-soft));
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;            /* Figma: 32px between text block and author block */
  box-sizing: border-box;
}

.page-home .home-review-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--color-warn));
  margin-bottom: 0;
}
.page-home .home-review-card__stars .icon-star-01-solid {
  width: 16px;
  height: 16px;
  background-color: rgb(var(--color-warn));
}

.page-home .home-review-card__text {
  margin: 0;
  font-family: 'Nationale', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-lead));
}

.page-home .home-review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Avatar: 48×48 silhouette icon (no circle bg — Figma shows solid #353D61 user shape on
   review card in BOTH modes). Hardcoded edge dark — using --color-mute was making the
   silhouette WHITE in light mode (invisible on light card bg). */
.page-home .home-review-card__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-color: #353D61;
  /* Show user silhouette at 32px inside the 48px square, centered */
  -webkit-mask-size: 32px 32px;
          mask-size: 32px 32px;
  -webkit-mask-position: center;
          mask-position: center;
}

.page-home .home-review-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-home .home-review-card__name {
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-lead));
}
.page-home .home-review-card__role {
  font-family: 'Nationale', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-subs));
}

/* "Show more..." centered below the grid */
.page-home .home-reviews__more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
/* Figma 390:2520 (Frame 173): button hugs content (width≈149, padding 12px 24px,
   radius 48) and is centered — NOT full-width. The shared .btn-show-more atom is
   width:100%, which stretches it edge-to-edge inside the centered flex wrapper.
   Override to auto width on the home reviews "Show more" pill. */
.page-home .home-reviews__more .btn-show-more {
  width: auto;
}

/* ── Tablet ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .page-home .home-container {
    /* H-padding: 0 on tablet — page-shell 16px gutter (≥1024 page-shell drops to 0) */
    padding: 32px 0 80px;
    gap: 56px;
  }
}

/* ── Desktop (≥1024) ───────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .page-home .home-container {
    padding: 40px 16px 96px;
    gap: 56px;
  }

  /* Section-specific gaps tuned per Figma 1440 ref (sections at y=136/576/816/1208/1496/1936/2108/2704/3216).
     Default container gap 56px; below adds the extra delta per section to converge to Figma y. */
  .page-home [data-region="states"] { margin-top: 44px; }
  .page-home [data-region="recent"] { margin-top: 0; }
  .page-home [data-region="countries"] { margin-top: 0; }
  .page-home [data-region="random"] { margin-top: 48px; }
  .page-home [data-region="creators"] { margin-top: 44px; }
  /* VIP gap: Figma 1936 creators title → 2060 chips end → 2108 VIP start = 48px gap.
     Default container gap 56px, so -8px effective gap = 48px. */
  .page-home [data-region="vip-banner"] { margin-top: -8px; }
  .page-home [data-region="products"] { margin-top: -10px; }
  .page-home [data-region="reviews"] { margin-top: -9px; }

  /* Decoration: hero-bg + random-bg moved to body-level gradient (see body rule below).
     The previous in-shell absolute boxes only spanned 1442px (page-shell max-width),
     leaving the body-bg (#0E111B) visible at 1920+ viewports outside the shell. The
     gradient on body is 100vw full-bleed. */
  .page-home .home-decor-hero-bg,
  .page-home .home-decor-random-bg-outer,
  .page-home .home-decor-random-bg-inner {
    display: none;
  }

  /* ── Home page glows (SVG asset, native size per Pitfall 11) ──
     Figma:
       Group 54 (header glow): x=120 y=-56 w=1200 h=192 (visible) → SVG export 1456×448 (includes blur padding 128px each side, 128px each top/bottom).
         Center-aligned: SVG center at viewport y=(-56+192/2)=40 → top = 40 - 448/2 = -184. Left = (1440-1456)/2 = -8.
       Group 53 (footer glow): x=113 y=4213 w=1200 h=192 (visible) → SVG export 1456×448.
         Center-aligned: SVG center at viewport y=(4213+192/2)=4309 → top = 4309 - 448/2 = 4085. Left = -8.
     home-main starts at viewport y=96, so absolute top inside main = viewport_y - 96. */

  .page-home .home-main::before {
    content: '';
    position: absolute;
    top: -280px;            /* viewport y -184 → main offset = -184 - 96 = -280 */
    /* Centered over the 1200 content column (which is itself screen-centered),
       so the glow tracks the content at any viewport width ≥1024 instead of
       pinning to the left edge once the shell goes full-bleed. */
    left: 50%;
    transform: translateX(-50%);
    width: 1456px;
    height: 448px;
    background-image: url('../img/home/glow-header.svg');
    background-repeat: no-repeat;
    background-size: 1456px 448px;
    background-position: 0 0;
    z-index: 1;
    pointer-events: none;
  }

  /* NOTE: footer glow removed — the footer-full component owns the bottom glow
     (Figma Group 53) via .footer-full__glow. Duplicating it here at a fixed
     viewport-y caused an empty/floating glow between reviews and footer columns
     once the reviews section grew to its full height. */
}