/* leaks/index.css — page composition CSS. Mobile-first. */

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

/* ─── Molecules ────────────────────────────────────────────────────── */
@import url('../../_components/molecules/card-leak/card-leak.css');
@import url('../../_components/molecules/filter-chip-row/filter-chip-row.css');
@import url('../../_components/molecules/pagination-controls/pagination-controls.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');

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

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

/* Container — Figma container w≈1200, plus 16px gutter */
.page-leaks .leaks-container {
  max-width: 1232px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  position: relative;
  z-index: 1;
}

/* Hero CTA "Browse 2555 Wins" — Figma 575:43 (centered pill, page-level inline) */
.page-leaks .leaks-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.page-leaks .cta-browse-wins {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 32px 8px 24px;
  border-radius: 48px;
  border: 0;
  background: transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgb(var(--color-lead));
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  text-decoration: none;
  transition: background 0.15s;
}
.page-leaks .cta-browse-wins:hover { background: rgb(var(--color-lead) / 0.04); }
.page-leaks .cta-browse-wins__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--color-main));
  box-shadow: 0 0 0 4px rgb(34 211 238 / 0.1);
  flex-shrink: 0;
}
.page-leaks .cta-browse-wins__count {
  font-weight: 700;
  color: rgb(var(--color-main));
}

/* H1 "Leaks" — Figma 575:147 y=292 (BELOW filter chips), 26/36 weight 600 -0.52
   Chip row ends 248 → h1 at 292 = 44px gap. */
.page-leaks .leaks-h1 {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.44px;
  color: rgb(var(--color-lead));
  margin: 44px 0 0;
}

/* Filter chip row sits between hero CTA and h1 */
.page-leaks .filter-chip-row {
  margin-top: 8px;
}

/* Card grid row gap — Figma row gap 60px (card1 ends y=636, card5 starts y=696). */
.page-leaks .card-grid {
  gap: 60px 24px;
}

/* Pagination wrapper spacing — Figma: bottom card ends at 1656 (1376+280), pagination at 1704 → 48px gap.
   Summary at 1756 = pagination_end(1740) + 16. */
.page-leaks .leaks-pagination-wrap {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.page-leaks .leaks-pagination-wrap .pagination {
  margin-top: 0;
}
.page-leaks .leaks-pagination-wrap .pagination-summary {
  margin: 0;
}

@media (min-width: 768px) {
  .page-leaks .cta-browse-wins {
    font-size: 24px;
    line-height: 32px;
  }
}

@media (min-width: 1024px) {
  .page-leaks .leaks-container {
    padding-top: 40px;
    padding-bottom: 120px;
  }
  .page-leaks .leaks-h1 {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.52px;
  }
}