/**
 * Ficha de proyecto.
 *
 * En el diseño el texto ocupa una columna angosta a la izquierda y la pieza
 * principal se apoya a la derecha, con libertad para sobresalir del borde.
 * Los carruseles son tiras que siguen hacia fuera de la pantalla.
 */

.silo-proyecto {
	position: relative;
	padding-bottom: var(--s-7);
	background: var(--c-off-white);
	color: var(--c-black);
	/* La pieza principal y las tiras de imágenes se salen a propósito por la
	   derecha: el recorte lo pone la página, no ellas. */
	overflow-x: clip;
}

.silo-proyecto__intro {
	display: grid;
	/* En el diseño la pieza principal siempre ocupa el mismo marco vertical de
	   471x840 apoyado en el borde derecho de la retícula, con el texto a la
	   izquierda: las fotos apaisadas se recortan dentro de ese marco. */
	grid-template-columns: minmax(0, 1fr) clamp(11rem, 24.53vw, 29.44rem);
	align-items: start;
	column-gap: var(--s-4);
	width: min(var(--content), 100% - 2 * var(--pad));
	margin-inline: auto;
	padding-top: var(--s-5);
}

.silo-proyecto__title {
	margin-top: var(--s-2);
	max-width: 12ch;
	font-size: var(--fs-display);
	font-weight: var(--fw-light);
	line-height: var(--lh-display-tight);
	letter-spacing: -0.01em;
}

.silo-proyecto__obra {
	margin-top: var(--s-4);
	font-size: var(--fs-body);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}

.silo-proyecto__obra-nombre,
.silo-proyecto__obra-anios {
	display: block;
}

.silo-proyecto__body {
	margin-top: var(--s-4);
	max-width: 26em;
	font-size: var(--fs-body);
}

.silo-proyecto__body p {
	margin-bottom: 1.35em;
}

.silo-proyecto__body p:last-child {
	margin-bottom: 0;
}

/* El diseño cierra la descripción con una línea de servicios en semibold. */
.silo-proyecto__body p strong,
.silo-proyecto__body p b {
	font-weight: var(--fw-semibold);
}

/* --- Pieza principal ------------------------------------------------------- */

.silo-proyecto__media {
	margin: 0;
	aspect-ratio: 471 / 840;
	overflow: hidden;
	background: var(--c-grey);
}

.silo-proyecto__media img,
.silo-proyecto__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El video y su botón comparten la única celda de la grilla: así el botón queda
   centrado sin desplazamientos, y el marco sigue recortando igual que con una
   imagen. */
.silo-proyecto__media--video {
	display: grid;
	place-items: center;
}

.silo-proyecto__media--video video,
.silo-video__play {
	grid-area: 1 / 1;
}

.silo-video__play {
	display: grid;
	place-items: center;
	/* El navegador compone el <video> en su propia capa: sin un contexto de
	   apilado propio, el botón se pintaría por debajo aunque venga después. */
	position: relative;
	z-index: 1;
	width: clamp(3.25rem, 4.17vw, 5rem); /* 80px */
	aspect-ratio: 1;
	border-radius: 50%;
	/* Disco liso, sin borde ni desenfoque: la portada se sigue viendo detrás,
	   apenas apagada, y el triángulo es lo único que resalta. */
	background: rgba(0, 0, 0, 0.45);
	color: var(--c-white);
	transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
		transform var(--t-fast) var(--ease);
	margin-top: -25px;
}

/* `display: grid` le gana al `hidden` de la hoja del navegador, así que el
   atributo necesita su propia regla: la usan el estado previo al JS y el
   momento en que el video arranca y toma el mando la barra nativa. */
.silo-video__play[hidden] {
	display: none;
}

.silo-video__play:hover {
	background: rgba(0, 0, 0, 0.62);
	transform: scale(1.06);
}

.silo-video__icon {
	width: 58%;
	height: 58%;
}

/* Desde que el video arranca manda la barra de controles nativa, también en las
   pausas: el disco sólo tiene sentido sobre la portada inicial. */
.silo-proyecto__media--video.is-playing .silo-video__play,
.silo-proyecto__media--video.is-started .silo-video__play {
	opacity: 0;
	visibility: hidden;
	transform: scale(0.85);
}

.silo-proyecto__media--externo {
	height: auto;
}

.silo-proyecto__embed {
	width: min(100%, 45rem);
}

.silo-proyecto__embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* --- Carruseles ------------------------------------------------------------ */

.silo-carousel {
	margin-top: var(--s-6);
}

.silo-carousel__head {
	margin-bottom: var(--s-3);
}

.silo-carousel__title,
.silo-carousel__years {
	font-size: var(--fs-body);
	font-weight: var(--fw-light);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}

.silo-carousel__viewport {
	position: relative;
}

.silo-carousel__track {
	display: flex;
	gap: clamp(0.5rem, 0.57vw, 0.6875rem); /* 11px */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-left: var(--pad);
	/* La tira arranca alineada con el texto y sigue hasta salirse por la derecha. */
	padding-inline: var(--pad) 0;
	scrollbar-width: none;
}

.silo-carousel__track::-webkit-scrollbar {
	display: none;
}

.silo-carousel__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.silo-carousel__item {
	flex: 0 0 auto;
	height: clamp(11rem, 17.71vw, 21.25rem); /* 340px */
	scroll-snap-align: start;
}

