/* =========================================================================
   CD TERUEL — Listado de noticias (cabecera + filtros + rejilla + paginación)
   ========================================================================= */
.nl-empty { color: var(--texto-sec); padding: 2.5rem 0; grid-column: 1 / -1; }

/* La cabecera roja (nl-hero) está centralizada en components.css */

/* Filtros (sticky bajo el header) */
.nl-filters { background: var(--papel); border-bottom: 1px solid var(--linea); position: sticky; top: var(--header-h); z-index: 40; }
.nl-filters__inner { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.nl-filters__inner::-webkit-scrollbar { display: none; }
.nl-filter {
  padding: 1rem .9rem; white-space: nowrap; border-bottom: 3px solid transparent;
  font-family: "Cinzel", sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: .02em;
  font-size: .86rem; color: var(--texto-sec); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nl-filter:hover { color: var(--gris-900); }
.nl-filter.is-active { color: var(--rojo); border-color: var(--rojo); }

/* Rejilla 3x3 */
.nl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (max-width: 860px) { .nl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nl-grid { grid-template-columns: 1fr; } }

.nl-card { display: flex; flex-direction: column; background: transparent; transition: transform var(--dur) var(--ease); }
.nl-card:hover { transform: translateY(-4px); }
.nl-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--marino); }
.nl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.nl-card:hover .nl-card__media img { transform: scale(1.05); }
.nl-card__body { padding: 1.1rem 0 1.2rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.nl-card__title { font-family: "Cinzel", sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1.18; font-size: 1.05rem; color: var(--gris-900); transition: color var(--dur) var(--ease); }
.nl-card:hover .nl-card__title { color: var(--rojo); }
.nl-card__meta { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-family: "Barlow", sans-serif; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.nl-card__cat { color: var(--rojo); font-weight: 700; }
.nl-card__date { color: var(--gris-400); font-weight: 600; }

/* Paginación */
.nl-pager { display: flex; justify-content: center; gap: .4rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); flex-wrap: wrap; }
.nl-page {
  min-width: 44px; height: 44px; padding: 0 .6rem; display: grid; place-items: center;
  border: 1px solid var(--linea-fuerte); background: #fff; color: var(--gris-900);
  font-family: "Cinzel", sans-serif; font-weight: 700; font-size: 1rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nl-page:hover:not([disabled]):not(.is-active) { border-color: var(--gris-900); }
.nl-page.is-active { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.nl-page[disabled] { opacity: .4; cursor: default; }
.nl-page--nav { font-size: 1.4rem; }