/*
Theme Name: catedra-unesco
Author: Camilo Vidal
Description: Tema de bloques para la Cátedra UNESCO de Investigación en Comunicación.
Version: 1.0.1
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: catedra-unesco
Tags: block-theme, full-site-editing, news
*/

/* CSS del proyecto: solo lo que theme.json no puede expresar (pseudo-elementos,
   hover-lift, contadores). Todo lo demás vive en theme.json / el editor.

   El CSS de los bloques Cátedra UNESCO NO está aquí: cada bloque trae el suyo en
   blocks/<bloque>/style.css y lo encola blocks/_core/register.php, detrás de
   este archivo y en el orden que fija blocks/blocks.json. */

/* Reserva siempre el hueco de la barra de scroll: sin esto, una página corta
   (sin barra) es más ancha que una larga y el header y el banner se corren */
html { scrollbar-gutter: stable; }

/* Footer pegado al fondo: en una página más corta que la ventana el hueco
   queda entre el contenido y el footer, no en blanco debajo de él. Se resta
   la barra de administración para que no aparezca scroll al estar logueado. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > footer { margin-top: auto; }

/* Texto de las páginas (plantilla pagina-sin-titulo): antes los bloques eran
   hijos directos de .wp-site-blocks, que es flex y no fusiona los márgenes de
   bloques vecinos. Dentro de post-content sí se fusionan; en flex, no. */
.catedra-unesco-pagina {
  display: flex;
  flex-direction: column;
}

/* Tarjeta con barra azul a la izquierda */
.catedra-unesco-card {
  position: relative;
  height: 100%;
  transition: transform .2s, box-shadow .2s;
}
.catedra-unesco-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--wp--preset--color--primary);
}
.catedra-unesco-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
}

/* El soporte de alineación de texto pone has-text-align-justify, pero el CSS
   común de WordPress solo trae left/center/right */
.has-text-align-justify { text-align: justify; }

/* Etiqueta de sección con raya a la derecha: "Nuestra cátedra ————".
   La raya toma el color del texto, así que se cambia desde el editor. */
.catedra-unesco-section-label {
  display: flex;
  align-items: center;
  gap: 16px;
}
.catedra-unesco-section-label::after {
  content: "";
  flex: 0 1 205px;
  height: 4px;
  background: currentColor;
}
/* "Volver al equipo ————": la misma etiqueta, hecha enlace */
.catedra-unesco-back-link a { text-decoration: none; }
.catedra-unesco-back-link a:hover { text-decoration: underline; }

/* Tarjeta del equipo (Quiénes somos): las tres miden lo mismo aunque el texto
   no, y el "Ver más" queda siempre abajo */
.catedra-unesco-team-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.catedra-unesco-team-card > .wp-block-image { margin: 0; }
.catedra-unesco-team-card > .wp-block-image img { display: block; width: 100%; }
.catedra-unesco-team-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Grilla de entradas (listados de categoría). El espacio entre filas va aquí y
   no en blockGap: con un blockGap de dos valores core mete "30px 23px" dentro
   del calc() de las columnas, la regla queda inválida y sale una sola columna */
.wp-block-post-template.catedra-unesco-post-grid { row-gap: 30px; }
/* Grilla de logos (Redes): por el mismo bug el espacio entre filas va aquí.
   Cada logo trae su ancho del editor y queda centrado en su celda, en vertical
   y en horizontal; catedra-unesco-redes-start lo pega a la izquierda, solo mientras hay
   3 columnas (desde 720px; con menos sale de su columna y se ve corrido) */
.wp-block-group.catedra-unesco-redes-grid {
  row-gap: 8px;
  align-items: center;
  justify-items: center;
}
.catedra-unesco-redes-grid > .wp-block-image { margin: 0; }
@media (min-width: 720px) {
  .catedra-unesco-redes-grid > .catedra-unesco-redes-start { justify-self: start; }
}
/* Tarjeta de entrada: misma idea que la del equipo, una fila de la grilla mide
   lo que la tarjeta más alta */
