/* =============================================================
   LAYOUT — containers, sections, stacks, grids.
   Structure only. No colour, no type.
   ============================================================= */

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

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

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


/* ---------- section ----------
   Section padding is deliberately far larger than any gap
   inside a section — that difference is the rhythm.           */

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


/* ---------- stack ---------- */

.stack > * + * { margin-block-start: var(--stack-gap, var(--space-m)); }

.stack--3xs { --stack-gap: var(--space-3xs); }
.stack--2xs { --stack-gap: var(--space-2xs); }
.stack--xs  { --stack-gap: var(--space-xs); }
.stack--s   { --stack-gap: var(--space-s); }
.stack--l   { --stack-gap: var(--space-l); }
.stack--xl  { --stack-gap: var(--space-xl); }


/* ---------- grid ---------- */

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-m));
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}

@media (min-width: 640px)  { .grid { --cols: var(--cols-sm, 2); } }
@media (min-width: 1024px) { .grid { --cols: var(--cols-lg, 3); } }

.grid--4 { --cols-lg: 4; }
.grid--2 { --cols-lg: 2; }


/* ---------- split ----------
   Asymmetric two-column. 7/5 by default.                      */

.split { display: grid; gap: var(--space-xl); align-items: center; }

@media (min-width: 900px) {
  .split { grid-template-columns: var(--split, 7fr 5fr); }
  .split--even { --split: 1fr 1fr; }
}


/* ---------- cluster ---------- */

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


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

.center { text-align: center; }
.center > p, .center > h1, .center > h2, .center > h3, .center > .lead {
  margin-inline: auto;
}

.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: calc(-1 * var(--space-3xl));
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--green);
  color: var(--white);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-s); color: var(--white); }