/* ==========================================================================
   DELVANO — Media surfaces

   Every media slot now holds an approved image from LOCK PACK V2. The nine
   procedural surfaces that stood in for photography (light-shaft, mineral,
   architecture, plaster, vessel, corridor, aura, horizon, linen) and the grain
   overlay that sold them have been removed: they are dead weight, and FINAL_LOCK
   forbids any procedural substitute or effect over the approved imagery.

   What remains is the wrapper contract the compositions depend on — ratio,
   overflow, reveal target and hover target — so swapping an image never
   disturbs the layout around it.

   Replacement contract:
     <figure class="media media--photo" data-media="home-hero">
       <img src="/assets/img/…" alt="…" width="…" height="…" />
     </figure>
   The wrapper owns ratio and behaviour; the <img> owns framing via
   object-position. Source pixels are never edited.
   ========================================================================== */

@layer media {
.media {
  position: relative;
  overflow: hidden;
  /* Holding colour behind the image while it decodes. */
  background-color: var(--obsidian-deep);
  isolation: isolate;
  aspect-ratio: var(--media-ratio, 4 / 3);
}

.media > img,
.media > picture,
.media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default framing; individual slots override via inline object-position
     where a tall crop would otherwise cut the subject. */
  object-position: 50% 50%;
}

/* Ratio helpers used across pages */
.media--wide {
  --media-ratio: 16 / 9;
}
.media--ultrawide {
  --media-ratio: 21 / 9;
}
.media--portrait {
  --media-ratio: 3 / 4;
}
.media--tall {
  --media-ratio: 2 / 3;
}
.media--square {
  --media-ratio: 1 / 1;
}
.media--fill {
  --media-ratio: auto;
  height: 100%;
}

/* A figure carrying real approved photography. Kept as an explicit class
   rather than :has() so the intent is greppable and the rule cannot be
   weakened by a future selector change. */
.media--photo {
  background-color: var(--surface-raised, var(--obsidian-raised));
}

/* --------------------------------------------------------------------------
   Placeholder trace — ?placeholders in the URL outlines and labels every
   media slot with its data-media id. Now an integration audit tool: it shows
   which approved asset is sitting in which slot.
   -------------------------------------------------------------------------- */

[data-show-placeholders] .media[data-media] {
  outline: 1px dashed rgb(var(--bronze-rgb) / 0.55);
  outline-offset: -8px;
}

[data-show-placeholders] .media[data-media] > .media__trace {
  position: absolute;
  z-index: 4;
  inset-block-end: var(--space-1);
  inset-inline-start: var(--space-1);
  padding: 4px 8px;
  background: rgb(var(--obsidian-rgb) / 0.8);
  color: var(--bronze);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.media__trace {
  display: none;
}
}