/* ============================================================================
   layout.css — layout primitives: container, stack, cluster, grids
   ============================================================================ */

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

/* vertical rhythm */
.stack > * + * { margin-top: var(--flow, var(--sp-md)); }
.stack-sm > * + * { margin-top: var(--sp-sm); }
.stack-lg > * + * { margin-top: var(--sp-lg); }

/* wrapping inline group */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, var(--sp-sm));
  align-items: center;
}

/* intrinsic auto grid */
.grid-auto {
  display: grid;
  gap: var(--gap, var(--sp-lg));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 260px)), 1fr));
}

/* Editorial split: heading rail + content */
.split {
  display: grid;
  gap: clamp(var(--sp-lg), 5vw, var(--sp-2xl));
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); align-items: start; }
  .split--rail { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
  .split--even { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Sticky side rail (used for section intros on wide screens) */
.rail-sticky { position: sticky; top: calc(var(--sp-2xl)); }
/* On mobile a sticky side-rail just overlaps content and wastes vertical space — flow normally. */
@media (max-width: 960px) { .rail-sticky { position: static; top: auto; } }

/* Section header block */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  max-width: 30ch;
}
/* The inline font-size:var(--step-4) grew past this 30ch column at wide viewports and
   forced mid-word hyphenation. Cap the size (overrides the inline rule) and stop auto-hyphens. */
.section-head h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem) !important;
  line-height: 1.12;
  hyphens: manual;            /* no visible mid-word hyphenation */
  overflow-wrap: break-word;  /* last-resort break only, no hyphen character */
}

.section-index {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--c-accent);
  opacity: .9;
}
.theme-paper .section-index { color: var(--c-accent-deep); }

.divider {
  height: 1px;
  background: var(--c-line);
  border: 0;
}
.theme-paper .divider { background: var(--c-paper-line); }

/* full-bleed helper inside a container */
.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}