/* Visual Suspect — dark "glass" treatment for 3-up vertical collage
   sections (2026). Generalization of vs-airside-dark.css: same rule bodies,
   selectors re-keyed from #film-direction to .vs-dark-collage (class
   added by inject_collage_dark.py to every section with >= 3 gallery
   images). Additive, and gated on .vs-dark-on (added per section by
   vs-collage-dark.js) so JS-off degrades to the original light section
   instead of dark-on-dark text.
   Mirrors the homepage vs-dark-production look: near-black full-bleed stage,
   white type, a 2px glass bezel + inner hairline on every frame, and a
   blurred backlight (the shot itself) glowing behind it. */

/* ---- Dark stage (full-bleed) ---- */
.vs-dark-collage{position:relative;z-index:0;}
.vs-dark-collage.vs-dark-on::before{
  content:"";display:block;position:absolute;left:calc(50% - 50vw);width:100vw;top:0;bottom:0;z-index:-1;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(72,96,255,.07), transparent 70%),
    radial-gradient(46% 42% at 88% 60%, rgba(210,0,0,.05), transparent 72%),
    #070709;
  pointer-events:none;
}

/* ---- Typography: white on dark (the red kicker is left untouched) ---- */
.vs-dark-collage.vs-dark-on .section-title,
.vs-dark-collage.vs-dark-on .section-title span,
.vs-dark-collage.vs-dark-on h2,
.vs-dark-collage.vs-dark-on h3,
.vs-dark-collage.vs-dark-on h4{color:#ffffff !important;}
.vs-dark-collage.vs-dark-on .lead,
.vs-dark-collage.vs-dark-on .lead p,
.vs-dark-collage.vs-dark-on .wpb_text_column,
.vs-dark-collage.vs-dark-on .wpb_text_column p,
.vs-dark-collage.vs-dark-on p{color:rgba(255,255,255,.68) !important;}

/* ---- Glass frame: 2px bezel + inner hairline ---- */
.vs-dark-collage .ut-image-gallery-image{position:relative;overflow:visible !important;}
.vs-dark-collage .ut-animated-image-item{
  position:relative;z-index:1;
  padding:2px;border-radius:22px;
  background:linear-gradient(140deg,
    rgba(255,255,255,.34),
    rgba(255,255,255,.08) 30%,
    rgba(255,255,255,.03) 55%,
    rgba(255,255,255,.20) 100%);
  box-shadow:0 36px 80px -28px rgba(0,0,0,.7);
}
.vs-dark-collage .ut-animated-image-item > a{display:block;border-radius:20px;overflow:hidden;}
.vs-dark-collage .ut-animated-image-zoom{position:relative;border-radius:20px;overflow:hidden;background:#0d0d12;}
.vs-dark-collage .ut-animated-image-zoom::after{
  content:"";position:absolute;inset:0;border-radius:20px;z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05);
  pointer-events:none;
}
.vs-dark-collage img.ut-animated-image{display:block;width:100%;height:auto;}

/* ---- Backlight: a blurred copy of each shot glows behind its frame ---- */
.vs-dark-collage.vs-dark-on .ut-image-gallery-image::before{
  content:"";position:absolute;left:-6%;right:-6%;top:-6%;bottom:-6%;z-index:0;
  background-image:var(--vs-shot);background-size:cover;background-position:center;
  filter:blur(50px) saturate(1.6) brightness(1.3);
  opacity:.55;border-radius:48px;pointer-events:none;
}

@media (max-width:767px){
  .vs-dark-collage.vs-dark-on .ut-image-gallery-image::before{
    left:-3%;right:-3%;top:-3%;bottom:-3%;
    filter:blur(30px) saturate(1.55) brightness(1.26);opacity:.5;border-radius:26px;}
  .vs-dark-collage .ut-animated-image-item{border-radius:16px;}
  .vs-dark-collage .ut-animated-image-item > a,
  .vs-dark-collage .ut-animated-image-zoom,
  .vs-dark-collage .ut-animated-image-zoom::after{border-radius:14px;}
}