/* ============================================================
   Hero video — a muted, looping crop of the Ask Mira walkthrough,
   with the full narrated piece one click away in a modal.
   ============================================================ */
.hero-video {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  line-height: 0;
}

.hero-video video {
  width: 100%;
  height: auto;
  display: block;
}

/* Play affordance sits on the video's own white UI, so it needs a plate. */
.hero-video-play {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--accent);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hero-video-play:hover {
  background: #ffffff;
  border-color: var(--accent);
}

.hero-video-play svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.hero-video-duration {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Modal for the full, narrated cut (portrait, so it gets its own
       centred surface rather than being forced into the hero column) ---- */
.video-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(430px, 92vw);
  max-height: 92vh;
  overflow: visible;
}

.video-modal::backdrop {
  background: rgba(17, 17, 17, 0.74);
}

.video-modal video {
  width: 100%;
  max-height: 86vh;
  display: block;
  border-radius: var(--radius-lg);
  background: #000000;
}

.video-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
}

.video-modal-close:hover {
  background: var(--bg-alt);
}

@media (max-width: 719px) {
  .video-modal-close {
    top: -12px;
    right: -6px;
  }
}

/* Someone who has asked for less motion gets the poster frame, not a loop. */
@media (prefers-reduced-motion: reduce) {
  .hero-video video {
    /* JS also pauses it; this keeps the first paint still. */
    animation: none;
  }
}

@media (max-width: 719px) {
  .hero-video-play {
    min-height: 44px;
    padding: 10px 16px 10px 13px;
  }
}