/* ============================================================
   css/media.css
   Local-first imagery: frames, placeholders and reveal fades.
   Every <picture>/<img> sits inside .media-frame or a gallery figure,
   which owns the aspect ratio and the designed placeholder behind it.
   ============================================================ */

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-medium);
  background: var(--media-gradient);
  isolation: isolate;
}

.media-frame > picture { display: block; block-size: 100%; inline-size: 100%; }

.media-frame img,
figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect helpers */
.media-frame--16x9,
.media-frame[data-aspect="16x9"] { aspect-ratio: 16 / 9; }
.media-frame--3x2,
.media-frame[data-aspect="3x2"] { aspect-ratio: 3 / 2; }
.media-frame--4x3,
.media-frame[data-aspect="4x3"] { aspect-ratio: 4 / 3; }
.media-frame--4x5,
.media-frame[data-aspect="4x5"] { aspect-ratio: 4 / 5; }
.media-frame--1x1,
.media-frame[data-aspect="1x1"] { aspect-ratio: 1 / 1; }
.media-frame--tall { aspect-ratio: 3 / 4; }

/* Designed placeholder shown when a local file has not been fetched yet.
   It also acts as the loading background while the image decodes. */
.media-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-ink) 55%, transparent);
  background:
    radial-gradient(120% 90% at 20% 10%, rgb(255 255 255 / 0.55), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 18px, rgb(255 255 255 / 0.22) 18px 19px),
    var(--media-gradient);
  z-index: 0;
}
.media-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ph-sheen 2.8s var(--ease-inout) infinite;
}
@media (prefers-reduced-motion: reduce) { .media-ph::after { animation: none; } }

@keyframes ph-sheen {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* The image paints over the placeholder; the placeholder shows through a
   failing image because the <img> is hidden on error. */
.media-frame img,
figure img { position: relative; z-index: 1; }

/* When no imagery exists in a frame, keep the placeholder legible. */
.media-frame:not(:has(img)) .media-ph { font-size: var(--text-xs); }

/* Fade-in once decoded — prevents the harsh pop on slow connections.
   Gated on html[data-media-js] so that with JavaScript unavailable every
   photograph stays fully visible. media.js sets the attribute on <html>
   before first paint. */
.media-frame img,
figure img { transition: opacity var(--dur-med) var(--ease-out); }
html[data-media-js] .media-frame img:not(.is-loaded),
html[data-media-js] figure img:not(.is-loaded) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .media-frame img, figure img { transition: none; }
  html[data-media-js] .media-frame img:not(.is-loaded),
  html[data-media-js] figure img:not(.is-loaded) { opacity: 1; }
}

/* Full-bleed media strip used by expanded pages */
.media-strip {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.media-strip figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-medium); background: var(--media-gradient); }
.media-strip[data-count="3"] figure { aspect-ratio: 3 / 4; }
.media-strip[data-count="2"] figure { aspect-ratio: 4 / 3; }
.media-strip figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  padding: var(--space-4) var(--space-4) var(--space-3);
  font-size: var(--text-xs);
  color: #f6f2ea;
  background: linear-gradient(to top, rgb(13 58 65 / 0.85), transparent);
}

/* Small inline figure floated inside prose */
.prose-figure {
  margin: var(--space-6) 0;
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: var(--media-gradient);
}
.prose-figure figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  background: var(--color-surface);
}