/* =========================================================
   LAYOUT
   ========================================================= */

/* ── Container ───────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: calc(var(--content-width) + var(--container-pad) * 2);
}

/* ── Section spacing ─────────────────────────────────────── */

.section {
  padding-block: var(--space-2xl);
}

.section--lg {
  padding-block: var(--space-3xl);
}

/* ── Grid ────────────────────────────────────────────────── */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .grid-12 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-12 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Page layout wrapper ─────────────────────────────────── */

.page {
  min-height: 100vh;
  padding-top: var(--nav-height);
}

/* ── Divider ─────────────────────────────────────────────── */

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

.divider.is-revealed {
  transform: scaleX(1);
}

/* ── Responsive helpers ──────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --radius-panel: var(--radius-panel-mob);
  }
}