/* ─────────────────────────────────────────────────────────────────
   block-videos — multi-video gallery (3-col desktop / 1-col mobile).
   Click → modal with native <video>. T10 (2026-05-06) — full rewrite.
   ─────────────────────────────────────────────────────────────────── */

.block-videos {
  position: relative;
}

/* ─────────────────────────────────
   Grid
   ───────────────────────────────── */
.block-videos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-5);
}

@media (min-width: 768px) {
  .block-videos__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .block-videos__grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
  .block-videos__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .block-videos__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .block-videos__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .block-videos__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─────────────────────────────────
   Card
   ───────────────────────────────── */
.block-videos__card {
  display: block;
  width: 100%;
  text-align: left;
  /* WAVE3-F06 2026-05-08: deeper fallback chain so the card never paints
     hardcoded #fff on a partial that lacks a .scheme-* ancestor. */
  background: var(--scheme-card-bg, var(--scheme-bg, #fff));
  border: 1px solid var(--scheme-rule, rgba(0,0,0,0.08));
  border-radius: var(--ds-radius);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-duration, 220ms) var(--ds-ease-out, ease-out),
              box-shadow var(--ds-duration, 220ms) var(--ds-ease-out, ease-out);
  font: inherit;
  color: inherit;
}

.block-videos__card:hover,
.block-videos__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

.block-videos__card:focus-visible {
  outline: 3px solid var(--ds-accent);
  outline-offset: 2px;
}

/* ─────────────────────────────────
   Poster + duration + play overlay
   ───────────────────────────────── */
/* WAVE3-F06 2026-05-08: poster letterbox is chrome-on-media; pin to
   literal #000 (semantic media-box black) so the dark-scheme guardrail
   that rebinds --ds-ink → white can't flash a white letterbox before
   the poster image loads. Explicit color: #fff so the wrapper span has
   an effective text color !== bg color (browser audit had flagged
   `block-videos__poster-wrap` as missing-text since the inherited color
   collapsed to the same value as the bg on light schemes). */
.block-videos__poster-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  color: #fff;
  overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1) {
  .block-videos__poster-wrap { padding-top: 56.25%; }
  .block-videos__poster      { position: absolute; inset: 0; }
}

.block-videos__poster {
  width: 100%;
  max-width: 100%;       /* FIX-T10 — never overscale outside card */
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ds-duration, 220ms) var(--ds-ease-out, ease-out);
}

/* FIX-T10 — defensive: any <img>/<video> rendered inside the modal
   or card frames is clamped to the parent box. */
.block-videos__poster-wrap img,
.block-videos__modal-frame img,
.block-videos__modal-frame video {
  max-width: 100%;
  max-height: 100%;
}

.block-videos__poster--placeholder {
  /* WAVE3-F06 2026-05-08: literal #000 so dark-scheme rebind of --ds-ink
     can't paint the placeholder white. Chrome-on-media. */
  background: linear-gradient(135deg,
              #000 0%,
              color-mix(in srgb, #000 78%, var(--ds-cta) 22%) 100%);
}

.block-videos__card:hover .block-videos__poster,
.block-videos__card:focus-visible .block-videos__poster {
  transform: scale(1.04);
}

/* SENIOR-T7 2026-05-07: stronger drop-shadow guarantees ≥7:1 contrast
   between white play-button circle and any underlying poster image. */
.block-videos__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  display: flex;
  pointer-events: none;
  color: var(--ds-cta);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.65)) drop-shadow(0 0 2px rgba(0,0,0,0.55));
  transition: transform var(--ds-duration, 220ms) var(--ds-ease-out, ease-out);
}

.block-videos__card:hover .block-videos__play,
.block-videos__card:focus-visible .block-videos__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.block-videos__play svg { width: 100%; height: 100%; }

/* SENIOR-T7 2026-05-07: duration label bumped from 0.78rem (12.5px) to
   14px with darker background (≥7:1 against white text).
   WAVE3-F06 2026-05-08: BROWSER-AUDIT FIX — duration overlay was
   color:var(--scheme-fg, #fff) — on light schemes --scheme-fg = --ds-ink
   (rgb 14,15,12) so the chrome-on-media label rendered as
   black-on-near-black (ratio 1.08 in 6 cards, browser audit). The duration
   pill is chrome-on-media and MUST always render light-on-dark per the
   doctrine §"WCAG thresholds → UI component". Hardcode #fff for fg AND
   pin --scheme-fg locally so any descendant that reads the var also gets
   the right color (Pattern B local rebind). */
.block-videos__duration {
  --scheme-fg: #fff;
  --ds-ink: #fff;
  position: absolute;
  bottom: var(--ds-space-2);
  right: var(--ds-space-2);
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-family: var(--ds-font-mono, monospace);
  font-size: var(--ds-fs-eyebrow, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--ds-radius-xs);
  pointer-events: none;
}

/* ─────────────────────────────────
   Card meta
   ───────────────────────────────── */
.block-videos__meta {
  display: block;
  padding: var(--ds-space-4);
}

/* SENIOR-T7 2026-05-07: card title kept Anton-uppercase (h3 display)
   per framework allowance, but minimum bumped to 1.25rem (20px). */
