/* Objetos — maqueta del Figma (1920x1080), medidas pasadas a vw. */

.xfb-objetos {
	/* Medidas tomadas del export del Figma con detección de bordes: foto de
	   224x280 y 90px de gap entre columnas, o sea una relación de 90/224 entre el
	   gap y la foto. Esa relación es lo que se conserva; el tamaño absoluto no.
	   Las seis columnas van **de margen a margen** (decisión de Matías del
	   02/09): el Figma deja 77px muertos a la derecha y el sitio no.

	   Todo escala en bloque a partir de una sola medida, el ancho de la foto: si
	   la foto se achica, los gaps se achican con ella. Calcular el gap como "lo
	   que sobra" daba fotos chicas con gaps enormes apenas la pantalla no era
	   1920x1080. */
	/* De punta a punta, siempre: las seis columnas más los cinco gaps ocupan todo
	   el ancho entre márgenes. 6 col + 5 * (col * 90/224) = ancho, o sea
	   col = ancho / 8.0089.

	   Acá NO hay techo de alto. Lo hubo, para garantizar el 100vh, y era peor el
	   remedio: en una pantalla de proporción baja achicaba las fotos y dejaba
	   cientos de píxeles muertos contra el margen derecho. Entre las dos cosas
	   manda esta: las fotos llegan al borde. El 100vh se cuida por el otro lado,
	   comprimiendo el aire de la intro (ver `.xfb-objetos__intro`). */
	--xfb-objeto-col: calc((100vw - 2 * var(--xfb-margin)) / 8.0089);
	--xfb-objeto-row: calc(var(--xfb-objeto-col) * 280 / 224);
	--xfb-objetos-gap: calc(var(--xfb-objeto-col) * 90 / 224);
	--xfb-objetos-row-gap: calc(var(--xfb-objeto-col) * 82 / 224);

	padding: 0 var(--xfb-margin) 16px;
}

/* Las columnas miden lo que mide una foto, no una fracción del ancho: así la
   proporción 224x280 se respeta siempre. Con el ancho de columna calculado para
   llenar la fila, `start` y `space-between` dan lo mismo; queda `start` para que
   en una pantalla baja —donde el techo de alto achica todo— el aire sobrante no
   se meta entre las fotos. */
.xfb-objetos__grid {
	display: grid;
	grid-template-columns: repeat(6, var(--xfb-objeto-col));
	justify-content: start;
	gap: var(--xfb-objetos-row-gap) var(--xfb-objetos-gap);
	margin: 0;
	list-style: none;
}

/* La intro va a la izquierda y con alto reservado: la primera fila cae en
   y=307 con el texto del Figma, y si el estudio escribe de más, empuja.

   El y=125 del Figma es en vw y el header no lo es —tiene `clamp()`—, así que
   por debajo de ~1600px el vw se achica más rápido y el texto se metía abajo del
   menú. El `max()` le pone piso: nunca sube más allá del alto del header. */
.xfb-objetos__intro {
	box-sizing: border-box;
	/* Todo el aire de la intro tiene un tope en `vh`: en una pantalla apaisada
	   normal quedan los valores del Figma (la primera fila cae en y=307), y en
	   una pantalla baja se comprime para que la segunda fila de fotos siga
	   entrando en pantalla. El aire cede antes que las fotos.
	   El piso de arriba lo pone el header: nunca se le mete abajo. */
	padding-top: max(
		calc(var(--xfb-header-height) + 2.5rem),
		min(6.51vw, 11.6vh)
	);
	padding-bottom: min(2.6vw, 4.6vh);
	/* Ancho FIJO, no en vw: es lo que hace que el corte de renglones sea siempre
	   el del Figma —"…materia ancestral y / visión contemporánea… / …de las
	   formas / en una escala…"— y no cambie con el ancho de la pantalla.

	   El 09/09 se pidió bajar este texto "al tamaño del texto secundario de
	   Nuestro estudio", o sea de 15px a 11.8. El ancho baja en la misma
	   proporción (535 * 11.8/15) porque lo que decide dónde corta una línea es
	   la relación entre el ancho y el cuerpo: escalando los dos por el mismo
	   factor, el quiebre queda donde estaba. Si se toca el texto, hay que volver
	   a medirlo. */
	max-width: 420.8px;
	font-size: 11.8px;
	line-height: 16px;
	letter-spacing: 0;
}

.xfb-objetos__intro p {
	margin: 0;
}

/* La línea de consulta va separada del texto, como en el Figma: 68px entre
   líneas base, o sea 16 de interlineado más 52 de aire. Ese aire también cede
   en una pantalla baja. */
.xfb-objetos__intro p + p {
	margin-top: min(52px, 4.82vh);
}

.xfb-objetos__intro a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.xfb-objeto {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	/* `inherit` no alcanza: Kadence pinta sus botones de #2d3748 y gana. */
	color: var(--xfb-ink);
	text-align: left;
	cursor: pointer;
}

/* Kadence pinta sus botones al pasar por encima y al enfocarlos. Acá el único
   efecto es el subrayado del nombre: el color y el fondo se redeclaran. */
.xfb-objeto:hover,
.xfb-objeto:focus,
.xfb-objeto:active,
.xfb-objeto:focus-visible {
	background: none;
	color: var(--xfb-ink);
	box-shadow: none;
	outline: none;
}

.xfb-objeto__shot {
	display: block;
	aspect-ratio: 224 / 280;
	height: var(--xfb-objeto-row);
	width: 100%;
	overflow: hidden;
}

