/* ==========================================================================
   layout.css — containers, grids, sections, page scaffolding (desktop-first)
   ========================================================================== */

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

.container--narrow {
  max-width: 920px;
}

.container--wide {
  max-width: 1440px;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1 0 auto;
  display: block;
}

/* Sections --------------------------------------------------------------- */

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

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

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

.section--alt {
  background: var(--color-surface-alt);
}

.section--surface {
  background: var(--color-surface);
}

.section--ink {
  background: var(--color-accent-dark);
  color: var(--color-ink-invert);
}

.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: var(--color-ink-invert);
}

.section--ink .lead,
.section--ink .text-secondary {
  color: rgba(245, 245, 240, 0.72);
}

.section--ink a {
  color: var(--color-highlight);
}

.section--divider {
  border-top: 1px solid var(--color-border);
}

.section__header {
  max-width: 860px;
  margin-bottom: var(--space-2xl);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.section__header .eyebrow {
  display: block;
  margin-bottom: var(--space-s);
}

.section__header h2 {
  margin-bottom: var(--space-m);
}

.section__header p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-secondary);
  max-width: 68ch;
}

.section__header--center p {
  margin-inline: auto;
}

.section__footer {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

/* Grids ------------------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--space-m);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--gap-l {
  gap: var(--space-l);
}

.grid--asym {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-3xl);
  align-items: center;
}

.grid--sidebar {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-3xl);
  align-items: start;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.stack--m {
  gap: var(--space-m);
}

.stack--l {
  gap: var(--space-l);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

/* Hero ------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--space-4xl) var(--space-3xl);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 82% 12%, rgba(217, 242, 200, 0.55), transparent 65%),
    radial-gradient(45% 60% at 8% 92%, rgba(36, 91, 70, 0.07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: var(--space-3xl);
  align-items: center;
}

.hero--stacked .hero__grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1000px;
}

.hero__eyebrow {
  margin-bottom: var(--space-m);
}

.hero h1 {
  margin-bottom: var(--space-m);
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-secondary);
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__meta-value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: var(--ls-heading);
}

.hero__meta-label {
  font-size: var(--fs-micro);
  color: var(--color-secondary);
}

/* Split blocks ----------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}

.split--reverse .split__media {
  order: -1;
}

.split__body h2 {
  margin-bottom: var(--space-m);
}

.split__body > p + p,
.split__body > ul,
.split__body > ol {
  margin-top: var(--space-s);
}

/* Breadcrumbs ------------------------------------------------------------ */

.breadcrumbs {
  padding-block: var(--space-m) 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-micro);
  color: var(--color-secondary);
  list-style: none;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--color-border);
}

.breadcrumbs a {
  color: var(--color-secondary);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-accent);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: 550;
}