/* Multi-film reel — videography dossiers */
.reel-section{
    position:relative;z-index:10;background:#000;
    padding:80px 5% 100px;border-top:1px solid #1a1a1a;
}
.reel-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:20px;
    max-width:1100px;margin:0 auto 36px;flex-wrap:wrap;
}
.reel-kicker{
    font-family:var(--font-mono);font-size:0.72rem;font-weight:700;
    letter-spacing:5px;text-transform:uppercase;color:#666;margin:0;
}
.reel-count-label{
    font-family:var(--font-mono);font-size:0.65rem;font-weight:700;
    letter-spacing:3px;text-transform:uppercase;color:var(--brand-red);margin:0;
}

.reel-empty{
    max-width:1100px;margin:0 auto;min-height:280px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    text-align:center;border:1px solid #1a1a1a;border-radius:10px;
    background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
}
.reel-empty[hidden],.reel-stage[hidden]{display:none!important;}
.reel-empty-kicker{
    font-family:var(--font-mono);font-size:0.65rem;letter-spacing:4px;
    text-transform:uppercase;color:var(--brand-red);margin:0;
}
.reel-empty-title{
    font-family:var(--font-head);font-size:clamp(1.4rem,3vw,2rem);font-weight:900;
    text-transform:uppercase;letter-spacing:-1px;margin:0;
}
.reel-empty-sub{margin:0;color:#666;font-size:0.95rem;font-weight:300;max-width:34ch;line-height:1.6;}

.reel-stage{max-width:1100px;margin:0 auto;}
.reel-now{
    display:flex;align-items:center;gap:14px;margin-bottom:18px;
    font-family:var(--font-mono);font-size:0.68rem;letter-spacing:3px;text-transform:uppercase;color:#777;
}
.reel-now strong{color:#fff;font-weight:700;}
.reel-now .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-red);flex-shrink:0;}

.reel-player-wrap{
    position:relative;width:100%;border-radius:10px;overflow:hidden;
    border:1px solid #1a1a1a;background:#050505;
    box-shadow:0 28px 70px rgba(0,0,0,0.65);
}
.reel-player-wrap video{
    display:block;width:100%;max-height:72vh;background:#000;aspect-ratio:16/9;object-fit:contain;
}

.reel-rail{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:12px;margin-top:22px;
}
.reel-rail[data-count="1"]{display:none;}

.reel-clip{
    position:relative;display:block;width:100%;padding:0;border:1px solid #1a1a1a;
    border-radius:8px;overflow:hidden;background:#0a0a0a;cursor:pointer;
    text-align:left;color:inherit;font:inherit;
    transition:border-color 0.35s ease,transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.reel-clip:hover{border-color:rgba(230,32,32,0.45);transform:translateY(-3px);}
.reel-clip.is-active{border-color:var(--brand-red);box-shadow:0 0 0 1px rgba(230,32,32,0.35);}

.reel-thumb{
    position:relative;aspect-ratio:16/9;background:#111;overflow:hidden;
}
.reel-thumb img,.reel-thumb video{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:brightness(0.85);transition:filter 0.35s ease,transform 0.5s ease;
}
.reel-clip:hover .reel-thumb img,.reel-clip:hover .reel-thumb video,
.reel-clip.is-active .reel-thumb img,.reel-clip.is-active .reel-thumb video{
    filter:brightness(1);transform:scale(1.04);
}
.reel-thumb::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,transparent 55%);
    pointer-events:none;
}
.reel-play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);
    background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);z-index:2;pointer-events:none;
}
.reel-play::before{
    content:'';position:absolute;left:16px;top:13px;
    border-style:solid;border-width:8px 0 8px 14px;
    border-color:transparent transparent transparent #fff;
}
.reel-clip.is-active .reel-play{border-color:var(--brand-red);background:rgba(230,32,32,0.85);}
.reel-clip.is-active .reel-play::before{border-color:transparent transparent transparent #fff;}

.reel-clip-meta{
    position:absolute;left:12px;right:12px;bottom:10px;z-index:2;
    display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.reel-clip-idx{
    font-family:var(--font-mono);font-size:0.58rem;font-weight:700;
    letter-spacing:2px;text-transform:uppercase;color:#fff;
}
.reel-clip-label{
    font-family:var(--font-mono);font-size:0.58rem;letter-spacing:1px;
    text-transform:uppercase;color:rgba(255,255,255,0.55);
}

@media (max-width:700px){
    .reel-section{padding:56px 4vw 72px;}
    .reel-rail{grid-template-columns:repeat(2,1fr);gap:8px;}
}
@media (max-width:420px){
    .reel-rail{grid-template-columns:1fr;}
}

/* Light theme */
[data-theme="light"] .reel-section{
    background:
        radial-gradient(ellipse 50% 35% at 0% 0%, rgba(230,32,32,0.06) 0%, transparent 55%),
        var(--bg-color, #f7f7f7);
    border-top-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .reel-kicker{ color: var(--text-muted, #5a5a5a); }
[data-theme="light"] .reel-empty{
    border-color: rgba(0,0,0,0.1);
    background: linear-gradient(180deg, rgba(230,32,32,0.04), #fff);
    box-shadow: 0 16px 40px rgba(0,0,0,0.06);
}
[data-theme="light"] .reel-empty-title{ color: var(--text-color, #0a0a0a); }
[data-theme="light"] .reel-empty-sub{ color: var(--text-muted, #5a5a5a); }
[data-theme="light"] .reel-now{ color: var(--text-muted, #5a5a5a); }
[data-theme="light"] .reel-now strong{ color: var(--text-color, #0a0a0a); }
[data-theme="light"] .reel-player-wrap{
    border-color: rgba(0,0,0,0.1);
    background: #111;
    box-shadow: 0 24px 50px rgba(0,0,0,0.12);
}
[data-theme="light"] .reel-clip{
    border-color: rgba(0,0,0,0.1);
    background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
[data-theme="light"] .reel-clip:hover{
    border-color: rgba(230,32,32,0.4);
}
[data-theme="light"] .reel-thumb{ background: #e8e8e8; }