/* Secciones Arquitectura / Interiorismo — maqueta del Figma "Opción 2".
   Medidas tomadas del export a 1920 y pasadas a vw. */

.xfb-section {
	/* 90px @1920 entre columnas; el ancho de cada una cae solo. */
	--xfb-section-gap: 4.69vw;
	/* La vertical pareja a la que se croppean todas las fotos: 225 x 280. */
	--xfb-section-ratio: 225 / 280;

	/* Alto de fila del Figma (280px @1920), con techo de viewport para que las
	   dos filas entren en 100vh. */
	--xfb-row-h: min(14.58vw, 25vh);
	/* Lo que ocupa el código debajo de cada foto. */
	--xfb-code-h: 2.04vh;

	padding: 0 var(--xfb-margin) 2.4vh;
}

.xfb-section__intro {
	padding-top: 15.26vw;
	margin-left: auto;
	max-width: min(34vw, 32rem);
	text-align: right;
	font-size: clamp(0.85rem, 0.83vw, 1.05rem);
	line-height: 1.2;
}

/* Arquitectura va pareja como Interiorismo pero en horizontal: la misma
   proporción dada vuelta (280x225) y cuatro columnas en vez de seis, para que
   una apaisada no quede enana (pedido del 15/09: "forzar frame como en
   interiorismo pero horizontal"). */
.xfb-section--arquitectura {
	/* 3:2, más apaisada que la 280x225 del 15/09 a la mañana: "no tan
	   cuadradas" (Valentina, 15/09 a la tarde). */
	--xfb-section-ratio: 3 / 2;
}

.xfb-section--arquitectura .xfb-section__grid {
	grid-template-columns: repeat(4, 1fr);
}

/* Arquitectura la lleva a la IZQUIERDA e Interiorismo se queda a la derecha,
   así una hace juego con la otra —"que uno esté de un lado y el otro del
   otro", feedback del 04/09—. El mobile no cambia: ahí manda el frame de la
   página XFB MOBILE, que las reparte al revés. */
.xfb-section--arquitectura .xfb-section__intro {
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

.xfb-section__intro p {
	margin: 0;
}

/* El filtro por tag (15/09): una línea de rótulos debajo de la intro, del
   mismo lado que ella. Mismo lenguaje que el menú: Inter, sin color, el estado
   lo marca el subrayado. */
.xfb-section__filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4em 1.6em;
	margin: 1.1vw 0 0;
	padding: 0;
	list-style: none;
}

.xfb-section--arquitectura .xfb-section__filter {
	justify-content: flex-start;
}

/* Kadence pisa cualquier <button>: color, fondo y foco van explícitos. */
.xfb-section__tag {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--xfb-font-label);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.28em;
	cursor: pointer;
	transition: text-decoration-color 160ms ease, color 160ms ease;
}

.xfb-section__tag:hover,
.xfb-section__tag:focus,
.xfb-section__tag:active,
.xfb-section__tag:focus-visible {
	background: none;
	color: inherit;
	box-shadow: none;
	outline: none;
}

/* En gris: "compiten con el textito de arriba" (Valentina, 15/09). Es la
   única excepción a "una sola tinta", y el tag activo vuelve a la tinta. El
   color va en el <li> porque `base.css` obliga a todo botón a heredar
   (`color: inherit !important`), así que en el botón no se puede declarar. */
.xfb-section__filter li {
	color: var(--xfb-muted);
	transition: color 160ms ease;
}

.xfb-section__filter li:has([aria-pressed="true"]) {
	color: var(--xfb-ink);
}

.xfb-section__tag:hover,
.xfb-section__tag:focus-visible,
.xfb-section__tag[aria-pressed="true"] {
	text-decoration-color: currentColor;
}

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

.xfb-section__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 2.55vw var(--xfb-section-gap);
	align-content: flex-end;
	/* Mismo criterio que en Arquitectura: dos filas reservadas. */
	min-height: calc(2 * (var(--xfb-row-h) + var(--xfb-code-h)) + 2.55vw);
	margin: 3.65vw 0 0;
	padding: 0;
	list-style: none;
}

/* Arquitectura: filas justificadas, cada foto con su propia proporción.
   Cada foto pide un ancho proporcional a su relación de aspecto y crece en la
   misma proporción, así una fila llena el ancho exacto y todas sus fotos
   terminan con el mismo alto. La justificación la hace flexbox contra el ancho
   real del contenedor, sin que nadie tenga que adivinar cuánto mide el margen. */
