/* ==========================================================================
   Layout: containers, sections, grids, stacks
   ========================================================================== */

/* ---- Containers -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--wide { max-width: calc(85rem + 2 * var(--gutter)); }

/* ---- Sections ---------------------------------------------------------- */
.section {
  padding-block: var(--section-space);
}
.section--sm { padding-block: var(--section-space-sm); }
.section--tint { background: var(--color-bg-tint); }
.section--soft { background: var(--color-secondary-soft); }
.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-on-dark-muted);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--n-0); }
.section--dark .eyebrow { color: var(--blue-300); }
.section--dark .lead { color: var(--color-on-dark-muted); }
.section--dark a:not(.btn) { color: var(--n-0); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section header: eyebrow + heading + lead */
.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head > * + * { margin-top: var(--space-3); }
.section-head .lead { margin-top: var(--space-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.section-head--row > div { max-width: 44rem; }
.section-head--row > div > * + * { margin-top: var(--space-3); }

/* ---- Grid -------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-6));
  grid-template-columns: repeat(var(--cols-sm, 1), minmax(0, 1fr));
}
@media (min-width: 480px)  { .grid { grid-template-columns: repeat(var(--cols-sm, 1), minmax(0, 1fr)); } }
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(var(--cols-md, var(--cols-sm, 2)), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(var(--cols-lg, var(--cols-md, 3)), minmax(0, 1fr)); } }

/* Convenience presets */
.grid--2 { --cols-sm: 1; --cols-md: 2; --cols-lg: 2; }
.grid--3 { --cols-sm: 1; --cols-md: 2; --cols-lg: 3; }
.grid--4 { --cols-sm: 2; --cols-md: 2; --cols-lg: 4; }
.grid--6 { --cols-sm: 2; --cols-md: 3; --cols-lg: 6; }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(var(--min, 16rem), 1fr)); }
.grid--auto-sm { --min: 14rem; }
.grid--auto-md { --min: 17rem; }
.grid--auto-lg { --min: 20rem; }

/* Two-column media/text split that stacks on mobile */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right > .split__media { order: 2; }
  .split--narrow-media { grid-template-columns: 5fr 7fr; }
  .split--narrow-media.split--media-right { grid-template-columns: 7fr 5fr; }
}

/* ---- Stacks & clusters ------------------------------------------------- */
.stack > * + * { margin-top: var(--stack-space, var(--space-4)); }
.stack--sm { --stack-space: var(--space-2); }
.stack--lg { --stack-space: var(--space-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
  align-items: center;
}
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }

/* ---- Media boxes ------------------------------------------------------- */
.media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--n-100);
}
.media img { width: 100%; height: 100%; object-fit: cover; }   /* not `> img`: an AVIF <picture> sits between */
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--square { aspect-ratio: 1; }
.media--portrait { aspect-ratio: 4 / 5; }

/* Overlapping media pair (About / Home teaser) */
.media-stack {
  position: relative;
  padding-bottom: 18%;
  padding-right: 18%;
}
.media-stack__main { position: relative; z-index: 1; }
.media-stack__inset {
  position: absolute;
  right: 0; bottom: 0;
  width: 42%;
  z-index: 2;
  border: 6px solid var(--n-0);
  box-shadow: var(--shadow-lg);
}
.media-stack__badge {
  position: absolute;
  left: -0.5rem; bottom: 12%;
  z-index: 3;
  max-width: 14rem;
  padding: var(--space-5);
  background: var(--color-primary);
  color: var(--n-0);
  border-radius: var(--radius-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  box-shadow: var(--shadow-md);
}

/* ---- Helpers ----------------------------------------------------------- */
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.split--start { align-items: start; }
.grid--gap-sm { --grid-gap: var(--space-4); }
.grid--gap-md { --grid-gap: var(--space-7, 1.75rem); }
.grid--sm-2 { --cols-sm: 2; }
.grid--sm-1 { --cols-sm: 1; }
.hide-mobile { display: none; }
@media (min-width: 768px) {
  .hide-mobile { display: initial; }
  .hide-desktop { display: none; }
}