/* Página de obra — maqueta del Figma de Juli Foti.
   Las medidas salen del export a 1920px y se expresan en vw, así el diseño
   escala en bloque en vez de deformarse por partes. */

.xfb-work {
	/* Los costados respiran igual que en el header. */
	--xfb-work-margin: var(--xfb-margin);
	--xfb-pair-gap: 2.6vw;        /* 50px @1920 — el Figma dice 24, el estudio lo pidió más abierto el 10/09 */
	--xfb-row-gap: 1.6vw;
}

/* El header flota, así que el bloque de texto arranca donde lo pone el Figma. */
.xfb-work__head {
	padding: 7.55vw var(--xfb-work-margin) 0;
	max-width: 100%;
}

.xfb-work__title {
	margin: 0;
	font-size: clamp(1.05rem, 1.25vw, 1.6rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

/* Ni la ubicación ni los tags estaban en el Figma: entran en el mismo ritmo
   apretado del bloque para no romperlo. */
.xfb-work__location {
	margin: 0.35rem 0 0;
	font-size: clamp(0.78rem, 0.78vw, 0.95rem);
	line-height: 1.2;
	color: var(--xfb-muted);
}

.xfb-work__text {
	margin-top: 1.04vw;
	max-width: min(41.9vw, 46rem);
	font-size: clamp(0.8rem, 0.78vw, 1rem);
	line-height: 1.2;
}

.xfb-work__text p {
	margin: 0 0 0.6em;
}

.xfb-work__text p:last-child {
	margin-bottom: 0;
}

/* Sin markup desde el 08/09: los tags salieron de la vista de la obra. Se deja
   el estilo porque el bloque que los imprimía quedó comentado en
   `single-obra.php` y volver a mostrarlos es descomentarlo. */
.xfb-work__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.9rem;
	margin: 1.04vw 0 0;
	padding: 0;
	list-style: none;
	font-size: clamp(0.7rem, 0.68vw, 0.85rem);
	line-height: 1.2;
}

.xfb-work__tags a {
	color: var(--xfb-muted);
	text-decoration: none;
}

.xfb-work__tags a:hover {
	color: var(--xfb-ink);
}

.xfb-work__credit {
	margin: 1.04vw 0 0;
	font-size: clamp(0.7rem, 0.68vw, 0.85rem);
	line-height: 1.2;
	color: var(--xfb-muted);
}

/* Las fotos ------------------------------------------------------------- */

.xfb-work__grid {
	display: flex;
	flex-direction: column;
	gap: var(--xfb-row-gap);
	margin-top: 6.25vw;
}

/* Cada fila tiene alto constante y alterna su alineación; el ancho de cada
   foto cae solo de su proporción, así ninguna se recorta. */
.xfb-work__row {
	display: flex;
	justify-content: flex-start;
	gap: var(--xfb-pair-gap);
	/* El ancho manda; el alto sale de las proporciones, con techo de viewport. */
	height: min(var(--xfb-row-h, 47.14vw), 82vh);
	max-width: 100%;
	padding: 0 var(--xfb-work-margin);
}

.xfb-work__row.is-end {
	justify-content: flex-end;
}

.xfb-work__shot {
	height: 100%;
	margin: 0;
}

.xfb-work__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Obra anterior / siguiente --------------------------------------------
   Una barra fija al pie, espejo del header: transparente, con los mismos
   márgenes, y las fotos pasando por debajo. */

.xfb-work__siblings {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--xfb-margin) var(--xfb-margin) var(--xfb-margin-top);
	font-size: clamp(0.7rem, 0.68vw, 0.85rem);
	color: var(--xfb-header-ink);
	background: transparent;
	pointer-events: none;
}

.xfb-work__siblings a {
	pointer-events: auto;
}

/* Los "Ver más proyectos de…" van juntos a la derecha, uno por sección. */
.xfb-work__more {
	display: flex;
	gap: 1.5rem;
}

.xfb-work__sibling {
	color: inherit;
	opacity: 0.85;
	text-decoration: underline;
	text-underline-offset: 0.28em;
	transition: opacity 160ms ease;
}

.xfb-work__sibling:hover {
	opacity: 1;
}

/* Mobile — frame PROYECTO de la página XFB MOBILE (el único de alto completo:
   360x1808). Las fotos van de margen a margen y el patrón es el mismo que en
   desktop —una apaisada ocupa la fila entera, dos verticales van de a par—,
   sólo que las filas ya no alternan su alineación: llenan el ancho.

   Gap de fila 7 y gap de par 5.4 sobre 360. El alto ya no es constante: el
   ancho está clavado por los márgenes y cada fila se justifica con flexbox
   contra él, así ninguna foto se recorta.

   La barra de obra anterior / siguiente NO está en el frame mobile, y por eso
   no va (decisión de Matías del 04/09). El © XFB sí, y lo pone el footer. */
@media (max-width: 700px) {
	.xfb-work {
		--xfb-pair-gap: 1.5vw;
		--xfb-row-gap: 1.94vw;
	}

	/* El título cae en y=79.3 sobre 640. */
	.xfb-work__head {
		padding-top: 22.03vw;
	}

	.xfb-work__title {
		font-size: 14px;
		font-family: var(--xfb-font-label);
	}

	.xfb-work__location,
	.xfb-work__tags,
	.xfb-work__credit {
		font-size: 11px;
	}

	.xfb-work__text {
		max-width: none;
		margin-top: 1.5vw;
		font-size: 13px;
		line-height: 1.23;
	}

	/* La primera foto cae en y=149.7. */
	.xfb-work__grid {
		margin-top: 10.94vw;
	}

	.xfb-work__row,
	.xfb-work__row.is-end {
		height: auto;
		justify-content: flex-start;
	}

	/* Cada foto pide ancho en proporción a su relación de aspecto: la fila llena
	   el ancho exacto y las dos de un par terminan con el mismo alto. */
	.xfb-work__shot {
		flex: var(--xfb-shot-ratio) 1 0;
		min-width: 0;
		height: auto;
	}

	.xfb-work__siblings {
		display: none;
	}
}