/* ============================================================
   FABBRUCCIO: THE STORYTELLING SPREAD (section)

   ONE primitive serving two surfaces: the home page's thesis band and the
   PDP's make-story. design-language/components.md section 11 specifies it
   once and says both are "from the same primitive", so this file is loaded
   on both routes by the section map.

   Ported from beta2 site.css:150-162 (the band + the spread) and
   :364 (the one modifier) and :246-248 (the mobile stack).

   beta2 -> here
     .story    -> .fab-story
     .spread   -> .fab-spread
     .flip     -> .fab-spread--flip
     .s-text   -> .fab-spread__text
     .s-media  -> .fab-spread__media
     .thesis   -> .fab-spread__thesis
   ============================================================ */

.fab-story { padding: var(--fab-band-lg) 0 clamp(20px, 4vw, 40px); }

/* Two equal columns, centred. The alternation IS the rhythm: NEVER put a
   background colour behind a spread. One photograph at a time, one idea
   at a time. */
.fab-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
  margin-bottom: clamp(56px, 9vw, 120px);
}
.fab-spread:last-child { margin-bottom: 0; }

/* .fab-spread--flip puts the text second, and they alternate down the
   page. Order is used rather than a second grid definition so the DOM
   order stays reading order, which is what the mobile cancel below
   depends on. */
.fab-spread--flip .fab-spread__text { order: 2; }

.fab-spread__text { max-width: var(--fab-measure-prose); }
.fab-spread__text .fab-eyebrow { margin-bottom: var(--fab-space-md); }
.fab-spread__text h2 {
  margin: 0 0 var(--fab-space-md);
  font-size: var(--fab-size-heading-m);
  font-weight: var(--fab-weight-medium);
  line-height: var(--fab-leading-heading);
  letter-spacing: var(--fab-track-heading-m);
}
/* The ONE modifier: it lifts the heading to the largest type in the
   system, and it is for a home-page statement only. */
.fab-spread__text h2.fab-spread__thesis { font-size: var(--fab-size-statement); }
.fab-spread__text p {
  margin: 0;
  font-size: var(--fab-size-prose);
  line-height: var(--fab-leading-prose);
  color: var(--fab-ink-secondary);
}

/* CROP DISCIPLINE. object-fit: COVER is correct HERE AND ONLY HERE,
   because the craft macro sources are themselves 4:3 (1700x1275 in the
   media library, 1400x1050 for the per-product details), so a matched
   ratio means cover and contain are identical and nothing is cropped.
   If a source is ever not 4:3, change the CONTAINER, not the fit. */
.fab-spread__media {
  margin: 0;
  background: var(--fab-stage-grey);
  aspect-ratio: var(--fab-stage-aspect);
  overflow: hidden;
}
.fab-spread__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .fab-spread {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 64px;
  }
  /* THE FLIP IS CANCELLED, not kept. In one column, order:2 would put
     the image above the text that introduces it, so on a phone the text
     always precedes its own photograph. */
  .fab-spread--flip .fab-spread__text { order: 0; }
  .fab-spread__media { aspect-ratio: var(--fab-stage-aspect); max-height: 70vh; }
}