/* ============================================================================
   layout.css — page scaffolding & responsive structure (mobile-first)
   ========================================================================== */

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

/* --- Sections --- */
.section { padding-block: clamp(var(--space-12), 8vw, var(--space-24)); }
.section--tight { padding-block: clamp(var(--space-8), 5vw, var(--space-12)); }
.section--muted { background: var(--color-bg-subtle); }

.section__head { margin-bottom: var(--space-10); max-width: 60ch; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: var(--fs-2xl); }

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-h);
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-block: var(--space-16) var(--space-8);
  margin-top: var(--space-24);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
.site-footer__brand { max-width: 30ch; }
.site-footer__tagline { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-2); }
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__col a { color: var(--color-text-muted); font-size: var(--fs-sm); }
.site-footer__col a:hover { color: var(--color-text); }
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--fs-xs);
}

/* --- Hero --- */
.hero {
  position: relative;
  padding-block: clamp(var(--space-16), 10vw, var(--space-32)) clamp(var(--space-12), 7vw, var(--space-24));
  overflow: hidden;
}
/* Signature: a single soft blue "aurora" bloom behind the hero — the one bold
   move, kept quiet, so the brand colour appears without shouting. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 20% auto -10%;
  height: 520px;
  background: radial-gradient(60% 60% at 30% 30%, var(--color-primary-soft), transparent 70%);
  filter: blur(10px);
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}
.hero__inner { max-width: 46rem; }
.hero__title { font-size: var(--fs-3xl); margin-bottom: var(--space-5); }
.hero__lead { max-width: 40rem; margin-bottom: var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.hero__stat-num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-x); letter-spacing: var(--tracking-tight); }
.hero__stat-label { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* --- Page hero (inner pages) --- */
.page-hero { padding-block: clamp(var(--space-12), 8vw, var(--space-20)) var(--space-8); }
.page-hero__title { font-size: var(--fs-2xl); margin-bottom: var(--space-4); }

/* --- Feature grid --- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* --- Contact grid --- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }

/* --- CTA band --- */
.cta-band {
  margin-top: var(--space-24);
  background: var(--color-invert-bg);
  color: var(--color-invert-text);
}
.cta-band__inner { text-align: center; padding-block: clamp(var(--space-16), 9vw, var(--space-24)); max-width: 48rem; margin-inline: auto; }
.cta-band__title { color: var(--color-invert-text); font-size: var(--fs-2xl); margin-bottom: var(--space-4); }
.cta-band__lead { color: color-mix(in srgb, var(--color-invert-text) 78%, transparent); margin-bottom: var(--space-8); }

/* --- Error page --- */
.page-error__inner { text-align: center; padding-block: clamp(var(--space-20), 14vw, var(--space-32)); }
.page-error__code { font-family: var(--font-display); font-size: clamp(4rem, 18vw, 9rem); font-weight: var(--fw-x); color: var(--color-primary-soft); line-height: 1; }
.page-error__title { margin-block: var(--space-4) var(--space-3); }
.page-error__lead { margin-inline: auto; margin-bottom: var(--space-8); }

/* --- Article --- */
.page-article article { padding-block: clamp(var(--space-12), 8vw, var(--space-20)); }
.article__meta { color: var(--color-text-muted); margin-block: var(--space-4) var(--space-8); font-size: var(--fs-md); }
.article__body p + p { margin-top: var(--space-4); }

/* ======================= Responsive breakpoints ======================= */

/* Tablet ≥ 768px */
@media (min-width: 768px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .contact-grid { grid-template-columns: 1.3fr 0.7fr; gap: var(--space-16); }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
}