/* ==========================================================================
   components/noticia.css — Tarjeta de noticia
   Componente marcado: noticia (index: 3 últimas; noticias: todas).
   ========================================================================== */
.noticias { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.noticia {
  position: relative;          /* contenedor del área clicable de .noticia__enlace */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--hairline) solid var(--c-borde);
  border-radius: var(--radio);
  background: var(--c-blanco);
}
/* Las imágenes son afiches verticales (≈4:5) con texto: se muestran completos
   (contain) sobre fondo bruma, sin recortes ni deformaciones. */
.noticia__imagen { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--c-bruma); }
/* Fuente del afiche, justo debajo de la imagen (organizador del evento, con enlace) */
.noticia__credito { margin: 0; padding: var(--space-2) var(--space-5); max-width: none; font-size: var(--text-xs); color: var(--c-texto-suave); background: var(--c-bruma); }
.noticia__credito a { color: var(--c-laguna); }
.noticia__cuerpo { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.noticia__fecha { font-size: var(--text-sm); font-weight: 600; color: var(--c-laguna); }
.noticia__titulo { margin: 0; font-size: var(--text-lg); }

/* Tarjeta clicable (patrón "enlace extendido"): basta con envolver el texto del
   título en <a class="noticia__enlace" href="…">. Su ::after cubre toda la
   tarjeta, sin anidar enlaces. Mientras no haya enlace no hay hover (no engaña). */
.noticia__enlace { color: inherit; text-decoration: none; }
.noticia__enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.noticia:has(.noticia__enlace) { transition: transform var(--dur-media) var(--ease-cambio); }
.noticia:has(.noticia__enlace):hover { transform: translateY(calc(var(--space-1) * -1)); }
.noticia:has(.noticia__enlace):hover .noticia__titulo { text-decoration: underline; }
.noticia:has(.noticia__enlace:focus-visible) { outline: var(--foco-grosor) solid var(--c-foco); outline-offset: var(--foco-separacion); }
.noticia__enlace:focus-visible { outline: none; box-shadow: none; }   /* el foco se muestra en la tarjeta */
.noticia__resumen { margin: 0; font-size: var(--text-md); color: var(--c-texto-suave); }
.noticia__lugar { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); color: var(--c-texto-suave); }

/* Detalle ampliado (solo en noticias.html): párrafo, ficha de datos y lista de temas */
.noticia__detalle { display: grid; gap: var(--space-4); max-width: var(--medida-texto); margin-top: var(--space-2); font-size: var(--text-md); }
.noticia__detalle p { margin: 0; }
.noticia__datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: var(--space-1) solid var(--c-agua);
  border-radius: var(--radio-sm);
  background: var(--c-bruma);
  font-size: var(--text-sm);
}
.noticia__datos dt { font-weight: 600; color: var(--c-abismo); }
.noticia__datos dd { margin: 0; }
.noticia__datos a { position: relative; z-index: 1; }   /* por encima del área clicable si la tarjeta se enlaza */
.noticia__subtitulo { margin: var(--space-2) 0 0; font-size: var(--text-base); }
.noticia__puntos { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.noticia__puntos li { position: relative; padding-left: var(--space-5); }
.noticia__puntos li::before {
  content: "";
  position: absolute;
  top: var(--vineta-noticia-desfase);
  left: var(--space-1);
  width: var(--vineta-noticia);
  height: var(--vineta-noticia);
  border-radius: var(--radio-circulo);
  background: var(--c-agua);
}
@media (max-width: 640px) {
  .noticia__datos { grid-template-columns: 1fr; gap: 0; }
  .noticia__datos dd + dt { margin-top: var(--space-3); }
}
@media (max-width: 900px) {
  .noticias { grid-template-columns: repeat(2, 1fr); }
  /* Número impar de tarjetas: la última ocupa la fila completa en horizontal
     (imagen | texto) en lugar de quedar huérfana a media anchura. */
  .noticias:not(.noticias--lista) > .noticia:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .noticias:not(.noticias--lista) > .noticia:last-child:nth-child(odd) .noticia__imagen { height: 100%; }
}
@media (max-width: 640px) {
  .noticias { grid-template-columns: 1fr; }
  .noticias:not(.noticias--lista) > .noticia:last-child:nth-child(odd) { display: flex; }
  .noticias:not(.noticias--lista) > .noticia:last-child:nth-child(odd) .noticia__imagen { height: auto; }
}

/* Variante horizontal para el listado completo */
.noticias--lista { grid-template-columns: 1fr; }
.noticias--lista .noticia { display: grid; grid-template-columns: minmax(var(--medida-xs), var(--medida-md)) 1fr; }
/* El afiche va arriba a su proporción natural; si el texto es más largo, la columna sigue en blanco */
.noticias--lista .noticia__imagen { align-self: start; height: auto; }
/* Imagen y crédito apilados en la columna izquierda; el cuerpo ocupa toda la columna derecha
   (sin colocación explícita, el crédito caería en la columna del texto y lo empujaría abajo). */
.noticias--lista .noticia { grid-template-rows: auto auto 1fr; }
.noticias--lista .noticia__imagen { grid-area: 1 / 1; }
.noticias--lista .noticia__credito { grid-area: 2 / 1; }
.noticias--lista .noticia__cuerpo { grid-area: 1 / 2 / -1 / 3; }
@media (max-width: 640px) {
  .noticias--lista .noticia { grid-template-columns: 1fr; grid-template-rows: none; }
  .noticias--lista .noticia__imagen,
  .noticias--lista .noticia__credito,
  .noticias--lista .noticia__cuerpo { grid-area: auto; }
  .noticias--lista .noticia__imagen { height: auto; }
}