/**
 * [EDUCA-FIDYS][DOCENTES] Archivo y ficha de docentes
 * Archivo: wp-content/themes/fidys/assets/css/educa-fidys-docentes.css
 * Versión: 1.1.0
 *
 * Se carga solo en /docentes/ y en las fichas, desde el snippet
 * [EDUCA-FIDYS][DOCENTES] Plantillas, versionada con filemtime(): basta con
 * subirla por FTP y purgar LiteSpeed y después Cloudflare.
 *
 * Bloques BEM:
 *   .fidys-docente-retrato   Retrato de 200 px, compartido por archivo y ficha
 *   .fidys-docentes          Archivo: cabecera y rejilla
 *   .fidys-tarjeta-docente   Tarjeta de la rejilla
 *   .fidys-docente           Ficha individual
 *
 * Tokens de la hoja base (educa-fidys-base.css), con valor de reserva por si
 * esta hoja llegara a cargarse sola.
 *
 * Sin !important.
 *
 * Changelog
 * 1.1.0 · Borde del retrato de 4 px a 2 px (fino) y box-shadow: none en el
 *         retrato y la imagen, por si otra hoja les aplica sombra.
 *       · El archivo aporta su propio ancho máximo y márgenes laterales:
 *         con el contenedor completo de Astra la rejilla iba pegada a los
 *         bordes de la ventana.
 * 1.0.0 · Versión inicial.
 */

/* ==========================================================================
   Retrato compartido
   Para pasarlo a cuadrado basta con cambiar --fidys-docente-retrato-radio.
   ========================================================================== */

.fidys-docente-retrato {
	--fidys-docente-retrato-tamano: 200px;
	--fidys-docente-retrato-borde: 2px;
	--fidys-docente-retrato-radio: 50%;

	position: relative;
	flex: none;
	box-sizing: border-box;
	width: var(--fidys-docente-retrato-tamano);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: var(--fidys-docente-retrato-borde) solid var(--fidys-color-primary, #003b5c);
	border-radius: var(--fidys-docente-retrato-radio);
	background-color: var(--fidys-color-tint, #dcf0ff);
	box-shadow: none;
}

/* Dos clases: vence al img { height: auto } de Astra */
.fidys-docente-retrato .fidys-docente-retrato__imagen {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	box-shadow: none;
}

.fidys-docente-retrato__iniciales {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--fidys-color-primary, #003b5c);
}

/* ==========================================================================
   Archivo
   ========================================================================== */

/*
 * Ancho máximo y márgenes con los tokens de la web (--fidys-max y
 * --fidys-gutter): el ancho útil queda igual que en .fidys-seccion__interior.
 * Así la rejilla se ve bien tanto con contenedor completo como normal.
 */
.fidys-docentes {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--fidys-max, 1500px);
	margin-inline: auto;
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	padding-inline: var(--fidys-gutter, 35px);
}

.fidys-docentes__cabecera {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.fidys-docentes__titulo {
	margin: 0;
	color: var(--fidys-color-primary, #003b5c);
}

/*
 * El reset de listas de la hoja base ([class*="fidys-"] ul[class]) vale dos
 * clases y un elemento y gana a este selector en margin-block, pero lo deja
 * a 0, que es lo que hace falta aquí. Lo que sí hay que anular es el margen
 * izquierdo que Astra da a todos los ul, y eso lo gana cualquier clase.
 */
.fidys-docentes .fidys-docentes__rejilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fidys-docentes__elemento {
	display: flex;
	margin: 0;
	padding: 0;
}

.fidys-docentes__vacio {
	margin: 0;
	font-size: 1rem;
	color: var(--fidys-color-ink, #111111);
}

/* Paginación numérica de Astra (astra_pagination) */
.fidys-docentes .ast-pagination {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ==========================================================================
   Tarjeta
   El enlace va en el nombre y su ::after cubre toda la tarjeta. El foco se
   dibuja sobre la tarjeta con :focus-within, como en fidys-rejilla.
   ========================================================================== */

.fidys-tarjeta-docente {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
	border-radius: 12px;
}

.fidys-tarjeta-docente__nombre {
	margin: 1.25rem 0 0;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--fidys-color-primary, #003b5c);
}

.fidys-tarjeta-docente .fidys-tarjeta-docente__enlace {
	color: inherit;
	text-decoration: none;
}

.fidys-tarjeta-docente .fidys-tarjeta-docente__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fidys-tarjeta-docente .fidys-tarjeta-docente__enlace:focus {
	outline: none;
}

.fidys-tarjeta-docente:focus-within {
	outline: 3px solid var(--fidys-color-accent, #47799e);
	outline-offset: 10px;
}

.fidys-tarjeta-docente:hover .fidys-tarjeta-docente__enlace {
	color: var(--fidys-color-accent, #47799e);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.fidys-tarjeta-docente__extracto {
	display: -webkit-box;
	margin: 0.5rem 0 0;
	overflow: hidden;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--fidys-color-ink, #111111);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* ==========================================================================
   Ficha individual
   El titular conserva .entry-title y hereda la tipografía de Astra.
   ========================================================================== */

.fidys-docente .fidys-docente__cabecera {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.fidys-docente .fidys-docente__nombre {
	margin: 0;
}

.fidys-docente .fidys-docente__contenido > :first-child {
	margin-top: 0;
}

/* ==========================================================================
   Puntos de ruptura (921 y 544 son los de Astra)
   ========================================================================== */

@media (max-width: 1100px) {
	.fidys-docentes .fidys-docentes__rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 921px) {
	.fidys-docentes .fidys-docentes__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 544px) {
	.fidys-docentes .fidys-docentes__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}