/**
 * Card Detail Video — Video-Era Layout
 *
 * Architecture:
 *   BASE LAYER — Single-column: header, carousel, text (scrollable).
 *   VIDEO DRAWER — Sliding overlay from left, edge-to-edge within modal.
 *   ACTION BAR — Sticky bottom bar for download/credit actions.
 *
 * Modal padding is removed in video-era mode. Padding moves to content
 * children so the drawer can fill from the modal edges without clipping.
 *
 * All values reference design tokens from tokens.css.
 */

/* ==========================================================================
   1. Modal — no padding (moved to content), height from video
   ========================================================================== */

.card-detail--video-era {
    --video-h: 640px;
    --video-pad-top: calc(var(--video-h) / 16);    /* X = 40px */
    --video-pad-bottom: calc(var(--video-h) / 8);   /* 2X = 80px */
    --modal-pad: var(--space-8, 32px);

    max-width: 620px;
    width: 92vw;
    position: relative;
    overflow: clip;
    padding: 0;
    max-height: calc(var(--video-pad-top) + var(--video-h) + var(--video-pad-bottom));
}

/* Close button needs its own positioning since modal padding is gone */
.card-detail--video-era .modal-close {
    top: var(--space-3);
    right: var(--space-3);
    z-index: var(--z-modal-above, 1100);
}

/* ==========================================================================
   2. Base layer — single column, padding on content (not modal)
   ========================================================================== */

.card-detail--video-era .card-detail-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--modal-pad);
    margin-bottom: 0;
    overflow: hidden auto;
    max-height: calc(var(--video-pad-top) + var(--video-h) + var(--video-pad-bottom));
}

/* Header first */
.card-detail--video-era .card-detail-header {
    order: 1;
    margin-bottom: var(--space-4);
}

/* Hide month/status meta — only theme is useful (future: investigate catalog-wide) */
.card-detail--video-era .card-meta {
    display: none;
}

/* Carousel prominent — constrain preview images to 512px max */
.card-detail--video-era .card-detail-carousel-panel {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    max-width: 540px;
    align-self: center;
    width: 100%;
}

.card-detail--video-era .carousel-main-image img {
    max-width: 512px;
    width: 100%;
    height: auto;
}

/* Info (text) below carousel */
.card-detail--video-era .card-detail-info {
    order: 3;
    display: contents;
}

.card-detail--video-era .card-text-section {
    order: 4;
    margin-bottom: var(--space-4);
}

.card-detail--video-era .status-notice-banner {
    order: 5;
}

/* Action section — sticky bottom bar */
.card-detail--video-era .card-action-section {
    order: 6;
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky, 100);
    background-color: var(--color-cream);
    padding: var(--space-4) var(--modal-pad);
    border-top: 1px solid var(--color-cream-dark, #e8e0d0);
    margin: 0 calc(-1 * var(--modal-pad));
}

/* Hide "Or see pricing" link — redundant with button */
.card-detail--video-era .anonymous-secondary-link {
    display: none;
}

/* Image peek not used */
.card-detail--video-era .card-detail-image-peek {
    display: none;
}

/* ==========================================================================
   3. Video drawer — edge-to-edge overlay from the left
   Direct child of modal (not content), so top/left/bottom = modal edges.
   ========================================================================== */

.card-detail--video-era .card-detail-slider {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 90%;
    z-index: var(--z-dropdown, 200);
    background: var(--color-cream-100, #f5f0e8);
    border-radius: 0;
    box-shadow: 4px 0 16px rgb(0 0 0 / 10%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
    will-change: transform;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--video-pad-top);
    overflow: visible;
}

/* Retracted: slide fully left, only nubbin visible */
.card-detail--video-era .card-detail-slider.is-retracted {
    transform: translateX(-100%);
}

/* ==========================================================================
   4. Video container — 9:16 portrait
   ========================================================================== */

.card-detail-video {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 360px;
    background: var(--color-gray-900);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

.card-detail-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-detail-video .video-player {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ==========================================================================
   5. Video placeholder / poster
   ========================================================================== */

.card-detail-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-900);
}

.card-detail-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   6. Preview label below video
   ========================================================================== */

.video-preview-label {
    margin-top: var(--space-3);
    font-size: var(--text-xs, 12px);
    color: var(--color-gray-500);
    text-align: center;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   7. Video controls bar (play/pause + mute)
   ========================================================================== */

.video-player__controls {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    gap: 6px;
    z-index: var(--z-base);
}

.video-player__play-btn,
.video-player__mute-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgb(0 0 0 / 60%);
    color: var(--color-cream);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
    padding: 0;
    line-height: 1;
}

.video-player__play-btn:hover,
.video-player__mute-btn:hover {
    background: rgb(0 0 0 / 80%);
}

/* 7b. Keyboard focus indicators (WCAG 2.1.1 / 2.4.7) */

.video-player__play-btn:focus-visible,
.video-player__mute-btn:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 2px;
    background: rgb(0 0 0 / 80%);
}

