/* Promotional videos (frontend/js/promo-video.js) */
.promo-video { margin: 0; }
.promo-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #050c18;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.promo-video__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo-video__frame video::cue { font-size: clamp(0.85rem, 2.4vw, 1.15rem); background: rgba(5, 12, 24, 0.82); color: #fff; }
.promo-video__sound {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(5, 12, 24, 0.82);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.promo-video__sound:hover { background: rgba(5, 12, 24, 0.95); }
.promo-video__sound:focus-visible { outline: 3px solid #30c8d6; outline-offset: 2px; }
.promo-video__caption { margin-top: 0.6rem; font-weight: 600; color: inherit; }
.promo-video__source { margin: 0.25rem 0 0; font-size: 0.82rem; opacity: 0.85; }
.promo-video__source a { color: #7dd4dc; text-decoration: underline; }
.promo-video__transcript { margin-top: 0.35rem; font-size: 0.9rem; color: inherit; opacity: 0.9; }
.promo-video__transcript summary { cursor: pointer; color: #7dd4dc; width: fit-content; }
.promo-video__transcript summary:focus-visible { outline: 3px solid #30c8d6; outline-offset: 2px; border-radius: 4px; }
.promo-video__transcript p { margin: 0.5rem 0 0; line-height: 1.6; }

/* A compact banner for the short advert above catalog, course and pricing content. */
.promo-video--banner { max-width: 640px; margin-inline: auto; }

/* Page layouts around the videos (frontend/pages). */
/* The course overview under the home page hero. */
.promo-showcase { max-width: 880px; margin-inline: auto; }

/* A heading and description beside the podcast (home and About pages). */
.promo-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem 3rem;
  align-items: center;
}
.promo-feature .lp-section-header { margin: 0; max-width: none; text-align: left; }
.promo-feature h2 { margin-top: 0; }

/* Catalog, pricing and course page heroes: the short advert beside the heading. */
.promo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: 2rem 3rem;
  align-items: center;
}
.promo-hero > .promo-video--banner { width: 100%; margin-inline: 0; }

@media (max-width: 991.98px) {
  .promo-feature,
  .promo-hero { grid-template-columns: minmax(0, 1fr); }
  .promo-feature .lp-section-header { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-video__frame { box-shadow: none; }
}