/* Homepage teaser. Playback stays inline and starts only on request. */
.hero-teaser {
  width: 100%;
  min-width: 0;
  align-self: center;
}

.teaser-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #edf2ff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 48px -24px #101d3c40;
}

.teaser-frame video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: inherit;
}

.teaser-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: white;
}

.teaser-play-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 6px 24px #101d3c33;
}

.teaser-play-icon svg { width: 28px; height: 28px; fill: currentColor; }
.teaser-play:hover .teaser-play-icon { background: var(--teal-dark); }
.teaser-play-label { padding: 4px 12px; border-radius: 3px; background: var(--navy); font-size: .8rem; font-weight: 500; }

.hero-teaser figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  font-size: .92rem;
  font-weight: 500;
}

.teaser-duration { color: var(--muted); font-size: .82rem; font-weight: 400; white-space: nowrap; }
.teaser-error, .teaser-fallback { margin-top: 12px; font-size: .85rem; }
.teaser-error a, .teaser-fallback a { text-decoration: underline; }

@media (max-width: 960px) and (min-width: 761px) {
  .hero:has(.hero-teaser) .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-teaser { max-width: 640px; }
}

@media (max-width: 760px) {
  .hero-teaser { margin-top: 24px; margin-bottom: 12px; }
  .teaser-play-icon { width: 56px; height: 56px; }
  .teaser-play-label { display: none; }
  .hero-teaser figcaption { padding-top: 12px; font-size: .88rem; }
}