/* La portada de noticias (tanda 269).
 *
 * Fichero propio y no components.css: esto solo lo usa /noticias, y
 * components.css lo descarga TODO el mundo (presupuesto de la portada,
 * ver CLAUDE.md).
 *
 * La idea del diseño: la imagen manda. En las tarjetas de guía la
 * portada va pequeña a un lado porque la mayoría de las guías no tienen
 * —está razonado en components.css—, pero una noticia sin imagen no
 * existe: es la carta revelada, el logo del set, el sobre. Aquí la
 * imagen es media noticia, así que va grande. */

.noticias-cabecera {
  margin-bottom: 24px;
}

.noticias-cabecera h1 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.noticias-cabecera p {
  color: var(--text-mid);
  margin-top: 8px;
  max-width: 60ch;
}

/* ── La portada de cada noticia ── */

.noticia-portada {
  background-size: cover;
  background-position: center;
  background-color: var(--ice);
  border-radius: var(--radius-lg);
  /* 16:9 con `aspect-ratio` y no con el truco del padding: así la caja
     reserva su altura antes de que cargue la imagen y la página no pega
     el salto al llegar cada portada. */
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* La intención ya era esta desde el principio —«que no parezca que la
   imagen no ha cargado»— pero la ejecución hacía justo eso: el azul de
   la casa al 45% sobre --ice se quedaba en un rectángulo pálido con un
   icono diminuto flotando, que es exactamente el aspecto de una imagen
   rota (tanda 312).
   Ahora es el degradado de la marca con su trama, el icono opaco y el
   sello abajo: se lee como una portada hecha a propósito. */
.noticia-portada-vacia {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: linear-gradient(135deg, #16405e 0%, #2a7fb5 55%, #3fa3c9 100%);
  color: rgba(255, 255, 255, 0.7);
}
.noticia-portada-vacia::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.1px, transparent 1.2px);
  background-size: 14px 14px;
}
/* El sello. Es decorativo —el nombre del sitio ya está en la barra— así
   que va por CSS y no por markup: no tiene que leerlo un lector de
   pantalla ni aparecer al copiar el texto de la página. */
.noticia-portada-vacia::after {
  content: 'PokeDoc';
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 800;
  color: var(--blanco-fijo);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.noticia-portada-vacia svg {
  position: relative;
}

/* ── El titular: la última noticia, a todo el ancho ── */

.noticia-titular {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 24px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.noticia-titular:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.noticia-titular h2 {
  font-size: var(--t-2xl);
  line-height: 1.2;
  margin-top: 8px;
}

.noticia-titular p {
  color: var(--text-mid);
  margin-top: 12px;
  line-height: 1.5;
}

/* La chapa de «Lo último». Es la única pista de que esa noticia grande es
   la más reciente y no una destacada a mano. */
.noticia-ultima {
  display: inline-block;
  font-size: var(--t-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--white);
  background: var(--navy);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  margin-right: 8px;
}

/* ── La rejilla ── */

.noticias-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.noticia-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}

.noticia-tarjeta:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.noticia-tarjeta h3 {
  font-size: var(--t-lg);
  line-height: 1.3;
  margin-top: 8px;
  /* Tres líneas y puntos suspensivos, pero reservando SIEMPRE el alto de
     las tres: si no, un titular corto y uno largo dejan las tarjetas de
     la misma fila descuadradas. */
  height: 3.9em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.noticia-tarjeta p {
  font-size: var(--t-sm);
  color: var(--text-mid);
  line-height: 1.45;
  margin-top: 8px;
  height: 2.9em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.noticia-cuerpo {
  padding: 12px 4px 2px;
  min-width: 0;
}

.noticia-titular .noticia-cuerpo {
  padding: 4px 8px;
}

.noticia-fecha {
  font-size: var(--t-2xs);
  font-weight: 700;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.noticias-mas {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* ── Pantallas medianas y móvil ──
 *
 * Tres columnas en una tablet dejan portadas de 200 px, que para una
 * carta revelada es no verla. Bajan a dos, y el titular deja de ser dos
 * columnas para que la imagen grande siga siendo grande. */
@media (max-width: 900px) {
  .noticias-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .noticia-titular {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .noticia-titular h2 {
    font-size: var(--t-2xl);
  }
}

@media (max-width: 560px) {
  .noticias-rejilla {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* En una columna, el alto reservado para cuadrar la fila ya no cuadra
     nada: sobra hueco debajo de cada titular corto. */
  .noticia-tarjeta h3,
  .noticia-tarjeta p {
    height: auto;
  }
}

/* La cabecera con su botón de escribir a la derecha (tanda 273). En el
   móvil el botón baja: a 380 px, un título y un botón en la misma línea
   dejan el título en tres renglones de dos palabras. */
.noticias-cabecera-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.noticias-cabecera-fila > div:first-child {
  min-width: 0;
}