/* ═══════════════════════════════════════════════════════════
   CSIwild — Page Media & Scroll Drama
   Cinematic photo components for the article pages.
   Reuses the shared reveal/parallax/counter engine in csiwild.js.
   All media uses <image-slot> so every photo stays swappable.
═══════════════════════════════════════════════════════════ */

/* full-bleed breakout from the 880px article column */
.media-band,.stat-band,.media-split,.media-mosaic,.kinetic-strip{
  width:100vw;margin-left:calc(50% - 50vw);
}
/* constrain the inner content of splits / mosaics while staying full-bleed */
.media-split,.media-mosaic{
  padding-inline:max(3.5rem,calc(50vw - 580px));
}

/* ── CINEMATIC PHOTO BAND ─────────────────────────────────
   big edge-to-edge photo, parallax drift, caption bottom-left  */
.media-band{
  position:relative;height:clamp(380px,66vh,720px);overflow:hidden;
  background:var(--black);margin-block:5rem;
  clip-path:inset(0 0 0 0);
}
.media-band .mb-img{
  position:absolute;left:0;top:-9%;width:100%;height:118%;display:block;
}
.media-band::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(6,8,10,0.92) 0%,rgba(6,8,10,0.15) 55%,rgba(6,8,10,0.35) 100%);
}
.media-band .mb-cap{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:0 clamp(1.5rem,5vw,4.5rem) clamp(1.6rem,4vw,3rem);max-width:880px;
}
.media-band .mb-kicker{
  font-family:var(--font-sub);font-size:0.72rem;font-weight:700;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:0.75rem;margin-bottom:0.85rem;
}
.media-band .mb-kicker::before{content:'';width:34px;height:2px;background:var(--alert);flex-shrink:0}
.media-band .mb-title{
  font-family:var(--font-accent);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,2.8vw,2.3rem);line-height:1.3;color:var(--white);text-wrap:balance;
  max-width:24ch;text-shadow:0 3px 30px rgba(0,0,0,0.5);
}
/* a thin red rule that wipes in under the caption */
.media-band .mb-rule{
  position:absolute;left:clamp(1.5rem,5vw,4.5rem);bottom:0;height:4px;width:0;background:var(--alert);z-index:3;
  transition:width 1.1s cubic-bezier(0.16,1,0.3,1) 0.2s;
}
.media-band.in-view .mb-rule{width:clamp(90px,16vw,200px)}

/* ── IMAGE + TEXT SPLIT ──────────────────────────────────── */
.media-split{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(2rem,4vw,4rem);
  align-items:center;margin-block:clamp(3.5rem,7vw,6rem);
}
.media-split.flip .ms-media{order:2}
.media-split .ms-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--black);
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
}
.media-split .ms-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(186,222,158,0.14);
}
.media-split .ms-media .ms-tab{
  position:absolute;top:0;left:0;z-index:2;background:var(--alert);color:#fff;
  font-family:var(--font-sub);font-size:0.64rem;font-weight:700;letter-spacing:0.22em;
  text-transform:uppercase;padding:0.5rem 1rem;
}
.media-split .ms-media image-slot{position:absolute;inset:0;width:100%;height:100%;transition:transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.media-split .ms-media:hover image-slot{transform:scale(1.04)}
.media-split .ms-body .ms-kicker{
  font-family:var(--font-sub);font-size:0.72rem;font-weight:700;letter-spacing:0.26em;
  text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:0.7rem;margin-bottom:1rem;
}
.media-split .ms-body .ms-kicker::before{content:'';width:30px;height:2px;background:var(--alert)}
.media-split .ms-body h3{margin-top:0}
.media-split .ms-body h3::before{display:none}
.media-split .ms-body p:last-child{margin-bottom:0}

/* ── PORTRAIT / GALLERY MOSAIC ───────────────────────────── */
.media-mosaic{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;
  margin-block:clamp(3rem,6vw,5rem);
}
.media-mosaic.mz-tall{grid-auto-rows:1fr}
.mz-item{
  position:relative;overflow:hidden;background:var(--black);aspect-ratio:4/5;
  box-shadow:0 18px 40px rgba(0,0,0,0.4);
}
.mz-item.span2{grid-column:span 2}
.mz-item image-slot{position:absolute;inset:0;width:100%;height:100%;transition:transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.mz-item:hover image-slot{transform:scale(1.06)}
.mz-item::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,8,10,0.82),transparent 52%);
  opacity:0;transition:opacity 0.4s ease;
}
.mz-item:hover::after{opacity:1}
.mz-cap{
  position:absolute;left:0;bottom:0;z-index:2;padding:1rem 1.1rem;
  transform:translateY(10px);opacity:0;transition:transform 0.45s cubic-bezier(0.16,1,0.3,1),opacity 0.4s ease;
}
.mz-item:hover .mz-cap{transform:none;opacity:1}
.mz-cap .mz-name{display:block;font-family:var(--font-head);font-weight:700;font-size:1.1rem;text-transform:uppercase;color:#fff;line-height:1}
.mz-cap .mz-role{display:block;font-family:var(--font-sub);font-size:0.66rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--lime);margin-top:0.3rem}

