/* Thinkific-style video lightbox for /courses */

.our-courses-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(33, 40, 59, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.our-courses-video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.our-courses-video-modal__dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 3rem);
}

.our-courses-video-modal__close {
  position: absolute;
  top: -3rem;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 249, 249, 0.12);
  color: #faf9f9;
  font-size: 1.125rem;
  cursor: pointer;
}

.our-courses-video-modal__close:hover {
  background: rgba(250, 249, 249, 0.22);
}

.our-courses-video-modal .art-player-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.our-courses-video-modal .art-player-host {
  width: 100%;
  height: 100%;
}

body.our-courses-video-open {
  overflow: hidden;
}

.video___courses .section__video--trigger {
  height: 0;
  overflow: hidden;
}

.video___courses .video__play-button {
  cursor: pointer;
}

.video___courses .video__play-button:hover {
  opacity: 0.92;
}

.our-courses-mentor-video,
.our-courses-story-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  position: relative;
}

.our-courses-mentor-video {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.our-courses-story-card {
  width: 320px;
}

.our-courses-story-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.our-courses-story-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  /* Width-only container queries — avoid hiding controls when frame height is ~180px */
  container-type: inline-size;
}

.our-courses-video-poster,
.our-courses-story-poster {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.our-courses-video-play-btn,
.our-courses-story-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  padding-left: 0.25rem;
  border: none;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 1.65rem;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease;
}

.our-courses-video-play-btn:hover,
.our-courses-story-play-btn:hover {
  background: #111;
}