.catedra-unesco-post-card { height: 100%; }
.catedra-unesco-post-card > .wp-block-post-featured-image { margin: 0; }
.catedra-unesco-post-card .wp-block-post-title a { text-decoration: none; }
.catedra-unesco-post-card .wp-block-post-title a:hover { text-decoration: underline; }
.catedra-unesco-post-card .wp-block-post-excerpt__excerpt { margin: 0; }
/* Tarjeta en fila (Actividades): foto a la izquierda; en el celular se apila */
.catedra-unesco-post-fila > .wp-block-post-featured-image { flex-shrink: 0; }
.catedra-unesco-post-fila .catedra-unesco-justificado { text-align: justify; }
/* Etiqueta azul con la actividad, arriba a la derecha (filtro en functions.php) */
.catedra-unesco-actividad {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.catedra-unesco-actividad a {
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--wp--preset--color--custom-celeste);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
:where(.catedra-unesco-actividad a) { font-family: var(--wp--preset--font-family--roboto); }
.catedra-unesco-actividad a:hover { background: var(--wp--preset--color--custom-azul); }
@media (max-width: 600px) {
  .catedra-unesco-post-fila.catedra-unesco-post-fila { flex-direction: column; }
  .catedra-unesco-post-fila > .wp-block-post-featured-image img { width: 100% !important; }
}
/* Paginación de los listados (cuántas por página, en functions.php). El margen va
   aquí: query-pagination no pinta el margin que se le pone en el editor */
.wp-block-query-pagination {
  margin-top: 40px;
  gap: 8px;
  align-items: center;
  font-size: 15px;
}
:where(.wp-block-query-pagination) { font-family: var(--wp--preset--font-family--roboto); }
.wp-block-query-pagination-numbers { display: flex; gap: 8px; }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
  color: #03122e;
  text-decoration: none;
}
.wp-block-query-pagination .page-numbers {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wp--preset--color--line);
}
.wp-block-query-pagination a:hover { text-decoration: underline; }
.wp-block-query-pagination .page-numbers.current {
  background: #03122e;
  border-color: #03122e;
  color: #ffffff;
}
.wp-block-query-pagination .page-numbers.dots { border: 0; }
.catedra-unesco-more-link { margin-top: auto; }
.catedra-unesco-more-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.catedra-unesco-more-link a:hover { text-decoration: underline; }
/* Flecha gruesa, del color del enlace */
.catedra-unesco-more-link a::after {
  content: "";
  width: 21px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 18'%3E%3Cpath d='M2 9h19M14 2l7 7-7 7' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 18'%3E%3Cpath d='M2 9h19M14 2l7 7-7 7' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Entrada (single.html). Migas de pan en una sola línea: el título de la
   entrada, el último tramo, se corta con puntos suspensivos. El separador es
   la misma flecha gruesa del "Ver más", en el color de los enlaces */
.catedra-unesco-breadcrumbs ol { flex-wrap: nowrap; }
.catedra-unesco-breadcrumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.catedra-unesco-breadcrumbs li:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catedra-unesco-breadcrumbs li { flex-shrink: 0; }
.catedra-unesco-breadcrumbs a { text-decoration: none; }
.catedra-unesco-breadcrumbs a:hover { text-decoration: underline; }
.catedra-unesco-breadcrumbs li:not(:last-child)::after {
  content: "";
  width: 20px;
  height: 14px;
  margin: 0 10px;
  opacity: 1;
  background: var(--wp--preset--color--custom-celeste);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 18'%3E%3Cpath d='M2 9h19M14 2l7 7-7 7' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 18'%3E%3Cpath d='M2 9h19M14 2l7 7-7 7' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Raya azul bajo el título, a lo ancho de dos tercios de la columna */
.catedra-unesco-entrada-titulo::after {
  content: "";
  display: block;
  width: 71%;
  height: 5px;
  margin-top: 18px;
  background: var(--wp--preset--color--custom-celeste);
}
.catedra-unesco-bajada .wp-block-post-excerpt__excerpt { margin: 0; }
/* Más fuerte que la fuente de titulares global (:root :where(h2)); una fuente
   elegida en el editor (has-*-font-family, con !important) sigue ganando */
.wp-block-post-content.catedra-unesco-entrada-contenido :where(h2, h3) {
  font-family: var(--wp--preset--font-family--roboto);
}
.catedra-unesco-entrada-contenido h2,
.catedra-unesco-entrada-contenido h3 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--wp--preset--color--custom-celeste);
}
.catedra-unesco-entrada-contenido h2 { font-size: 20px; }
.catedra-unesco-entrada-contenido h3 { font-size: 18px; }
.catedra-unesco-entrada-contenido strong { color: #03122e; }
/* Justificado en una columna angosta deja huecos enormes entre palabras */
@media (max-width: 600px) {
  .catedra-unesco-entrada-titulo.has-text-align-justify { text-align: left; }
}

/* Recuadro de Contacto: cada dato con su ícono gris a la izquierda. El ícono va
   en CSS porque wp_kses_post quita los <svg> del texto */
.catedra-unesco-contact-item {
  position: relative;
  padding-left: 26px;
}
.catedra-unesco-contact-item a { text-decoration: none; }
.catedra-unesco-contact-item a:hover { text-decoration: underline; }
.catedra-unesco-contact-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 18px;
  height: 16px;
  background: #555;
  -webkit-mask: var(--catedra-unesco-icon) center / contain no-repeat;
  mask: var(--catedra-unesco-icon) center / contain no-repeat;
}
.catedra-unesco-contact-item--mail {
  --catedra-unesco-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M1 1h16v12H1zM1 1l8 6.5L17 1M1 13l6-5.5M17 13l-6-5.5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.catedra-unesco-contact-item--pin {
  --catedra-unesco-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 17s-5.6-6-5.6-10A5.6 5.6 0 0 1 12.6 7c0 4-5.6 10-5.6 10z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='7' r='2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}
.catedra-unesco-contact-item--youtube {
  --catedra-unesco-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Cpath fill-rule='evenodd' d='M3 0h12a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm4.2 3.6v5.8L12 6.5z'/%3E%3C/svg%3E");
}
@media (max-width: 600px) {
  .catedra-unesco-contact-box {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Listado numerado de publicaciones: 01, 02, 03 */
.catedra-unesco-pub-list {
  counter-reset: pub;
  list-style: none;
  padding: 0;
  margin: 0;
}
.catedra-unesco-pub-list li {
  position: relative;
  padding: 18px 0 18px 48px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
:where(.catedra-unesco-pub-list li) {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500;
  color: #555;
}
.catedra-unesco-pub-list li::before {
  counter-increment: pub;
  content: counter(pub, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  color: var(--wp--preset--color--primary);
  font-size: 12px;
  font-weight: 700;
}

/* Entradilla en cursiva de los artículos destacados */
:where(.catedra-unesco-lead) {
  font-style: italic;
  color: #888;
  font-size: 15px;
}

/* En móvil las rejillas de columnas apilan antes de los 782px por defecto */
@media (max-width: 900px) {
  .catedra-unesco-card { height: auto; }
}

/* Recuadro de la portada (cover de la home): en móvil se centra y estrecha el
   padding para no salirse de pantalla */
.wp-block-cover__inner-container:has(> .catedra-unesco-hero-card) { max-width: 100%; }
/* El recuadro se alinea con el borde del header del lado en que esté (la
   columna de las noticias), no con el borde de la ventana */
.wp-block-cover.is-position-center-right:has(> .wp-block-cover__inner-container > .catedra-unesco-hero-card) {
  padding-right: max(48px, calc((100% - var(--wp--custom--header--content-size, 895px)) / 2)) !important;
}
.wp-block-cover.is-position-center-left:has(> .wp-block-cover__inner-container > .catedra-unesco-hero-card) {
  padding-left: max(48px, calc((100% - var(--wp--custom--header--content-size, 895px)) / 2)) !important;
}
@media (max-width: 600px) {
  .wp-block-cover:has(> .wp-block-cover__inner-container > .catedra-unesco-hero-card) {
    justify-content: center;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .catedra-unesco-hero-card {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .catedra-unesco-hero-card p { font-size: 15px !important; }
}