/*
 * (((fgm))) — lo que `theme.json` no puede decir.
 *
 * `theme.json` cubre paleta, tipografía, espaciado y estilos por bloque. Lo
 * que NO cubre es la disposición de dos columnas con una barra lateral fija,
 * porque eso es una decisión de retícula del documento entero y no de un
 * bloque. Va acá, y es casi todo lo que hay en este archivo.
 *
 * Medido sobre `00000000.info` el 2026-09-09, con la ficha
 * `diseno/00000000.md` al lado.
 */

/* --------------------------------------------------------------- el lienzo */

/*
 * Dos columnas: una barra estrecha y el resto.
 *
 * El original lo resuelve con `av_header_sidebar` de Enfold, que es posición
 * absoluta y un `margin-left` en el contenido. Acá es una rejilla, que hace lo
 * mismo sin números mágicos y colapsa sola en móvil.
 *
 * 200px es donde termina el menú del original a 1440, medido: llega a ras del
 * borde de su columna y el contenido arranca en 230.
 */
.fgm-lienzo {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 0;
	min-height: 100vh;
	align-items: start;
}

/* LA RELACIÓN ENTRE LAS DOS COLUMNAS, MEDIDA DEL ORIGINAL a 1440 px:
 *
 *     menú      termina en x=200, pegado al borde
 *     contenido empieza en x=230  ->  30 px de separación
 *     ancho     600 px, anclado a la izquierda (`float:left` en Enfold)
 *
 * Lo nuestro daba menú hasta x=246 y contenido en x=423, con una caja de 760
 * centrada: 177 px de hueco y el bloque flotando en medio de la pantalla. No
 * era un margen mal puesto -- estábamos usando el `constrained` centrado que
 * hereda twentytwentyfive, que es otra idea de página.
 *
 * Se corrige en dos sitios y ninguno es un margen a ojo: `contentSize` pasa a
 * 600px en `theme.json`, y el `padding` raíz que el padre pone a 5rem se anula
 * ahí mismo -- era el que empujaba el contenido 80px hacia adentro. Acá sólo
 * queda anclarlo a la izquierda, porque `constrained` centra por definición. */
/* **La caja se fija acá y las plantillas dejaron de usar `constrained`.**
 *
 * El primer intento fue anclar los hijos con `margin-inline: 0`. No sirve: el
 * núcleo emite, por contenedor, `margin-left: auto !important; margin-right:
 * auto !important` para el layout `constrained`, así que anclarlo pide otro
 * `!important` encima -- y `__submenu-container` ya nos enseñó adónde lleva
 * esa pila. Medido: el título quedaba con `margin: 516.5px` a cada lado.
 *
 * Se les quitó `"layout":{"type":"constrained"}` al grupo `main` y al
 * `post-content` de las cinco plantillas. Sin layout, el bloque fluye al ancho
 * de su columna y la caja la pone esta regla, que es donde se puede leer por
 * qué mide lo que mide.
 *
 * La regla está más abajo, junto al resto del bloque de contenido, para que
 * la caja se defina en un solo sitio: había dos `.fgm-contenido` y la de abajo
 * --con `padding` en taquigrafía-- pisaba a la de arriba en silencio. */

/* --------------------------------------------------------- la barra lateral */

.fgm-lateral {
	position: sticky;
	top: 0;
	/* El menú es lo único que hay en la columna: se pega arriba y acompaña. */
	/* Sin aire a la derecha: en el original el menú llega A RAS del borde de
	 * su columna (x=200) y el contenido empieza 30px después (x=230). El
	 * relleno derecho que había dejaba el texto en x=166 y abría un hueco de
	 * 54px donde el original tiene 30. */
	padding: var(--wp--preset--spacing--30) 0
	         var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	/*
	 * **Alineado a la derecha, contra el contenido.** Es la decisión de diseño
	 * más fuerte del sitio (`diseno/00000000.md`): el menú no se lee como una
	 * columna suelta sino como un borde del contenido.
	 */
	text-align: right;
}

