/**
 * noticias.css — Pantalla de Noticias (page-templates/template-noticias.php).
 * Reutiliza la .noticia-card (cards.css) y el módulo category-filter.js.
 */

.noticias-page {
  position:   relative;
  background: var(--nexo-bg);
  color:      var(--nexo-dark);
}

/* Mismo espaciado que el Directorio (.directorio) para que las pantallas se
   vean iguales; sólo cambia la info. Un único clamp evita el bug del
   shorthand con dos clamp(). */
.noticias-page__body {
  padding-block: clamp(var(--space-8), 5vh, var(--space-16));
}

/* ── Grilla (4 por fila en desktop) ────────────────────────────────────── */
.noticias-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
}

.noticias-grid__item {
  display:        flex;
  flex-direction: column;
  min-width:      0; /* permite que las columnas se encojan sin desbordar */
}

.noticias-grid__item > .noticia-card { flex: 1; }

.noticias-grid__item.is-hidden { display: none; }

/* Ajustes para que la tarjeta luzca bien al ser más angosta (4 por fila). */
.noticias-grid .noticia-card__body  { gap: var(--space-3); padding: clamp(var(--space-4), 1.5vw, var(--space-5)); }
.noticias-grid .noticia-card__title { font-size: var(--fs-lg); }
.noticias-grid .noticia-card__cta   { min-height: 2.6rem; }

@media (max-width: 1200px) {
  .noticias-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .noticias-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  /* Móvil: 2 columnas a ancho completo (sin el padding lateral del .container). */
  .noticias-grid { grid-template-columns: repeat(2, 1fr); padding-inline: 0; }
}

/* ── Estado vacío ──────────────────────────────────────────────────────── */
.noticias-vacio {
  padding-block: clamp(var(--space-10), 8vh, var(--space-20));
  text-align:    center;
  font-size:     var(--fs-lg);
  color:         var(--nexo-dark);
}