.video-player__play-btn svg,
.video-player__mute-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==========================================================================
   8. Play prompt overlay
   ========================================================================== */

.video-player__play-prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-base);
    transition: opacity var(--transition-base);
    border-radius: var(--radius-full);
}

.video-player__play-prompt:hover {
    opacity: 0.85;
}

.video-player__play-prompt:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 4px;
    border-radius: var(--radius-full);
}

.video-player__play-prompt svg {
    display: block;
}

/* ==========================================================================
   9. Nubbin — drawer handle
   Vertically centered on the video: pad-top + (video-h / 2) - half nubbin.
   ========================================================================== */

.card-detail--video-era .slider-tab {
    position: absolute;
    right: -36px;
    top: calc(var(--video-pad-top) + var(--video-h) / 2 - 44px);
    transform: none;
    width: 36px;
    height: 88px;
    background: var(--color-burgundy, #7a2332);
    border: none;
    border-radius: 0 var(--radius-lg, 12px) var(--radius-lg, 12px) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white, #fff);
    z-index: 3;
    transition: background 0.4s ease, color 0.4s ease;
    padding: 0;
    box-shadow: 4px 0 8px rgb(0 0 0 / 8%);
}

.card-detail--video-era .slider-tab:hover {
    background: var(--color-burgundy-dark, #5e1a27);
}

.card-detail--video-era .slider-tab svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s ease;
}

/* Retracted: burgundy nubbin, white arrow, flipped */
.card-detail--video-era .card-detail-slider.is-retracted .slider-tab {
    background: var(--color-burgundy, #7a2332);
    color: var(--color-white, #fff);
    box-shadow: 4px 0 12px rgb(0 0 0 / 20%);
}

.card-detail--video-era .card-detail-slider.is-retracted .slider-tab:hover {
    background: var(--color-burgundy-dark, #5e1a27);
}

.card-detail--video-era .card-detail-slider.is-retracted .slider-tab svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   10. State visibility
   ========================================================================== */

.card-action-section [data-state] {
    display: none;
}

.card-action-section[data-access-state="anonymous"] [data-state="anonymous"],
.card-action-section[data-access-state="images"]    [data-state="images"],
.card-action-section[data-access-state="video"]     [data-state="video"] {
    display: block;
}

/* ==========================================================================
   11. Anonymous CTA styling
   ========================================================================== */

.anonymous-pitch {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-base);
    color: var(--color-ink);
    line-height: var(--line-height-base);
}

.btn-anonymous-primary {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   12. Mobile — drawer inline, action bar fixed
   ========================================================================== */

@media (width <= 768px) {
    /* Overlay fix: align-items:center clips the top of tall modals.
       flex-start + margin:auto centers short modals, scrolls tall ones. */
    .modal-overlay:has(.card-detail--video-era) {
        align-items: flex-start;
    }

    /* Two-class selector beats responsive.css .card-detail (0,1,0 → 0,2,0).
       Let the overlay scroll the entire modal — no internal scroll. */
    .modal-content.card-detail--video-era {
        margin: auto;
        max-height: none;
        overflow: visible;
        padding: var(--space-4);
        padding-bottom: var(--space-4);
        background-color: var(--color-cream);
    }

    /* Close button: absolute within modal (position:fixed breaks inside
       transform ancestors from modal animation) */
    .card-detail--video-era .modal-close {
        position: absolute;
        top: var(--space-2);
        right: var(--space-2);
        z-index: var(--z-modal-above, 1100);
    }

    .card-detail--video-era .card-detail-slider {
        position: relative;
        width: 100%;
        height: auto;
        transform: none;
        box-shadow: none;
        order: 1;
        padding-top: var(--space-4);
        top: auto;
        left: auto;
        bottom: auto;
    }

    .card-detail--video-era .card-detail-content {
        order: 2;
        max-height: none;
        overflow-y: visible;
    }

    .card-detail--video-era .slider-tab {
        display: none;
    }

    .card-detail--video-era .card-detail-header {
        order: 1;
    }

    .card-detail--video-era .card-detail-carousel-panel {
        order: 2;
    }

    .card-detail--video-era .card-text-section {
        order: 3;
    }

    /* Action section: inline within flow, not fixed to viewport */
    .card-detail--video-era .card-action-section {
        order: 4;
        position: static;
        background-color: var(--color-cream);
        padding: var(--space-4) 0;
        margin: 0;
        border-top: 1px solid var(--color-cream-dark, #e8e0d0);
    }

    /* Compact download buttons on mobile */
    .card-detail--video-era .btn-download-all {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm, 14px);
    }

    .card-detail--video-era .status-notice-banner {
        order: 5;
    }

    .card-detail-video {
        max-width: 100%;
        border-radius: var(--radius-sm);
    }
}