.block-videos__title {
  display: block;
  font-family: var(--ds-font-display, var(--ds-font-heading, sans-serif));
  font-size: clamp(1.25rem, 1.6vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: var(--scheme-fg);
  margin-bottom: var(--ds-space-2);
}

/* SENIOR-T7: description bumped to 16px floor + 1.6 line-height. */
.block-videos__description {
  display: block;
  font-family: var(--ds-font-body, sans-serif);
  font-size: var(--ds-fs-body-sm, 1rem);
  line-height: 1.6;
  color: var(--scheme-fg-soft);
}

/* ─────────────────────────────────
   Modal
   ───────────────────────────────── */
.block-videos__modal[hidden] { display: none !important; }

.block-videos__modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-4);
}

.block-videos__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  cursor: pointer;
}

.block-videos__modal-dialog {
  position: relative;
  width: 100%;
  /* FIX-T10 — clamp modal to 90vw / 1024px and 90vh per redesign brief */
  max-width: min(90vw, 1024px);
  max-height: 90vh;
  overflow: auto;
  background: var(--scheme-card-bg, #fff);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-lg, 0 24px 80px rgba(0,0,0,0.5));
  padding: var(--ds-space-5);
}

/* SENIOR-T7 2026-05-07: modal-close bumped from 44px to 48px AARP min.
   WAVE3-F06 2026-05-08: chrome-on-media — pin BG to literal #000 and FG
   to #fff so the modal close stays ink-on-white regardless of the
   surrounding section scheme (per doctrine §1.5 case study — "modal
   close should be ink-fixed regardless of section scheme"). The earlier
   `var(--ds-ink)` bg was being rebound to white on dark schemes by the
   global guardrail, leaving an invisible white-on-white close button. */
.block-videos__modal-close {
  --scheme-fg: #fff;
  --ds-ink: #fff;
  position: absolute;
  top: var(--ds-space-3);
  right: var(--ds-space-3);
  width: var(--ds-touch-target, 48px);
  height: var(--ds-touch-target, 48px);
  border-radius: 50%;
  background: #000;
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

.block-videos__modal-close:focus-visible {
  outline: 3px solid var(--ds-accent);
  outline-offset: 3px;
}

.block-videos__modal-close svg { width: 22px; height: 22px; }

.block-videos__modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* WAVE3-F06 2026-05-08: media letterbox literal #000 (chrome-on-media). */
  background: #000;
  border-radius: calc(var(--ds-radius) - 2px);
  overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1) {
  .block-videos__modal-frame { padding-top: 56.25%; }
  .block-videos__modal-video { position: absolute; inset: 0; }
}

.block-videos__modal-video {
  width: 100%;
  height: 100%;
  display: block;
  /* WAVE3-F06 2026-05-08: media letterbox literal #000 (chrome-on-media). */
  background: #000;
}

/* SWEEP-B4 2026-05-08: when the editor pastes a YouTube URL, videos.js
   swaps the native <video> for an <iframe>. Same fill rules so the
   embed sits flush in the modal frame without letterbox bars. */
.block-videos__modal-iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  /* WAVE3-F06 2026-05-08: media letterbox literal #000 (chrome-on-media). */
  background: #000;
}
.block-videos__modal-frame iframe {
  max-width: 100%;
  max-height: 100%;
}

.block-videos__modal-meta {
  margin-top: var(--ds-space-4);
}

.block-videos__modal-title {
  font-family: var(--ds-font-display, var(--ds-font-heading, sans-serif));
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 var(--ds-space-2) 0;
  color: var(--scheme-fg);
}

.block-videos__modal-description {
  font-family: var(--ds-font-body, sans-serif);
  font-size: var(--ds-fs-body, 1rem);
  line-height: 1.55;
  color: var(--scheme-fg-soft);
  margin: 0;
  max-width: 70ch;
}

/* prevent body scroll while modal is open */
body.block-videos--modal-open { overflow: hidden; }

@media (max-width: 600px) {
  .block-videos__modal-dialog { padding: var(--ds-space-3); padding-top: var(--ds-space-6); }
  .block-videos__modal-close  { top: 6px; right: 6px; }
  /* BUG-T7 2026-05-07: bottom-margin reservation so the sticky mobile CTA
     bar (Call now / Get a free quote, fixed at viewport bottom) doesn't
     cover the bottom card meta on the last video tile.
     SWEEP-B4 2026-05-08: switched the literal 96px to the wave-coord
     token --ds-sticky-cta-clearance so this block tracks the same
     clearance as creators-showcase / numbers / people-saying / cro-faq. */
  .block-videos__grid {
    margin-bottom: var(--ds-sticky-cta-clearance, 96px);
  }
}

/* F-VID 2026-05-08: residual fix — at 375 the first card was still being
   clipped by #acme-sticky-cta. The previous rule reserved margin-bottom on
   the grid only inside (max-width:600px). Strengthen the reservation by
   pushing padding-bottom on the whole .block-videos wrapper across the
   full mobile/tablet range, and add a margin-bottom safety on the grid
   itself so the last card always clears the sticky CTA overlay. */
@media (max-width: 900px) {
  .block-videos {
    padding-bottom: calc(var(--ds-space-6, 2rem) + var(--ds-sticky-cta-clearance, 96px)) !important;
  }
  .block-videos__grid {
    margin-bottom: var(--ds-space-5, 1.5rem);
  }
}