/*
  Bloque "Acordió de servei (Empresa)" (spora/servei-acordio-empresa)
  — estilos front + editor.

  Rediseño del 06/10/2026 (el diseño anterior vive en
  spora/servei-acordio-empresa-2). Ver la cabecera de render.php.

  Variables (las publica render.php en el wrapper; el editor, en useBlockProps):
    --sae-title-color        color de los títulos (Geist Light)
    --sae-title-hover-color  color del título activo (STK Light Italic)
    --sae-title-size(-m)     tamaño del título: escritorio / móvil
    --sae-title-lh / -ls     interlineado y tracking del título
    --sae-inactive-op        opacidad de los títulos no activos (0-1)
    --sae-row-gap            separación entre títulos
    --sae-desc-*             tamaño, interlineado, tracking y color de la
                             descripción (Geist Light)
    --sae-label-transform    uppercase | none (rótulo)
    --sae-label-gap          separación rótulo -> lista
    --sae-side-gap           separación lista <-> laterales
    --sae-panel-w            ancho máximo de la descripción lateral
    --sae-dur                duración de las transiciones
    --sae-y                  (view.js) desplazamiento vertical de cada lateral

  ESTRUCTURA (escritorio): grid [lateral izq | lista | lateral der]. La lista
  mide lo que su título más largo y los laterales se reparten el resto, así
  que la descripción nunca pisa los títulos. La izquierda se pega al borde
  izquierdo del bloque y la derecha al derecho.

  Los valores de reserva de las variables son necesarios porque en el editor
  esta hoja se encola sola, sin el style.css del tema.
*/

