/* ============================================================
   Patrón único de "caja de imagen" para todo el sitio
   (El Gurú de los Cascos) — 2026-09-02.

   Objetivo: que las fotos se vean igual de bien en móvil,
   tablet y PC, sin los trucos frágiles que rompían en
   Safari/iOS (display:contents sobre <picture>, aspect-ratio
   en la caja + height:100% sobre el <img>, max-height suelto).

   Uso:
     <div class="ph-media ph-media--contain" style="--ph-ratio: 1/1">
       <picture>
         <source type="image/webp" srcset="...">
         <img src="...(png)" alt="..." loading="lazy" decoding="async">
       </picture>
     </div>

   - --ph-ratio : relación de aspecto (ej. 1/1, 4/3, 16/9). Default 1/1.
   - --ph-pad   : (opcional) relleno % para el fallback sin aspect-ratio.
                  Default 100% (cuadrado). 4/3 -> 75%, 16/9 -> 56.25%.
   - --contain (default contain) recorta con object-fit: contain;
     --cover con object-fit: cover.
   ============================================================ */

.ph-media {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  background: var(--gray-900, #0a0a0a);
  line-height: 0;
}

/* Fallback de relación de aspecto para navegadores muy viejos sin
   aspect-ratio (Safari < 15). Se anula apenas hay soporte. */
.ph-media::before {
  content: "";
  display: block;
  padding-top: var(--ph-pad, 100%);
}

@supports (aspect-ratio: 1) {
  .ph-media {
    aspect-ratio: var(--ph-ratio, 1 / 1);
  }
  .ph-media::before {
    display: none;
  }
}

.ph-media > img,
.ph-media > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ph-media > picture > img {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
}

/* line-height:0 arriba es para que el <img> no deje un hueco de baseline;
   pero cualquier otro hijo (badges, overlays) recupera interlineado normal. */
.ph-media > *:not(img):not(picture) {
  line-height: normal;
}

.ph-media--contain > img,
.ph-media--contain > picture > img {
  object-fit: contain;
}

.ph-media--cover > img,
.ph-media--cover > picture > img {
  object-fit: cover;
}

/* Padding interno opcional para que un casco "contain" no toque los
   bordes de la caja (catálogo, relacionados). */
.ph-media--pad > img,
.ph-media--pad > picture > img {
  padding: var(--ph-inset, 8%);
  box-sizing: border-box;
}

/* La imagen no debe capturar el gesto de arrastrar (ya lo bloquea
   includes/proteccion_imagenes.php, esto es refuerzo). */
.ph-media img {
  -webkit-user-drag: none;
  user-select: none;
}