/* ============================================================================
   BCM — PROJECTS page: before/after slider · mosaic gallery · lightbox
   (Loaded only on projects.html, on top of tokens/base/components.)
   ============================================================================ */

/* ============================================================
   BEFORE / AFTER SLIDER (drag · touch · keyboard)
   ============================================================ */
.ba{
  --pos:6%;
  position:relative; width:100%; max-width:1000px; margin:0 auto;
  aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  box-shadow:var(--bcm-shadow-lg); background:var(--bcm-soft);
  touch-action:pan-y; user-select:none;
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
/* BEFORE is the full base (old court); drag the handle left->right to wipe in the AFTER (new court) from the left */
.ba-before{ z-index:1; }
.ba-after{ z-index:2; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
/* range input drives --pos; invisible but fully interactive (mouse/touch/keyboard) */
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  z-index:4; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;
}
.ba-range:focus-visible + .ba-ui .ba-knob{ outline:3px solid var(--bcm-blue); outline-offset:3px; }
.ba-ui{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.ba-line{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 12px rgba(0,0,0,.35); }
.ba-knob{
  position:absolute; top:50%; left:var(--pos); transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:0 6px 18px rgba(15,27,61,.35);
  display:grid; place-items:center; color:var(--bcm-blue); font-size:16px; font-weight:700;
}
.ba-knob::before{ content:"‹ ›"; letter-spacing:-2px; }
.ba-tag{
  position:absolute; bottom:16px; z-index:3; padding:7.2px 16.8px; border-radius:999px;
  font-family:var(--font-sans); font-size:14.4px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(15,27,61,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transform-origin:center bottom;
  transition:opacity .18s var(--ease-out), transform .18s var(--ease-out), background-color .18s var(--ease-out);
}
/* Labels: Before on the left, After on the right (per request); enlarged ~20% */
.ba-tag.before{ left:16px; } .ba-tag.after{ right:16px; }
/* whichever image fills most of the frame gets the brand-blue highlight (set via JS) */
.ba-tag.is-active{ background:var(--bcm-blue); }
/* one-time drag hint (hidden after first interaction) */
.ba-hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:3;
  padding:7px 16px; border-radius:999px; background:rgba(255,255,255,.92);
  font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--bcm-ink);
  box-shadow:var(--bcm-shadow-md); transition:opacity .3s var(--ease-out); pointer-events:none;
}
.ba.touched .ba-hint{ opacity:0; }
/* Mobile: move the drag hint to the top so it never overlaps the BEFORE/AFTER tags at the bottom */
@media (max-width:560px){
  .ba-hint{ top:16px; bottom:auto; }
}

/* ============================================================
   BEFORE / AFTER SIDE-BY-SIDE (homepage; replaced the drag slider 2026-07)
   The slider styles above remain for projects.html.
   ============================================================ */
.ba-sbs{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  width:100%; max-width:1000px; margin:0 auto;
}
.ba-sbs figure{ position:relative; margin:0; border-radius:12px; overflow:hidden; box-shadow:var(--bcm-shadow-lg); background:var(--bcm-soft); }
.ba-sbs img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5; }
.ba-sbs figcaption{
  position:absolute; bottom:16px; left:16px; padding:7.2px 16.8px; border-radius:999px;
  font-family:var(--font-sans); font-size:14.4px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(15,27,61,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.ba-sbs figure.after figcaption{ left:auto; right:16px; background:var(--bcm-blue); }
/* Mobile: stack the pair inside a soft card (border + tint) so the before/after set
   reads as one enclosed unit, clearly separate from the gallery below. */
@media (max-width:700px){
  .ba-sbs{ grid-template-columns:1fr; gap:12px; background:var(--bcm-soft); border:1px solid var(--bcm-hairline); border-radius:16px; padding:12px; }
  .ba-sbs img{ aspect-ratio:4/3; }
}

/* ============================================================
   CASE-STUDY MEDIA ROW (the one real project, genuine media)
   ============================================================ */
.case-media{ display:grid; grid-template-columns:2fr 1fr; gap:var(--s-2); margin-top:var(--s-4); }
.case-media .m{ position:relative; overflow:hidden; border-radius:10px; aspect-ratio:4/3; background:var(--bcm-soft); }
.case-media .m.tall{ aspect-ratio:auto; grid-row:span 2; }
.case-media .m img,.case-media .m video{ width:100%; height:100%; object-fit:cover; }
@media (max-width:991px){ .case-media{ grid-template-columns:1fr; } .case-media .m.tall{ grid-row:auto; aspect-ratio:4/3; } }

/* ============================================================
   GALLERY — filters + edge-to-edge mosaic + tiles
   ============================================================ */
.gallery-filters{ display:flex; gap:var(--s-2); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s-5); }
.filter-btn{
  padding:9px 20px; border-radius:999px; border:1px solid var(--bcm-hairline); background:var(--bcm-white);
  font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--bcm-gray); cursor:pointer;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.filter-btn:hover{ border-color:var(--bcm-blue); color:var(--bcm-blue); }
.filter-btn.active{ background:var(--bcm-blue); color:#fff; border-color:var(--bcm-blue); }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tile{
  position:relative; overflow:hidden; aspect-ratio:4/3; cursor:pointer; background:var(--bcm-soft);
  border-radius:6px;
}
.tile.feature{ grid-column:span 2; grid-row:span 2; }
.tile img,.tile video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
.tile:hover img,.tile:hover video{ transform:scale(1.05); }
.tile-cap{
  position:absolute; left:0; right:0; bottom:0; padding:18px 16px 14px;
  background:linear-gradient(transparent, rgba(15,27,61,.78));
  color:#fff; opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.tile:hover .tile-cap,.tile:focus-visible .tile-cap{ opacity:1; transform:none; }
.tile-cap .t{ font-family:var(--font-display); font-size:18px; display:block; }
.tile-cap .c{ font-family:var(--font-sans); font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.8); }
.tile .play{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--bcm-blue); display:grid; place-items:center; font-size:12px; }
.gallery-empty{ text-align:center; padding:var(--s-6) var(--gutter); color:var(--bcm-gray); }
.gallery-empty .eyebrow{ margin-bottom:var(--s-2); }

@media (max-width:991px){
  .gallery{ grid-template-columns:1fr 1fr; }
  .tile.feature{ grid-column:span 2; grid-row:auto; aspect-ratio:16/10; }
}
@media (max-width:560px){ .gallery{ grid-template-columns:1fr; } .tile.feature{ grid-column:auto; } }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(15,27,61,.94);
  display:none; align-items:center; justify-content:center; padding:6vh 6vw; }
.lightbox.open{ display:flex; }
.lightbox figure{ margin:0; text-align:center; max-width:100%; }
.lightbox img{ max-width:100%; max-height:84vh; object-fit:contain; border-radius:8px; box-shadow:var(--bcm-shadow-lg); }
.lightbox figcaption{ color:rgba(255,255,255,.85); font-family:var(--font-sans); font-size:14px; margin-top:var(--s-2); }
.lightbox-close,.lightbox-nav{ position:absolute; background:rgba(255,255,255,.12); border:0; color:#fff;
  width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:20px; transition:background-color .2s; }
.lightbox-close:hover,.lightbox-nav:hover{ background:rgba(255,255,255,.25); }
.lightbox-close{ top:24px; right:28px; }
.lightbox-nav.prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:20px; top:50%; transform:translateY(-50%); }
@media (max-width:560px){ .lightbox-nav{ top:auto; bottom:24px; transform:none; } .lightbox-nav.prev{ left:30%; } .lightbox-nav.next{ right:30%; } }