/* ==========================================================================
   layout.css — containers, grids, generic layout utilities
   --------------------------------------------------------------------------
   No component styling here — that lives in components.css. Utilities here
   should compose with semantic HTML to produce page layouts.
   ========================================================================== */

/* ---------- Page container ----------------------------------------------- */

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

.container--narrow { max-width: var(--container-narrow); }

/* ---------- Stack (vertical rhythm) -------------------------------------- */
/* Lobotomized-owl idiom — adjacent siblings get top margin. Use --stack-gap
   on the parent to override.                                              */

.stack > * + * {
  margin-top: var(--stack-gap, var(--space-m));
}
.stack--s  { --stack-gap: var(--space-s);  }
.stack--m  { --stack-gap: var(--space-m);  }
.stack--l  { --stack-gap: var(--space-l);  }
.stack--xl { --stack-gap: var(--space-xl); }

/* ---------- Section (consistent vertical padding) ------------------------ */

.section {
  padding-block: var(--space-3xl);
}
.section--tight { padding-block: var(--space-2xl); }

/* Section colour variants — used sparingly. The design calls for a calm,
   unified cream page rather than alternating "zebra" stripes; reserve
   --bone / --white / --plum for moments that genuinely benefit from a
   change in surface (the closing CTA, a featured card panel). */
.section--bone  { background: var(--color-bg-alt); }
.section--white { background: var(--color-surface); }
.section--rose  { background: var(--color-bg-rose); }
/* overflow:hidden lets the audit timeline's over-long line clip exactly to
   the band's top/bottom edges. */
.section--iceblue { background: var(--color-bg-iceblue); overflow: hidden; }
.section--plum  { background: var(--color-text); color: var(--color-text-on-dark); }
.section--plum h1, .section--plum h2, .section--plum h3,
.section--plum h4, .section--plum p, .section--plum a {
  color: var(--color-text-on-dark);
}
/* Keep CTA buttons on their saffron fill (plum text) inside a plum band — the
   rule above would otherwise recolour the button text to cream and kill its
   contrast against the saffron. */
.section--plum .hs-btn { color: var(--color-accent-ink); }

/* ---------- Cluster (wrap-able row, e.g. nav, button bar) ---------------- */

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

/* ---------- Grid utilities ----------------------------------------------- */

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-l));
}

/* Auto-fit grid that drops to single column under min child width. */
.grid--auto {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min, 18rem), 100%), 1fr)
  );
}

.grid--2  { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--3  { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.grid--4  { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

/* Split layout — heading on the left, content on the right; collapses on
   narrow viewports.                                                       */
.split {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 50rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* ---------- Center (text or block) --------------------------------------- */

.center      { text-align: center; }
.center-mx   { margin-inline: auto; }

/* ---------- Visibility helpers ------------------------------------------- */

[hidden] { display: none !important; }

@media (max-width: 40rem) {
  .hide-on-mobile { display: none !important; }
}
@media (min-width: 40.001rem) {
  .hide-on-desktop { display: none !important; }
}