/* ─────────────────────────────────────────────────────────────────
   block-video — single video player with optional eyebrow caption,
   below-video caption + primary CTA. Native MP4 + lite-YouTube fallback.
   T10 (2026-05-06) — full rewrite per CRO redesign brief.
   ─────────────────────────────────────────────────────────────────── */

.block-video {
  position: relative;
}

/* ───── Eyebrow strip above the player ─────
   WAVE3-F06 2026-05-08: pin color #fff (audit §4.1) — was --scheme-fg
   which resolved to ink (black) on light schemes. Bumped weight to 700
   and font-size floor so white-on-orange (3.48:1) qualifies as AA Large
   per doctrine §"WCAG thresholds". */
.block-video__eyebrow {
  background: var(--ds-cta);
  color: #fff;
  font-family: var(--ds-font-mono, monospace);
  font-size: max(0.95rem, var(--ds-fs-eyebrow, 0.78rem));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
  text-align: center;
}

/* ───── Aspect-ratio frame ─────
   WAVE3-F06 2026-05-08: literal #000 letterbox (chrome-on-media) per
   audit §4.2 — was --ds-ink which the dark-scheme guardrail rebinds to
   white, flashing white before the video element loads. */
.block-video__frame {
  --aspect: 56.25%;             /* 16:9 default */
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-md);
}

.block-video__frame--has-eyebrow { border-radius: 0 0 var(--ds-radius) var(--ds-radius); }
.block-video__frame--16x9        { --aspect: 56.25%; }
.block-video__frame--4x3         { --aspect: 75%;    }
.block-video__frame--1x1         { --aspect: 100%;   }

.block-video__frame::before {
  content: "";
  display: block;
  padding-top: var(--aspect);
}

.block-video__video,
.block-video__lite-yt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ───── Native video element ───── */
.block-video__video {
  /* WAVE3-F06 2026-05-08: literal #000 (chrome-on-media). */
  background: #000;
  object-fit: cover;
}

/* ───── Lite-YouTube poster + play overlay ───── */
.block-video__lite-yt {
  border: 0;
  padding: 0;
  cursor: pointer;
  /* WAVE3-F06 2026-05-08: literal #000 (chrome-on-media). */
  background: #000;
}

.block-video__lite-yt-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ds-duration, 220ms) var(--ds-ease-out, ease-out);
}

/* FIX-T10 — defensive poster scaling. The aspect-ratio frame already
   clamps the player container via ::before padding-top; this clause
   keeps the poster <img> + native <video> from ever bursting their box
   on long-content layouts where author CSS could leak in. */
.block-video__frame img,
.block-video__frame video {
  max-width: 100%;
  max-height: 100%;
}

.block-video__lite-yt:hover .block-video__lite-yt-poster,
.block-video__lite-yt:focus-visible .block-video__lite-yt-poster {
  transform: scale(1.02);
}

/* SENIOR-T7 2026-05-07: Play button enlarged to 96x68 (canvas) to keep
   AARP ≥56×56 hit-area independent of icon padding. Heavier drop-shadow
   guarantees ≥7:1 contrast against any poster image. */
.block-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 68px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  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-video__lite-yt:hover .block-video__play,
.block-video__lite-yt:focus-visible .block-video__play {
  transform: translate(-50%, -50%) scale(1.08);
}

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

.block-video__lite-yt:focus-visible {
  outline: 3px solid var(--ds-accent);
  outline-offset: 4px;
}

/* ───── Below-video caption + CTA ───── */
.block-video__below {
  margin-top: var(--ds-space-5);
  text-align: center;
}

/* SENIOR-T7 2026-05-07: caption stays at ds-fs-body (18px); line-height
   bumped to 1.6 AARP minimum. */
.block-video__caption {
  color: var(--scheme-fg-soft, var(--ds-ink));
  font-family: var(--ds-font-body, sans-serif);
  font-size: var(--ds-fs-body, 1.125rem);
  line-height: 1.6;
  max-width: 64ch;
  margin: 0 auto var(--ds-space-4) auto;
}

