/* page/index.css — Generic CMS page composition. Mobile-first.
   Layout: hero-cms --left (588w left-aligned) + cms-prose article (h2 / p / ol cascade).
   Hero pt 88. cms-content pb 192. page-glow bottom at top=2007 (Figma frame 2105). */

/* ─── Atoms ────────────────────────────────────────────────────────── */

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

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

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

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

.page-page .cms-container {
  position: relative;
  z-index: 1;
  padding: 88px 16px 0;
}

.page-page .hero-cms {
  margin: 0 auto;
}

.page-page .cms-content {
  max-width: 588px;
  margin: 64px auto 0;
  padding: 0 16px 96px;
}
.page-page .cms-content h2 {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: rgb(var(--color-lead));
  margin: 0;
}

.page-page .cms-content p {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-text));
  white-space: pre-line;
  margin: 0;
}

/* Sibling spacing rules — placed AFTER element base rules so margin-top wins */
.page-page .cms-content > * + * { margin-top: 24px; }
.page-page .cms-content > h2 + * { margin-top: 16px; }
.page-page .cms-content > * + h2 { margin-top: 48px; }

.page-page .cms-content ol {
  margin-top: 8px;
  padding-left: 24px;
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-page .cms-content li {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--color-text));
}

/* page-glow bottom override: Figma 2007 within 2105 frame = bottom 98px.
   Page-glow component default is bottom:-100; we want it pulled into bottom of content area. */
.page-page .page-glow--bottom {
  bottom: 0;
}

/* ─── Desktop (≥1024) ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .page-page .cms-container {
    padding-top: 88px;
    padding-left: 0;
    padding-right: 0;
  }
  .page-page .hero-cms {
    /* Hero left-aligned in column 588w centered in viewport */
    margin-left: auto;
    margin-right: auto;
  }
  .page-page .cms-content {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 192px;
    margin-top: 64px;
  }
  .page-page .cms-content h2 {
    font-size: 24px;
    line-height: 32px;
  }
}