/*
 * Grasita — estilos de apoyo.
 * La paleta, las tipografías y los espaciados están en theme.json y no se
 * repiten aquí. Esto es solo lo que el editor de bloques no puede expresar.
 */

/* --- Base ---------------------------------------------------------------- */

/*
 * Negro liso. La web actual lleva encima un brillo diagonal (blanco al 7-8 %),
 * pero aquí el fondo es el color de theme.json y nada más.
 */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--tinta);
}

.wp-block-image img {
	display: block;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--crema);
	outline-offset: 3px;
}

/* --- Navegación ---------------------------------------------------------- */

/*
 * El menú no se pliega nunca en hamburguesa: son tres enlaces cortos y en la
 * web actual se quedan en fila también en el móvil.
 */
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* La página en la que estás, marcada: si no, el menú no dice dónde estás. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--crema);
}

/* --- Enlaces ------------------------------------------------------------- */

.wp-block-post-content a,
.wp-block-group a:not(.wp-element-button) {
	text-underline-offset: 0.18em;
}

/* --- Lectura ------------------------------------------------------------- */

/*
 * Los textos largos a un ancho de lectura cómodo (~68 caracteres) y con más
 * interlineado. En una columna de 920 px una línea de 120 caracteres cansa.
 */
.grasita-prosa {
	max-width: 36rem;
	margin-inline: auto;
	line-height: 1.65;
}

/* --- Ritmo vertical ------------------------------------------------------ */

/*
 * La web actual pone el mismo hueco entre todo (1,2 rem), así que las
 * secciones no se leen como secciones. Aquí el hueco dice qué va con qué:
 * mucho aire antes de un titular, poco entre el titular y lo que cuelga de él.
 *
 * Va en CSS y no en cada bloque para que valga también para lo que el equipo
 * añada después, sin tener que acordarse de poner márgenes.
 */

/* Una sección nueva empieza con aire. */
.wp-block-post-content > :is(h2, h3),
.wp-block-post-content > :is(figure, .wp-block-group, .wp-block-columns, .wp-block-gallery) {
	margin-top: var(--wp--preset--spacing--40);
}

/* Pero lo que cuelga de un titular va pegado a él. Las dos reglas dicen lo
   mismo: la segunda existe solo para ganarle en especificidad a la de arriba. */
.wp-block-post-content > :is(h1, h2, h3, h4) + *,
.wp-block-post-content > :is(h1, h2, h3, h4) + :is(figure, .wp-block-group, .wp-block-columns, .wp-block-gallery) {
	margin-top: 0.8rem;
}

/* Una imagen que ilustra el párrafo anterior tampoco se despega de él. */
.wp-block-post-content > p + :is(figure, .wp-block-gallery) {
	margin-top: var(--wp--preset--spacing--20);
}

/* Lo primero de la página no lleva aire arriba: ya lo pone la plantilla. */
.wp-block-post-content > *:first-child {
	margin-top: 0;
}

/* Entre párrafos de un texto largo, algo más que el hueco de base. */
.grasita-prosa + .grasita-prosa {
	margin-top: 1.4rem;
}

/* --- Esquinas ------------------------------------------------------------ */

/*
 * Las cajas y las imágenes van redondeadas. El radio es un token del tema
 * (settings.custom en theme.json), así que se cambia en un sitio y cambia
 * en todas partes.
 */
.wp-block-embed iframe,
.wp-block-image img,
.wp-block-gallery img,
.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radio);
}

.wp-block-group.is-style-franja-negra {
	border-radius: var(--wp--custom--radio-grande);
}

/* --- Bloques ------------------------------------------------------------- */

/* El iframe del tráiler, sin borde. El 16:9 ya lo pone core con la clase
   wp-embed-aspect-16-9; no hay que repetirlo o la altura se duplica. */
.wp-block-embed iframe {
	border: 0;
}

/* --- Fichas de equipo ---------------------------------------------------- */

/*
 * Los retratos son cuadrados en la web actual. Recortarlos aquí evita que la
 * fila baile si alguien sube una foto con otra proporción.
 */
.grasita-equipo .wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

/* El rol, entre corchetes como en la web actual, pero sin meter los corchetes
   en el texto: así el lector de pantalla no los deletrea. */
.grasita-rol {
	font-style: italic;
	margin-block: 0.15rem 0.9rem;
}

