/* =====================================================
   FPUC — Página: Noticias (home.php, single.php, archive.php, search.php)
   -----------------------------------------------------
   Dos vistas:
     · la noticia individual ("single noticias.pdf") — columna estrecha sobre
       fondo lavanda, foto, cuerpo y fila de compartir;
     · el listado (home.php y archive.php) — hero, filtros, rejilla de tarjetas
       y paginación. Las tarjetas salen de components.css; acá va sólo lo que
       es propio del listado.

   Sólo var(--fpuc-*): ni un hex ni un tamaño literal.
   ===================================================== */


/* =====================================================
   ARTÍCULO
   ===================================================== */

/* Columna de 812px del diseño (x362 → x1174 en el frame de 1536). Como en
   .fpuc-container, el padding lateral va sumado al ancho del contenido. */
.fpuc-noticia__col { max-width: calc(812px + var(--fpuc-space-5) * 2); }

.fpuc-noticia__head {
  display: grid;
  justify-items: start;
  gap: var(--fpuc-space-4);
  margin-bottom: var(--fpuc-space-7);
}

/* Etiqueta de categoría: pastilla de borde fino sobre el lavanda. Es un enlace
   al archivo de la categoría, así que va como <a> —de ahí `inline-block`— y
   cae a <p> si el término no tiene enlace. */
.fpuc-noticia__cat {
  display: inline-block;
  margin: 0;
  padding: var(--fpuc-space-1) var(--fpuc-space-3);
  border: 1px solid var(--fpuc-border);
  border-radius: var(--fpuc-radius-sm);
  background: var(--fpuc-surface);
  color: var(--fpuc-text-muted);
  font-size: var(--fpuc-text-meta);
  line-height: var(--fpuc-leading-title);
  text-decoration: none;
  transition: border-color var(--fpuc-transition), color var(--fpuc-transition);
}
a.fpuc-noticia__cat:hover,
a.fpuc-noticia__cat:focus-visible {
  border-color: var(--fpuc-border-strong);
  color: var(--fpuc-text);
}

.fpuc-noticia__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h2-sm);
  font-weight: var(--fpuc-weight-semibold);
  line-height: var(--fpuc-leading-h2);
  color: var(--fpuc-text);
}

.fpuc-noticia__date {
  margin: 0;
  font-size: var(--fpuc-text-meta);
  font-weight: var(--fpuc-weight-medium);
  letter-spacing: var(--fpuc-tracking-wide);
  text-transform: uppercase;
  color: var(--fpuc-text-muted);
}

.fpuc-noticia__media {
  margin: 0 0 var(--fpuc-space-6);
  border-radius: var(--fpuc-radius-md);
  overflow: hidden;
  background: var(--fpuc-lavender);
}
.fpuc-noticia__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Bajada en negrita: el primer bloque de texto del diseño. */
.fpuc-noticia__lead {
  margin: 0 0 var(--fpuc-space-5);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}


/* --- Cuerpo: lo que escribe el editor -------------------------------- */

.fpuc-noticia__body {
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-strong);
}
.fpuc-noticia__body > * { margin-block: 0 var(--fpuc-space-5); }
.fpuc-noticia__body > :last-child { margin-bottom: 0; }

.fpuc-noticia__body h2,
.fpuc-noticia__body h3,
.fpuc-noticia__body h4 {
  margin-top: var(--fpuc-space-7);
  font-family: var(--fpuc-font-head);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}
.fpuc-noticia__body h2 { font-size: var(--fpuc-text-h3); }
.fpuc-noticia__body h3 { font-size: var(--fpuc-text-h4); }
.fpuc-noticia__body h4 { font-size: var(--fpuc-text-body-lg); }

.fpuc-noticia__body a { color: var(--fpuc-text-accent); }
.fpuc-noticia__body a:hover { text-decoration: none; }

.fpuc-noticia__body ul,
.fpuc-noticia__body ol { padding-left: var(--fpuc-space-5); }
.fpuc-noticia__body li { margin-bottom: var(--fpuc-space-2); }

