/* creator/index.css — Creator profile page composition. Mobile-first.
   Figma frame: 763:263 (1440 × 2925 desktop).
   Sections:
     - creator-hero (avatar+name+stats) y=136..400
     - Featured (heading y=496) — leak grid 4-col
     - Most Viewed (heading y=936) — leak grid 4-col
     - Recent Girls (heading y=1328) — leak grid 4-col
     - Products (heading y=1768) — 1 product card centered + arrows below
*/

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

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

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

.page-creator .creator-main {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Container — 1200w content within 1232 (16px gutter each side) */
.page-creator .creator-container {
  max-width: 1232px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 16px 64px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Hide spacer (legacy) — use margin-top on first creator-section instead */
.page-creator .creator-spacer { display: none; }

/* Section block wrapper */
.page-creator .creator-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* page-glow per-page asset override */
.page-creator .page-glow--top {
  background-image: url('../../_shared/assets/creator/creator-glow-top.svg');
}
.page-creator .page-glow--bottom {
  background-image: url('../../_shared/assets/creator/creator-glow-bottom.svg');
}

/* ─── Tablet (≥768) ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .page-creator .creator-container {
    padding-top: 40px;
    padding-bottom: 96px;
    gap: 80px;
  }
}

/* ─── Desktop (≥1024) ───────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .page-creator .creator-container {
    /* Hero avatar at y=136 inside frame = container_top + 96px (padding) = 40px container padding-top
       Actually: page-shell + header(96) = 96, container y=96, padding-top=40 → avatar starts at 96+40=136 ✓ */
    padding-top: 40px;
    padding-bottom: 120px;
    /* Figma hero ends y=400. Next section Featured y=496. Gap = 96px. */
    gap: 96px;
  }
}