/**
 * Componentes del UI Kit SANJO
 *
 * Las piezas que se repiten pantalla tras pantalla en la maqueta —los cuatro
 * tipos de botón, el eyebrow, la tarjeta, el chip de filtro y el tratamiento
 * sobre fondo oscuro— viven aquí como estilos de bloque. Quien edita los aplica
 * desde el panel «Estilos» del bloque; no hay que escribir clases a mano.
 *
 * Todo se expresa con las variables de theme.json, así que un cambio en
 * «Editor → Estilos» arrastra a los componentes sin tocar este archivo.
 *
 * Este archivo se carga en el front-end (sjo_enqueue_assets) y también como
 * estilo del editor (add_editor_style), de modo que el Editor de Sitio pinta lo
 * mismo que el visitante.
 */

/* ---------------------------------------------------------------------------
 * Botones
 *
 * El diseño define cuatro tipos × dos tamaños. El botón sin estilo asignado es
 * «Primario · Grande», que es el que ya describe theme.json; aquí solo están
 * las siete combinaciones restantes.
 *
 * Jerarquía que fija el UI Kit: como mucho un Rojo por sección (es el de
 * conversión), un Primario azul, y los que hagan falta de Outline o Texto.
 *
 * El rojo va SIEMPRE de fondo con texto blanco (5.0:1). Como color de letra
 * sobre azul da 2.09:1 y no se lee, por eso no existe ningún botón con letra
 * roja. El azul medio queda reservado a los accesos del pie.
 * ------------------------------------------------------------------------ */

.wp-block-button[class*="is-style-sjo-"] > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* Tamaño M: el compacto de secciones densas. Se combina con cada tipo. */
.is-style-sjo-primario-m > .wp-block-button__link,
.is-style-sjo-rojo-m > .wp-block-button__link,
.is-style-sjo-outline-m > .wp-block-button__link,
.is-style-sjo-texto-m > .wp-block-button__link {
	padding: 0.625rem 1.25rem;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286;
}

/* Rojo — acción de conversión. */
.is-style-sjo-rojo > .wp-block-button__link,
.is-style-sjo-rojo-m > .wp-block-button__link {
	background-color: var( --wp--preset--color--rojo );
	color: var( --wp--preset--color--base );
	border: 0;
}

.is-style-sjo-rojo > .wp-block-button__link:hover,
.is-style-sjo-rojo-m > .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--rojo-oscuro );
}

/* Outline — acción secundaria al lado de un primario.
   El borde de 1.5 px va por fuera del relleno, así que este botón queda 3 px
   más ancho y más alto que el primario: es lo que hace la maqueta. */
.is-style-sjo-outline > .wp-block-button__link,
.is-style-sjo-outline-m > .wp-block-button__link {
	background-color: transparent;
	color: var( --wp--preset--color--azul );
	border: 1.5px solid var( --wp--preset--color--azul );
}

.is-style-sjo-outline > .wp-block-button__link:hover,
.is-style-sjo-outline-m > .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--azul-suave );
}

/* Texto — enlace-acción en línea. Sin relleno lateral para que la primera
   letra caiga a plomo con el texto que tiene encima. */
.is-style-sjo-texto > .wp-block-button__link,
.is-style-sjo-texto-m > .wp-block-button__link {
	padding-inline: 0;
	background-color: transparent;
	color: var( --wp--preset--color--azul );
	border: 0;
}

