/* =====================================================
   FPUC — Página: Material educativo (page-material-educativo.php)
   -----------------------------------------------------
   Wireframe: wireframe/material-educativo.html.

   Casi todo lo pinta components.css: el hero de banda, las tarjetas de ficha
   (variante news), los chips, las tarjetas de "material a medida" (variante
   tool) y la paginación. Acá va sólo lo propio de esta página:

     · la caja del buscador y las dos filas de chips
     · la ficha destacada, que es la única tarjeta apaisada del sitio
     · la separación entre bloques y el enlace "Ver los N de…"

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


/* =====================================================
   CHROME
   ===================================================== */

/* Mismo caso que Noticias (pages/noticias.css): la banda del hero es del mismo
   azul que el botón "Dona" de las internas, así que sobre ella el botón 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—. Vuelve al coral, como en 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, igual que la de
   Noticias. No lleva botón a la vista: se envía con Enter, y el botón queda
   para lector de pantalla y teclado. */
.fpuc-material__buscador {
  max-width: 560px;
  margin-bottom: var(--fpuc-space-5);
}
.fpuc-material__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-material__input::placeholder { color: var(--fpuc-text-subtle); }
.fpuc-material__input:focus-visible {
  outline: 3px solid var(--fpuc-focus-ring);
  outline-offset: 2px;
}

/* Son dos filtros distintos que además se combinan —"Estudiantes" Y "PDF"—, y
   pegados uno bajo otro se leían como una sola tira de ocho pastillas
   excluyentes. Cada uno va con su rótulo a la izquierda y una línea entre
   medio, que es lo que los separa en dos cosas. */
.fpuc-material__filtros {
  margin-bottom: var(--fpuc-space-8);
  border: 1px solid var(--fpuc-border-subtle);
  border-radius: var(--fpuc-radius-md);
}

.fpuc-material__filtro {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: baseline;
  gap: var(--fpuc-space-4);
  padding: var(--fpuc-space-4) var(--fpuc-space-5);
}
.fpuc-material__filtro + .fpuc-material__filtro {
  border-top: 1px solid var(--fpuc-border-subtle);
}

/* El rótulo dice de qué va la fila; en versales chicas para que no compita con
   las pastillas, que son lo que se pincha. */
.fpuc-material__filtro-label {
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-meta);
  font-weight: var(--fpuc-weight-semibold);
  letter-spacing: var(--fpuc-tracking-wide);
  text-transform: uppercase;
  color: var(--fpuc-text-muted);
}

/* Chips a la izquierda, no centrados: centrados quedarían descolgados del
   rótulo con el que forman fila. */
.fpuc-material__chips { justify-content: flex-start; }

/* El formato es secundario respecto al público: pastillas más chicas para que
   se lean como un segundo nivel y no como otro menú. */
.fpuc-material__chips--formato .fpuc-chip {
  padding: var(--fpuc-space-2) var(--fpuc-space-4);
  font-size: var(--fpuc-text-small);
}


/* =====================================================
   FICHA DESTACADA
   ===================================================== */

/* La única tarjeta apaisada del sitio: foto a la izquierda y cuerpo a la
   derecha. Las proporciones son las del wireframe — algo menos de la mitad para
   la foto— y el cuerpo se centra en vertical cuando el texto es corto. */
.fpuc-material-destacado {
  display: grid;
  grid-template-columns: 5fr 7fr;
  margin-bottom: var(--fpuc-space-9);
  border-radius: var(--fpuc-radius-md);
  overflow: hidden;
  background: var(--fpuc-surface-card);
  box-shadow: var(--fpuc-shadow-lg);
}

.fpuc-material-destacado__media {
  display: block;
  min-height: 320px;
  background-color: var(--fpuc-lavender);
  background-size: cover;
  background-position: center;
  transition: opacity var(--fpuc-transition);
}
.fpuc-material-destacado__media:hover { opacity: 0.9; }

.fpuc-material-destacado__body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--fpuc-space-4);
  padding: var(--fpuc-space-8);
}

/* Los dos badges —"Destacado" y la audiencia— van en la misma línea. */
.fpuc-material-destacado__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fpuc-space-2);
}

.fpuc-material-destacado__meta {
  font-family: var(--fpuc-font-body);
  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-material-destacado__title {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h2-sm);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-h2);
  color: var(--fpuc-text);
}
.fpuc-material-destacado__title a { color: inherit; text-decoration: none; }
.fpuc-material-destacado__title a:hover { color: var(--fpuc-text-accent); }

.fpuc-material-destacado__text {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-muted);
}


/* =====================================================
   TARJETA DE FICHA
   -----------------------------------------------------
   Retoques sobre la tarjeta de noticia (components.css), que es la que se
   reutiliza acá. Van en esta hoja y no en el componente para no mover las de
   Noticias ni las de la portada, que sí quieren el botón relleno.
   ===================================================== */

/* El cuerpo pasa de rejilla a columna flexible. Dos cosas a la vez:

   · el badge deja de estirarse — como ítem de rejilla ocupaba el ancho entero
     y se leía como una banda de color, no como una etiqueta;
   · con `flex: 1` y el CTA en `margin-top: auto`, la llamada a la acción cae
     al fondo de la tarjeta, así que en una fila de cuatro todas quedan a la
     misma altura por larga o corta que sea la bajada. */
.fpuc-material .fpuc-card--news .fpuc-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fpuc-space-3);
}

