/**
 * plugins/themes/gesten/styles/gesten.css
 *
 * Estilos propios del tema Gesten. Se cargan DESPUES de los del tema padre
 * (STYLE_SEQUENCE_LATE), asi que ajustan sin necesitar selectores agresivos.
 *
 * Criterios:
 *  - Cascade layers para que el orden mande sobre la especificidad.
 *  - :where() para aportar 0 de especificidad y que el sitio siga siendo
 *    facil de sobrescribir mas adelante.
 *  - Propiedades logicas (inline/block) en vez de left/right/top/bottom.
 *  - clamp() para espaciado y tipografia fluidos, sin media queries.
 *  - Container queries donde lo que importa es el ancho del contenedor.
 */

@layer gesten.tokens, gesten.embeds, gesten.portada, gesten.a11y;

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */
@layer gesten.tokens {
	/* @property da tipo a la variable: interpolable y con respaldo si falla. */
	@property --gesten-ratio-embed {
		syntax: "<number>";
		inherits: true;
		initial-value: 1.4142;   /* A4 apaisado, lo habitual en un flipbook */
	}

	:root {
		/* Escala de espaciado fluida: crece con el viewport entre dos topes. */
		--gesten-espacio-s: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
		--gesten-espacio-m: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
		--gesten-espacio-l: clamp(2rem, 1.2rem + 3vw, 4rem);

		--gesten-radio: 6px;
		--gesten-borde: color-mix(in oklab, currentColor 14%, transparent);
	}
}

/* ------------------------------------------------------------------ *
 * Contenido adicional de la portada y embebidos
 * ------------------------------------------------------------------ */
@layer gesten.embeds {
	.additional_content {
		container-type: inline-size;
		container-name: gesten-embed;
		margin-block: var(--gesten-espacio-m) var(--gesten-espacio-l);
	}

	/* El iframe del flipbook llega con width/height en linea desde el editor
	 * HTML de OJS. El alto fijo (400px) rompe en movil y desaprovecha el
	 * espacio en pantallas grandes, y al ser estilo en linea solo se puede
	 * neutralizar con !important. A cambio, aspect-ratio lo hace responsive
	 * de verdad sin el truco del padding-bottom. */
	.additional_content :where(iframe) {
		inline-size: 100% !important;
		block-size: auto !important;
		aspect-ratio: var(--gesten-ratio-embed);
		display: block;
		border: 1px solid var(--gesten-borde);
		border-radius: var(--gesten-radio);
	}

	/* En contenedores estrechos conviene un formato mas alto que ancho:
	 * la doble pagina del flipbook se lee fatal apaisada en un movil. */
	@container gesten-embed (max-width: 40rem) {
		.additional_content :where(iframe) {
			--gesten-ratio-embed: 0.85;
		}
	}

	/* Cualquier otro embebido del editor tambien queda contenido. */
	.additional_content :where(img, video, embed, object) {
		max-inline-size: 100%;
		block-size: auto;
	}
}

/* ------------------------------------------------------------------ *
 * Portada
 * ------------------------------------------------------------------ */
@layer gesten.portada {
	/* El contenido adicional va ahora sobre el sumario: se separan para que
	 * se lean como dos bloques distintos. */
	.page_index_journal :where(.current_issue) {
		margin-block-start: var(--gesten-espacio-l);
	}

	/* Titulares sin lineas huerfanas de una sola palabra. */
	.page_index_journal :where(h2, h3) {
		text-wrap: balance;
	}

	/* Los enlaces de anclaje de la portada (#homepageIssue) no deben quedar
	 * pegados al borde superior al saltar. */
	:where(#homepageIssue, #homepageAbout, #pkp_content_footer) {
		scroll-margin-block-start: var(--gesten-espacio-m);
	}
}

/* ------------------------------------------------------------------ *
 * Accesibilidad
 * ------------------------------------------------------------------ */
@layer gesten.a11y {
	/* Foco visible solo para teclado, con offset para que no se solape. */
	:where(a, button, input, select, textarea, summary):focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
		border-radius: 2px;
	}

	/* Respeta a quien pide menos movimiento. */
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}