/* home/index.css — Wave 8b composition. Mobile-first. */

/* ─── Atoms ────────────────────────────────────────────────────────── */
@import url('../../_components/atoms/page-shell/page-shell.css');
@import url('../../_components/atoms/btn-tag/btn-tag.css');
@import url('../../_components/atoms/btn-show-more/btn-show-more.css');
@import url('../../_components/atoms/section-row/section-row.css');

/* ─── Molecules ────────────────────────────────────────────────────── */
@import url('../../_components/molecules/card-leak/card-leak.css');
@import url('../../_components/molecules/card-product/card-product.css');
@import url('../../_components/molecules/card-mini/card-mini.css');
@import url('../../_components/molecules/creator-chip/creator-chip.css');

/* ─── Sections ─────────────────────────────────────────────────────── */
@import url('../../_components/sections/header-full/header-full.css');
@import url('../../_components/sections/footer-full/footer-full.css');
@import url('../../_components/sections/mobile-menu/mobile-menu.css');
@import url('../../_components/sections/age-gate-modal/age-gate-modal.css');
@import url('../../_components/sections/page-glow/page-glow.css');
@import url('../../_components/sections/card-grid/card-grid.css');
@import url('../../_components/sections/mini-grid/mini-grid.css');
@import url('../../_components/sections/creator-chip-row/creator-chip-row.css');
@import url('../../_components/sections/reviews-grid/reviews-grid.css');
@import url('../../_components/sections/vip-banner/vip-banner.css');

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

/* Full-bleed dark bands — Figma Rectangle 85 (y=0..528) + Rectangle 86 (y=1448..1888).
   Painted on body so they span 100vw regardless of page-shell's 1442 max-width.
   Sharp transitions per Figma (no fades). Desktop only (1024+). */
@media (min-width: 1024px) {
  body.page-home {
    background-color: rgb(var(--color-body));
    background-image: linear-gradient(
      to bottom,
      #08090E 0px,
      #08090E 528px,
      transparent 528px,
      transparent 1448px,
      #08090E 1448px,
      #08090E 1888px,
      transparent 1888px
    );
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0 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;
  padding: 24px 16px 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;
}

/* ── 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 + Random sections always-dark force overrides (per Figma + Wave 8a handoff) ──
   Figma: card panel (Rect 70) is dark + rounded, creator-row sits BELOW panel on body bg
   with 12px gap. Body has dark band gradient covering these sections, so creator-row text
   is readable. Don't put bg+radius on outer .card-leak (was hiding creator-row visually
   inside the rounded card making it look cropped at the bottom edge). */
.page-home [data-region="featured"] .card-leak__body,
.page-home [data-region="random"] .card-leak__body {
  background: #1B1F31 !important;
}
.page-home [data-region="featured"] .card-leak__gradient,
.page-home [data-region="random"] .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="random"] .card-leak__title {
  color: #FFFFFF !important;
}
.page-home [data-region="featured"] .card-leak__username,
.page-home [data-region="random"] .card-leak__username {
  color: #FFFFFF !important;
}
.page-home [data-region="featured"] .section-row__heading,
.page-home [data-region="random"] .section-row__heading {
  color: #FFFFFF !important;
}
.page-home [data-region="featured"] .section-row__link,
.page-home [data-region="random"] .section-row__link {
  color: #CBD5E1 !important;
}
.page-home [data-region="featured"] .section-row__arrow,
.page-home [data-region="random"] .section-row__arrow {
  background: rgba(255,255,255,0.08) !important;
}
.page-home [data-region="featured"] .section-row__arrow-icon,
.page-home [data-region="random"] .section-row__arrow-icon,
.page-home [data-region="featured"] .section-row__heading-icon,
.page-home [data-region="random"] .section-row__heading-icon {
  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%;
}

/* 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-column masonry grid — Figma columns at x=113, 419, 725, 1031 (gap 24px after 282w cards) */
.page-home .home-reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 24px;
  width: 100%;
}

.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 dark card).
   The icon-user-03 class sets --ic, and the [class*="icon-"] base rule renders it as mask. */
.page-home .home-review-card__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-color: rgb(var(--color-mute));
  /* 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;
}

/* ── Tablet ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .page-home .home-container {
    padding: 32px 24px 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 */
    left: -8px;
    width: 1456px;
    height: 448px;
    background-image: url('../../_shared/assets/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. */
}