/* Final learner-player controls and carousel usability overrides. */
.wl-carousel-wrap{position:relative;padding:0 56px}.wl-carousel-arrow{position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:45px;height:60px;border:var(--line);border-radius:14px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;transform:translateY(-50%)}.wl-carousel-prev{left:0}.wl-carousel-next{right:0}.wl-carousel-arrow:disabled{background:#d1d5db;color:#6b7280;box-shadow:none;cursor:not-allowed}.wl-carousel{overflow-x:scroll;scrollbar-color:#8b5cf6 #e5e7eb;scrollbar-width:auto}.wl-carousel::-webkit-scrollbar{height:13px}.wl-carousel::-webkit-scrollbar-track{background:#e5e7eb;border-radius:10px}.wl-carousel::-webkit-scrollbar-thumb{background:#8b5cf6;border:2px solid #e5e7eb;border-radius:10px}.wl-youtube-player{width:100%;aspect-ratio:16/9}.wl-youtube-player iframe{width:100%;height:100%;border:0}@media(max-width:640px){.wl-carousel-wrap{padding:0}.wl-carousel-arrow{display:none}}

/* Give desktop playlists the full classroom canvas instead of a narrow column. */
@media (min-width: 1100px) {
  .wl-playlist-page { width: min(1500px, calc(100vw - 72px)); max-width: none; padding-top: 38px; }
  .wl-carousel-wrap { padding: 0 64px; }
  .wl-carousel { grid-auto-columns: minmax(250px, 1fr); gap: 20px; padding: 6px 6px 22px; }
  .wl-episode-card span { min-height: 58px; padding: 12px; font-size: 1rem; }
  .wl-carousel-arrow { width: 50px; height: 68px; }
}

/* Use the screen for the learning view: video gets priority, transcript stays generous. */
@media (min-width: 1100px) {
  .wl-learning-view {
    width: min(1540px, calc(100vw - 72px));
    max-width: none;
    grid-template-columns: minmax(760px, 1.7fr) minmax(390px, .8fr);
    gap: 30px;
    padding-top: 32px;
  }
  .wl-player-frame { border-radius: 22px; }
  .wl-player-frame,
  .wl-player-frame iframe,
  .wl-player-frame video,
  .wl-youtube-player { aspect-ratio: auto; height: clamp(480px, 56vh, 680px); }
  .wl-youtube-player iframe { height: 100%; }
  .wl-controls { margin: 18px 0; }
  .wl-transcript { height: clamp(620px, 76vh, 860px); max-height: none; }
  .wl-cues { height: calc(100% - 48px); max-height: none; }
  .wl-translation-card { min-height: 112px; padding: 20px; }
}

@media (min-width: 1600px) {
  .wl-learning-view { grid-template-columns: minmax(900px, 1.8fr) minmax(430px, .8fr); }
}