.our-courses-mentor-video.is-poster-hidden .our-courses-video-poster,
.our-courses-mentor-video.has-video-played .our-courses-video-poster,
.our-courses-mentor-video.is-poster-hidden .our-courses-video-play-btn,
.our-courses-mentor-video.has-video-played .our-courses-video-play-btn,
.our-courses-story-video.is-poster-hidden .our-courses-story-poster,
.our-courses-story-video.is-poster-hidden .our-courses-video-poster,
.our-courses-story-video.has-video-played .our-courses-story-poster,
.our-courses-story-video.has-video-played .our-courses-video-poster,
.our-courses-story-video.is-poster-hidden .our-courses-story-play-btn,
.our-courses-story-video.is-poster-hidden .our-courses-video-play-btn,
.our-courses-story-video.has-video-played .our-courses-story-play-btn,
.our-courses-story-video.has-video-played .our-courses-video-play-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.our-courses-mentor-video:not(.has-video-played):not(.is-starting-play) .art-player-host,
.our-courses-story-video:not(.has-video-played):not(.is-starting-play) .art-player-host {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.our-courses-mentor-video.is-starting-play .art-player-host,
.our-courses-mentor-video.has-video-played .art-player-host,
.our-courses-story-video.is-starting-play .art-player-host,
.our-courses-story-video.has-video-played .art-player-host {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.our-courses-mentor-video:not(.has-video-played) .art-poster,
.our-courses-mentor-video:not(.has-video-played) .art-layer-poster,
.our-courses-mentor-video:not(.has-video-played) .art-top,
.our-courses-mentor-video:not(.has-video-played) .art-bottom,
.our-courses-mentor-video:not(.has-video-played) .art-progress,
.our-courses-mentor-video:not(.has-video-played) .art-controls,
.our-courses-mentor-video:not(.has-video-played) .art-state,
.our-courses-mentor-video:not(.has-video-played) .art-mask,
.our-courses-story-video:not(.has-video-played) .art-poster,
.our-courses-story-video:not(.has-video-played) .art-layer-poster,
.our-courses-story-video:not(.has-video-played) .art-top,
.our-courses-story-video:not(.has-video-played) .art-bottom,
.our-courses-story-video:not(.has-video-played) .art-progress,
.our-courses-story-video:not(.has-video-played) .art-controls,
.our-courses-story-video:not(.has-video-played) .art-state,
.our-courses-story-video:not(.has-video-played) .art-mask {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.our-courses-mentor-video .art-poster,
.our-courses-mentor-video .art-layer-poster,
.our-courses-story-video .art-poster,
.our-courses-story-video .art-layer-poster {
  object-fit: cover !important;
}

.our-courses-mentor-video .art-player-host,
.our-courses-story-video .art-player-host {
  width: 100%;
  height: 100%;
}

.our-courses-mentor-video .welcome-video-loader,
.our-courses-story-video .welcome-video-loader,
.our-courses-video-modal .welcome-video-loader {
  z-index: 90;
}

.our-courses-mentor-video.is-video-loading .our-courses-video-poster,
.our-courses-story-video.is-video-loading .our-courses-story-poster,
.our-courses-story-video.is-video-loading .our-courses-video-poster {
  opacity: 1;
  visibility: visible;
}

/* No floating mini player on scroll */
body.course-landing-page > .art-mini {
  display: none !important;
}

.section__body .our-courses-achievements {
  margin: 0;
  padding: 0;
}

.section__body .our-courses-achievements h3 {
  margin: 0 0 0.85rem;
  text-align: left;
}

.section__body .our-courses-achievements__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section__body .our-courses-achievements__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.65rem;
  padding: 0;
  text-align: left;
}

.section__body .our-courses-achievements__list li:last-child {
  margin-bottom: 0;
}

.section__body .our-courses-achievements__icon {
  flex: 0 0 auto;
  line-height: 1.55;
}

.section__body .our-courses-achievements__text {
  flex: 1;
  min-width: 0;
  line-height: 1.55;
}

/* Shared controls for mentor + story on /courses landing */
body.course-landing-page .our-courses-mentor-video.art-player-wrap--course.has-video-played .art-bottom,
body.course-landing-page .our-courses-mentor-video.art-player-wrap--course.has-video-played .art-controls,
body.course-landing-page .our-courses-mentor-video.art-player-wrap--course.has-video-played .art-controls-left,
body.course-landing-page .our-courses-mentor-video.art-player-wrap--course.has-video-played .art-controls-right,
body.course-landing-page .our-courses-story-video.art-player-wrap--course.has-video-played .art-bottom,
body.course-landing-page .our-courses-story-video.art-player-wrap--course.has-video-played .art-controls,
body.course-landing-page .our-courses-story-video.art-player-wrap--course.has-video-played .art-controls-left,
body.course-landing-page .our-courses-story-video.art-player-wrap--course.has-video-played .art-controls-right {
  overflow: visible !important;
}

body.course-landing-page .our-courses-mentor-video.art-player-wrap--course .art-fast-forward,
body.course-landing-page .our-courses-mentor-video.art-player-wrap--course .art-layer-fast-forward,
body.course-landing-page .our-courses-story-video.art-player-wrap--course .art-fast-forward,
body.course-landing-page .our-courses-story-video.art-player-wrap--course .art-layer-fast-forward {
  display: none !important;
}

body.course-landing-page .our-courses-mentor-video.art-player-wrap--course.has-video-played .art-state,
body.course-landing-page .our-courses-story-video.art-player-wrap--course.has-video-played .art-state {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.course-landing-page .our-courses-story-video.is-player-fullscreen,
body.course-landing-page .our-courses-mentor-video.is-player-fullscreen {
  overflow: hidden !important;
  z-index: 2147483646 !important;
}

body.course-landing-page.su-public-video-fs-lock .our-courses-story-card,
body.course-landing-page.su-public-video-fs-lock .our-courses-story-card__media {
  overflow: hidden !important;
}

/* Story cards (~320px): keep full toolbar like mentor — settings + fullscreen always visible */
body.course-landing-page .our-courses-story-video.has-video-played .art-video-player {
  --art-control-icon-size: 17px;
  --art-control-height: 26px;
  --art-bottom-height: 36px;
  --art-bottom-gap: 0;
  --art-padding: 1px;
  --art-progress-height: 3px;
  --art-volume-height: 72px;
}

body.course-landing-page .our-courses-story-video.has-video-played .art-bottom,
body.course-landing-page .our-courses-story-video.has-video-played .art-progress,
body.course-landing-page .our-courses-story-video.has-video-played .art-controls,
body.course-landing-page .our-courses-story-video.has-video-played .art-controls-left,
body.course-landing-page .our-courses-story-video.has-video-played .art-controls-right {
  overflow: visible !important;
}

body.course-landing-page .our-courses-story-video.has-video-played .art-control-play,
body.course-landing-page .our-courses-story-video.has-video-played .art-control-time,
body.course-landing-page .our-courses-story-video.has-video-played .art-control-quality,
body.course-landing-page .our-courses-story-video.has-video-played .art-control-volume,
body.course-landing-page .our-courses-story-video.has-video-played .art-control-setting,
body.course-landing-page .our-courses-story-video.has-video-played .art-control-pip,
body.course-landing-page .our-courses-story-video.has-video-played .art-control-fullscreen {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

body.course-landing-page .our-courses-story-video.has-video-played.is-landscape-compact .art-control-setting,
body.course-landing-page .our-courses-story-video.has-video-played.is-landscape-compact .art-control-pip,
body.course-landing-page .our-courses-story-video.has-video-played.is-landscape-compact .art-control-fullscreen {
  display: inline-flex !important;
}

body.course-landing-page .our-courses-story-video.has-video-played .art-control-time {
  font-size: 8px !important;
  max-width: 3rem !important;
  padding: 0 1px !important;
}

body.course-landing-page .our-courses-story-video.has-video-played .art-control-quality .art-selector-value {
  display: none !important;
}

body.course-landing-page .our-courses-story-video.has-video-played .shahid-quality-panel,
body.course-landing-page .our-courses-story-video.has-video-played .shahid-settings-panel,
body.course-landing-page .our-courses-story-video.has-video-played .shahid-settings-subpanel {
  z-index: 80 !important;
  max-height: min(42vh, 220px) !important;
  overflow-y: auto !important;
}

/* Landscape / short viewports – our-courses videos */
@media (orientation: landscape) and (max-height: 36rem) {
  body.course-landing-page .our-courses-mentor-video,
  body.course-landing-page .our-courses-story-video {
    max-width: min(720px, var(--shahid-video-max-w, 100%)) !important;
    max-height: var(--shahid-video-max-h, calc(100dvh - 7rem)) !important;
    width: min(
      100%,
      var(--shahid-video-max-w, 100%),
      calc(var(--shahid-video-max-h, calc(100dvh - 7rem)) * 16 / 9)
    ) !important;
    margin-inline: auto;
  }

  body.course-landing-page .our-courses-mentor-video:not(.is-player-fullscreen),
  body.course-landing-page .our-courses-story-video:not(.is-player-fullscreen) {
    overflow: hidden !important;
  }

  body.course-landing-page .our-courses-mentor-video .art-player-host,
  body.course-landing-page .our-courses-story-video .art-player-host {
    overflow: hidden !important;
  }

  body.course-landing-page .our-courses-story-video.is-player-fullscreen .art-player-host,
  body.course-landing-page .our-courses-mentor-video.is-player-fullscreen .art-player-host {
    overflow: visible !important;
  }

  body.course-landing-page .our-courses-story-video.has-video-played:not(.is-player-fullscreen) .art-bottom,
  body.course-landing-page .our-courses-story-video.has-video-played:not(.is-player-fullscreen) .art-progress,
  body.course-landing-page .our-courses-story-video.has-video-played:not(.is-player-fullscreen) .art-controls {
    overflow: visible !important;
  }

  .our-courses-video-modal {
    padding: 0.5rem;
    align-items: center;
  }

  .our-courses-video-modal__dialog {
    width: min(calc((100dvh - 2.5rem) * 16 / 9), calc(100vw - 1rem));
    max-height: calc(100dvh - 2.5rem);
  }

  .our-courses-video-modal__close {
    top: 0.35rem;
    right: 0.35rem;
  }

  .our-courses-video-modal .art-player-wrap {
    max-height: calc(100dvh - 2.5rem);
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: visible !important;
  }
}

@media (orientation: landscape) and (max-height: 28rem) {
  body.course-landing-page .our-courses-mentor-video {
    max-height: var(--shahid-video-max-h, calc(100dvh - 5.5rem)) !important;
  }

  .our-courses-video-modal__dialog {
    width: min(calc((100dvh - 1.5rem) * 16 / 9), calc(100vw - 0.75rem));
    max-height: calc(100dvh - 1.5rem);
  }
}

.our-courses-trust-line {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #94a3b8 !important;
  letter-spacing: 0.01em;
  line-height: 1.6;
}