/* EL ROTULO DEL SITIO NO VA, Y NO ES UN OLVIDO.
 *
 * El original lo esconde: `.logo { display: none !important; }` en su
 * `dynamic_avia/enfold.css`, leido del servidor el 2026-09-17. Y su propia
 * captura --`diseno/capturas/personal-1440.jpg`-- lo confirma: la columna
 * empieza directamente en INICIO, sin nada encima.
 *
 * Nosotros poniamos un `wp:site-title` con «(((fgm)))» a 11px encima del
 * menu. Se quito del `parts/menu-lateral.html`. La vuelta a la portada la da
 * el propio INICIO del menu, que es como funciona el original.
 *
 * EL MENU, MEDIDO CONTRA EL ORIGINAL el 2026-09-17 sobre el CSS servido:
 *
 *     .av-main-nav > .menu-item > a .avia-menu-text
 *         font-size: 11px · font-weight: 300 · uppercase · line-height: 1.8em
 *     .html_header_sidebar #header .av-main-nav > li > a .avia-menu-text
 *         color: #575757
 *     .av-main-nav > .current_page_item > a .avia-menu-text
 *         font-weight: bold
 *
 * El cuerpo y las versales ya cuadraban (11px, 300, uppercase). Lo que no:
 * el color iba en `tenue` (#999999), mas claro que el original, y el alto de
 * linea en 1,9 contra 1,8. Los dos viven en `theme.json`, bajo
 * `styles.blocks.core/navigation`, que no admite comentarios: por eso la
 * medicion se anota aca. */

/*
 * El menú vertical.
 *
 * `wp:navigation` en vertical ya emite una lista en columna; lo que falta es
 * quitarle el aire horizontal que trae por omisión y alinear a la derecha,
 * porque `justifyContent` de flex no alcanza cuando los ítems ocupan todo el
 * ancho.
 */
.fgm-menu .wp-block-navigation__container {
	gap: 0;
	align-items: flex-end;
}

.fgm-menu .wp-block-navigation-item__content {
	padding: 0.1rem 0;
	text-decoration: none;
}

/*
 * **La sección activa, en negrita y en tinta.** El original la marca así, y es
 * la única señal de ubicación que tiene el sitio: no hay migas de pan ni
 * título de sección repetido.
 *
 * WordPress pone `current-menu-item` y `current-menu-ancestor` en el `<li>`.
 * Se cubren las dos: estando en una obra, su sección sigue marcada.
 */
.fgm-menu .current-menu-item > .wp-block-navigation-item__content,
.fgm-menu .current-menu-ancestor > .wp-block-navigation-item__content,
.fgm-menu .current_page_item > .wp-block-navigation-item__content {
	font-weight: 700;
	color: var(--wp--preset--color--tinta-fuerte);
}

/*
 * **Los submenús van PLEGADOS.** Medido sobre el original el 2026-09-09: su
 * menú tiene 63 ítems en el HTML pero muestra **once** — `Inicio · Agenda ·
 * Acciones · Instalaciones · Publicaciones · Curatoría · Editorial · Talleres
 * · Radio · Web · CV`. Ocho de esos once tienen submenú, y `Acciones` y
 * `Talleres` tienen además un tercer nivel.
 *
 * La primera versión de esta hoja los dejaba todos abiertos (`opacity:1`) y la
 * columna sacaba los 63 de una vez. Eso no es el sitio: es su mapa entero
 * volcado en la barra.
 *
 * Cuelgan en la MISMA columna, no en un panel flotante --el original los
 * despliega hacia abajo, empujando el resto-- así que `position: static` se
 * queda; lo que cambia es que arrancan ocultos.
 */
.fgm-menu .wp-block-navigation-item:not(.open-always)
	> .wp-block-navigation__submenu-container {
	position: static;
	border: 0;
	padding: 0 0 0 0;
	min-width: 0;
	background: transparent;
	text-align: right;
	display: none;
}

/* **NO SE ABRE NADA AL PASAR EL PUNTERO.** Este es el comportamiento del
 * original y costó entenderlo: se hace CLIC en una sección, se entra en ella,
 * y ahí aparece su menú secundario desplegado hacia abajo. Nada se despliega
 * por pasar por encima.
 *
 * Antes teníamos un `:hover` que abría un panel, y el núcleo lo dibuja
 * POSICIONADO: tapaba las secciones de abajo en vez de empujarlas. Dos
 * defectos en uno -- un gesto que el original no tiene, resuelto de una forma
 * que el original no usa.
 *
 * Quitarlo no deja nada fuera de alcance: cada sección es un enlace y entrar
 * en ella es lo que abre su índice, con ratón, con teclado o con el dedo. Es
 * el mismo camino para los tres, que es más de lo que ofrecía el `:hover`.
 *
 * Lo único que muestra un submenú es `.open-always`, y esa clase se la pone
 * `personal_liberacoop_rama_abierta` a la rama en la que estás. */