.xfb-section__rows {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	gap: 2.55vw var(--xfb-section-gap);
	margin-top: 3.65vw;
	/* Se reservan siempre dos filas: con una sola, se apoya en la de abajo y el
	   texto de arriba no se mueve. */
	min-height: calc(2 * (var(--xfb-row-h) + var(--xfb-code-h)) + 2.55vw);
}

.xfb-section__rows .xfb-section__link {
	flex: var(--xfb-shot-ratio) 1 calc(var(--xfb-shot-ratio) * var(--xfb-row-h));
	min-width: 0;
}

.xfb-section__rows .xfb-section__shot {
	aspect-ratio: var(--xfb-shot-ratio);
}

/* Se come el sobrante de la última fila; en las demás no participa. */
.xfb-section__filler {
	flex: 999 1 0;
	height: 0;
}

.xfb-section__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.xfb-section__shot {
	display: block;
	aspect-ratio: var(--xfb-section-ratio);
	overflow: hidden;
}

/* Acá el crop es deliberado: la sección se lee pareja, todas verticales. */
.xfb-section__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 200ms ease;
}

.xfb-section__link:hover .xfb-section__shot img {
	opacity: 0.82;
}

.xfb-section__code {
	display: block;
	margin-top: 0.68vw;
	font-size: clamp(0.68rem, 0.66vw, 0.85rem);
	line-height: 1;
	color: var(--xfb-ink);
}

.xfb-section__empty {
	padding: 8rem 0;
	color: var(--xfb-muted);
}

@media (max-width: 1100px) {
	.xfb-section__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.xfb-section--arquitectura .xfb-section__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile — frames ARQUITECTURA e INTERIORISMO de la página XFB MOBILE.
   Tres columnas de margen a margen: el Figma pone ítems de 104.5 con gap 17
   sobre 360, o sea gap = ancho * 0.1627. Es la misma relación que se conserva
   en Objetos: lo que manda es la proporción, no el número absoluto. */
@media (max-width: 700px) {
	.xfb-section {
		--xfb-section-gap: 4.5vw;
		--xfb-row-h: 23vw;

		padding-bottom: 13.4vw;
	}

	/* La intro cae en y=188.3 sobre 640 (52.3vw), con tope en `vh` para que el
	   primer pantallazo —texto más dos filas de fotos— entre en 100vh también en
	   una pantalla baja.

	   Va en UN SOLO RENGLÓN, como en el Figma: sin `max-width`. A 13px el texto
	   más largo de las dos secciones mide ~330px y entra entre los márgenes; si
	   el estudio escribe de más, envuelve. */
	.xfb-section__intro {
		padding-top: min(52.3vw, 24vh);
		max-width: none;
		font-size: 13px;
		line-height: 1.23;
	}

	/* Arquitectura la lleva a la derecha; Interiorismo, a la izquierda —al revés
	   que en desktop, porque acá manda el frame de la página XFB MOBILE.

	   La regla de Arquitectura tiene que estar repetida acá: la de desktop es
	   `.xfb-section--arquitectura .xfb-section__intro` y ninguna regla de este
	   media query le gana en especificidad, así que sin esto las dos secciones
	   quedaban alineadas a la izquierda. */
	.xfb-section--arquitectura .xfb-section__intro {
		margin-left: auto;
		margin-right: 0;
		text-align: right;
	}

	.xfb-section--interiorismo .xfb-section__intro {
		margin-left: 0;
		margin-right: auto;
		text-align: left;
	}

	/* La primera fila arranca en y=346: 41.8vw debajo de la intro.

	   En mobile Arquitectura deja de mezclar proporciones: el frame pone las
	   dos secciones en la MISMA grilla pareja de tres columnas —ítems de
	   104.5x131.4, todos iguales—. La mezcla de horizontales y verticales que
	   se decidió el 19/08 es de las previews de desktop; acá no hay ancho para
	   que una fila justificada se lea. */
	/* En mobile el frame pone las dos secciones en la misma grilla vertical. */
	.xfb-section--arquitectura {
		--xfb-section-ratio: 225 / 280;
	}

	.xfb-section__filter {
		margin-top: 3.5vw;
		gap: 0.4em 1.2em;
	}

	.xfb-section__grid,
	.xfb-section__rows,
	.xfb-section--arquitectura .xfb-section__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--xfb-section-gap);
		min-height: 0;
		margin-top: min(41.8vw, 19vh);
	}

	.xfb-section__rows .xfb-section__link {
		flex: none;
	}

	.xfb-section__rows .xfb-section__shot {
		aspect-ratio: var(--xfb-section-ratio);
	}

	.xfb-section__filler {
		display: none;
	}

	.xfb-section__code {
		margin-top: 1.9vw;
		font-size: 11px;
	}
}