/* ============================================================
   FABBRUCCIO: THE MACRO STRIP (section slug: macro)

   RESTORED 2026-07-25. The close-up craft macros (welt, lining, outsole,
   studs, and the per-SKU detail-* crops). The beta2 pass folded these into
   the storytelling spreads and deleted the strip; the brand owner asked
   for the strip back as its own section.

   NOT the same primitive as fab-craft.css. That file is the storytelling
   SPREAD (one image beside one paragraph, alternating). This is a silent
   ROW of macros with no prose: the material at close range, nothing else.

   ------------------------------------------------------------
   CROP DISCIPLINE
   ------------------------------------------------------------
   Every macro source is 4:3 LANDSCAPE (1400x1050, and the studio-cut
   detail-* crops are 1400x1050 exactly). The container is therefore 4/3
   so a `cover` fit crops NOTHING: source ratio == box ratio. If a source
   of another ratio is ever added here, the box must change with it or the
   fit must become `contain`. Never force a ratio onto a source.

   ------------------------------------------------------------
   HONESTY GUARD
   ------------------------------------------------------------
   The Goodyear-welt macro is FLORENCE-ONLY and the renderer enforces it.
   The other eight styles are super lightweight construction and must
   never carry a welt photograph.
   ============================================================ */

.fab-macro {
  padding: var(--fab-band-md) 0;
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
}

.fab-macro__head {
  margin-bottom: clamp(18px, 2.6vw, 34px);
}

.fab-macro__eyebrow {
  display: block;
  font-size: var(--fab-eyebrow-size);
  letter-spacing: var(--fab-eyebrow-tracking);
  font-weight: var(--fab-eyebrow-weight);
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}

.fab-macro__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}

.fab-macro__cell {
  margin: 0;
  min-width: 0;
}

/* 4/3 box for a 4:3 source: cover crops nothing. */
.fab-macro__stage {
  background: var(--fab-stage-grey);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.fab-macro__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fab-macro__cap {
  padding-top: 10px;
  font-size: var(--fab-size-micro);
  letter-spacing: var(--fab-track-upper);
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}

@media (max-width: 820px) {
  .fab-macro__grid { grid-template-columns: 1fr; }
}