.fpuc-noticia__body img { border-radius: var(--fpuc-radius-md); }

.fpuc-noticia__body blockquote {
  margin-inline: 0;
  padding-left: var(--fpuc-space-5);
  border-left: 4px solid var(--fpuc-teal);
  color: var(--fpuc-text-muted);
}

.fpuc-noticia__pages { color: var(--fpuc-text-muted); }


/* --- Compartir ------------------------------------------------------- */

/* Fila alineada a la derecha bajo un filete, como en el diseño (y764). */
.fpuc-noticia__share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fpuc-space-4);
  margin-top: var(--fpuc-space-7);
  padding-top: var(--fpuc-space-7);
  border-top: 1px solid var(--fpuc-border);
}
.fpuc-noticia__share-label {
  font-size: var(--fpuc-text-small);
  color: var(--fpuc-text-muted);
}
.fpuc-noticia__share-list {
  display: flex;
  gap: var(--fpuc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Mismos cuadros azules que el rail flotante de redes. */
.fpuc-noticia__share-link {
  display: grid;
  place-items: center;
  width: var(--fpuc-rail-icon);
  height: var(--fpuc-rail-icon);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-action-alt);
  color: var(--fpuc-text-on-dark);
  font-size: var(--fpuc-text-small);
  text-decoration: none;
  transition: background-color var(--fpuc-transition);
}
.fpuc-noticia__share-link svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.fpuc-noticia__share-link:hover,
.fpuc-noticia__share-link:focus-visible { background: var(--fpuc-navy); }


/* =====================================================
   LISTADO  (home.php, archive.php)
   ===================================================== */

/* El hero de banda (.fpuc-hero--band) y la paginación (.fpuc-pagination) se
   fueron a components.css: los comparte Material educativo. */

/* Acá la banda es del mismo azul que el CTA alterno, así que el "Dona" azul de
   las internas se comería el fondo y sólo dejaría ver su recuadro: leído así
   parece el item activo del menú, no un botón. En Noticias vuelve al coral,
   que es además lo que hace el header montado de la Home. */
.fpuc-siteheader--band .fpuc-btn--donate {
  background: var(--fpuc-action-donate);
  border-color: var(--fpuc-action-donate);
}


/* --- Buscador y filtros ---------------------------------------------- */

/* Caja de borde navy, a la izquierda y a media anchura del contenedor. */
.fpuc-noticias__buscador {
  max-width: 560px;
  margin-bottom: var(--fpuc-space-6);
}
.fpuc-noticias__input {
  width: 100%;
  padding: var(--fpuc-space-4) var(--fpuc-space-5);
  border: 1px solid var(--fpuc-border-strong);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-surface);
  color: var(--fpuc-text);
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
}
.fpuc-noticias__input::placeholder { color: var(--fpuc-text-subtle); }
.fpuc-noticias__input:focus-visible {
  outline: 3px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}

/* Chips a la izquierda, no centrados como los de proyectos (Noticias.pdf y394). */
.fpuc-noticias__filtros {
  justify-content: flex-start;
  margin-bottom: var(--fpuc-space-8);
}


/* El fundido al cambiar de etiqueta lo pone `@view-transition` en base.css,
   que vale para todo el sitio. */


/* --- Tarjetas -------------------------------------------------------- */

/* En el listado el titular va en versales y el botón centrado bajo él. El
   componente los deja en caja baja y a la izquierda (así van en Material
   educativo); la portada tiene sus propias reglas en home.css. */
.fpuc-noticias .fpuc-card--news .fpuc-card__title { text-transform: uppercase; }
.fpuc-noticias .fpuc-card--news .fpuc-btn {
  justify-self: center;
  margin-top: var(--fpuc-space-4);
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {
  .fpuc-noticia__title { font-size: var(--fpuc-text-h3); }
  .fpuc-noticia__share {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}