.grasita-rol::before {
	content: "[";
}

.grasita-rol::after {
	content: "]";
}

/* En móvil las cuatro fichas se apilan; en tableta van de dos en dos. */
@media (max-width: 781px) {
	.grasita-equipo.wp-block-columns {
		gap: var(--wp--preset--spacing--30);
	}
}

/* --- Logos de apoyo ------------------------------------------------------ */

/*
 * Los logos de los financiadores vienen sobre fondo claro y con proporciones
 * distintas: se les fija la altura para que la fila quede alineada.
 */
.grasita-apoyo .wp-block-image img {
	width: 100%;
	height: auto;
}

/*
 * Son piezas muy apaisadas (682 x 163 px) y van las cuatro en una sola fila,
 * así que su tamaño es el ancho disponible partido por cuatro. Por eso la fila
 * va a ancho completo (alignfull en el patrón) en vez de quedarse en los
 * 1280 px del ancho ancho: es lo único que les da algo más de aire.
 *
 * Por debajo de 600 px ni eso vale —salían a 15 px de alto, ilegibles—, así
 * que ahí se apilan. El !important no es un capricho: core declara
 * .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap !important }
 * y sin otro !important no hay especificidad que lo tumbe.
 */
@media (max-width: 600px) {
	.wp-block-columns.grasita-apoyo,
	.wp-block-columns.grasita-apoyo.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--30);
	}

	.wp-block-columns.grasita-apoyo > .wp-block-column {
		flex-basis: 100%;
	}
}

/* --- Franja destacada ---------------------------------------------------- */

/*
 * Era una caja negra sobre un fondo casi negro; con el fondo en negro puro
 * dejaba de verse. Ahora es una superficie apenas levantada con un filete en
 * crema: destaca el texto sin romper la paleta.
 */
.wp-block-group.is-style-franja-negra {
	background-color: rgba(255, 251, 204, 0.045);
	border: 1px solid rgba(255, 251, 204, 0.18);
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 7vw, 4.5rem);
}

/* --- Ficha técnica ------------------------------------------------------- */

/*
 * El fact sheet, como una tabla de dato y valor: se lee de un vistazo, que es
 * justo lo que necesita quien escribe una nota de prensa.
 */
.wp-block-list.grasita-ficha {
	list-style: none;
	max-width: 34rem;
	margin-inline: auto;
	padding-left: 0;
	text-align: left;
}

.wp-block-list.grasita-ficha > li {
	border-bottom: 1px solid rgba(255, 251, 204, 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	justify-content: space-between;
	padding-block: 0.55rem;
}

.wp-block-list.grasita-ficha > li:last-child {
	border-bottom: 0;
}

.wp-block-list.grasita-ficha strong {
	color: var(--wp--preset--color--crema);
	font-weight: 500;
}

.wp-block-list.grasita-ficha span {
	color: var(--wp--preset--color--blanco);
	text-align: right;
}

/* --- Galería de capturas -------------------------------------------------- */

/* Tres columnas con 20 px de hueco, como la galería de prensa de la web actual. */
.wp-block-gallery.grasita-capturas {
	--wp--style--unstable-gallery-gap: 20px;
	gap: 20px;
}

/* --- Utilidades ---------------------------------------------------------- */

/* Imagen centrada con un ancho fijo, como las de la portada. */
.grasita-centrada {
	margin-inline: auto;
}

/* --- Estilos de bloque registrados en functions.php ---------------------- */

/*
 * Lista con marcas de verificación. La marca va en ::marker y no en ::before:
 * así la lista sigue siendo una lista para los lectores de pantalla, cosa que
 * «list-style: none» rompe en Safari.
 */
.wp-block-list.is-style-marcas {
	list-style: none;
	max-width: 44rem;
	margin-inline: auto;
	padding-left: 1.6em;
	text-align: left;
}

.wp-block-list.is-style-marcas > li {
	list-style-type: "✔";
	padding-left: 0.35em;
}

.wp-block-list.is-style-marcas > li::marker {
	color: var(--wp--preset--color--crema);
}

/* --- Movimiento ---------------------------------------------------------- */

.grasita-enlace-imagen img {
	transition: opacity 0.2s ease;
}

.grasita-enlace-imagen:hover img,
.grasita-enlace-imagen:focus-visible img {
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}