.spora-sae {
	--sae-geist: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Alias de solo peso 300: garantiza la Light Italic real (ver
	   astra_child_font_faces_css en functions.php). */
	--sae-stk: "STK Bureau Serif Light", "STK Bureau Serif", Georgia, serif;
	--sae-ease: cubic-bezier(0.22, 1, 0.36, 1);

	box-sizing: border-box;
	width: 100%;
	color: var(--sae-title-color, #001A17);
}

.spora-sae * {
	box-sizing: border-box;
}

/* El tema y Astra ponen márgenes a h3/p: aquí no. */
.spora-sae h3,
.spora-sae p {
	margin: 0 !important;
	padding: 0 !important;
}

.spora-sae__stage {
	position: relative; /* offsetParent de filas y laterales (view.js mide con offsetTop) */
	display: grid;
	/* TÍTULOS LARGOS (07/10/2026): con la columna central en `auto` un título
	   inmenso la ensanchaba sin partirse y dejaba los laterales en una tira de
	   pocos píxeles (la descripción salía a una palabra por línea). Ahora cada
	   lateral tiene reservado su ancho (el de la descripción, o el % del
	   bloque configurable en el editor si no cabe; por defecto 18%, antes 26%:
	   el cliente quería los títulos más anchos) y la central puede crecer,
	   como mucho, hasta lo que sobra: si un título no cabe, se parte en
	   varias líneas. */
	--sae-side-min: min(var(--sae-panel-w, 390px), var(--sae-side-min-pct, 20%));
	grid-template-columns:
		minmax(0, 1fr)
		fit-content(calc(100% - 2 * (var(--sae-side-min) + var(--sae-side-gap, 40px))))
		minmax(0, 1fr);
	column-gap: var(--sae-side-gap, 40px);
	align-items: stretch;
	/* Referencia de ancho (100cqi) para la zona de hover a todo el ancho de
	   cada fila (ver «Hover a todo el ancho» más abajo). */
	container-type: inline-size;
}

/* --- Columna central: rótulo + lista ------------------------------------ */

.spora-sae__center {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	text-align: center;
}

.spora-sae .spora-sae__label {
	margin: 0 0 var(--sae-label-gap, 32px) !important;
	font-family: var(--sae-geist);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: var(--sae-label-transform, uppercase);
	color: var(--sae-title-color, #001A17);
}

.spora-sae__list {
	display: flex;
	flex-direction: column;
	gap: var(--sae-row-gap, 14px);
}

.spora-sae .spora-sae__head {
	font: inherit;
	color: inherit;
}

/* El activador no debe parecer un botón: Astra pinta cualquier <button> con
   fondo, borde y sombra, también en :hover/:focus. Se neutraliza en TODOS los
   estados (mismo motivo que en el acordeón anterior). */
.spora-sae .spora-sae__toggle,
.spora-sae .spora-sae__toggle:hover,
.spora-sae .spora-sae__toggle:focus,
.spora-sae .spora-sae__toggle:active {
	display: inline-grid;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	text-decoration: none;
	opacity: 1;
	transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/* Con ratón se activa por hover, no por clic: nada de cursor de enlace. */
.spora-sae-hover .spora-sae .spora-sae__toggle {
	cursor: default;
}

.spora-sae .spora-sae__toggle:focus-visible {
	outline: 1px dotted currentColor;
	outline-offset: 6px;
}

/* Las dos versiones del título, apiladas en la misma celda y fundidas por
   opacidad. La celda mide lo que la más ancha, así que el cambio no empuja
   nada. */
.spora-sae__name {
	grid-area: 1 / 1;
	justify-self: center;
	font-size: var(--sae-title-size, 28px);
	line-height: var(--sae-title-lh, 1.1);
	letter-spacing: var(--sae-title-ls, 0);
	overflow-wrap: break-word;
	transition: opacity var(--sae-dur, 400ms) var(--sae-ease), color var(--sae-dur, 400ms) var(--sae-ease);
}

.spora-sae .spora-sae__name--base {
	font-family: var(--sae-geist);
	font-weight: 300;
	font-style: normal;
	color: var(--sae-title-color, #001A17);
}

/* Los no activos solo se atenúan mientras hay uno activo; sin hover, todos
   a opacidad completa. Sin soporte de :has() no se atenúan: se degrada. */
.spora-sae .spora-sae__list:has( .is-open ) .spora-sae__name--base {
	opacity: var(--sae-inactive-op, 0.4);
}

.spora-sae .spora-sae__name--hover {
	font-family: var(--sae-stk);
	font-weight: 300;
	font-style: italic;
	color: var(--sae-title-hover-color, #001A17);
	opacity: 0;
}

.spora-sae .spora-sae__list .spora-sae__item.is-open .spora-sae__name--base {
	opacity: 0;
}

.spora-sae .spora-sae__item.is-open .spora-sae__name--hover {
	opacity: 1;
}

/* --- Descripción ------------------------------------------------------- */

.spora-sae .spora-sae__text {
	font-family: var(--sae-geist);
	font-weight: 300;
	font-size: var(--sae-desc-size, 16px);
	line-height: var(--sae-desc-lh, 1.4);
	letter-spacing: var(--sae-desc-ls, 0);
	color: var(--sae-desc-color, #001A17);
	text-align: left;
}

/* Enlaces de la descripción: subrayados siempre y sin cambio en hover. */
.spora-sae .spora-sae__text a,
.spora-sae .spora-sae__text a:hover,
.spora-sae .spora-sae__text a:focus,
.spora-sae .spora-sae__text a:active {
	color: inherit;
	text-decoration: underline;
	background: none;
	box-shadow: none;
	opacity: 1;
}

/* La descripción dentro de la fila es solo para tablet/móvil. */
.spora-sae__panel {
	display: none;
}

/* --- Laterales (escritorio) -------------------------------------------- */

.spora-sae__side {
	grid-row: 1;
	min-width: 0;
	display: grid;
	align-items: center; /* sin view.js (editor): centrada en vertical */
}

.spora-sae__side--left {
	grid-column: 1;
}

.spora-sae__side--right {
	grid-column: 3;
}

.spora-sae__aside {
	grid-area: 1 / 1;
	width: 100%;
	max-width: var(--sae-panel-w, 390px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	/* Al irse: fundido más corto, y visibility se apaga al final. */
	transition:
		opacity calc(var(--sae-dur, 400ms) * 0.6) ease,
		transform calc(var(--sae-dur, 400ms) * 0.6) ease,
		visibility 0s linear calc(var(--sae-dur, 400ms) * 0.6);
}

/* Pegadas al borde del bloque, cada una a su lado. */
.spora-sae__side--left .spora-sae__aside {
	justify-self: start;
}

.spora-sae__side--right .spora-sae__aside {
	justify-self: end;
}

/* Con view.js: cada lateral arriba y desplazado hasta la altura de su fila
   (--sae-y), aunque sobresalga del bloque. `translate` va aparte del
   `transform` de la entrada para no pisarse. */
.spora-sae.is-ready .spora-sae__side {
	align-items: start;
}

.spora-sae.is-ready .spora-sae__aside {
	translate: 0 var(--sae-y, 0px);
}

.spora-sae__aside.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition:
		opacity var(--sae-dur, 400ms) ease,
		transform calc(var(--sae-dur, 400ms) * 1.4) var(--sae-ease),
		visibility 0s;
}

/* HOVER A TODO EL ANCHO (petición del cliente, 07/10/2026): el activador no
   es solo el texto del título sino toda la franja de su fila, de borde a
   borde del bloque. Es un ::before invisible de la fila: como es parte de
   ella, view.js lo recibe como un pointerenter de la fila sin tocar nada, y
   como también es parte de la lista, salir de la franja es salir de la lista.
   · Crece medio hueco entre filas arriba y abajo: cruzar de una fila a otra
     no pasa por «fuera» y no parpadea.
   · La lista está centrada en el bloque, así que basta centrar la franja en
     la fila y darle el ancho del escenario (100cqi).
   · Los laterales van POR ENCIMA (z-index) para poder editar la descripción
     en el editor; en el front (con view.js, .is-ready) no reciben el ratón,
     así que la franja también funciona por detrás de la descripción. */
@media (min-width: 922px) {
	.spora-sae__item {
		position: relative;
	}

	.spora-sae__item::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: calc(var(--sae-row-gap, 14px) / -2);
		bottom: calc(var(--sae-row-gap, 14px) / -2);
		left: 50%;
		width: 100cqi;
		transform: translateX(-50%);
	}

	.spora-sae .spora-sae__head {
		position: relative;
		z-index: 1;
	}

	.spora-sae__side {
		position: relative;
		z-index: 1;
	}

	.spora-sae.is-ready .spora-sae__side,
	.spora-sae.is-ready .spora-sae__aside.is-open {
		pointer-events: none;
	}
}

/* --- Tablet / móvil: lista de texto plano --------------------------------
   Petición del cliente (07/10/2026): en móvil el bloque NO tiene ninguna
   interacción, solo la lista de títulos alineada a la izquierda. Las
   descripciones no se muestran: en el front (.is-ready) se ocultan los
   laterales (en el editor siguen, apilados bajo la lista, para poder
   editarlas en la vista de móvil). La copia de la fila (.spora-sae__panel)
   sigue oculta. view.js deja todo cerrado y no hace caso a los toques. */

@media (max-width: 921px) {
	.spora-sae__stage {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.spora-sae__center {
		grid-column: 1;
		text-align: left;
	}

	.spora-sae__name {
		justify-self: start;
		font-size: var(--sae-title-size-m, 20px);
	}

	.spora-sae__list {
		gap: 30px;
	}

	.spora-sae .spora-sae__toggle,
	.spora-sae .spora-sae__toggle:hover,
	.spora-sae .spora-sae__toggle:focus,
	.spora-sae .spora-sae__toggle:active {
		cursor: default;
	}

	/* Editor: laterales apilados bajo la lista. */
	.spora-sae__side,
	.spora-sae__side--left,
	.spora-sae__side--right {
		grid-column: 1;
		grid-row: 2;
		align-items: start;
	}

	.spora-sae__side--left .spora-sae__aside,
	.spora-sae__side--right .spora-sae__aside {
		justify-self: start;
	}

	/* Front: sin descripciones. */
	.spora-sae.is-ready .spora-sae__side {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spora-sae__name,
	.spora-sae__aside,
	.spora-sae__item,
	.spora-sae__panel-inner {
		transition-duration: 1ms !important;
	}
}

/* --- Solo en el editor ------------------------------------------------- */

.spora-sae-editor__tools {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-top: 24px;
	color: #1e1e1e;
}

/* Título editable (RichText): cursor de texto, no la mano del activador. */
.spora-sae .spora-sae__name[contenteditable="true"] {
	cursor: text;
}

.spora-sae .spora-sae__name [data-rich-text-placeholder]::after,
.spora-sae .spora-sae__text [data-rich-text-placeholder]::after {
	opacity: 0.55;
}