/* =============================================================
   MEDIA TREATMENTS (2026-08-29)

   One handling per kind of asset, so the same sort of work looks like the same
   sort of work wherever it appears. The vocabulary is declared in
   src/content/media.placements.yaml under `treatments:` and every managed
   placement names one; this file is where those names mean something.

   Nothing here restyles a component. These are wrappers and modifiers applied
   on top of the existing card, reel and tile language.
   ============================================================= */

/* ---------------------------------------------------- 1 · SOUND-LED WORK */
/* Work whose delivered file carries an audio track — measured from the
   container by scripts/media/inspect.mjs, never claimed. The badge and the
   affordance are the same two marks everywhere they appear, so "this one has
   sound" is learnable rather than page-specific. */
.mt-sound { position: relative; }
.mt-sound__badge,
.mt-silent__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  padding: 5px 8px; border-radius: 3px;
}
.mt-sound__badge { background: rgba(255, 255, 255, .9); color: #0a0a0b; }
/* Silence is a decision on product and motion work, so it is stated rather
   than left as an absent control the reader has to interpret. */
.mt-silent__badge {
  background: rgba(10, 10, 11, .72); color: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .18);
}

/* ------------------------------------------------ 2 · PORTRAIT IN A BAND */
/* A 9:16 master in a full-bleed band is the commonest way to ruin a portfolio:
   crop it to 21:9 and what survives is the middle third of the frame, which on
   this library is usually a torso or a bottle cap.
   The matte keeps the whole frame and fills the band around it with the same
   image, blurred and darkened, so the band still reads as one image rather
   than as a letterboxed video with two black bars. */
.mt-matte { position: absolute; inset: 0; overflow: hidden; }
.mt-matte__fill {
  position: absolute; inset: -6%;
  width: 112%; height: 112%; object-fit: cover;
  filter: blur(38px) saturate(.75) brightness(.42);
  transform: scale(1.06);
}
.mt-matte__frame {
  position: absolute; inset: 0; margin: auto;
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) { .mt-matte__fill { transform: none; } }
/* A blurred fill is a repaint-heavy layer; on a phone the band is narrow
   enough that the frame nearly fills it, so the fill earns nothing. */
@media (max-width: 639px) { .mt-matte__fill { display: none; } }

/* ----------------------------------------------------- 3 · CONCEPT WORK */
/* 136 of 139 clips and every still in the library are spec work. The label is
   part of the asset, not part of one page's card design, so it looks the same
   on a hub tile, a gallery tile and a case sequence. */
.mt-concept {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  padding: 5px 8px; border-radius: 3px;
  background: rgba(10, 10, 11, .72); color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
}

/* -------------------------------------------------- 4 · MEDIA BEHIND TEXT */
/* The binding constraint on a background is contrast, and the depth of the
   scrim belongs to the asset rather than to the section: a dusk exterior needs
   far less than a colour-blocked studio set. Three depths, chosen per
   placement, all of which keep body copy above 4.5:1 on this palette. */
.mt-bg { position: relative; overflow: hidden; }
.mt-bg > img,
.mt-bg > video,
.mt-bg > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.mt-bg__scrim { position: absolute; inset: 0; pointer-events: none; }
.mt-bg--light .mt-bg__scrim {
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.38) 45%, rgba(0,0,0,.72));
}
.mt-bg--medium .mt-bg__scrim {
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.55) 45%, rgba(0,0,0,.86));
}
.mt-bg--heavy .mt-bg__scrim {
  background: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.74) 45%, rgba(0,0,0,.95));
}
.mt-bg > .u-container,
.mt-bg > * { position: relative; }
.mt-bg > img,
.mt-bg > video,
.mt-bg > picture,
.mt-bg > .mt-bg__scrim { position: absolute; }

/* ------------------------------------------------------- 5 · STILL FRAMES */
/* A still placed as an artifact rather than as decoration: it keeps its own
   aspect ratio, reserves its box before it loads so nothing shifts, and never
   renders above the quality ceiling its manifest record declares. */
.mt-still { display: block; position: relative; overflow: hidden; border-radius: 6px;
  background: var(--surface-card, #141416); }
.mt-still > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mt-still__caption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-top: 10px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary, #999);
}

/* --------------------------------------------------- 6 · CASE SEQUENCES */
/* Brief / Idea / Craft / Deliverables. One poster leads at size; the rest are
   thumbs, so a sequence never puts four players on screen competing for the
   decode budget. */
.mt-seq { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.mt-seq__lead { grid-column: 1 / -1; }
.mt-seq__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); }
@media (max-width: 639px) { .mt-seq__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mt-seq__step {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-quiet, #888);
}

/* ------------------------------------------------------ 7 · FAILED MEDIA */
/* An image or a video that does not arrive leaves a hole the same colour as
   the page, which reads as a layout bug. The poster stays visible underneath
   every video on the site, so the failure case for a clip is a still rather
   than a void; this covers the case where the still itself fails. */
.mt-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--surface-card, #141416);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-quiet, #888);
  text-align: center; padding: 16px;
}
img.is-failed + .mt-fallback, video.is-failed + .mt-fallback { display: grid; }

/* ------------------------------------------------------ 8 · REDUCED MOTION */
/* site.css carries the sitewide floor. This is the media-specific half: a
   reader who asked for less motion gets the poster, and the poster is the
   frame the piece was curated on, so nothing is lost but the movement. */
@media (prefers-reduced-motion: reduce) {
  .mt-matte__fill { filter: blur(38px) saturate(.75) brightness(.42); }
  .mt-sound video[autoplay],
  .mt-silent video[autoplay] { display: none; }
  .mt-sound .mt-poster,
  .mt-silent .mt-poster { display: block; }
}

/* ------------------------------------------- 9 · PARTNERSHIP CONCEPT SLATE */
/* Three artifacts side by side at a common height, so the row reads as one
   slate rather than as three unrelated pictures. The two portraits and the one
   landscape keep their own ratios inside a shared box. */
.pt-slate {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 22px);
  margin-top: clamp(28px, 4vh, 44px);
}
@media (max-width: 767px) { .pt-slate { grid-template-columns: minmax(0, 1fr); } }
.pt-slate__item { margin: 0; min-width: 0; }
.pt-slate__item .mt-still { aspect-ratio: 4 / 5; }
.pt-slate__tag { position: absolute; top: 8px; left: 8px; }

/* --------------------------------------- 10 · HOW IT WORKS, THE MASTER */
/* One finished file at the end of the delivery section, so the pipeline page
   ends on the thing the pipeline makes. */
.hiw-master { margin-inline: 0; }
.hiw-master__frame { position: relative; overflow: hidden; border-radius: 8px; background: #000; }
.hiw-master__tag { position: absolute; top: 10px; left: 10px; z-index: 2; }
/* The scrim only needs to protect the caption below, not copy on top of it,
   so this placement takes the lightest of the three depths. */
.hiw-master .mt-bg__scrim { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35)); }