/* layout.css — containers, sections, grids, page hero, breadcrumbs */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--c-surface-2); border-block: 1px solid var(--c-border); }
.section--ink { background: var(--c-ink); color: #cbd5e8; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink .section-title { color: #fff; }
.section--ink .section-lead, .section--ink p { color: #aebad2; }
.section--tight { padding-block: calc(var(--section-y) * .6); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.section-head--split > div { max-width: 40rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 var(--space-3);
  font: 600 var(--fs-sm)/1.2 var(--font-sans); letter-spacing: .01em; color: var(--c-accent-text);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--c-accent); flex-shrink: 0; }
.section-head--center .eyebrow::after { content: ""; width: 1.75rem; height: 1px; background: var(--c-accent); }
.section--ink .eyebrow { color: var(--c-accent); }
.section-title { font-size: var(--fs-2xl); margin: 0; }
.section-lead { font-size: var(--fs-lg); color: var(--c-text-muted); margin: var(--space-3) 0 0; max-width: 40rem; line-height: 1.55; }
.section-head--center .section-lead { margin-inline: auto; }

/* Grids — auto-responsive, never overflow */
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
@media (min-width: 900px) {
  .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)); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grid > * { min-width: 0; }
.grid--tight { gap: var(--space-4); }
.grid--loose { gap: var(--space-6); }

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .split--center { align-items: center; }
  .split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + var(--announce-h) + 24px); }
}
.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.stack--sm { --stack: var(--space-2); }
.stack--lg { --stack: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-3)); }
.cluster--lg { --cluster: var(--space-4); }
.cluster--between { justify-content: space-between; }

/* Page hero — compact editorial title block for inner pages */
.page-hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(2rem, 1.2rem + 3vw, 4rem); border-bottom: 1px solid var(--c-border); background:
  linear-gradient(var(--c-bg), var(--c-bg)); overflow: hidden; }
.page-hero::before { /* faint blueprint grid, fades out */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .35;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%); mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
}
.page-hero__inner { position: relative; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.page-hero__title { font-size: var(--fs-3xl); margin: 0; max-width: 100%; line-height: 1.2; text-wrap: initial; }
.page-hero__lead { font-size: var(--fs-lg); color: var(--c-text-muted); max-width: 42rem; margin: var(--space-4) 0 0; line-height: 1.55; }
.page-hero .breadcrumbs { margin-bottom: var(--space-5); }
.page-hero__actions { margin-top: var(--space-5); }
.page-hero--center .page-hero__inner { text-align: center; }
.page-hero--center .page-hero__title, .page-hero--center .page-hero__lead { margin-inline: auto; }

.breadcrumbs { font-size: var(--fs-sm); color: var(--c-text-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.breadcrumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: .55; }
.breadcrumbs a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-primary-600); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--c-text); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main-narrow { max-width: var(--container-narrow); margin-inline: auto; }