/* ------------------------------------------- el índice de la rama abierta
 *
 * **Qué es.** El submenú de la sección en la que estás, abierto y en el flujo:
 * empuja hacia abajo al resto del menú en vez de flotar encima. Quién decide
 * cuál se abre es `personal_liberacoop_rama_abierta` en `functions.php`, que
 * le pone `submenuVisibility: always` SOLO a la rama activa; el núcleo emite
 * entonces la clase `open-always` y él mismo lo pone en flujo:
 *
 *     .has-child.open-always > .wp-block-navigation__submenu-container {
 *         position: static; visibility: visible; opacity: 1;
 *         height: auto; width: auto; flex-basis: 100% }
 *
 * Por eso acá no hay un solo `!important`: el núcleo ya lo muestra, nosotros
 * sólo lo vestimos. La regla de arriba se excluye con `:not(.open-always)`
 * para no taparlo con nuestro propio `display: none`.
 *
 * **La escala, medida del original** (`dynamic_avia/enfold.css`, 2026-09-17):
 *
 *     nivel 1   11px · 300 · uppercase · 1.8em
 *     nivel 2   11px · line-height 13px
 *     nivel 3    9px · line-height  9px
 *
 * Y la barra de 4px a la derecha de cada sub-ítem, que es la firma visual del
 * sub-índice y no estaba en la ficha de diseño:
 *
 *     .menu-item-has-children ul a .avia-menu-text
 *         border-right: 4px solid #f2f2f2; padding-right: 7px; min-width: 100px
 *     .menu-item-has-children ul a:hover .avia-menu-text
 *         border-right: 4px solid #3ab0c8; background-color: #c6eaf2
 *
 * La barra va a la DERECHA porque toda la columna está alineada a la derecha
 * contra el contenido: es el borde del bloque de texto, no un adorno suelto.
 */
/* El original no tiene chevron: el índice abierto ES la señal de que hay
 * submenú, y un botón que abre lo que ya está abierto sólo confunde. El
 * bloque lo dibuja igual porque la clase se la ponemos después de renderizar
 * --ver `personal_liberacoop_rama_abierta`--, así que se esconde acá. Sigue
 * siendo un `<button>` en el árbol, alcanzable por teclado, y eso está bien:
 * lo que no aporta es su dibujo. */
.fgm-menu .open-always > .wp-block-navigation-item__content
	+ .wp-block-navigation-submenu__toggle,
.fgm-menu .open-always > .wp-block-navigation-submenu__toggle {
	display: none;
}

/* NI HUECO NI SANGRÍA: el sub-índice va a ras y apretado, como el original.
 *
 * El núcleo aplica su `block-gap` al submenú abierto, y lo aplica dos veces:
 * como `gap` entre ítems y como relleno lateral del contenedor. Con el
 * `block-gap` de este tema son 19,2px, y el resultado medido era:
 *
 *     nivel 1 termina en      200   (a ras del borde de la columna)
 *     sub-ítems terminan en   181   <- 19,2 de relleno
 *     separación entre subs    35   <- 13 de línea + 19,2 de hueco
 *
 * El original no tiene ninguno de los dos: sus sub-ítems terminan donde
 * terminan los de primer nivel, y las líneas van a 13px una de otra, que es
 * su `line-height` y nada más. Así la barra gris queda alineada con el borde
 * del menú y el bloque se lee como un párrafo, no como una lista suelta.
 *
 * El selector lleva `.wp-block-navigation.fgm-menu` y `.has-child` para pasar
 * de (0,3,0) a (0,5,0) y ganarle al del núcleo, que es (0,4,0). Es subir
 * especificidad con clases que el bloque YA tiene, no un `!important`: la
 * diferencia es que esto sigue siendo sobreescribible por quien venga
 * después. */
.wp-block-navigation.fgm-menu .has-child.open-always
	> .wp-block-navigation__submenu-container {
	gap: 0;
	padding: 0;
	text-align: right;
	align-items: flex-end;
}

/* El `<li>` también, no sólo el enlace. El enlace mide sus 13px justos, pero
 * el `<li>` traía `margin-bottom: 3px` -- medido, no supuesto -- y eso daba 16
 * de separación donde el original tiene 13. Se ve midiendo dos ítems seguidos;
 * mirando uno solo no aparece. */
.wp-block-navigation.fgm-menu .has-child.open-always
	> .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	line-height: 13px;
	margin-block: 0;
}

