/* =============================================================================
   Grupo Automotores — sitio público
   contenido.css · entregas, noticias y novedades

   FASE 7. Las últimas cinco pantallas: los tres listados y los dos detalles.

   LOS DOS LIGHTBOX SE UNIFICAN
   ----------------------------
   `entregas.html` tenía un `#entregaModal` propio —con su markup, su CSS y sus
   25 líneas de JS— que era el mismo componente que el `#mediaModal` de
   `_partials/media_modal.html`, con otros ids. Ahora hay uno solo.

   Nombres que NO se renombran, porque los fija `test_noticia_medios.py` y
   `test_novedades.py` como string literal:
     `id="mediaModal"`, `noticia-media-principal`, `noticia-galeria-item`.
   Y hay un test que verifica que el iframe de YouTube **no** aparezca antes
   del primer `<script>`: el embed lo arma el JS al abrir el modal, así que la
   página no carga ningún video que nadie pidió.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   TARJETA DE CONTENIDO — listados de noticias y novedades
   --------------------------------------------------------------------------- */
.ga-ccard {
  display: flex;
  flex-direction: column;
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r-lg);
  overflow: hidden;
  box-shadow: var(--ga-el);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ga-dur-fast) var(--ga-ease),
              box-shadow var(--ga-dur-fast) var(--ga-ease);
}
.ga-ccard:hover { border-color: var(--ga-bone-300); box-shadow: var(--ga-el-2); color: inherit; }
.ga-ccard:focus-visible { outline: 2px solid var(--ga-gold-ink); outline-offset: 2px; }

/* El rayado diagonal es el placeholder: una nota sin foto no puede verse como
   un error de carga. Cuando hay imagen, la tapa. */
.ga-ccard__shot {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(
    -45deg, var(--ga-bone-200) 0 8px, var(--ga-bone-50) 8px 16px);
}
.ga-ccard__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ga-ease);
}
.ga-ccard:hover .ga-ccard__shot img { transform: scale(1.035); }
.ga-ccard__shot > .bi { font-size: 1.75rem; color: var(--ga-bone-300); }

.ga-ccard__body { padding: var(--ga-s-4); display: flex; flex-direction: column; flex: 1; }
.ga-ccard__meta {
  font-family: var(--ga-font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ga-gold-ink);
}
.ga-ccard__title {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: 1rem;
  line-height: var(--ga-lh-snug);
  letter-spacing: var(--ga-track-name);
  color: var(--ga-on-bone);
  margin: var(--ga-s-2) 0 0;
}
.ga-ccard__sub { font-size: var(--ga-t-xs); color: var(--ga-on-bone-mut); margin: var(--ga-s-2) 0 0; }
.ga-ccard__fecha {
  font-family: var(--ga-font-mono);
  font-size: .625rem;
  color: var(--ga-on-bone-mut);
  margin-top: auto;
  padding-top: var(--ga-s-3);
}

/* ---------------------------------------------------------------------------
   TARJETA DE ENTREGA

   Es un botón, no un link: abre el lightbox. Va con `<button>` y no con un
   `<div role="button">` para tener foco y Enter/Espacio gratis.
   --------------------------------------------------------------------------- */
/* Paginada de a 24, así que auto-fill: la última página no puede dibujar tres
   fotos con el ancho de seis. */
.ga-egrid { display: grid; gap: var(--ga-s-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 480px)  { .ga-egrid { grid-template-columns: minmax(0, 1fr); } }

.ga-ecard {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r-lg);
  overflow: hidden;
  background: var(--ga-bone-200);
  cursor: pointer;
}
.ga-ecard img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ga-ease);
}
.ga-ecard:hover img { transform: scale(1.04); }
.ga-ecard:hover { border-color: var(--ga-gold-ink); }
.ga-ecard:focus-visible { outline: 2px solid var(--ga-gold-ink); outline-offset: 2px; }
/* ---------------------------------------------------------------------------
   PIE DE LA TARJETA DE ENTREGA

   Debajo de la foto y no encima. Una leyenda sobre la imagen tapa justo la
   parte donde suele estar la cara de la gente, y sólo entraba una línea — así
   que el segundo dato, el auto entregado, no tenía dónde ir. Debajo entran los
   dos y la foto queda entera.
   --------------------------------------------------------------------------- */
.ga-ecard__pie {
  display: block;
  padding: var(--ga-s-3);
  border-top: 1px solid var(--ga-bone-200);
  text-align: left;
}
.ga-ecard__pie b {
  display: block;
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-sm);
  font-weight: var(--ga-w-med);
  color: var(--ga-on-bone);
}
.ga-ecard__pie span {
  display: block;
  margin-top: 2px;
  font-family: var(--ga-font-mono);
  font-size: var(--ga-t-xs);
  color: var(--ga-on-bone-mut);
}

