/* ==========================================================================
   video.css — short-form video gallery (work.video/)
   Builds on gallery.css: same cards, tabs and viewer chrome.
   ========================================================================== */

/* ---------- Grid: 4 per row on desktop, 2 on phones, cards at 4:5 ---------- */
.gallery-grid--video{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery-grid--video .gallery-frame{position:relative;aspect-ratio:4/5}
.gallery-grid--video .gallery-frame img{object-position:center}
@media (max-width:900px){.gallery-grid--video{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.gallery-grid.gallery-grid--video{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

.video-play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  background:rgba(5,35,32,.55);border:1.5px solid rgba(255,255,255,.55);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease);
}
.video-play svg{width:22px;height:22px;fill:currentColor;margin-inline-start:3px}
html[dir="rtl"] .video-play svg{margin-inline-start:0;margin-inline-end:3px;transform:none}
.video-card:hover .video-play,.video-card:focus-visible .video-play{transform:scale(1.1);background:var(--gold);border-color:var(--gold);color:#1c1606}
.video-duration{
  position:absolute;bottom:10px;inset-inline-end:10px;padding:2px 8px;border-radius:999px;
  background:rgba(0,0,0,.6);color:#fff;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em
}
.gallery-grid--video .gallery-zoom{display:none}
@media (max-width:640px){
  .video-play{width:42px;height:42px}
  .video-play svg{width:18px;height:18px}
  .video-duration{bottom:7px;inset-inline-end:7px;font-size:.7rem}
}

/* ---------- Empty state (until videos are added) ---------- */
.video-empty{display:grid;justify-items:center;gap:10px;max-width:560px;margin:8px auto 0;padding:clamp(32px,6vw,56px) 24px;text-align:center}
.video-empty-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:rgba(237,189,77,.12);color:var(--gold);margin-bottom:6px}
:root[data-theme="light"] .video-empty-icon{background:rgba(11,107,91,.1);color:var(--accent-text)}
.video-empty-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.video-empty h2{font-size:var(--fs-h3)}
.video-empty p{color:var(--text-muted)}

/* ---------- Player: video at its full 9:16 size ---------- */
.reel-stage{display:grid;place-items:center;min-height:0;padding:0 clamp(16px,8vw,104px) clamp(16px,3vw,32px)}
.reel-frame{
  position:relative;height:min(calc(100dvh - 120px),1100px);aspect-ratio:9/16;max-width:100%;
  border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5);cursor:pointer;
  transform:scale(.96);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.reel-player.is-open .reel-frame{transform:none;opacity:1}
.reel-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.reel-player.is-loading .reel-frame::after{
  content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:reelSpin .8s linear infinite
}
@keyframes reelSpin{to{transform:rotate(360deg)}}

/* Big play icon while paused */
.reel-state{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .2s var(--ease);pointer-events:none
}
.reel-state svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
.reel-player.is-paused:not(.is-loading) .reel-state{opacity:1}

/* Bottom controls: mute button in the bottom-left corner, progress bar */
.reel-controls{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;direction:ltr;
  padding:28px 14px 14px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);cursor:default
}
.reel-mute{
  width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)
}
.reel-mute:hover{border-color:var(--gold);color:var(--gold)}
.reel-mute:focus-visible{border-radius:50%;box-shadow:0 0 0 3px rgba(237,189,77,.7)}
.reel-mute svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reel-mute .icon-muted{display:none}
.reel-player.is-muted .reel-mute .icon-sound{display:none}
.reel-player.is-muted .reel-mute .icon-muted{display:block}

.reel-progress{
  --p:0%;flex:1;height:18px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none
}
.reel-progress::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--p),rgba(255,255,255,.3) var(--p))}
.reel-progress::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.3)}
.reel-progress::-moz-range-progress{height:4px;border-radius:4px;background:var(--gold)}
.reel-progress::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 3px rgba(237,189,77,.5)}
.reel-progress::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0}
.reel-progress:focus-visible{outline:none}
.reel-progress:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(237,189,77,.8)}

@media (max-width:640px){
  .reel-stage{padding:0 8px 88px}
  .reel-frame{height:auto;width:min(100%,calc((100dvh - 180px) * 9 / 16));border-radius:12px}
}