/* filmnab-category-reels.css */

:root {
    --fn-reels-viewport-width: 100vw;
    --fn-reels-viewport-width: 100dvw;
    --fn-reels-viewport-height: 100vh;
    --fn-reels-viewport-height: 100svh;
    --fn-reels-viewport-height: 100dvh;
}

html.fn-category-reels-root,
html.fn-category-reels-root body.fn-category-reels-body {
    width: var(--fn-reels-viewport-width);
    min-width: var(--fn-reels-viewport-width);
    max-width: var(--fn-reels-viewport-width);
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    font-family: var(--fn-font-sans, "IRANSans", system-ui, -apple-system, sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.fn-app.fn-category-reels-body {
    position: fixed;
    inset: 0;
    display: block;
    min-height: 0;
    width: var(--fn-reels-viewport-width);
    min-width: var(--fn-reels-viewport-width);
    max-width: var(--fn-reels-viewport-width);
    height: var(--fn-reels-viewport-height);
    min-height: var(--fn-reels-viewport-height);
    max-height: var(--fn-reels-viewport-height);
    background: #000;
    color: var(--fn-text-primary, #f3f4f6);
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--fn-font-sans, "IRANSans", system-ui, -apple-system, sans-serif);
}

.fn-category-reels-shell {
    position: fixed;
    inset: 0;
    width: var(--fn-reels-viewport-width);
    min-width: var(--fn-reels-viewport-width);
    max-width: var(--fn-reels-viewport-width);
    height: var(--fn-reels-viewport-height);
    min-height: var(--fn-reels-viewport-height);
    max-height: var(--fn-reels-viewport-height);
    overflow: hidden;
    background: #000;
}

/* Header overlay — minimal close button */
.fn-category-reels-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding:
        max(clamp(0.75rem, 3vw, 1.25rem), env(safe-area-inset-top, 0px))
        max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-right, 0px))
        clamp(0.5rem, 2vw, 0.75rem)
        max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-left, 0px));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    pointer-events: none;
}

.fn-category-reels-close {
    pointer-events: auto;
}

/* Vertical Snap Scroll Container */
body.fn-app.fn-category-reels-body main.fn-category-reels-list,
.fn-category-reels-list {
    position: fixed;
    inset: 0;
    display: block;
    flex: none;
    /*
     * scroll-snap is used ONLY for touch (mobile native swipe).
     * wheel and keyboard are handled entirely in JS with instant jumps,
     * so there is no animation conflict with snap.
     */
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
    overflow-y: scroll;
    height: var(--fn-reels-viewport-height);
    min-height: var(--fn-reels-viewport-height);
    width: var(--fn-reels-viewport-width);
    min-width: var(--fn-reels-viewport-width);
    max-width: var(--fn-reels-viewport-width);
    margin: 0;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    outline: none;
}

.fn-category-reels-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Individual Reel Card — one full viewport per item */
.fn-category-reels-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: var(--fn-reels-viewport-height);
    min-height: var(--fn-reels-viewport-height);
    width: var(--fn-reels-viewport-width);
    min-width: var(--fn-reels-viewport-width);
    max-width: var(--fn-reels-viewport-width);
    position: relative;
    background: #000;
    overflow: hidden;
    outline: none;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

/* Full-bleed reel surface (all breakpoints) */
.fn-reel-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

/* Media/Video styles */
.fn-category-reels-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

/*
 * Blurred backdrop — full card on desktop; hidden on mobile full-bleed.
 */
.fn-reels-backdrop {
    display: none;
    pointer-events: none;
}

/* Foreground poster — cover for Instagram-style full bleed */
body.fn-app.fn-category-reels-body .fn-category-reels-poster,
.fn-category-reels-poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* On narrow/portrait viewports (phone) the poster already fills the screen
   well enough with contain; no change needed. */

/* Video keeps cover — teaser clips are usually already 9:16 */
body.fn-app.fn-category-reels-body .fn-category-reels-video,
.fn-category-reels-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fn-category-reels-card.is-playing .fn-category-reels-video {
    opacity: 1;
}