/* Acá el crop es deliberado: la grilla se lee pareja. */
.xfb-objeto__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El rótulo va en Inter con el interlineado de 17px del Figma. El Figma tenía
   código (400) y nombre (600) apilados; el 11/09 el estudio sacó el código y
   la negrita, y pidió más aire entre la foto y el nombre: 12px en vez de 5. */
.xfb-objeto__name {
	display: block;
	margin-top: 12px;
	font-family: var(--xfb-font-label);
	font-size: 10.3px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: 0;
	color: var(--xfb-ink);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.28em;
	transition: text-decoration-color 160ms ease;
}

.xfb-objeto:hover .xfb-objeto__name,
.xfb-objeto:focus-visible .xfb-objeto__name {
	text-decoration-color: currentColor;
}

.xfb-objetos__empty {
	color: var(--xfb-muted);
}

/* Pop-up ---------------------------------------------------------------- */

.xfb-objetos.is-viewing .xfb-objetos__grid {
	/* La grilla se atenúa detrás, como en la Opción 3. */
	opacity: 0.15;
}

.xfb-objeto-viewer {
	position: fixed;
	inset: 0;
	/* Por debajo del header, para que el logo y el menú se lean nítidos. */
	z-index: 15;
	display: grid;
	place-items: center;
	padding: clamp(2.5rem, 5vh, 4rem) var(--xfb-margin);
	background: rgba(255, 255, 255, 0.86);
}

.xfb-objeto-viewer[hidden] {
	display: none;
}

.xfb-objeto-viewer__stage {
	display: inline-flex;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
}

.xfb-objeto-viewer__figure {
	display: flex;
	justify-content: center;
	margin: 0;
	min-height: 0;
}

.xfb-objeto-viewer__figure img {
	/* 572 x 754 en el Figma: la foto ocupa unos dos tercios del alto. */
	max-width: min(30vw, 620px);
	max-height: 70vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.xfb-objeto-viewer__close {
	align-self: flex-end;
	margin-bottom: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.78rem;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--xfb-header-ink);
	opacity: 0.85;
	cursor: pointer;
	user-select: none;
	transition: opacity 160ms ease;
}

/* El :focus de Kadence pinta los botones de blanco: se redeclara el color. */
.xfb-objeto-viewer__close:hover,
.xfb-objeto-viewer__close:focus,
.xfb-objeto-viewer__close:active {
	background: none;
	color: var(--xfb-header-ink);
	opacity: 1;
}

/* El pie del pop-up sale del Figma `Opción 3`: los dos rótulos iguales —Inter
   400 · 12px · interlineado 100% · sin tracking— y en negro puro, que es el
   único lugar del sitio donde el Figma no usa la tinta #363531. */
.xfb-objeto-viewer__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-top: 0.6rem;
	font-family: var(--xfb-font-label);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: #000;
}

/* Las medidas de la pieza, pedidas el 04/09: a la derecha del nombre, sólo
   cuando el campo está cargado. Sin código (11/09) entran en el mismo renglón. */
.xfb-objeto-viewer__measures {
	text-align: right;
}

.xfb-objeto-viewer__measures:empty {
	display: none;
}

@media (max-width: 1100px) {
	.xfb-objetos__grid {
		grid-template-columns: repeat(4, var(--xfb-objeto-col));
	}
}

/* Mobile — frame OBJETOS de la página XFB MOBILE.

   Tres columnas de margen a margen, con la misma relación gap/foto que en
   Arquitectura: ítem de 104.5 con gap 17 sobre 360, o sea 0.1627. La foto
   mantiene su proporción 224x280 —igual que en desktop—, así que lo único
   que cambia es cuántas columnas entran.

   El frame mobile NO tiene la intro: la primera fila arranca en y=69.3, o
   sea apenas debajo del header. Se saca (decisión de Matías del 04/09: lo
   que no está en el Figma mobile, no va en mobile). */
@media (max-width: 700px) {
	.xfb-objetos {
		/* 3 col + 2 * (col * 0.1627) = ancho entre márgenes. */
		--xfb-objeto-col: calc((100vw - 2 * var(--xfb-margin)) / 3.3254);
		--xfb-objetos-gap: calc(var(--xfb-objeto-col) * 0.1627);
		--xfb-objetos-row-gap: var(--xfb-objetos-gap);

		padding-bottom: 13.4vw;
	}

	.xfb-objetos__intro {
		display: none;
	}

	.xfb-objetos__grid {
		grid-template-columns: repeat(3, var(--xfb-objeto-col));
		/* El Figma pone la primera fila en y=69.3, pegada al header. Se le da
		   algo más de aire para que se despeguen. */
		padding-top: 26vw;
	}

	/* En mobile el rótulo sube: 10.3px en la mano no se lee. */
	.xfb-objeto__name {
		margin-top: 2.8vw;
		font-size: 11px;
	}

	/* El visor se apoya debajo del header en vez de pasarle por atrás: con el
	   velo al 86% el logo se leía encima de la foto. El stage se encoge al ancho
	   real de la foto, así los rótulos se alinean a sus bordes. */
	.xfb-objeto-viewer {
		padding: var(--xfb-header-height) var(--xfb-margin) 0;
		place-items: start center;
		align-content: start;
	}

	.xfb-objeto-viewer__stage {
		width: auto;
	}

	.xfb-objeto-viewer__figure img {
		max-width: 78vw;
		max-height: 62vh;
	}

	.xfb-objeto-viewer__close {
		margin-bottom: 3.14vw;
		font-size: 12px;
	}

	.xfb-objeto-viewer__meta {
		margin-top: 1.75vw;
		font-size: 11px;
	}
}