/* El enlace envuelve la foto sin cambiar la medida de la celda: hereda el alto
   de la tira y deja que la imagen siga poniendo el ancho. */
.silo-carousel__zoom {
	display: block;
	height: 100%;
	cursor: pointer;
}

/* El atenuado general de los enlaces es demasiado para una foto; alcanza con
   insinuar el gesto. */
.silo-carousel__zoom:hover {
	opacity: 0.88;
}

/* Cada imagen conserva su proporción: sólo comparten la altura de la tira. Si
   alguna vez la caja y el archivo no coincidieran, `contain` deja la foto
   entera —con aire a los lados— en vez de recortarla. */
.silo-carousel__item img {
	width: auto;
	max-width: none;
	height: 100%;
	object-fit: contain;
}

.silo-carousel__controls {
	display: flex;
	gap: var(--s-2);
	margin-top: var(--s-3);
}

.silo-carousel__button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.silo-carousel__button:hover:not(:disabled) {
	background: var(--c-black);
	color: var(--c-off-white);
}

.silo-carousel__button:disabled {
	opacity: 0.25;
	cursor: default;
}

/* --- Lightbox -------------------------------------------------------------- */

/* El diálogo ocupa la ventana entera y no pinta nada propio: la foto flota
   sobre el fondo oscurecido del ::backdrop. */
.silo-lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-white);
	overflow: hidden;
	opacity: 0;
	transition: opacity var(--t-fast) var(--ease);
}

.silo-lightbox.is-open {
	opacity: 1;
}

.silo-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.9);
}

/* Mientras el visor está abierto la página de atrás no se mueve. */
body.silo-lightbox-open {
	overflow: hidden;
}

/* El margen deja al descubierto el fondo alrededor de la foto: es la zona que
   cierra al hacer clic, y en pantallas chicas también el sitio de los botones.

   El centrado va con flex y no con grid a propósito. Con grid, la fila se mide
   por lo que la foto pediría a sus anchas —hasta 1200 px de ancho, y el alto que
   su proporción reclame—, así que en las verticales la fila crecía más que el
   marco y el centrado quedaba referido a esa fila de más: cada proporción
   arrancaba a una altura distinta. La línea de flex, en cambio, siempre mide lo
   mismo que el marco. */
.silo-lightbox__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* El margen lateral es el que dejan las flechas: 24 px de borde más los 44
	   del disco. Así la foto nunca queda por debajo de ellas, sea cual sea el
	   ancho de la ventana. */
	padding: clamp(3.25rem, 6vw, 5rem) 5.5rem;
}

/* En escritorio la barra desaparece como caja y cada control conserva su
   anclaje contra el borde del diálogo. */
.silo-lightbox__bar {
	display: contents;
}

/* Como con el disco del video: la regla de arriba le gana al `hidden` del
   navegador, así que el atributo necesita la suya. */
.silo-lightbox__bar[hidden] {
	display: none;
}

/* Tope de la ampliación: 1200x700. El `min()` conserva el límite anterior —el
   hueco que deja el marco— para que en pantallas menores la foto siga entrando
   entera en vez de recortarse contra los bordes. */
.silo-lightbox__image {
	max-width: min(100%, 1200px);
	max-height: min(100%, 700px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.silo-lightbox__button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	font-size: var(--fs-body);
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.silo-lightbox__button:hover {
	background: var(--c-white);
	color: var(--c-black);
}

.silo-lightbox__button[hidden] {
	display: none;
}

.silo-lightbox__close {
	top: var(--s-3);
	right: var(--s-3);
	font-size: var(--fs-base);
}

.silo-lightbox__prev,
.silo-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.silo-lightbox__prev {
	left: var(--s-3);
}

.silo-lightbox__next {
	right: var(--s-3);
}

.silo-lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: var(--s-3);
	transform: translateX(-50%);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
}

/* --- Adaptaciones ---------------------------------------------------------- */

@media (max-width: 900px) {
	.silo-proyecto__intro {
		grid-template-columns: 1fr;
		row-gap: var(--s-5);
	}

	.silo-proyecto__title,
	.silo-proyecto__body {
		max-width: none;
	}

	/* En una pantalla angosta las flechas a los costados le comen el ancho a la
	   foto, así que los controles bajan al pie, alineados con el borde del texto
	   igual que los del carrusel. El diálogo pasa a ser una columna: arriba la
	   foto, con todo el alto sobrante, y debajo la barra. */
	.silo-lightbox[open] {
		display: flex;
		flex-direction: column;
	}

	.silo-lightbox__frame {
		flex: 1;
		min-height: 0;
		height: auto;
		padding: var(--s-5) var(--pad) var(--s-3);
	}

	.silo-lightbox__bar {
		display: flex;
		align-items: center;
		gap: var(--s-2);
		padding: 0 var(--pad) var(--s-5);
	}

	.silo-lightbox__prev,
	.silo-lightbox__next,
	.silo-lightbox__counter {
		position: static;
		transform: none;
	}

	/* El contador se va al extremo opuesto: deja limpio el bloque de flechas. */
	.silo-lightbox__counter {
		margin-left: auto;
	}

	/* La pieza principal no cambia de proporción acá: el marco vertical del
	   diseño se mantiene en todos los anchos, así el encuadre es el mismo que en
	   escritorio y no se recorta media imagen. */
}