/*
  media.css
  Componentes para activos reales (imagen/video) del manifiesto — T046 (Fase 4 — US2).
  Usado por primera vez en el caso MEG (build.mjs: renderRealImage/renderRealVideo/
  renderMediaGroup). Principios: nunca recortar de forma que se pierda contenido
  (object-fit: contain, no cover, salvo la portada del caso que es un tratamiento de hero),
  nunca forzar una proporción uniforme (cada imagen reserva su propio aspect-ratio real vía
  atributos width/height + estilo inline generado en build.mjs, evitando salto de layout) y
  evitar la grilla densa de marcadores (masonry--gallery) para composiciones de piezas reales
  con proporciones fijas, donde un empaquetado automático podía dejar huecos.
*/

.media-real {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-l);
  background: var(--color-surface);
}

/* Portada del caso: único lugar donde se recorta (tratamiento de hero, cover en vez de
   contain) — el resto de las imágenes del caso nunca se recortan. */
.case-cover .media-real--cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Portada horizontal con contenido (texto, iconos) hasta los bordes de la pieza: object-fit
   cover recortaría ese contenido en los costados. Mantiene la caja panorámica estándar a
   ancho completo, pero encoge la imagen para que quepa entera (contain) en vez de recortarla. */
.case-cover .media-real--contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

/* Portada de proporción vertical (Turbo Llantas): .case-cover trae aspect-ratio:16/8 fijo
   (work.css) pensado para portadas panorámicas — forzar ahí una pieza 4:5 con object-fit:
   cover recortaría la mayor parte de la imagen. Se anula ese aspect-ratio, se dejan que el
   contenedor tome la proporción real de la imagen (sin recorte) y se limita su ancho para
   que una portada vertical no domine todo el ancho del contenido. */
.case-cover--natural {
  aspect-ratio: auto;
  max-width: 26rem;
  margin-inline: auto;
}

.case-cover--natural .media-real {
  height: auto;
}

/* Fila de imágenes con proporciones explícitas (ver build.mjs renderMediaRowGroup): cada
   fila se arma en el contenido, sin depender de un algoritmo de empaquetado — así ninguna
   composición de pocas piezas fijas puede dejar un hueco. */
.media-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-m);
  align-items: start;
  margin-top: var(--space-m);
}

.media-row + .media-row {
  margin-top: var(--space-m);
}

.media-row__item {
  grid-column: span 12;
  margin: 0;
}

.media-row__item--half {
  grid-column: span 6;
}

/* Turbo Llantas: en el par Bridgestone, la pieza cuadrada/vertical pide protagonismo (five,
   la más angosta de las dos) y su adaptación horizontal ocupa el resto (seven) — más ancho
   para que una franja panorámica corta siga leyéndose bien. */
.media-row__item--five {
  grid-column: span 5;
}

.media-row__item--seven {
  grid-column: span 7;
}

/* Turbo Llantas: las tres piezas de cierre ("Otras campañas") comparten proporción 4:5 y se
   reparten en tres columnas iguales. */
.media-row__item--third {
  grid-column: span 4;
}

/* Cavanevla: fila de 4 piezas — usada para darle al video vertical (Argus) una columna más
   angosta que sus vecinas, en vez de repetir el mismo "third" que ya tenían otras piezas. */
.media-row__item--quarter {
  grid-column: span 3;
}

@media (max-width: 46rem) {
  .media-row__item--half,
  .media-row__item--five,
  .media-row__item--seven,
  .media-row__item--third,
  .media-row__item--quarter {
    grid-column: span 12;
  }
}

.case-section__subheading {
  color: var(--color-text-muted);
  margin-top: var(--space-2xs);
  margin-bottom: 0;
  max-width: 42rem;
}

/* Grilla de piezas cuadradas (Memorial): las seis piezas comparten proporción 1:1 real, así
   que la grilla no necesita el sistema de alturas dispares de .masonry — cada celda es
   naturalmente cuadrada y object-fit:contain evita cualquier recorte de su contenido. */
.media-square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-m);
}

.media-square-grid__item {
  margin: 0;
}

.media-square-grid .media-real {
  aspect-ratio: 1 / 1;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 60rem) {
  .media-square-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  .media-square-grid {
    grid-template-columns: 1fr;
  }
}

/* Los dos videos de Memorial: lado a lado en escritorio, apilados en celular. */
.video-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
  margin-top: var(--space-m);
}

@media (max-width: 46rem) {
  .video-row {
    grid-template-columns: 1fr;
  }
}

/* object-fit: cover solo entra en juego para el poster (la caja ya tiene el aspect-ratio real
   del video, así que durante la reproducción el cuadro coincide 1:1 y esto no recorta nada del
   video en sí). Sin esto, un poster cuya proporción no coincide exacto con la del video (p. ej.
   una foto de producto vertical reutilizada como poster de un video horizontal) se ve con
   barras negras a los costados en vez de llenar el espacio. */
.media-real-video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius-l);
  background: #000;
}