/*
 * Media.module.css → the shared "media" part.
 *
 * Ported by scripts/port-css.mjs. Class names are prefixed to survive being
 * flattened out of CSS Modules; design tokens are rewritten to the custom
 * properties theme.json emits. Edit this file, not the original.
 */

.px-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
  aspect-ratio: var(--ratio, 4 / 3);
}

.px-media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * The fade-in and the blurred placeholder are gone on purpose.
 *
 * Both existed to cover the gap while a remote image decoded. The CMS shipped
 * an LQIP with every asset, and the component faded the real image in over it.
 * WordPress generates no such placeholder, so a fade would be a fade over the
 * page background — and the opacity:0 that started it would leave every image
 * invisible whenever the script that clears it does not run.
 */

/* A single shared grain texture over every image ties the set together and
   hides banding in the large gradients. Shipped with the theme rather than
   uploaded: WordPress refuses SVG in the media library by default. */
.px-media--grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../../img/grain.svg');
  background-size: 160px 160px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Slow zoom on hover, for the frames that opt in with .px-media--zoom. */
.px-media--zoom .px-media__image {
  transition:
    opacity var(--wp--custom--duration--slow) var(--wp--custom--ease--out),
    transform 900ms var(--wp--custom--ease--out);
}

@media (hover: hover) {
  .px-media__zoom:hover .px-media__image,
  a:hover .px-media--zoom .px-media__image {
    transform: scale(1.04);
  }
}

.px-media__empty {
  display: grid;
  place-items: center;
  color: var(--fg-faint);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}