/* ==========================================================================
   SYNAPSE — Layout primitives: containers, bands, grids, stacks, splits
   These are content-agnostic. Compose sections from them.
   ========================================================================== */

/* ---------- Containers ---------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: var(--container-wide); }
.shell--narrow { max-width: var(--container-narrow); }
.shell--prose { max-width: var(--container-prose); }
.shell--bleed { max-width: none; padding-inline: 0; }

/* ---------- Bands (vertical rhythm) --------------------------------- */
.band { padding-block: var(--band); position: relative; }
.band--sm { padding-block: var(--band-sm); }
.band--lg { padding-block: var(--band-lg); }
.band--flush-top { padding-block-start: 0; }
.band--flush-bottom { padding-block-end: 0; }

.band--sunken { background: var(--bg-sunken); }
.band--raised { background: var(--bg-raised); }
.band--panel { background: var(--bg-panel); }
.band--hairline { border-block-start: 1px solid var(--border-faint); }
.band--tint {
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(63 227 208 / 0.08), transparent 60%),
    radial-gradient(70% 110% at 92% 20%, rgba(155 132 255 / 0.09), transparent 62%),
    var(--bg);
}
.band--inverse {
  background: var(--ink-1000);
  --bg: var(--ink-1000);
}

/* ---------- Stack (owl selector, token-driven gap) ------------------ */
.stack > * + * { margin-block-start: var(--stack-gap, var(--s-4)); }
.stack--xs { --stack-gap: var(--s-2); }
.stack--sm { --stack-gap: var(--s-3); }
.stack--md { --stack-gap: var(--s-6); }
.stack--lg { --stack-gap: var(--s-10); }
.stack--xl { --stack-gap: var(--s-16); }

/* ---------- Cluster (inline wrap) ----------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--s-3));
}
.cluster--sm { --cluster-gap: var(--s-2); }
.cluster--lg { --cluster-gap: var(--s-6); }
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }
.cluster--end { justify-content: flex-end; }
.cluster--top { align-items: flex-start; }

/* ---------- Grid ---------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--s-6));
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--tight { --grid-gap: var(--s-3); }
.grid--loose { --grid-gap: var(--s-10); }

/* Auto-fit grid: set --min for the smallest acceptable track */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
}

@media (max-width: 1080px) {
  .grid--5, .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .grid--3, .grid--5, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Split (asymmetric two-column) --------------------------- */
.split {
  display: grid;
  gap: var(--split-gap, clamp(2rem, 5vw, 5rem));
  align-items: var(--split-align, center);
  grid-template-columns: var(--split-cols, 1fr 1fr);
}
.split--6-5 { --split-cols: 6fr 5fr; }
.split--5-7 { --split-cols: 5fr 7fr; }
.split--7-5 { --split-cols: 7fr 5fr; }
.split--4-8 { --split-cols: 4fr 8fr; }
.split--8-4 { --split-cols: 8fr 4fr; }
.split--top { --split-align: start; }
.split--reverse > :first-child { order: 2; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse > :first-child { order: 0; }
}

/* ---------- Sidebar layout (docs, article TOC) ---------------------- */
.with-sidebar {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w, 250px);
  align-items: start;
}
.with-sidebar--left { grid-template-columns: var(--sidebar-w, 250px) minmax(0, 1fr); }
.sticky-rail {
  position: sticky;
  top: calc(var(--header-h) + var(--s-6));
  max-height: calc(100svh - var(--header-h) - var(--s-12));
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 980px) {
  .with-sidebar,
  .with-sidebar--left { grid-template-columns: minmax(0, 1fr); }
  .with-sidebar--left > :first-child { order: 2; }
  .sticky-rail { position: static; max-height: none; }
}

/* ---------- Bento (editorial mosaic) -------------------------------- */
.bento {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
}
.bento > .b-2 { grid-column: span 2; }
.bento > .b-3 { grid-column: span 3; }
.bento > .b-4 { grid-column: span 4; }
.bento > .b-6 { grid-column: span 6; }
.bento > .b-tall { grid-row: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .b-2, .bento > .b-3, .bento > .b-4, .bento > .b-6 { grid-column: span 2; }
  .bento > .b-tall { grid-row: auto; }
}

/* ---------- Masonry-ish column flow --------------------------------- */
.columns {
  columns: var(--cols, 3) 260px;
  column-gap: var(--s-6);
}
.columns > * { break-inside: avoid; margin-block-end: var(--s-6); }

/* ---------- Frame ratios -------------------------------------------- */
.ratio { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio--square { aspect-ratio: 1; }
.ratio--4-3 { aspect-ratio: 4 / 3; }
.ratio--3-2 { aspect-ratio: 3 / 2; }
.ratio--16-9 { aspect-ratio: 16 / 9; }
.ratio--21-9 { aspect-ratio: 21 / 9; }
.ratio--portrait { aspect-ratio: 4 / 5; }

/* ---------- Section head -------------------------------------------- */
.section-head {
  display: grid;
  gap: var(--s-4);
  max-width: 62ch;
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
}
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--wide { max-width: 78ch; }
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 820px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
.section-head p { color: var(--text-muted); font-size: var(--fs-md); }

/* ---------- Scroll snap rail ---------------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-item, minmax(280px, 32%));
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s-4);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
@media (max-width: 700px) { .rail { --rail-item: minmax(78%, 78%); } }

/* ---------- Sticky scroll scene ------------------------------------- */
.scene { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: 1fr 1fr; }
.scene__pin { position: sticky; top: calc(var(--header-h) + var(--s-10)); align-self: start; }
.scene__steps { display: grid; gap: var(--band-sm); }
@media (max-width: 900px) {
  .scene { grid-template-columns: minmax(0, 1fr); }
  .scene__pin { position: static; }
}