/* ============================================================
   FABBRUCCIO: THE CUSTOMER CLIPS BAND (section slug: clips)

   RESTORED 2026-07-25. A previous pass deleted the UGC band because it is
   absent from the beta2 static build. That inference was WRONG and the
   brand owner corrected it: "Approved design was just about design
   language not sections we need." beta2 fixed the LANGUAGE, not the
   section list. So this band is rebuilt in the beta2 language rather than
   restored to its old paint.

   NOTE ON THE SLUG: `ugc` was repurposed by the beta2 pass to paint the
   editorial on-model band (see fab-ugc.css). It is not free. This band
   therefore owns a NEW slug, `clips`, registered in the section map.

   ------------------------------------------------------------
   THE THREE LOAD-BEARING RULES (from inc/ugc-data.php, not preference)
   ------------------------------------------------------------
   1. A STATIC GRID, NEVER A MARQUEE. The user's call 2026-07-08: the
      auto-scrolling track was poor desktop UX. Four columns, two on
      narrow. Do not re-animate it.
   2. EXACTLY ONE <video> PER CLIP (+1 for the lightbox). Safari has a
      hard simultaneous-decode limit and exceeds it SILENTLY: surplus
      elements simply never play. Never pad a row by repeating a card.
   3. crossorigin="anonymous" is emitted by the renderer. Without it
      Chromium's Opaque Response Blocking renders every tile BLACK.

   Language: boldness 2. No shadows, no radius, hairline rules only, the
   product/person carries the colour. Portrait 9:16 sources sit on the
   grey stage and are shown WHOLE, never cropped through a face.
   ============================================================ */

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

.fab-clips__head {
  margin-bottom: clamp(24px, 3.5vw, 44px);
}

.fab-clips__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);
}

/* RULE 1: static four-column grid. */
.fab-clips__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}

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

.fab-clips__stage {
  position: relative;
  background: var(--fab-stage-grey);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  cursor: pointer;
}

/* Sources are vertical 9:16 reels. contain, so no face is ever cropped. */
.fab-clips__stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--fab-stage-grey);
}

.fab-clips__meta {
  padding-top: 12px;
}

.fab-clips__quote {
  display: block;
  font-size: var(--fab-size-detail);
  line-height: var(--fab-leading-compact);
  color: var(--fab-ink);
}

.fab-clips__who {
  display: block;
  margin-top: 4px;
  font-size: var(--fab-size-micro);
  letter-spacing: var(--fab-track-upper);
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}

/* A quiet sound cue, not a fill.
   TOP-RIGHT on purpose: these reels carry burned-in captions along the
   bottom of the frame, so a bottom-left chip collides with the customer's
   own words. Verified against the real clips, not assumed. */
.fab-clips__cue {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  font-size: var(--fab-size-micro);
  letter-spacing: var(--fab-track-upper);
  text-transform: uppercase;
  color: var(--fab-accent-ink);
  background: var(--fab-veil-hint);
  backdrop-filter: var(--fab-blur-chip);
  padding: 4px 8px;
}

/* ---- lightbox: one shared <video>, opened with sound ---- */
.fab-clips__modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--fab-veil-modal);
  backdrop-filter: var(--fab-blur-modal);
  padding: var(--fab-gutter);
}

.fab-clips__modal[open],
.fab-clips__modal.is-open {
  display: flex;
}

.fab-clips__modal video {
  max-width: min(100%, 460px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
}

.fab-clips__close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: 0;
  color: var(--fab-accent-ink);
  font-size: var(--fab-size-small);
  letter-spacing: var(--fab-track-upper);
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px;
}

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

@media (prefers-reduced-motion: reduce) {
  .fab-clips__stage video { /* autoplay is suppressed in JS; poster remains */ }
}