.fgm-menu .open-always > .wp-block-navigation__submenu-container
	> .wp-block-navigation-item > .wp-block-navigation-item__content {
	/* `block` y no `inline-block`: un `inline-block` se alinea a la línea base y
	 * deja debajo el hueco del descendente -- 3px por fila, medidos, que daban
	 * 16 de separación donde el original tiene 13. En bloque no hay línea base
	 * que respetar. El `min-width: 100px` del original deja de hacer falta: el
	 * contenedor ya alinea a la derecha, así que la barra cae en 200 para todos
	 * los ítems, que es donde la pone el original. */
	display: block;
	/* Sin relleno vertical: los ítems de primer nivel llevan `0.1rem 0` y acá
	 * eso sumaba 3,2px a cada línea -- 16 de separación donde el original tiene
	 * 13, que es su `line-height` y nada más. */
	padding: 0 7px 0 0;
	border-right: 4px solid #f2f2f2;
	font-size: 11px;
	line-height: 13px;
	text-transform: none;
}

.fgm-menu .open-always > .wp-block-navigation__submenu-container
	> .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.fgm-menu .open-always .current-menu-item > .wp-block-navigation-item__content {
	border-right-color: #3ab0c8;
	background-color: #c6eaf2;
}

/* El tercer nivel. En el original existe la regla --9px, interlínea 9-- pero
 * NO llega a verse nunca: exige `current-menu-item` en el padre Y en el hijo a
 * la vez, y esa condición no se da en ninguna de sus páginas. Se reproduce la
 * escala, que es lo que estaba escrito, y se deja abierto con su rama. */
.fgm-menu .open-always .wp-block-navigation__submenu-container
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	font-size: 9px;
	line-height: 9px;
	min-width: 84px;
}

/* Los hijos, un punto más chicos y en gris más claro: son la rama, no el
 * tronco. El original los distingue así, sin sangría --la sangría a la
 * derecha se leería al revés--. */
.fgm-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.625rem;
	color: var(--wp--preset--color--tenue);
}

/* La flecha que WordPress añade a los padres sobra: en una columna alineada a
 * la derecha queda entre el texto y el borde, y el original no la tiene. */
.fgm-menu .wp-block-navigation__submenu-icon {
	display: none;
}

/* ------------------------------------------------------------- el contenido */

/* LA CAJA DEL CONTENIDO, medida del original a 1440: empieza 30px después del
 * menú (x=230, con el menú a ras en 200) y mide 600 de ancho, anclada a la
 * izquierda. `max-width: 630` = 30 de relleno + 600 de texto, con `border-box`.
 * Sin relleno a la derecha: el original no lo tiene, el borde del texto es el
 * borde de la caja. */
.fgm-contenido {
	max-width: 630px;
	padding: var(--wp--preset--spacing--30) 0
	         var(--wp--preset--spacing--50) 30px;
}

/*
 * Las imágenes mandan y no llevan marco.
 *
 * Es un sitio de fotografía: el original no pone ni borde ni sombra ni
 * esquinas redondeadas sobre las imágenes de contenido.
 */
.fgm-contenido .wp-block-image img {
	display: block;
	height: auto;
	max-width: 100%;
	border-radius: 0;
}

.fgm-contenido .wp-block-image {
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* ------------------------------------------------- la rejilla de secciones */

/*
 * **Tres columnas de cuadrados con su título debajo.** Es la disposición de
 * TODAS las secciones del original, medida el 2026-09-09 sobre las nueve
 * páginas publicadas:
 *
 *     acciones 14 imgs · instalacion 8 · publicaciones 6 · curatoria 6
 *     radio 4 · editorial 3 · talleres 3 · web 1 · agenda 0 (es texto)
 *
 * y en las nueve el contenedor es `av_one_third`, con la imagen servida como
 * `-360x360.jpg`. `avia.py` ya lo convierte bien: agrupa de tres en tres en un
 * `wp:columns` con `wp:column` al 33.33%. Lo que falta es que la celda SEA
 * cuadrada, porque el bloque de imagen respeta la proporción del archivo y el
 * original recorta.
 */
.fgm-contenido .wp-block-columns {
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--30);
}

