/* Desktop uses one track; phones give landscape videos their own full-width row. */
html { scrollbar-gutter: stable; }
.karate-videos-viewport {
    container-type: inline-size;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    padding: 6px 0 12px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scrollbar-width: auto;
}
.karate-videos-viewport::-webkit-scrollbar, .karate-comparison-videos::-webkit-scrollbar { height: 16px; }
.karate-videos-viewport::-webkit-scrollbar-track, .karate-comparison-videos::-webkit-scrollbar-track { background: var(--green-100); border-radius: 999px; }
.karate-videos-viewport::-webkit-scrollbar-thumb, .karate-comparison-videos::-webkit-scrollbar-thumb { background: var(--green-700); border-radius: 999px; }
@supports not selector(::-webkit-scrollbar) {
    .karate-videos-viewport, .karate-comparison-videos { scrollbar-color: var(--green-700) var(--green-100); }
}
.karate-video-slide { flex: 0 0 640px; max-width: calc(100% - 40px); min-width: 206px; text-align: center; }
.karate-video-slide.is-portrait { flex-basis: 206px; }
.karate-video-slide h3, .karate-video-group > h3 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 36px; margin: 0 0 12px; color: var(--green-900); font-size: 1.25rem; line-height: 1.4; }
.karate-video-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 206px; overflow: hidden; border: 3px solid var(--green-700); border-radius: 16px; background: #111; box-shadow: 4px 5px 0 rgba(36, 77, 36, .14); }
.is-portrait .karate-video-media { aspect-ratio: 9 / 16; }
.karate-video-media iframe, .karate-video-poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karate-video-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.karate-video-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; padding-left: 2px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; background: rgba(12, 25, 17, .82); color: #fff; font: 18px/1 Arial, sans-serif; }
.karate-video-poster:hover .karate-video-play { background: var(--green-700); }
.karate-videos-viewport:focus-visible, .karate-comparison-videos:focus-visible, .karate-video-external:focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; border-radius: 12px; }
.karate-video-poster:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.karate-video-external { display: block; width: fit-content; margin: 10px auto 0; padding: 8px 4px; color: var(--green-700); font-size: .82rem; text-underline-offset: 3px; }

.karate-video-group { flex: 0 0 666px; min-width: 0; }
.karate-video-group > h3 { position: sticky; left: 0; width: min(100%, 100cqw); text-align: center; }
.karate-comparison-videos { display: flex; align-items: flex-start; gap: 24px; }
.karate-comparison-videos .karate-video-slide { max-width: none; }

@media (max-width: 640px) {
    .karate-videos-viewport { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 0; overflow: visible; }
    .karate-videos-viewport > .karate-video-slide { width: 100%; max-width: none; min-width: 0; }
    .karate-videos-viewport > .karate-video-slide .karate-video-media { min-height: 0; }
    .karate-video-group { width: 100%; }
    .karate-video-group > h3 { position: static; width: auto; }
    .karate-comparison-videos { gap: 16px; padding: 0 4px 12px 0; overflow-x: scroll; overscroll-behavior-x: contain; scrollbar-width: auto; }
}

.karate-video-dialog { box-sizing: border-box; width: min(960px, calc(100% - 24px), max(320px, calc((100dvh - 174px) * 16 / 9 + 38px))); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 16px; overflow: auto; border: 3px solid var(--green-700); border-radius: 20px; background: var(--cream); color: var(--green-900); }
.karate-video-dialog::backdrop { background: rgba(12, 25, 17, .82); }
.karate-video-dialog.is-portrait { width: min(460px, calc(100% - 24px)); }
.karate-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.karate-dialog-header h3 { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.karate-dialog-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--green-700); border-radius: 50%; background: transparent; color: var(--green-900); font: 28px/1 Arial, sans-serif; cursor: pointer; }
.karate-dialog-close:focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; }
.karate-dialog-player { width: 100%; min-height: 200px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #111; }
.karate-video-dialog.is-portrait .karate-dialog-player { width: min(100%, max(200px, calc((100dvh - 190px) * 9 / 16)), 400px); aspect-ratio: 9 / 16; margin-inline: auto; }
.karate-dialog-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.karate-video-dialog .karate-video-external { margin-top: 8px; }