/* ============================================================================
   CLAUDE DESIGN LANGUAGE — media.css
   The captioned art-direction SLOT system.

   THE PROBLEM THIS SOLVES
   A generated site that ships empty grey boxes reads as a comp, not a site —
   and it leaves the human guessing what to put where. Every media slot here
   does two jobs:
     1. EMPTY  → an art-directed "shot brief" plate that tells a human exactly
                 what to shoot/source, at what ratio, with what treatment, and
                 why it belongs there. It looks intentional, never broken.
     2. FILLED → a semantic <figure>/<figcaption> with an identity-coherent
                 treatment (duotone/grain/bw…) so real photos cohere with the
                 site instead of looking like a stock dump.

   Everything reads semantic tokens, so the same markup re-skins per theme and
   the duotone tint is drawn from each site's own --accent automatically.
   Authoring convention + examples: docs/library/media-slots.html
   ============================================================================ */

/* ---- Figure wrapper ---------------------------------------------------------
   <figure class="fig" style="--ar: 4/3" data-treatment="duotone"> … </figure> */
.fig { display: grid; gap: var(--space-2xs); margin: 0; }
.fig--bleed { margin-inline: calc(var(--bleed) * -1); }      /* break the grid */
.fig--inline { gap: var(--space-3xs); }

/* ---- The frame: holds EITHER the brief plate OR real media ---------------- */
.fig__frame {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ar, 4 / 3);
  background: var(--surface-2);
  border-radius: var(--radius);
}

/* Real media fills the frame */
.fig__frame > img,
.fig__frame > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slower) var(--ease-out);
}
.fig--zoom:hover .fig__frame > img { transform: scale(1.03); }

/* ============================================================================
   THE EMPTY-STATE "SHOT BRIEF" PLATE  (the human cue)
   Renders when no real asset is present. Looks like a catalogued specimen
   plate brief — registration ticks, a type badge, the described shot, and a
   spec line — so it reads as a deliberate placeholder, never a broken image.
   ============================================================================ */
.fig__plate {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  color: var(--muted);
  background:
    /* faint diagonal hatch so it never reads as "image failed to load" */
    repeating-linear-gradient(
      135deg,
      transparent 0, transparent 9px,
      color-mix(in oklab, var(--border) 60%, transparent) 9px,
      color-mix(in oklab, var(--border) 60%, transparent) 10px
    );
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
/* corner registration ticks — the system's craft motif */
.fig__plate::before, .fig__plate::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--border-strong); pointer-events: none;
}
.fig__plate::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.fig__plate::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.fig__badge {
  justify-self: start; align-self: start;
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  padding: 0.2em 0.7em; background: var(--bg);
}
.fig__brief {
  align-self: center; max-width: 42ch;
  font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.35;
  color: var(--text); text-wrap: pretty;
}
.fig__brief b { color: var(--accent); font-weight: 600; }
.fig__spec {
  justify-self: start; align-self: end;
  font-family: var(--font-mono); font-size: var(--step--2);
  color: var(--muted); font-variant-numeric: tabular-nums;
}
/* a directing arrow the video brief can use */
.fig__plate--video .fig__brief::before {
  content: "▶ "; color: var(--accent);
}

/* ============================================================================
   THE CAPTION  (figure legend — "what each one is")
   Always present, in BOTH states. This is the literal thing the user asked for:
   a caption that says what the asset is.
   ============================================================================ */
.fig__cap {
  font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.45;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 0.2em 0.6em; align-items: baseline;
}
.fig__cap .fig__n { color: var(--accent); font-weight: 600; }   /* "Fig. 3 —" / "Pl. 01" */
.fig__cap .fig__title { color: var(--text); }
.fig__cap em { font-style: italic; }
.fig__cap .fig__credit {                                         /* "Photo: —" */
  margin-left: auto; font-size: var(--step--2);
  color: color-mix(in oklab, var(--muted) 80%, transparent);
}

/* ============================================================================
   TREATMENTS  (set data-treatment on the .fig; applies to real media only)
   The point: real photography is forced to cohere with the site's identity.
   The duotone tint comes from --accent, so it differs per site for free.
   ============================================================================ */
/* monotone in the site's accent (luminosity keeps detail, hue from backdrop) */
.fig[data-treatment="duotone"] .fig__frame { background: var(--accent); }
.fig[data-treatment="duotone"] .fig__frame > img {
  filter: grayscale(1) contrast(1.06); mix-blend-mode: luminosity;
}
/* two-tone duotone (shadows=ink, highlights=accent) — needs the SVG filter
   block below dropped once into the page; then use data-treatment="duotone2" */
.fig[data-treatment="duotone2"] .fig__frame > img { filter: url(#cdl-duotone) contrast(1.04); }

.fig[data-treatment="bw"] .fig__frame > img   { filter: grayscale(1) contrast(1.05); }
.fig[data-treatment="warm"] .fig__frame > img { filter: sepia(0.22) saturate(1.12) contrast(1.02); }
.fig[data-treatment="cool"] .fig__frame > img { filter: saturate(0.9) brightness(1.02) hue-rotate(-6deg); }
.fig[data-treatment="raking"] .fig__frame > img { filter: contrast(1.12) brightness(0.96); }

/* grain overlay — a textural pass that reads as "printed", not "rendered" */
.fig[data-grain] .fig__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* a single accent tint wash (subtle, for color photos that need unifying) */
.fig[data-treatment="tint"] .fig__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--accent); mix-blend-mode: multiply; opacity: 0.12;
}

/* ============================================================================
   VARIANTS
   ============================================================================ */
/* specimen plate — a framed, matted object (catalogue/herbarium aesthetic) */
.fig--specimen .fig__frame { background: var(--surface); padding: var(--space-m); border: 1px solid var(--border); }
.fig--specimen .fig__frame > img { object-fit: contain; }

/* portrait + video ratio helpers (or set --ar inline) */
.fig--portrait { --ar: 3 / 4; }
.fig--video    { --ar: 16 / 9; }
.fig--wide     { --ar: 21 / 9; }
.fig--square   { --ar: 1 / 1; }

/* a real <video> gets a quiet play affordance when used as poster-only */
.fig__frame--play::after {
  content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--step-3); color: var(--bg);
  background: color-mix(in oklab, var(--accent) 70%, transparent);
  width: 3em; height: 3em; border-radius: 50%; margin: auto; pointer-events: none;
}

/* reduced motion: kill the zoom */
@media (prefers-reduced-motion: reduce) {
  .fig__frame > img { transition: none; }
  .fig--zoom:hover .fig__frame > img { transform: none; }
}