/* Visual Gradients */
.fn-reel-gradient-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.fn-reel-gradient-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* Info panel — caption block from shared reels styles */
.fn-category-reels-shell .fn-reel-info-panel {
    position: absolute;
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    inset-inline-start: max(16px, env(safe-area-inset-left, 0px));
    inset-inline-end: max(5.75rem, calc(env(safe-area-inset-right, 0px) + 5rem));
    z-index: 5;
    max-width: min(480px, calc(100% - 7.5rem));
    pointer-events: none;
    padding-inline-end: 0.25rem;
}

.fn-category-reels-shell .fn-reel-info-panel > * {
    pointer-events: auto;
}

.fn-category-reels-shell .fn-reel-caption-header {
    gap: 0.75rem;
}

.fn-category-reels-shell .fn-reel-caption-cta {
    padding: 0.65rem 1.35rem;
    font-size: 1rem;
    margin-inline-end: 1.25rem;
}

.fn-category-reels-shell .fn-reel-caption-avatar {
    width: 3rem;
    height: 3rem;
}

.fn-category-reels-shell .fn-reel-action-rail {
    z-index: 6;
}

.fn-category-reels-shell .fn-reel-action-rail-buttons {
    gap: 1.5rem;
    bottom: max(150px, calc(env(safe-area-inset-bottom, 0px) + 128px));
    inset-inline-end: max(12px, env(safe-area-inset-right, 0px));
}

.fn-category-reels-shell .fn-reels-viewer-mute {
    position: absolute;
    top: max(4.5rem, calc(env(safe-area-inset-top, 0px) + 3.5rem));
    inset-inline-end: max(1rem, env(safe-area-inset-right, 0px));
    z-index: 6;
}

.fn-category-reels-card.is-playing .fn-reels-viewer-mute {
    display: inline-flex;
}

.fn-category-reels-card.is-playing .fn-reels-viewer-progress {
    display: block;
}

.fn-category-reels-shell .fn-reels-viewer-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.fn-category-reels-card.is-playing .fn-category-reels-poster {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Larger touch targets on category reels */
.fn-category-reels-shell .fn-reel-action-btn svg {
    width: 2.85rem;
    height: 2.85rem;
}

.fn-category-reels-shell .fn-reel-action-btn {
    min-width: 3.5rem;
    font-size: 0.88rem;
    gap: 0.4rem;
}

@media (max-width: 575.98px) {
    .fn-category-reels-header {
        padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
        padding-bottom: 0.75rem;
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
    }

    .fn-category-reels-shell .fn-reel-caption-cta {
        margin-inline-end: 0.75rem;
    }
}

/* Desktop — centered 9:16 reel frame like Instagram */
@media (min-width: 768px) {
    :root {
        --fn-reel-frame-width: min(480px, calc(var(--fn-reels-viewport-height) * 9 / 16), 100vw);
    }

    .fn-category-reels-card {
        background: #000;
    }

    .fn-reel-container {
        left: 50%;
        right: auto;
        width: var(--fn-reel-frame-width);
        max-width: 100%;
        transform: translateX(-50%);
        z-index: 1;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .fn-reels-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: blur(32px) brightness(0.38) saturate(1.1);
        transform: scale(1.12);
        z-index: 0;
    }

    .fn-category-reels-poster,
    .fn-category-reels-video {
        z-index: 1;
    }

    .fn-category-reels-shell .fn-reel-info-panel {
        inset-inline-start: max(20px, env(safe-area-inset-left, 0px));
        inset-inline-end: max(6.25rem, calc(env(safe-area-inset-right, 0px) + 5.5rem));
        max-width: min(400px, calc(100% - 8rem));
        bottom: max(28px, env(safe-area-inset-bottom, 0px));
    }

    .fn-category-reels-shell .fn-reel-caption-cta {
        margin-inline-end: 1.5rem;
        padding: 0.7rem 1.5rem;
        font-size: 1.05rem;
    }

    .fn-category-reels-shell .fn-reel-action-rail-buttons {
        inset-inline-end: max(14px, env(safe-area-inset-right, 0px));
        bottom: max(160px, calc(env(safe-area-inset-bottom, 0px) + 140px));
    }

    .fn-category-reels-shell .fn-reels-viewer-mute {
        inset-inline-end: max(14px, env(safe-area-inset-right, 0px));
    }

    .fn-reel-comments-panel {
        max-width: min(560px, 100%);
        margin-inline: auto;
        border-radius: 16px 16px 0 0;
    }

    .fn-category-reels-header {
        max-width: var(--fn-reel-frame-width);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
    }
}