/* Longnook-aligned video showcase */
.video-showcase-container {
    --vs-navy: #09093b; --vs-ink: #36454f; --vs-slate: #516472;
    --vs-paper: #fff; --vs-cream: #fff; --vs-white: #fff;
    --vs-line: rgba(81, 100, 114, .24);
    max-width: 1140px; margin: 0 auto; padding: 0; color: var(--vs-ink);
    background: var(--vs-white);
    font-family: "Inter", Arial, sans-serif;
}
.video-showcase-container *, .video-showcase-container *::before,
.video-showcase-container *::after { box-sizing: border-box; }
.video-showcase-grid {
    display: grid; grid-template-columns: minmax(270px, 34%) minmax(0, 1fr);
    min-height: 560px; overflow: hidden; background: var(--vs-white);
    border: 1px solid var(--vs-line);
}
.video-showcase-list {
    display: flex; flex-direction: column; height: 560px; max-height: 560px;
    overflow-x: hidden; overflow-y: auto; background: var(--vs-paper);
    border-right: 1px solid var(--vs-line);
    scrollbar-color: var(--vs-slate) var(--vs-paper); scrollbar-width: thin;
}
.video-showcase-list::-webkit-scrollbar { width: 6px; }
.video-showcase-list::-webkit-scrollbar-track { background: var(--vs-paper); }
.video-showcase-list::-webkit-scrollbar-thumb { background: var(--vs-slate); }
.video-showcase-item {
    position: relative; flex: 0 0 auto; padding: 28px 30px 26px; overflow: hidden;
    cursor: pointer; background: transparent; border: 0;
    border-bottom: 1px solid var(--vs-line);
    transition: background-color 180ms ease, color 180ms ease;
}
.video-showcase-item::before {
    position: absolute; inset: 0 auto 0 0; width: 4px; content: "";
    background: var(--vs-navy); transform: scaleY(0); transform-origin: bottom;
    transition: transform 180ms ease;
}
.video-showcase-item:hover { color: var(--vs-white); background: var(--vs-navy); }
.video-showcase-item:hover::before,
.video-showcase-item.active::before { transform: scaleY(1); }
.video-showcase-item.active { color: var(--vs-ink); background: var(--vs-white); }
.video-title {
    margin: 0 0 18px; color: inherit;
    font-family: "Inter", Arial, sans-serif;
    font-size: 19px; font-weight: 600; line-height: 1.35;
    letter-spacing: -.015em;
}
.video-button {
    display: inline-flex; align-items: center; gap: 10px; min-height: auto;
    padding: 10px 14px; color: var(--vs-white) !important; font-family: "Inter", Arial, sans-serif;
    font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .14em;
    text-transform: uppercase; cursor: pointer; background: #111827 !important;
    border: 0 !important; border-radius: 0; box-shadow: none !important;
    transition: color 180ms ease;
}
.video-button::after {
    content: "\2192"; font-size: 17px; font-weight: 400; line-height: 0;
    transition: transform 180ms ease;
}
.video-showcase-item:hover .video-button::after { transform: translateX(4px); }
.video-showcase-item:hover .video-button {
    color: var(--vs-white) !important;
    background: #1f2937 !important;
}
.video-showcase-item.active .video-button { color: var(--vs-white) !important; }
.video-button:hover, .video-button:focus, .video-button:active {
    color: var(--vs-white) !important; background: #1f2937 !important;
    outline: none !important;
}
.video-showcase-item.active .video-button:hover,
.video-showcase-item.active .video-button:focus {
    color: var(--vs-white) !important; background: #1f2937 !important;
}
.video-button:focus-visible { outline: 2px solid currentColor !important; outline-offset: 5px !important; }
.video-showcase-player {
    position: relative; width: 100%; min-width: 0; height: 560px;
    padding: 0; background: var(--vs-navy);
}
.video-player-container {
    position: relative; display: block; width: 100%; height: 100%;
    overflow: hidden; background: #000;
}
.video-player-container iframe {
    z-index: 1; display: block; width: 100%; height: 100%;
    min-height: 100%; border: 0;
}
.video-player-container .no-video, .video-player-container .invalid-video {
    position: absolute; top: 50%; left: 50%; margin: 0; color: var(--vs-white);
    font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px;
    text-align: center; transform: translate(-50%, -50%);
}
.video-player-container.loading::before {
    position: absolute; z-index: 10; inset: 0; display: grid; place-items: center;
    content: "Loading video\2026"; color: var(--vs-white); font-size: 12px;
    font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    pointer-events: none; background: rgba(9, 9, 59, .88);
}
.video-player-container .error { margin: 0; padding: 30px; color: #fff; text-align: center; }
.video-showcase-container.full-width { max-width: 100%; }
.video-showcase-container.full-width .video-showcase-grid { min-height: 100vh; }
@media (max-width: 968px) {
    .video-showcase-grid { grid-template-columns: 1fr; }
    .video-showcase-list {
        display: grid; grid-auto-columns: minmax(245px, 42%); grid-auto-flow: column;
        width: 100%; height: auto; max-height: none; overflow-x: auto; overflow-y: hidden;
        border-right: 0; border-bottom: 1px solid var(--vs-line);
    }
    .video-showcase-item {
        min-height: 152px; border-right: 1px solid var(--vs-line); border-bottom: 0;
    }
    .video-showcase-player { height: min(62vw, 520px); min-height: 400px; }
}
@media (max-width: 600px) {
    .video-showcase-grid { border-right: 0; border-left: 0; }
    .video-showcase-list { grid-auto-columns: 82%; }
    .video-showcase-item { min-height: 132px; padding: 22px 24px 20px; }
    .video-title { margin-bottom: 14px; font-size: 19px; }
    .video-showcase-player { height: 62vw; min-height: 250px; padding: 0; }
    .video-player-container, .video-player-container iframe { min-height: 234px; }
}
@media (prefers-reduced-motion: reduce) {
    .video-showcase-item, .video-showcase-item::before, .video-button::after { transition: none; }
}