/* ============================================================================
   STRATYLIX — LAYOUT
   Containers, sections, grids, stacks. A small set of named primitives, not a
   utility framework. If a rule is used once, it belongs in home.css instead.
   ========================================================================== */

/* ---- containers ---------------------------------------------------------- */
.sx-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sx-container--narrow { max-width: var(--container-narrow); }
.sx-container--wide   { max-width: var(--container-wide); }

/* ---- sections ------------------------------------------------------------ */
.sx-section { padding-block: var(--section-pad); }
/* The clamp floors at 3.5rem, so every viewport below ~800px paid the full
   56px top and bottom. Across fourteen homepage sections that is over 1,500px
   of padding on a phone, where vertical space is the scarcest thing there is.
   Below 640px the floor drops; the fluid middle and the desktop cap are
   unchanged, so nothing above that width moves. */
:root { --section-pad: clamp(3.5rem, 7vw, 6.5rem); }
@media (max-width: 640px) { :root { --section-pad: 2.5rem; } }

.sx-section--tight { --section-pad: clamp(2.5rem, 5vw, 4rem); }
.sx-section--flush-top { padding-block-start: 0; }

/* Alternating surface, used sparingly — the old site alternated constantly. */
.sx-section--alt { background: var(--surface); border-block: 1px solid var(--hairline); }

/* ---- stack: vertical rhythm --------------------------------------------- */
/* One owl selector instead of margin declarations scattered per component. */
.sx-stack > * + * { margin-block-start: var(--stack-gap, var(--sp-4)); }
.sx-stack--sm { --stack-gap: var(--sp-3); }
.sx-stack--lg { --stack-gap: var(--sp-6); }
.sx-stack--xl { --stack-gap: var(--sp-7); }

/* ---- cluster: horizontal group that wraps ------------------------------- */
.sx-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--sp-3));
}
.sx-cluster--sm  { --cluster-gap: var(--sp-2); }
.sx-cluster--lg  { --cluster-gap: var(--sp-5); }
.sx-cluster--between { justify-content: space-between; }
.sx-cluster--center  { justify-content: center; }

/* ---- grid ---------------------------------------------------------------- */
/* Auto-fit grid: one class, column count driven by a min-width token, so the
   layout reflows without per-breakpoint column rules. */
.sx-grid {
  display: grid;
  gap: var(--grid-gap, var(--sp-5));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 260px), 100%), 1fr));
}
.sx-grid--sm { --grid-min: 200px; }
.sx-grid--lg { --grid-min: 320px; }
.sx-grid--gap-sm { --grid-gap: var(--sp-3); }

/* Explicit column counts, for the few places auto-fit is wrong. */
.sx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Asymmetric split for editorial rows (text + media). */
.sx-split {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

/* ---- centred prose measure ---------------------------------------------- */
.sx-prose { max-width: 68ch; }
.sx-prose--center { margin-inline: auto; text-align: center; }

/* ---- misc ---------------------------------------------------------------- */
.sx-divider {
  height: 1px;
  border: 0;
  background: var(--hairline);
  margin-block: var(--sp-6);
}

/* Screen-reader-only. Used for real content that has no visual home yet —
   never for SEO text that should be visible. */
.sx-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}