.is-style-sjo-texto > .wp-block-button__link:hover,
.is-style-sjo-texto-m > .wp-block-button__link:hover {
	background-color: transparent;
	text-decoration: underline;
	text-decoration-color: var( --wp--preset--color--rojo );
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Foco visible. theme.json no sabe declarar « outline », así que el anillo se
   define aquí. Se usa :focus-visible para que no salte al hacer clic con el
   ratón, y el mismo anillo sirve para chips y enlaces de tarjeta. */
.wp-block-button__link:focus-visible,
.sjo-chip:focus-visible {
	outline: 2px solid var( --wp--preset--color--rojo );
	outline-offset: 2px;
}


/* ---------------------------------------------------------------------------
 * Iconos de botón
 *
 * Seis iconos que se añaden a un botón desde el panel «Estilos». Los archivos
 * están en assets/svg/botones/ y se pintan como máscara, no como imagen: el
 * relleno es « currentColor », así que el icono hereda el color del texto del
 * botón —blanco en el rojo, azul en el de contorno— sin declarar nada más.
 *
 * Hasta la versión 1.17 estos seis SVG se incrustaban como data-URI generados
 * en PHP, con su propia codificación de URL a mano. Ahora son archivos y una
 * regla de una línea cada uno; los nombres de clase no cambian, así que lo que
 * ya los usa —patterns/footer.php— sigue funcionando igual.
 * ------------------------------------------------------------------------ */

.wp-block-button[class*="is-style-sjo-icono-"] > .wp-block-button__link::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 1.05em;
	height: 1.05em;
	margin-inline-end: 0.5em;
	vertical-align: -0.18em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.is-style-sjo-icono-tour > .wp-block-button__link::before {
	-webkit-mask-image: url( "../svg/botones/tour.svg" );
	mask-image: url( "../svg/botones/tour.svg" );
}

.is-style-sjo-icono-destacado > .wp-block-button__link::before {
	-webkit-mask-image: url( "../svg/botones/destacado.svg" );
	mask-image: url( "../svg/botones/destacado.svg" );
}

.is-style-sjo-icono-ayuda > .wp-block-button__link::before {
	-webkit-mask-image: url( "../svg/botones/ayuda.svg" );
	mask-image: url( "../svg/botones/ayuda.svg" );
}

.is-style-sjo-icono-libro > .wp-block-button__link::before {
	-webkit-mask-image: url( "../svg/botones/libro.svg" );
	mask-image: url( "../svg/botones/libro.svg" );
}

.is-style-sjo-icono-enlace > .wp-block-button__link::before {
	-webkit-mask-image: url( "../svg/botones/enlace.svg" );
	mask-image: url( "../svg/botones/enlace.svg" );
}

.is-style-sjo-icono-telefono > .wp-block-button__link::before {
	-webkit-mask-image: url( "../svg/botones/telefono.svg" );
	mask-image: url( "../svg/botones/telefono.svg" );
}

/* ---------------------------------------------------------------------------
 * Eyebrow
 *
 * El rótulo pequeño con filete que abre cada sección: filete de 26×3 en rojo,
 * texto en rojo oscuro, Montserrat 600 a 12/16 con tracking del 8 %.
 *
 * Se aplica a un párrafo o a un encabezado. El filete es un ::before, no un
 * bloque aparte, para que en el editor sea un solo elemento que se escribe de
 * corrido en lugar de dos bloques que se pueden separar sin querer.
 * ------------------------------------------------------------------------ */

.is-style-sjo-eyebrow,
.is-style-sjo-eyebrow-claro {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block: 0;
	color: var( --wp--preset--color--rojo-oscuro );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	line-height: 1.3333;
	letter-spacing: var( --wp--custom--tracking--eyebrow );
	text-transform: uppercase;
}

.is-style-sjo-eyebrow::before,
.is-style-sjo-eyebrow-claro::before {
	content: "";
	flex: none;
	width: 26px;
	height: 3px;
	background-color: var( --wp--preset--color--rojo );
}

/* Centrado: el filete deja de abrir la línea y se apila encima del rótulo,
   que es como se comporta el encabezado de sección centrado de la maqueta. */
.is-style-sjo-eyebrow.has-text-align-center,
.is-style-sjo-eyebrow-claro.has-text-align-center {
	justify-content: center;
}


/* Variante con el filete en blanco. El diseño usa las dos sobre fondo azul: los
   encabezados canónicos de sección llevan el filete blanco
   (semantic/accent/rule-on-inverse), mientras que los eyebrows sueltos del
   banner y del panel del ideario lo mantienen rojo. No es un descuido de la
   maqueta: está así en las tres pantallas, así que se ofrecen los dos estilos y
   se elige el que toque. */
.is-style-sjo-eyebrow-claro {
	color: var( --wp--preset--color--base );
}

.is-style-sjo-eyebrow-claro::before {
	background-color: var( --wp--preset--color--base );
}

/* ---------------------------------------------------------------------------
 * Meta
 *
 * El renglón de datos que va bajo o sobre el titular de una tarjeta: el rango
 * de edad en Nivel, la categoría y la fecha en Noticia. Inter 500 a 12/18 con
 * tracking del 4 % y versalitas.
 *
 * El color se deja en gris suave, que es el de Nivel; la tarjeta de Noticia lo
 * cambia a rojo oscuro desde el selector de color del propio bloque, sin
 * necesidad de un segundo estilo.
 * ------------------------------------------------------------------------ */

.is-style-sjo-meta {
	margin-block: 0;
	color: var( --wp--preset--color--texto-suave );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: var( --wp--custom--tracking--meta );
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Fondo oscuro
 *
 * Los paneles y bandas en azul invierten toda la escala de texto: los títulos
 * pasan a blanco, el cuerpo al azul claro y el eyebrow —filete incluido— a
 * blanco, porque el rojo sobre azul no alcanza contraste legible.
 *
 * Se aplica al grupo que lleva el fondo, y desde ahí baja a lo que contenga.
 * ------------------------------------------------------------------------ */

.is-style-sjo-invertido,
.is-style-sjo-invertido p {
	color: var( --wp--preset--color--azul-200 );
}

.is-style-sjo-invertido :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --wp--preset--color--base );
}

/* Del eyebrow solo cambia el rótulo: el filete sigue siendo rojo. Comprobado en
   las dos secciones oscuras de la portada —el hero y el panel del ideario—, que
   llevan filete #E00026 con texto blanco. */