/* LA FILA INCOMPLETA TIENE QUE MEDIR LO MISMO QUE LAS LLENAS.
 *
 * Ocho obras en `instalacion` son tres filas: 3, 3 y 2, y la de dos salia mas
 * ancha. Medido en el laboratorio el 2026-09-16, contenedor de 760 px y
 * `gap` de 24:
 *
 *     fila 1 (tres)   237 · 237 · 237
 *     fila 2 (tres)   237 · 237 · 237
 *     fila 3 (dos)    253 · 253        <- 7% mas anchas
 *
 * **Y quien esta mal es la fila LLENA, no la incompleta.** `avia.py` emite
 * `flex-basis: 33.33%` en linea, que de 760 son 253,3. Tres de esas mas dos
 * `gap` de 24 dan 808 en una caja de 760, asi que el flex las ENCOGE 16 px
 * cada una hasta 237. La fila de dos mide 506 + 24 = 530, entra sin apretar, y
 * se queda en sus 253. O sea que el 33,33% nunca tuvo en cuenta el `gap`: las
 * filas llenas disimulaban el error encogiendose.
 *
 * `flex-grow: 0` no alcanzaba --se probo-- porque lo que sobra no es espacio
 * que alguien reparta: es que a la fila de dos no le falta. La base tiene que
 * descontar el `gap` desde el principio, que es exactamente lo que ya hace el
 * quiebre de dos columnas veinte lineas mas abajo con `50% - gap/2`. Esto es
 * lo mismo para tres: dos `gap` repartidos entre tres celdas.
 *
 * Lleva `!important` por el mismo motivo que aquel: el `flex-basis` viene en
 * el atributo `style` del marcado y no hay hoja que le gane sin esto.
 *
 * Con la base ya descontada, el hueco de la derecha en la fila incompleta es
 * correcto: es lo que hace `av_one_third` en el original.
 *
 * VA DENTRO DE `min-width: 782px` A PROPOSITO. Abajo de ahi mandan otras dos
 * reglas --la de dos columnas de veinte lineas mas abajo, y el apilado a una
 * del propio nucleo, que tambien usa `!important`-- y un `!important` sin
 * acotar podria ganarles y dejar tres columnas diminutas en un telefono. No
 * pude comprobar los quiebres en el navegador de esta sesion (el cambio de
 * tamano de ventana no llega al viewport), asi que la regla se limita al
 * rango donde SI esta medida. 782 es el primer pixel arriba del quiebre del
 * nucleo, que es 781. */
@media (min-width: 782px) {
	.fgm-contenido .wp-block-columns > .wp-block-column {
		flex-grow: 0;
		flex-basis: calc(33.333% - var(--wp--preset--spacing--30) * 2 / 3) !important;
	}
}

/*
 * El recorte al cuadrado se hace acá y no en el marcado: así el artefacto
 * sigue llevando el archivo entero --que es lo que hay que conservar-- y el
 * cuadrado es una decisión del tema, reversible.
 *
 * `object-fit: cover` centra y recorta igual que el `-360x360` de Enfold, que
 * es un recorte duro desde el centro.
 */
.fgm-contenido .wp-block-column .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/*
 * El título de cada celda.
 *
 * `avia.py` lo emite dentro de un `wp:html` --texto suelto sin etiqueta-- así
 * que no hay a qué apuntar salvo al bloque. Se le da el tamaño y el aire que
 * tiene en el original: pegado a su imagen, no a la de abajo.
 */
.fgm-contenido .wp-block-column > :not(.wp-block-image) {
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--tinta);
}

/*
 * A dos columnas y luego a una, en los mismos quiebres del original.
 *
 * WordPress apila los `wp-block-columns` de golpe a una sola columna en
 * 781px. Una rejilla de fotografías cuadradas aguanta dos perfectamente hasta
 * el móvil, y saltar de tres a una desperdicia media pantalla.
 */
@media (max-width: 781px) and (min-width: 480px) {
	.fgm-contenido .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.fgm-contenido .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--30) / 2) !important;
	}
}

.fgm-pie {
	grid-column: 1 / -1;
	padding: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--regla);
	text-align: right;
	color: var(--wp--preset--color--tenue);
}

/* ------------------------------------------------------------------ angosto */

/*
 * 768 px es uno de los cuatro puntos de quiebre del original (989 · 768 · 767
 * · 479). Se toma ese porque es donde la columna de 190px deja de caber al
 * lado del contenido sin estrangularlo.
 *
 * Abajo de ahí el menú pasa arriba y se lee de izquierda a derecha, que es lo
 * que espera un pulgar; mantenerlo a la derecha en una pantalla angosta lo
 * deja pegado al borde y difícil de tocar.
 */
@media (max-width: 768px) {
	.fgm-lienzo {
		grid-template-columns: minmax(0, 1fr);
	}

	.fgm-lateral {
		position: static;
		text-align: left;
		padding: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--regla);
	}

	.fgm-menu .wp-block-navigation__container {
		align-items: flex-start;
	}

	.fgm-menu .wp-block-navigation__submenu-container {
		text-align: left;
	}

	.fgm-contenido {
		padding: var(--wp--preset--spacing--30);
	}

	.fgm-pie {
		text-align: left;
	}
}