.ga-ecard__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--ga-s-8) var(--ga-s-3) var(--ga-s-3);
  background: linear-gradient(transparent, rgba(26, 24, 21, .9));
  color: var(--ga-on-ink);
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  font-weight: var(--ga-w-med);
  text-align: left;
}
.ga-ecard__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 241, 234, .92);
  font-size: 2.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   DETALLE DE NOTICIA / NOVEDAD
   --------------------------------------------------------------------------- */
.ga-art { max-width: 760px; margin: 0 auto; }

/* `noticia-media-principal` y `noticia-galeria-item` son hooks de test. */
.noticia-media-principal {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r-xl);
  overflow: hidden;
  background: var(--ga-bone-200);
  cursor: pointer;
}
.noticia-media-principal img { width: 100%; height: auto; display: block; }
.noticia-media-principal:focus-visible { outline: 2px solid var(--ga-gold-ink); outline-offset: 2px; }
.noticia-media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 241, 234, .94);
  font-size: 3rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
  pointer-events: none;
}

.noticia-galeria { display: flex; flex-wrap: wrap; gap: var(--ga-s-2); margin-top: var(--ga-s-3); }
.noticia-galeria-item {
  position: relative;
  width: 88px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--ga-bone-200);
  border-radius: var(--ga-r-xs);
  overflow: hidden;
  background: var(--ga-bone-200);
  cursor: pointer;
}
.noticia-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noticia-galeria-item:hover { border-color: var(--ga-gold-ink); }
.noticia-galeria-item:focus-visible { outline: 2px solid var(--ga-gold-ink); outline-offset: 2px; }
.noticia-galeria-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 241, 234, .92);
  font-size: 1.25rem;
  pointer-events: none;
}

.ga-art__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ga-on-bone);
  margin: var(--ga-s-6) 0 0;
}
.ga-art__cuerpo { margin-top: var(--ga-s-5); }
.ga-art__cuerpo p { font-size: var(--ga-t-body); line-height: 1.7; color: var(--ga-on-bone); margin: 0 0 1em; max-width: 66ch; }
.ga-art__cuerpo p:last-child { margin-bottom: 0; }

.ga-art__pie {
  margin-top: var(--ga-s-10);
  padding-top: var(--ga-s-5);
  border-top: 1px solid var(--ga-bone-200);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-s-3);
  align-items: center;
  justify-content: space-between;
}

/* ---------------------------------------------------------------------------
   LIGHTBOX ÚNICO  (`_partials/media_modal.html`)

   Reemplaza al `#entregaModal` que `entregas.html` tenía por su cuenta.
   --------------------------------------------------------------------------- */
.ga-lightbox .modal-content {
  background: var(--ga-ink-900);
  color: var(--ga-on-ink);
  border: 1px solid var(--ga-gold-a30);
  border-radius: var(--ga-r-xl);
  overflow: hidden;
}
.ga-lightbox .modal-body { padding: 0; }
.entrega-modal-img { width: 100%; display: block; }
.ga-lightbox__pie { padding: var(--ga-s-4) var(--ga-s-5) var(--ga-s-5); }
.ga-lightbox__pie h2 {
  font-family: var(--ga-font-disp);
  font-weight: var(--ga-w-med);
  font-size: var(--ga-t-h3);
  letter-spacing: var(--ga-track-disp);
  color: var(--ga-on-ink);
  margin: 0;
}
.ga-lightbox__pie p { font-size: var(--ga-t-sm); color: var(--ga-on-ink-mut); margin: var(--ga-s-2) 0 0; }
.ga-lightbox .btn-close {
  position: absolute;
  top: var(--ga-s-3);
  right: var(--ga-s-3);
  z-index: 5;
}


/* Nadie que pidió menos movimiento quiere que la foto se acerque sola. */
@media (prefers-reduced-motion: reduce) {
  .ga-ccard__shot img,
  .ga-ecard img { transition: none; }
  .ga-ccard:hover .ga-ccard__shot img,
  .ga-ecard:hover img { transform: none; }
}


/* La tarjeta de entrega pasa a ser una caja con foto arriba y pie abajo. */
.ga-ecard {
  background: var(--ga-bone-0);
  border: 1px solid var(--ga-bone-300);
  overflow: hidden;
}
.ga-ecard:hover { border-color: var(--ga-gold-ink); }

/* Afordancia de lectura en la tarjeta de contenido: sin nada que lo diga, la
   tarjeta se lee como una ficha informativa y nadie la toca. */
.ga-ccard__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ga-s-3);
  margin-top: var(--ga-s-3);
}
.ga-ccard__leer {
  font-family: var(--ga-font-disp);
  font-size: var(--ga-t-xs);
  font-weight: var(--ga-w-med);
  color: var(--ga-gold-ink);
  white-space: nowrap;
}
.ga-ccard:hover .ga-ccard__leer i { transform: translateX(3px); }
.ga-ccard__leer i { display: inline-block; transition: transform var(--ga-dur-fast) var(--ga-ease); }