/* ================================================================
   WAREX EXCHANGE TERMINAL — STOCK MEDIA LAYER  (exchange-media.css)
   ================================================================
   Art-directed stock photography/video components. Loads on any page
   that carries a media band or card, AFTER the page's existing
   exchange sheets. Assets live in assets/media/ (graded to the one
   look — see scripts/stock-media-pipeline.ps1 header for the recipe).

   HONESTY (binding): every band/card carries a VISIBLE
   "REPRESENTATIVE FOOTAGE" micro-label (.wx-media-label). It must
   never sit inside an opacity reveal (.wx-reveal) — contrast scans
   read mid-transition opacity as a failure, and the label must
   always out-read its surroundings.
   ================================================================ */

/* ---- honesty micro-label (visible, always) ---------------------- */
.wx-media-label {
  position: absolute;
  left: var(--wx-s4);
  bottom: var(--wx-s4);
  z-index: 3;
  margin: 0;
  padding: var(--wx-s1) var(--wx-s3);
  font-family: var(--wx-font-mono);
  font-size: 0.75rem;             /* 12px floor — design-system lesson */
  font-weight: 500;
  letter-spacing: var(--wx-track-wide);
  text-transform: uppercase;
  color: var(--wx-dim-hi);
  background: rgba(10, 15, 28, 0.78);
  border: 1px solid var(--wx-ghost);
  border-radius: 2px;
}

/* ---- contained photo card w/ offset frame ------------------------ */
.wx-media-card {
  position: relative;
  margin: var(--wx-s6) 0 var(--wx-s7) 0;
  max-width: 100%;
}
.wx-media-card::before {          /* the offset frame, behind, down-right */
  content: "";
  position: absolute;
  top: var(--wx-s3);
  left: var(--wx-s3);
  width: 100%;
  height: 100%;
  border: 1px solid var(--wx-ghost);
  pointer-events: none;
}
.wx-media-card picture,
.wx-media-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.wx-media-card figcaption.wx-media-label {
  left: auto;
  right: var(--wx-s3);
  bottom: var(--wx-s3);
}

/* ---- full-bleed media band (section break / hero-adjacent) ------- */
/* escape the content layer's centered-section constraints */
body.wx-page main > section.wx-media-band {
  max-width: none;
  padding: 0;
  margin: 0;
  border-top: 0;
}
body.wx-page main > section.wx-media-band + section { border-top: 0; }

.wx-media-band {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--wx-ink-2);    /* paints before the image arrives — no flash */
}
.wx-media-band > picture,
.wx-media-band > picture img,
.wx-media-band > .wx-media-poster,
.wx-media-band > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wx-media-band::after {           /* legibility scrim, reinforces the grade */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 15, 28, 0.50) 0%,
    rgba(10, 15, 28, 0.12) 42%,
    rgba(10, 15, 28, 0.62) 100%);
}
.wx-media-band-inner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--wx-s6) var(--wx-s5) var(--wx-s8) var(--wx-s5);
  max-width: 72rem;
  margin: 0 auto;
}
.wx-media-band-kicker {
  margin: 0;
  font-family: var(--wx-font-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--wx-track-wide);
  text-transform: uppercase;
  color: var(--wx-cyan);
}
.wx-media-band-title {
  margin: var(--wx-s2) 0 0 0;
  font-family: var(--wx-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--wx-paper);
}

/* ---- video band (contract: muted loop, poster-first, pausable) --- */
.wx-media-band--video > video {
  z-index: 0;
  opacity: 0;
  transition: opacity var(--wx-dur-slow) var(--wx-ease-out);
}
.wx-media-band--video.is-playing > video { opacity: 1; }
.wx-media-band--video > .wx-media-poster { z-index: 0; }

.wx-media-pause {
  position: absolute;
  right: var(--wx-s4);
  bottom: var(--wx-s4);
  z-index: 3;
  min-width: 44px;
  min-height: 44px;
  padding: var(--wx-s2) var(--wx-s3);
  font-family: var(--wx-font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--wx-track-data);
  color: var(--wx-dim-hi);
  background: rgba(10, 15, 28, 0.78);
  border: 1px solid var(--wx-ghost);
  border-radius: 2px;
  cursor: pointer;
}
.wx-media-pause:hover,
.wx-media-pause:focus-visible {
  color: var(--wx-paper);
  border-color: var(--wx-amber);
  outline: none;
}
.wx-media-pause:focus-visible { box-shadow: 0 0 0 2px var(--wx-amber); }
.wx-media-pause[hidden] { display: none; }

/* ---- work band (2/3-up grid from one photographer's set) --------- */
.wx-media-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--wx-s5);
  align-items: start;
}
.wx-media-duo .wx-media-card { margin: 0 0 var(--wx-s4) 0; }

/* ---- responsive --------------------------------------------------- */
@media (max-width: 768px) {
  .wx-media-band { aspect-ratio: 16 / 10; }
  .wx-media-band-inner { padding: var(--wx-s5) var(--wx-s4) var(--wx-s7) var(--wx-s4); }
}

/* ---- reduced motion: posters only, controls gone ------------------ */
@media (prefers-reduced-motion: reduce) {
  .wx-media-band--video > video { display: none !important; }
  .wx-media-pause { display: none !important; }
}