/* about/index.css — About page composition. Mobile-first.
   Layout: hero-cms --left + latest-wins (2 card-leak grid) + best-creators (2 card-creator) + vip-banner.
   Hero pt 88, latest-wins pt 104, best-creators pt 96, vip-banner pt 48 (Figma absolute spacing).
   page-glow bottom at Figma 3125 (within 3223 frame). */

/* ─── Atoms ────────────────────────────────────────────────────────── */
@import url('../../_components/atoms/btn-tag/btn-tag.css');
@import url('../../_components/atoms/pill-count/pill-count.css');
@import url('../../_components/atoms/btn-show-more/btn-show-more.css');

/* ─── Molecules ────────────────────────────────────────────────────── */
@import url('../../_components/molecules/hero-cms/hero-cms.css');
@import url('../../_components/molecules/card-leak/card-leak.css');
@import url('../../_components/molecules/card-creator/card-creator.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/vip-banner/vip-banner.css');

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

.page-about [data-wins-counter] { display: none !important; }

.page-about .about-main {
  position: relative;
  overflow: hidden;
}

.page-about .about-container {
  position: relative;
  z-index: 1;
  padding: 88px 16px 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* Section heading H2 — Latest Wins / Our Best Creators (24/32 weight-600 lead)
   GOTCHA #1: about's section-h2 are SUB-section headings, NOT hero-cms h1.
   Wave 7c fix: sections are 588w centered (Figma: hero+all sections share same 588w column at viewport center). */
.page-about .about-section {
  margin-top: 56px;
  width: 100%;
  max-width: 588px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.page-about .about-section--latest {
  margin-top: 56px;
}
.page-about .about-section--creators {
  margin-top: 56px;
}
.page-about .about-section--vip {
  margin-top: 48px;
  padding-bottom: 96px;
}
.page-about .about-section__eyebrow {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(var(--color-main));
  margin: 0 0 8px 0;
}
.page-about .about-section__h2 {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: rgb(var(--color-lead));
  margin: 0 0 8px 0;
}
.page-about .about-section__desc {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-subs));
  margin: 0 0 24px 0;
  max-width: 588px;
}

/* About cards row — Mobile 1col, ≥768 2col */
.page-about .about-cards-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 588px;
  margin: 0;
}

/* Show-more — full width below grid (atom already styled by btn-show-more.css) */
.page-about .btn-show-more {
  margin-top: 16px;
  width: 100%;
  max-width: 588px;
}

/* Creators row — Mobile 1col, ≥768 2col */
.page-about .about-creators-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 588px;
  margin: 0;
}

/* vip-banner sits in container — full bleed within 588w left-aligned column on this page */
.page-about .about-vip-wrap {
  max-width: 588px;
}

/* ─── Tablet (≥768) ───────────────────────────────────────────────── */
@media (min-width: 768px) {
  .page-about .about-cards-row {
    grid-template-columns: 1fr 1fr;
  }
  .page-about .about-creators-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Desktop (≥1024) ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .page-about .about-container {
    padding-top: 88px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .page-about .about-section { margin-top: 104px; }
  .page-about .about-section--creators { margin-top: 96px; }
  .page-about .about-section--vip {
    /* Figma: creators show-more bottom y=1496 → vip frame top y=1592, gap 96px */
    margin-top: 96px;
    padding-bottom: 192px;
  }
  .page-about .about-section__h2 {
    font-size: 24px;
    line-height: 32px;
  }
  .page-about .about-cards-row,
  .page-about .about-creators-row,
  .page-about .about-vip-wrap,
  .page-about .about-show-more {
    max-width: 588px;
  }
}