/* =========================================================
   NPW LAYOUT FOUNDATION — CONTAINER / MEASURE / GRID
   Step 02
   Responsive transitions are centralised in responsive.css (Step 03).
   ========================================================= */

/* Canonical site container. This duplicates the approved homepage
   geometry intentionally so future pages can rely on one reusable
   layout contract without changing the existing rendered result. */
.container,
.layout-container {
  width: min(var(--container-max), calc(100% - (var(--container-gutter) * 2)));
  margin-inline: auto;
}

.content-measure {
  width: min(100%, var(--content-measure));
}

.content-measure-wide {
  width: min(100%, var(--content-measure-wide));
}

.content-measure-center {
  margin-inline: auto;
}

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

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

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

.layout-grid > * {
  min-width: 0;
}

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

/* Editorial split compositions used by interior templates. */
.layout-split-40-60,
.layout-split-50-50 {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}

.layout-split-40-60 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.layout-split-50-50 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flow > * + * {
  margin-top: var(--space-5);
}

.flow-compact > * + * {
  margin-top: var(--space-3);
}

.flow-loose > * + * {
  margin-top: var(--space-8);
}