:is( .is-style-sjo-invertido, .wp-block-cover ) :is( .is-style-sjo-eyebrow, .is-style-sjo-eyebrow-claro ) {
	color: var( --wp--preset--color--base );
}

/* El meta también pasa a blanco: en la banda de admisión los teléfonos van en
   blanco y no en rojo, porque el rojo sobre azul se queda en 2.09:1. */
:is( .is-style-sjo-invertido, .wp-block-cover ) .is-style-sjo-meta {
	color: var( --wp--preset--color--base );
}

.is-style-sjo-invertido :where( a:not( .wp-block-button__link ) ) {
	color: var( --wp--preset--color--base );
}

/* Sobre azul, el botón de contorno y el de texto cambian de color: el azul del
   borde desaparecería contra el fondo.
   La portada entra en el mismo saco sin necesidad de marcarla: WordPress ya
   pinta su texto en blanco por defecto, así que sus botones deben acompañar. */
:is( .is-style-sjo-invertido, .wp-block-cover ) :is( .is-style-sjo-outline, .is-style-sjo-outline-m ) > .wp-block-button__link {
	color: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--base );
}

:is( .is-style-sjo-invertido, .wp-block-cover ) :is( .is-style-sjo-outline, .is-style-sjo-outline-m ) > .wp-block-button__link:hover {
	color: var( --wp--preset--color--azul );
	background-color: var( --wp--preset--color--base );
}

:is( .is-style-sjo-invertido, .wp-block-cover ) :is( .is-style-sjo-texto, .is-style-sjo-texto-m ) > .wp-block-button__link {
	color: var( --wp--preset--color--base );
}

/* ---------------------------------------------------------------------------
 * Tarjeta
 *
 * La caja compartida por las tarjetas de Nivel, Noticia y las de contenido en
 * general: fondo blanco, borde fino, radio de 12 y sombra que se levanta al
 * pasar por encima.
 *
 * El « overflow: hidden » es lo que recorta la imagen a sangre contra las
 * esquinas redondeadas, así que no hace falta redondear también la imagen.
 * ------------------------------------------------------------------------ */

.is-style-sjo-tarjeta,
.is-style-sjo-tarjeta-foto {
	overflow: hidden;
	border-radius: var( --wp--custom--radius--lg );
	box-shadow: var( --wp--preset--shadow--tarjeta );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.is-style-sjo-tarjeta:hover,
.is-style-sjo-tarjeta-foto:hover {
	box-shadow: var( --wp--preset--shadow--tarjeta-hover );
	transform: translateY( -2px );
}

/* La tarjeta blanca lleva borde; la de foto a sangre no, porque el velo navy
   ya la separa del fondo y un borde encima de la imagen se vería sucio. */
.is-style-sjo-tarjeta {
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--border );
}

/* Quien prefiera no ver movimiento se queda solo con el cambio de sombra. */
@media ( prefers-reduced-motion: reduce ) {
	.is-style-sjo-tarjeta,
	.is-style-sjo-tarjeta-foto {
		transition: box-shadow 0.2s ease;
	}

	.is-style-sjo-tarjeta:hover,
	.is-style-sjo-tarjeta-foto:hover {
		transform: none;
	}
}

/* La imagen de cabecera llena el ancho de la tarjeta y arranca pegada al borde
   superior. La proporción y el recorte los fija cada patrón con los ajustes
   propios del bloque Imagen (3:2 en Nivel, 16:9 en Noticia), así que aquí no se
   toca ni la altura ni el object-fit: se dejan a lo que elija quien edita. */
.is-style-sjo-tarjeta :is( .wp-block-image, .wp-block-post-featured-image ) {
	margin-block: 0;
}

.is-style-sjo-tarjeta :is( .wp-block-image, .wp-block-post-featured-image ) img {
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Chip de filtro
 *
 * Píldora de las galerías y del listado de noticias. Solo uno activo por grupo.
 *
 * Se aplica al bloque Botón, que es lo que ya conoce quien edita; el activo se
 * marca con « aria-current » cuando el chip enlaza a un archivo de categoría, o
 * con la clase « es-activo » cuando lo pinta un patrón.
 * ------------------------------------------------------------------------ */

.is-style-sjo-chip > .wp-block-button__link {
	padding: 0.5625rem 1.125rem;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--texto );
	border: 1px solid var( --wp--preset--color--border-fuerte );
	border-radius: var( --wp--custom--radius--pill );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1.4286;
}

.is-style-sjo-chip > .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--azul );
	border-color: var( --wp--preset--color--azul );
}

.is-style-sjo-chip > .wp-block-button__link[aria-current],
.is-style-sjo-chip.es-activo > .wp-block-button__link {
	background-color: var( --wp--preset--color--azul );
	color: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--azul );
}