/* =====================================================================
   Video Reels — carousel + lightbox
   File: 06-reels.css
   ===================================================================== */

/* ================= REEL CAROUSEL ================= */
.reel-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;}
.reel-nav{display:flex; gap:10px;}
.reel-viewport{overflow:hidden; margin-top:46px; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);}
.reel-viewport.dragging{cursor:grabbing;}
.reel-track{display:flex; gap:22px; width:max-content; will-change:transform;}
.reel-card{width:260px; flex-shrink:0; border-radius:18px; overflow:hidden; position:relative; aspect-ratio:9/16; background:var(--card); border:1px solid var(--line); user-select:none; transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s;}
.reel-card[data-video]:not([data-video=""]){cursor:pointer;}
.reel-card img{width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none;}
.reel-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,5,5,.05) 40%, rgba(5,5,5,.9) 100%);}
.reel-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:2; transition:transform .4s ease, background .4s ease;}
.reel-card:hover .reel-play{transform:translate(-50%,-50%) scale(1.12); background:var(--orange); border-color:transparent;}
.reel-info{position:absolute; left:16px; right:16px; bottom:16px; z-index:2;}
.reel-cat{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); font-weight:700;}
.reel-title{font-size:15.5px; font-weight:600; margin-top:5px; line-height:1.3; font-family:var(--font-heading);}
.reel-dur{position:absolute; top:14px; right:14px; z-index:2; font-size:10.5px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2); padding:4px 9px; border-radius:100px;}
.reel-card:hover{transform:translateY(-6px); border-color:rgba(252,110,32,.4);}

/* lightbox for reel video playback */
.lightbox-overlay{position:fixed; inset:0; background:rgba(4,3,3,.92); backdrop-filter:blur(8px); z-index:3000; display:flex; align-items:center; justify-content:center; padding:40px;}
.lightbox-content{position:relative; max-width:920px; width:100%;}
.lightbox-content video{width:100%; max-height:82vh; border-radius:12px; background:#000; display:block;}
.lightbox-content iframe{width:100%; aspect-ratio:16/9; border-radius:12px; background:#000; display:block; border:none;}
.lightbox-close{position:absolute; top:-48px; right:0; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-size:18px; line-height:1;}