/* El CTA era un bloque navy relleno, en versales y a ancho casi completo: en
   una tarjeta de 286px pesaba más que el propio titular. Pasa al enlace con
   flecha que el theme ya usa como CTA de tarjeta (.fpuc-link, en herramientas
   y casos de éxito) y que es además lo que dibuja el wireframe. Sigue siendo
   el mismo <a>: sólo cambia cómo se ve. */
.fpuc-material .fpuc-card--news .fpuc-btn {
  margin-top: auto;
  padding: var(--fpuc-space-2) 0 0;
  border: 0;
  background: none;
  color: var(--fpuc-text-accent);
  font-size: var(--fpuc-text-small);
  text-align: left;
}
.fpuc-material .fpuc-card--news .fpuc-btn:hover,
.fpuc-material .fpuc-card--news .fpuc-btn:focus-visible {
  background: none;
  border-color: transparent;
  color: var(--fpuc-navy);
}

/* La flecha se pinta acá y no en la etiqueta para no meterla en el texto que
   se edita en el admin. Lo que abre en pestaña nueva ya trae su ↗ desde
   fpuc_material_cta(), así que ahí no se añade nada. */
.fpuc-material .fpuc-card--news .fpuc-btn::after {
  content: "→";
  transition: transform var(--fpuc-transition);
}
.fpuc-material .fpuc-card--news .fpuc-btn[target]::after { content: none; }
.fpuc-material .fpuc-card--news .fpuc-btn:hover::after,
.fpuc-material .fpuc-card--news .fpuc-btn:focus-visible::after {
  transform: translateX(4px);
}

/* La tarjeta entera responde al puntero: sin el botón relleno hacía falta algo
   que dijera que se puede pinchar. */
.fpuc-material .fpuc-card--news {
  transition: box-shadow var(--fpuc-transition), transform var(--fpuc-transition);
}
.fpuc-material .fpuc-card--news:hover { box-shadow: var(--fpuc-shadow-lg); }

@media (prefers-reduced-motion: no-preference) {
  .fpuc-material .fpuc-card--news:hover { transform: translateY(-2px); }
}

/* =====================================================
   BLOQUES DEL LISTADO
   ===================================================== */

/* Un bloque por colección. La separación entre ellos es la de una sección
   entera: sin esto los cuatro se leen como una sola rejilla larga. */
.fpuc-material__bloque + .fpuc-material__bloque { margin-top: var(--fpuc-space-9); }

/* La descripción de la colección va bajo la línea de la cabecera y en cuerpo
   de texto normal: es una aclaración del estante, no la bajada de una sección. */
.fpuc-material__bloque-texto {
  max-width: 70ch;
  margin: 0 0 var(--fpuc-space-6);
  font-size: var(--fpuc-text-body);
  line-height: var(--fpuc-leading-body);
  color: var(--fpuc-text-muted);
}

/* ---------------------------------------------------------------
   Cabecera de listado
   ---------------------------------------------------------------
   La misma para el listado filtrado ("Estudiantes · 4 materiales" →
   "Quitar filtros") y para cada bloque de colección ("Tutoriales paso a paso ·
   5 materiales" → "Ver todos").

   Antes cada bloque abría con un fpuc_section_header: rótulo en versales más
   el h2 de 48px de una sección entera. Cuatro seguidos partían la página en
   cuatro cuando son cuatro estantes de la misma, y con el campo "Titular" del
   término vacío el rótulo y el h2 decían además lo mismo dos veces.
   --------------------------------------------------------------- */

.fpuc-material__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fpuc-space-3);
  padding-bottom: var(--fpuc-space-3);
  margin-bottom: var(--fpuc-space-6);
  border-bottom: 1px solid var(--fpuc-border-subtle);
}

.fpuc-material__cabecera-titulo {
  margin: 0;
  font-family: var(--fpuc-font-head);
  font-size: var(--fpuc-text-h4);
  font-weight: var(--fpuc-weight-bold);
  line-height: var(--fpuc-leading-title);
  color: var(--fpuc-text);
}

/* El recuento acompaña al titular, no lo encabeza. */
.fpuc-material__cabecera-cuenta {
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body-sm);
  font-weight: var(--fpuc-weight-regular);
  color: var(--fpuc-text-muted);
}
.fpuc-material__cabecera-cuenta::before {
  content: "· ";
}

/* "Quitar filtros" / "Ver todos", al otro extremo de la línea. */
.fpuc-material__cabecera-accion {
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-small);
  font-weight: var(--fpuc-weight-semibold);
  color: var(--fpuc-text-accent);
  text-decoration: none;
  white-space: nowrap;
}
.fpuc-material__cabecera-accion:hover { text-decoration: underline; }


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

@media (max-width: 900px) {
  /* La destacada pasa a columna: la foto arriba con una franja fija, para que
     no se coma la pantalla en un móvil. */
  .fpuc-material-destacado { grid-template-columns: 1fr; }
  .fpuc-material-destacado__media { min-height: 0; aspect-ratio: 16 / 9; }
  .fpuc-material-destacado__body { padding: var(--fpuc-space-5); }
  .fpuc-material-destacado__title { font-size: var(--fpuc-text-h3); }

  /* En una pantalla angosta la columna del rótulo se come el sitio de las
     pastillas: pasa a ir encima de su fila. */
  .fpuc-material__filtro {
    grid-template-columns: 1fr;
    gap: var(--fpuc-space-3);
  }
}