/* ==========================================================================
   STAY FREE ENTERPRISE — section shells
   6 structurally distinct variants (plan §4: "every section takes a
   structural break from its neighbor" — never the same wrapper repeated).
   Applied alongside .sf-section / .sf-section--alt for background rhythm.
   Each works with zero JS; section-shells.js adds scroll-scrub/pin polish
   only where it's cheap and safe (fine pointer, no reduced-motion).
   ========================================================================== */

/* ---- 1. EDITORIAL SPLIT — asymmetric two-column magazine spread ---- */
.sf-shell--editorial-split .sf-shell__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sf-space-7);
  align-items: center;
}
.sf-shell--editorial-split .sf-shell__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--sf-radius-lg);
  overflow: hidden;
  box-shadow: var(--sf-elevation-3);
}
@media (max-width: 820px) {
  .sf-shell--editorial-split .sf-shell__grid { grid-template-columns: 1fr; }
}

/* ---- 2. FULL BLEED — edge-to-edge background, content constrained ---- */
.sf-shell--full-bleed {
  padding-inline: 0;
}
.sf-shell--full-bleed .sf-shell__bleed-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--sf-sand), var(--sf-ivory) 60%);
  z-index: 0;
}
.sf-shell--full-bleed .sf-container {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: var(--sf-space-8);
}

/* ---- 3. ASYMMETRIC GRID — uneven tracks, offset items ---- */
.sf-shell--asymmetric-grid .sf-shell__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sf-space-4);
}
.sf-shell--asymmetric-grid .sf-shell__item--a { grid-column: 1 / span 4; }
.sf-shell--asymmetric-grid .sf-shell__item--b { grid-column: 4 / span 3; margin-top: var(--sf-space-7); }
.sf-shell--asymmetric-grid .sf-shell__item--c { grid-column: 1 / span 3; }
@media (max-width: 820px) {
  .sf-shell--asymmetric-grid .sf-shell__grid { grid-template-columns: 1fr; }
  .sf-shell--asymmetric-grid .sf-shell__item--a,
  .sf-shell--asymmetric-grid .sf-shell__item--b,
  .sf-shell--asymmetric-grid .sf-shell__item--c { grid-column: 1; margin-top: 0; }
}

/* ---- 4. PINNED NARRATIVE — sticky stage, CSS-only fallback works
   standalone; section-shells.js reinforces with ScrollTrigger + exposes
   --sf-pin-progress for consumers (e.g. the compass needle in Phase 2). ---- */
.sf-shell--pinned-narrative {
  position: relative;
  min-height: 220vh;
}
.sf-shell--pinned-narrative__stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sf-shell--pinned-narrative__beats {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-8);
}

/* ---- 5. HORIZONTAL STRIP — native scroll-snap fallback; JS scrubs on
   fine pointers only (see section-shells.js) ---- */
.sf-shell--horizontal-strip { overflow: hidden; }
.sf-shell--horizontal-strip__viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.sf-shell--horizontal-strip--js .sf-shell--horizontal-strip__viewport { overflow: visible; }
.sf-shell--horizontal-strip__track {
  display: flex;
  gap: var(--sf-space-5);
  width: max-content;
  padding-block: var(--sf-space-2);
}
.sf-shell--horizontal-strip__track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(320px, 78vw);
}

/* ---- 6. CENTERED PROSE — narrow single column, manifesto rhythm ---- */
.sf-shell--centered-prose .sf-shell__prose {
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}
.sf-shell--centered-prose p { margin-inline: auto; }

/* 2026-07-11 (Anthony): the 4-step rows on /business-funding and /marketing
   center under their centered headings. On desktop the fixed-width strip cards
   were wider than the container and hung off to the right, so at >=1100px the
   track becomes a fitted 4-column grid (centered by construction, cards share
   the container width evenly). Below 1100px the native scroll strip remains. */
@media (min-width: 1100px) {
  .sf-fund-process .sf-shell--horizontal-strip__track,
  .sf-mk-funnels .sf-shell--horizontal-strip__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sf-fund-process .sf-fund-step,
  .sf-mk-funnels .sf-mk-stage {
    width: auto;
    min-width: 0;
    flex: initial;
  }
}