/* states/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-show-more/btn-show-more.css');

/* ─── Molecules ────────────────────────────────────────────────────── */
@import url('../../_components/molecules/card-state/card-state.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/state-grid/state-grid.css');

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

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

/* Container — Figma grid x=120 width=1210, so max 1248 with 16px gutter */
.page-states .states-container {
  max-width: 1248px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  position: relative;
  z-index: 1;
}

/* H1 "States" — Figma y=136, font 36/48 weight 600, letter-spacing -0.72 */
.page-states .states-h1 {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.56px;
  color: rgb(var(--color-lead));
  margin: 0 0 24px 0;
}

/* Show-more wrapper — centered below grid */
.page-states .show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  width: 100%;
}

/* Grid starts at Figma x=120; container content x=112 → 8px left padding for grid wrapper.
   Grid w=1208 → show-more frame Figma w=1208 → must match grid w. */
@media (min-width: 1024px) {
  .page-states .state-grid,
  .page-states .show-more-wrap {
    margin-left: 8px;
    max-width: 1208px;
  }
}

@media (min-width: 1024px) {
  .page-states .states-container {
    padding-top: 40px;
    padding-bottom: 120px;
  }
  .page-states .states-h1 {
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -0.72px;
    /* Figma h1 at x=120; container content starts at x=112 → 8px indent.
       Figma h1 ends at y=184, grid at y=208 → 24px gap. */
    margin: 0 0 24px 8px;
  }
  .page-states .show-more-wrap .btn-show-more {
    width: auto;
    min-width: 149px;
  }
}