/* ==========================================================================
   Layout — page skeleton, containers, sections, grids and flex primitives.
   Mobile-first: base rules target phones; responsive.css adds columns.
   No page-specific layouts here (those go in pages.css).
   ========================================================================== */

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

.site-main {
  flex: 1 0 auto;
}

.site-main:focus {
  outline: none; /* focused programmatically by the skip link */
}

/* ---------- Containers ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

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

/* Edge-to-edge content that still keeps side padding */
.container--fluid {
  max-width: none;
}

/* ---------- Sections -------------------------------------------------------
   A section is always full-width (backgrounds span the viewport);
   put a .container inside to constrain content.                            */

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

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

.section--flush {
  padding-block: 0;
}

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

/* Hairline rule between two consecutive white sections */
.section--rule {
  border-block-start: var(--border-width) solid var(--color-border);
}

.section--dark {
  background-color: var(--color-background-dark);
  color: var(--color-text-inverse-muted);
}

.section--dark :is(h1, h2, h3, h4, h5, h6, .text-display, strong) {
  color: var(--color-text-inverse);
}

.section--dark .eyebrow {
  color: var(--color-text-inverse-muted);
}

/* ---------- Stack: vertical rhythm between children ----------------------- */

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

.stack--sm { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-6); }
.stack--xl { --stack-gap: var(--space-7); }

/* ---------- Flex ---------------------------------------------------------- */

.flex {
  display: flex;
  gap: var(--flex-gap, var(--space-4));
}

.flex--wrap { flex-wrap: wrap; }
.flex--center { align-items: center; }
.flex--between { justify-content: space-between; }
.flex--end { justify-content: flex-end; }

/* Horizontal group that wraps — buttons, tags, links */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-4));
}

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

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-6));
  grid-template-columns: minmax(0, 1fr); /* single column on mobile */
}

/* Auto-fitting grid: as many columns as fit, each at least --grid-min */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

/* Fixed column counts. Mobile: 1 column (2 for the compact 6-up icon row);
   tablet and desktop counts are set in responsive.css.
     class     mobile  tablet  desktop
     .grid--2    1       2       2
     .grid--3    1       2       3
     .grid--4    1       2       4
     .grid--5    1       2       3 (5 from 1440)
     .grid--6    2       3       6      */
.grid--6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Split: two-column text + media -------------------------------- */

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

/* ---------- Text helpers ------------------------------------------------- */

/* A phrase that always starts its own line. Unlike <br>, each phrase wraps (and balances)
   on its own, so a two-statement heading never joins the statements mid-line on phones. */
.text-line {
  display: block;
}

/* ---------- Accessibility helpers ---------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-button);
  transform: translateY(-200%);
  transition: transform var(--transition-duration-fast) var(--transition-easing);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-on-primary);
}

/* Prevent background scroll while the mobile menu is open */
.is-scroll-locked {
  overflow: hidden;
}