/* =============================================================================
   ZWF Layout
   Page shell, containers, sections and grid primitives. Structure only —
   colours and type live in components.css. Depends on tokens.css.
   ============================================================================= */

/* Page shell -------------------------------------------------------------------- */
body.zwf {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

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

/* Container ---------------------------------------------------------------------
   .zwf-container centres content and applies the responsive gutter.
   Width variants: --sm --md --lg --xl (default) --2xl --prose --full         */
.zwf-container {
  width: 100%;
  max-width: var(--zwf-container);
  margin-inline: auto;
  padding-inline: var(--zwf-gutter);
}
.zwf-container--sm    { --zwf-container: var(--zwf-size-sm); }
.zwf-container--md    { --zwf-container: var(--zwf-size-md); }
.zwf-container--lg    { --zwf-container: var(--zwf-size-lg); }
.zwf-container--xl    { --zwf-container: var(--zwf-size-xl); }
.zwf-container--2xl   { --zwf-container: var(--zwf-size-2xl); }
.zwf-container--prose { --zwf-container: var(--zwf-size-prose); }
.zwf-container--full  { max-width: none; }

/* Section ---------------------------------------------------------------------
   Full-width band with consistent vertical rhythm. Add .zwf-section--tight or
   --loose to adjust, and a background modifier for alternating bands.          */
.zwf-section {
  padding-block: var(--zwf-section-gap);
}
.zwf-section--tight { padding-block: calc(var(--zwf-section-gap) * 0.55); }
.zwf-section--loose { padding-block: calc(var(--zwf-section-gap) * 1.4); }
.zwf-section--flush-top { padding-top: 0; }
.zwf-section--flush-bottom { padding-bottom: 0; }

.zwf-section--surface { background-color: var(--zwf-color-surface); }
.zwf-section--surface-2 { background-color: var(--zwf-color-surface-2); }
.zwf-section--inverse {
  background-color: var(--zwf-color-surface-inverse);
  color: var(--zwf-color-ink-inverse);
}
.zwf-section--inverse :is(h1, h2, h3, h4, h5, h6) { color: var(--zwf-color-ink-inverse); }

/* Stack — vertical rhythm between flow children ----------------------------- */
.zwf-stack > * + * { margin-top: var(--zwf-flow-space, var(--zwf-space-md)); }
.zwf-stack--sm { --zwf-flow-space: var(--zwf-space-2xs); }
.zwf-stack--lg { --zwf-flow-space: var(--zwf-space-lg); }

/* Cluster — horizontal group that wraps ------------------------------------- */
.zwf-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zwf-cluster-gap, var(--zwf-space-sm));
  align-items: center;
}

/* Auto grid — responsive card grid without media queries ------------------- */
.zwf-grid {
  display: grid;
  gap: var(--zwf-grid-gap, var(--zwf-space-lg));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--zwf-grid-min, 17rem), 100%), 1fr)
  );
}
.zwf-grid--2 { --zwf-grid-min: 24rem; }
.zwf-grid--tight { --zwf-grid-gap: var(--zwf-space-md); }

/* Split — content + media side by side, stacks on small screens ----------- */
.zwf-split {
  display: grid;
  gap: var(--zwf-space-xl);
  align-items: center;
}
@media (min-width: 48em) {
  .zwf-split { grid-template-columns: 1fr 1fr; }
  .zwf-split--media-first > :first-child { order: 2; }
}

/* Prose — readable measure for rich-text blocks --------------------------- */
.zwf-prose {
  max-width: var(--zwf-size-prose);
}
.zwf-prose > * + * { margin-top: var(--zwf-space-md); }
.zwf-prose :is(h2, h3, h4) { margin-top: var(--zwf-space-xl); }
.zwf-prose > :first-child { margin-top: 0; }