/**
 * Secciones de página
 *
 * Composiciones grandes que no son un componente suelto del UI Kit sino una
 * banda entera. El banner y la tira de alianzas de la portada ya no están aquí:
 * desde el diseño 2026 viven en assets/css/portada.css, con el resto de sus
 * secciones. Lo que queda es el carrusel de tarjetas, que lo usa cualquier
 * pantalla, y los ajustes de móvil que comparten todas.
 *
 * Como componentes.css, se carga en el front-end y como estilo del editor.
 */

/* ---------------------------------------------------------------------------
 * Carrusel
 *
 * En móvil el diseño convierte en carrusel las rejillas de tarjetas y los
 * logotipos de aliados. Por encima de 781 px vuelven a ser lo que eran:
 * rejilla, fila o columnas.
 *
 * El arrastre es del navegador —« overflow-x » más « scroll-snap »—, no de un
 * script: funciona con el dedo aunque el JavaScript no llegue a cargar. El
 * indicador sí lo pinta carrusel.js, y el CSS lo esconde en escritorio.
 *
 * Se ve una tarjeta cada vez, a todo el ancho de la columna de contenido, y el
 * carrusel pasa solo cada tres segundos (carrusel.js). La maqueta dibuja la
 * tarjeta a 272 px de 335 —con la siguiente asomando—, pero así no se leía como
 * carrusel: parecía contenido cortado.
 *
 * El carrusel no se sale del margen de la página.
 *
 * Los selectores llevan el nombre del bloque delante a propósito. Core define
 * « .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column { flex-basis:
 * 0; flex-grow: 1 } », que con dos clases gana a « .sjo-carrusel > * » y deja
 * las cuatro tarjetas repartiéndose el ancho de la pantalla. Con el bloque
 * delante son tres clases y manda esto.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {
	.wp-block-columns.sjo-carrusel,
	.wp-block-group.sjo-carrusel,
	.wp-block-buttons.sjo-carrusel,
	.wp-block-post-template.sjo-carrusel {
		display: flex;
		flex-wrap: nowrap;
		gap: 1rem;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.sjo-carrusel::-webkit-scrollbar {
		display: none;
	}

	.wp-block-columns.sjo-carrusel > .wp-block-column,
	.wp-block-group.sjo-carrusel > *,
	.wp-block-buttons.sjo-carrusel > .wp-block-button,
	.wp-block-post-template.sjo-carrusel > li {
		flex: 0 0 100%;
		max-width: 100%;
		scroll-snap-align: start;
	}

	/* Los chips miden lo que mide su texto y la fila sí se sale por la derecha,
	   hasta el borde de la pantalla: es lo que deja ver que hay más. */
	.wp-block-buttons.sjo-carrusel.sin-indicador > .wp-block-button {
		flex: 0 0 auto;
		max-width: none;
	}

	.wp-block-buttons.sjo-carrusel.sin-indicador {
		margin-right: calc( var( --wp--style--root--padding-right ) * -1 );
		padding-right: var( --wp--style--root--padding-right );
	}
}
@media ( min-width: 782px ) {
	.sjo-carrusel__indicador {
		display: none;
	}
}

/* Cuando el carrusel vive dentro de una fila flex —como los logotipos de
   aliados, que comparten fila con su título— el indicador es un hermano más y
   se pondría al lado. Se le da el ancho entero para que caiga debajo. */
.sjo-carrusel__indicador {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.125rem;
}

.sjo-carrusel__puntos {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* Cada punto es un botón de verdad. La barra mide 4 px pero el área de
   pulsación llega a 20, que es lo mínimo cómodo con el dedo. */
.sjo-carrusel__punto {
	width: 14px;
	height: 20px;
	padding: 8px 3px;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	transition: width 0.25s ease;
}

.sjo-carrusel__punto::before {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background-color: var( --wp--preset--color--border-fuerte );
	transition: background-color 0.25s ease;
}

.sjo-carrusel__punto[aria-current="true"] {
	width: 26px;
}

.sjo-carrusel__punto[aria-current="true"]::before {
	background-color: var( --wp--preset--color--azul );
}

.sjo-carrusel__contador {
	margin: 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;
	font-variant-numeric: tabular-nums;
}

/* Sobre el azul de «Nuestra Vida» y del panel del ideario. */
.is-style-sjo-invertido .sjo-carrusel__punto::before {
	background-color: rgba( 255, 255, 255, 0.38 );
}

.is-style-sjo-invertido .sjo-carrusel__punto[aria-current="true"]::before {
	background-color: var( --wp--preset--color--base );
}

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

@media ( prefers-reduced-motion: reduce ) {
	.sjo-carrusel {
		scroll-behavior: auto;
	}

	.sjo-carrusel__punto,
	.sjo-carrusel__punto::before {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Ajustes de móvil
 *
 * Lo que en la maqueta de 375 px cambia de verdad, más allá de que las columnas
 * se apilen solas.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {
	/* Los botones sobre fondo oscuro se apilan y ocupan todo el ancho. Se excluyen los
	   de tipo Texto: los enlaces de sección tienen que seguir midiendo lo que
	   mide su texto.

	   Se fija « flex-basis » además de « width »: el botón es un elemento
	   flexible, y con solo el ancho el reparto de flexbox puede seguir mandando
	   sobre el tamaño final. */
	.is-style-sjo-invertido .wp-block-buttons:not( .sjo-carrusel ) {
		flex-direction: column;
		align-items: stretch;
	}

	.is-style-sjo-invertido
		.wp-block-buttons:not( .sjo-carrusel ) > .wp-block-button:not( .is-style-sjo-texto, .is-style-sjo-texto-m ) {
		flex: 0 0 100%;
		width: 100%;
		max-width: none;
	}

	.is-style-sjo-invertido
		.wp-block-buttons:not( .sjo-carrusel ) > .wp-block-button:not( .is-style-sjo-texto, .is-style-sjo-texto-m ) > .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

}

/* ---------------------------------------------------------------------------
 * Carrusel en todos los anchos
 *
 * La tira de alianzas no es carrusel solo en móvil: en cuanto hay más
 * logotipos de los que caben, se desliza también en tableta y en escritorio.
 * Cuántos se ven a la vez depende del ancho —cuatro, dos o uno—, y el hueco
 * entre ellos se descuenta del reparto para que el cuarto no se salga.
 *
 * Si caben todos no hay nada que deslizar: carrusel.js mide el desbordamiento
 * y esconde el indicador él solo, así que con cuatro alianzas en escritorio no
 * aparece ningún punto.
 * ------------------------------------------------------------------------ */

.sjo-carrusel.es-siempre {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sjo-carrusel.es-siempre::-webkit-scrollbar {
	display: none;
}

/* Escritorio: cuatro por vista. */
.sjo-carrusel.es-siempre > * {
	flex: 0 0 calc( ( 100% - 3rem ) / 4 );
	max-width: calc( ( 100% - 3rem ) / 4 );
	scroll-snap-align: start;
}

/* Tableta: dos. */
@media ( max-width: 1023px ) {
	.sjo-carrusel.es-siempre > * {
		flex: 0 0 calc( ( 100% - 1rem ) / 2 );
		max-width: calc( ( 100% - 1rem ) / 2 );
	}
}

/* Móvil: uno. */
@media ( max-width: 781px ) {
	.sjo-carrusel.es-siempre > * {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Su indicador se ve en cualquier ancho, al contrario que el de los carruseles
   que solo existen en móvil. */
.sjo-carrusel.es-siempre + .sjo-carrusel__indicador {
	display: flex;
}