/* reel.css: self-hosted looping video wall (social / TikTok clips).
   Muted autoplay + loop, click any clip for sound. Masonry columns keep every
   clip at its native aspect (no crop). No external player, no iframe chrome. */

/* 2026-10-21: centred rows instead of left-filled columns, so any number of
   clips (1, 2, 4, 6...) sits centred under the section; wraps responsively and
   goes single-column full-width on phones.
   2026-10-27: fixed 4-up columns on desktop (each clip = 1/4 of the row, so up
   to 4 sit side by side and only a 5th+ wraps to a new row); 2-up on tablets. */
.reel {
  --reel-gap: clamp(10px, 1.4vw, 18px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--reel-gap);
  padding-top: clamp(10px, 1.6vh, 20px);
  margin-bottom: var(--reel-gap);
}
.reel-item {
  position: relative;
  --reel-cols: 4;
  flex: 0 0 calc((100% - (var(--reel-cols) - 1) * var(--reel-gap)) / var(--reel-cols));
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.reel-item video {
  width: 100%;
  height: auto;          /* native aspect ratio, no crop */
  display: block;
}
.reel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 42%);
  pointer-events: none;
}
.reel-cap {
  position: absolute;
  left: 11px; right: 46px; bottom: 9px;
  z-index: 2;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,.65);
  pointer-events: none;
}
.reel-snd {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.42);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.reel-snd:hover { background: rgba(0,0,0,.62); }
.reel-snd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.reel-snd svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* muted by default: sound waves hidden, slash shown */
.reel-snd .wave { opacity: 0; }
.reel-snd .slash { opacity: 1; }
.reel-item.is-unmuted .reel-snd .wave { opacity: 1; }
.reel-item.is-unmuted .reel-snd .slash { opacity: 0; }

@media (max-width: 1023px) {
  .reel-item { --reel-cols: 2; }
}
@media (max-width: 560px) {
  .reel-item { --reel-cols: 1; }
}

/* reel sections span the whole project frame so their clips centre on the page */
.fo-proj > .fo-reels { grid-column: 1 / -1; }

/* 2026-10-27: click a clip to expand it (reel.js builds .rl). Full-screen player
   with sound and controls; arrows / swipe step through the page's clips. */
.reel-item video { cursor: zoom-in; }
.rl {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 24, 0.96);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.rl.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.rl-stage {
  width: 100%; height: 100%; box-sizing: border-box;
  padding: clamp(16px, 5vw, 80px);
  display: flex; align-items: center; justify-content: center;
}
.rl-vid {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 10px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.rl-btn {
  position: absolute;
  width: 52px; height: 52px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rl-btn:hover { background: rgba(255,255,255,.16); }
.rl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rl-close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.rl-prev { left: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); }
.rl-next { right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); }
.rl.is-single .rl-prev, .rl.is-single .rl-next { display: none; }
.rl-count {
  position: absolute; left: 50%; bottom: clamp(14px, 3vw, 26px); transform: translateX(-50%);
  color: rgba(255,255,255,.72); font-size: .72rem; letter-spacing: .02em;
}
body.lb-lock { overflow: hidden; }
@media (max-width: 640px) {
  .rl-btn { width: 44px; height: 44px; font-size: 17px; }
  .rl-prev { left: 6px; } .rl-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .rl { transition: none !important; } }