/* ── STAT BAND (count-up over a dark photo) ──────────────── */
.stat-band{
  position:relative;overflow:hidden;background:var(--black);margin-block:5rem;
  padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,4rem);
}
.stat-band .sb-bg{position:absolute;inset:0;width:100%;height:100%;opacity:0.18;filter:grayscale(0.3)}
.stat-band::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 30%,rgba(6,8,10,0.55),rgba(6,8,10,0.92))}
.stat-band-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.stat-band-head{font-family:var(--font-sub);font-size:0.72rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:0.75rem;justify-content:center;margin-bottom:2.5rem}
.stat-band-head::before,.stat-band-head::after{content:'';width:34px;height:2px;background:var(--alert)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);border:1px solid var(--border)}
.stat-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.stat-cell{background:rgba(10,15,10,0.72);padding:clamp(1.75rem,3vw,2.75rem) 1.5rem;text-align:center;position:relative}
.stat-cell::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:3px;background:var(--alert)}
.stat-num{font-family:var(--font-head);font-weight:800;font-size:clamp(3rem,6vw,5rem);line-height:0.9;color:var(--white);letter-spacing:-0.02em;display:block}
.stat-num .accent{color:var(--lime)}.stat-num .red{color:var(--alert)}
.stat-label{display:block;font-family:var(--font-sub);font-size:0.8rem;font-weight:500;letter-spacing:0.06em;color:rgba(200,220,192,0.7);line-height:1.45;margin-top:1rem;text-wrap:balance;max-width:24ch;margin-inline:auto}

/* ── KINETIC STRIP (reuses .marquee styling, full-bleed) ─── */
.kinetic-strip{margin-block:4.5rem}

/* ── INLINE PULL FIGURE (single contained photo + caption) ─ */
.media-figure{margin-block:clamp(2.5rem,5vw,4rem)}
.media-figure .mf-frame{position:relative;overflow:hidden;background:var(--black);box-shadow:0 24px 60px rgba(0,0,0,0.4)}
.media-figure .mf-frame image-slot{display:block;width:100%;height:clamp(280px,46vh,520px);transition:transform 0.9s cubic-bezier(0.16,1,0.3,1)}
.media-figure:hover .mf-frame image-slot{transform:scale(1.03)}
.media-figure figcaption{font-family:var(--font-sub);font-size:0.76rem;font-weight:500;letter-spacing:0.04em;color:rgba(200,220,192,0.55);margin-top:0.85rem;display:flex;align-items:center;gap:0.6rem}
.media-figure figcaption::before{content:'';width:24px;height:2px;background:var(--alert);flex-shrink:0}

/* ── SCROLL-WIPE reveal for media (clip curtain) ─────────── */
.reveal-media{clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path 1.1s cubic-bezier(0.16,1,0.3,1),opacity 0.7s ease}
.reveal-media.in-view{clip-path:inset(0 0 0 0);opacity:1}

@media(prefers-reduced-motion:reduce){
  .reveal-media{clip-path:none;opacity:1}
  .media-band .mb-img{position:absolute;top:0;height:100%}
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media(max-width:768px){
  .media-band{height:58vh;min-height:340px;margin-block:3rem}
  .media-split{grid-template-columns:1fr;gap:1.75rem;margin-block:3rem}
  .media-split.flip .ms-media{order:0}
  .media-split .ms-media{aspect-ratio:3/2}
  .stat-grid,.stat-grid.cols-2{grid-template-columns:1fr 1fr}
  .stat-band{margin-block:3rem}
  .media-mosaic{grid-template-columns:1fr 1fr;gap:8px}
  .mz-item.span2{grid-column:span 2}
  .mz-cap{transform:none;opacity:1}
  .mz-item::after{opacity:1}
}