.block-video__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
}

/* SENIOR-T7 2026-05-07: primary CTA bumped to 56px AARP minimum. Font
   bumped to body-lg (1.125rem) so the action verb is unambiguous. */
.block-video__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-touch-target-primary, 56px);
  padding: 0 var(--ds-space-6);
  background: var(--ds-cta);
  /* WAVE3-F06 2026-05-08: pin #fff (audit §X.3) — was --scheme-fg
     which resolved to ink (black) on light schemes. */
  color: #fff;
  font-family: var(--ds-font-heading, var(--ds-font-display, sans-serif));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--ds-fs-body);
  text-decoration: none;
  border-radius: calc(var(--ds-radius) - 2px);
  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),
              background-color var(--ds-duration, 220ms) var(--ds-ease-out, ease-out);
}

.block-video__cta:hover,
.block-video__cta:focus-visible {
  background: color-mix(in srgb, var(--ds-cta) 92%, #000 8%);
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-1px);
  color: #fff;
}

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

/* SENIOR-T7 2026-05-07: helper bumped from 13px mono to 16px humanist
   sans, contrast bumped from fg-mute → fg-soft for AAA. */
.block-video__cta-helper {
  color: var(--scheme-fg-soft, var(--ds-ink));
  font-family: var(--ds-font-body, sans-serif);
  font-size: var(--ds-fs-body-sm, 1rem);
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* ───── Mobile tweaks ───── */
@media (max-width: 600px) {
  .block-video__cta { width: 100%; max-width: 360px; padding: 0 var(--ds-space-4); }
  /* SENIOR-T7: keep mobile caption ≥16px line-height 1.6. */
  .block-video__caption { font-size: var(--ds-fs-body-sm, 1rem); line-height: 1.6; }
  /* SWEEP-B3 2026-05-08: bottom-margin reservation so the sticky mobile CTA
     bar (Call now / Get a free quote) does not overlay the primary
     "Book my site walk-through" CTA on the video block. Token contract
     auto-zeroes on desktop. */
  .block-video__below { margin-bottom: var(--ds-sticky-cta-clearance, 96px); }
}

/* ───── Reduced-motion guard ─────
   SWEEP-B3 2026-05-08: when prefers-reduced-motion: reduce, kill any
   poster/play-button motion on hover/focus. Native <video autoplay> is
   muted at the markup level by `autoplay_muted`, but we additionally
   honor the OS toggle via the inline guard in video.html.twig that
   strips the autoplay attribute when reduce is active. */
@media (prefers-reduced-motion: reduce) {
  .block-video__lite-yt-poster,
  .block-video__play {
    transition: none !important;
  }
  .block-video__lite-yt:hover .block-video__lite-yt-poster,
  .block-video__lite-yt:focus-visible .block-video__lite-yt-poster,
  .block-video__lite-yt:hover .block-video__play,
  .block-video__lite-yt:focus-visible .block-video__play {
    transform: translate(-50%, -50%);
  }
  .block-video__lite-yt-poster:hover,
  .block-video__lite-yt-poster:focus-visible {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   WAVE3-F06 2026-05-08 — Pattern C scheme-scoped overrides
   On .scheme-accent (orange section) the CTA bg + eyebrow bg both
   collapse to orange-on-orange. Inverse-swap: white pill, orange text.
   ───────────────────────────────────────────────────────────────── */
.scheme-accent .block-video__cta {
  background: #fff;
  color: var(--ds-cta);
}
.scheme-accent .block-video__cta:hover,
.scheme-accent .block-video__cta:focus-visible {
  background: rgba(255,255,255,0.92);
  color: var(--ds-cta);
}
.scheme-accent .block-video__eyebrow {
  background: #fff;
  color: var(--ds-cta);
}