/*
 * Movie-page "Myndbönd" (Videos) section — content pipeline Phase 1.
 * Click-to-load YouTube grid. Loaded on movie/person pages only.
 */

.kvik-videos {
    margin: 28px 0;
}
.kvik-videos__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #383d40;
    margin: 0 0 14px;
}

/* Horizontal scrolling strip: one row, swipe/scroll through — keeps the
   section compact even with 20+ videos. */
.kvik-videos__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #c7ccd0 transparent;
    -webkit-overflow-scrolling: touch;
}
.kvik-videos__grid::-webkit-scrollbar { height: 8px; }
.kvik-videos__grid::-webkit-scrollbar-thumb { background: #c7ccd0; border-radius: 4px; }
.kvik-videos__grid::-webkit-scrollbar-track { background: transparent; }

.kvik-video {
    flex: 0 0 200px;
    width: 200px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.kvik-video__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.kvik-video__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.kvik-video:hover .kvik-video__thumb img { transform: scale(1.05); }

/* Play button */
.kvik-video__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(20, 20, 20, .72);
    transition: background .15s ease, transform .15s ease;
}
.kvik-video__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
}
.kvik-video:hover .kvik-video__play { background: #f1633b; transform: scale(1.08); }

.kvik-video__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kvik-video__name {
    font-size: .85rem;
    line-height: 1.35;
    color: #383d40;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Loaded embed fills the thumb slot */
.kvik-video__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 600px) {
    .kvik-video { flex-basis: 160px; width: 160px; }
    .kvik-video__play { width: 44px; height: 44px; }
}

/* ── Modal player + playlist ────────────────────────────────────── */
.kvik-vmodal { position: fixed; inset: 0; z-index: 100000; }
.kvik-vmodal:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.kvik-vmodal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); }

.kvik-vmodal__dialog {
    position: relative;
    z-index: 1;
    display: block;               /* main column is the only in-flow child, so
                                     it — not the tall playlist — sets height */
    width: min(1100px, 94vw);
    max-height: 90vh;
    background: #16181b;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.kvik-vmodal__close {
    position: absolute; top: 6px; right: 12px; z-index: 3;
    background: none; border: 0; color: #fff; font-size: 28px; line-height: 1;
    cursor: pointer; opacity: .8;
}
.kvik-vmodal__close:hover { opacity: 1; }

.kvik-vmodal__main { width: calc(100% - 320px); display: flex; flex-direction: column; background: #000; }
.kvik-vmodal__player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.kvik-vmodal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kvik-vmodal__meta { padding: 12px 16px; background: #16181b; }
.kvik-vmodal__title { color: #fff; font-size: 1rem; margin: 0; font-weight: 700; }
.kvik-vmodal__movielink { display: inline-block; margin-top: 6px; color: #62b0ba; text-decoration: none; font-size: .85rem; font-weight: 600; }
.kvik-vmodal__movielink:hover { text-decoration: underline; }

.kvik-vmodal__side { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; overflow-y: auto; background: #1c1f23; padding: 12px; }
.kvik-vmodal__group + .kvik-vmodal__group { margin-top: 16px; }
.kvik-vmodal__grouptitle { color: #9aa4ad; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.kvik-vmodal__list { display: flex; flex-direction: column; gap: 8px; }

.kvik-vmodal__item {
    display: flex; gap: 10px; align-items: center;
    padding: 6px; border: 0; border-radius: 8px;
    background: none; color: inherit; cursor: pointer; text-align: left; width: 100%;
}
.kvik-vmodal__item:hover { background: rgba(255, 255, 255, .07); }
.kvik-vmodal__item.is-active { background: rgba(241, 99, 59, .18); }
.kvik-vmodal__item-thumb { position: relative; flex: 0 0 96px; width: 96px; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #000; }
.kvik-vmodal__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kvik-vmodal__item-play { position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent rgba(255, 255, 255, .9); }
.kvik-vmodal__item-text { min-width: 0; }
.kvik-vmodal__item-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #e8ebee; font-size: .8rem; line-height: 1.3; }
.kvik-vmodal__item-movie { display: block; color: #8a939a; font-size: .72rem; margin-top: 2px; }

@media (max-width: 760px) {
    /* Stack: player on top, playlist scrolls below within the viewport cap. */
    .kvik-vmodal__dialog { display: flex; flex-direction: column; width: 96vw; max-height: 92vh; }
    .kvik-vmodal__main { width: 100%; flex: 0 0 auto; }
    .kvik-vmodal__side { position: static; width: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}