/*
 * Shared course media presentation.
 *
 * Relief NOW established this responsive YouTube and companion-link pattern.
 * Keep it course-wide so subsequent conversions reuse the accepted component.
 */

.tn-course-lesson .tn-media-youtube,
.tn-course-intro .tn-media-youtube {
  box-sizing: border-box;
  width: 88%;
  max-width: 980px;
  margin: 2rem auto 2.35rem;
  overflow: hidden;
  border: 1px solid rgba(2, 60, 57, 0.16);
  border-radius: 8px;
  background: #000;
  box-shadow: 0 0.85rem 1.8rem rgba(37, 50, 47, 0.18);
  line-height: 0;
}

.tn-course-lesson .tn-media-youtube .wp-block-embed__wrapper,
.tn-course-intro .tn-media-youtube .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.tn-course-lesson .tn-media-youtube.wp-has-aspect-ratio .wp-block-embed__wrapper::before,
.tn-course-intro .tn-media-youtube.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
  content: none;
  display: none;
  padding-top: 0;
}

.tn-course-lesson .tn-media-youtube iframe,
.tn-course-intro .tn-media-youtube iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  border: 0;
}

.tn-course-lesson .tn-media-links,
.tn-course-intro .tn-media-links {
  width: 88%;
  max-width: 980px;
  margin: -1.25rem auto 2.2rem;
  text-align: center;
  font-size: 0.95em;
  line-height: 1.45;
}

.tn-course-lesson .tn-media-youtube,
.tn-course-lesson .tn-media-links {
  max-width: 760px;
}

@media (max-width: 640px) {
  .tn-course-lesson .tn-media-youtube,
  .tn-course-intro .tn-media-youtube,
  .tn-course-lesson .tn-media-links,
  .tn-course-intro .tn-media-links {
    width: 100%;
  }

  .tn-course-lesson .tn-media-youtube,
  .tn-course-intro .tn-media-youtube {
    margin: 1.5rem auto;
  }

  .tn-course-lesson .tn-media-links,
  .tn-course-intro .tn-media-links {
    margin: -0.75rem auto 1.75rem;
  }
}