/* Ficha de proyecto (single-proyecto.php). */

/* --- Cabecera ------------------------------------------------------------ */

.proyecto__hero {
	position: relative;
	height: clamp(420px, 58.8vw, 847px);
	background: var(--c-cream-light);
	overflow: hidden;
}

.proyecto__hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.proyecto__hero-inner {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
	padding: clamp(20px, 2.2vw, 32px) var(--edge);
}

.proyecto__title {
	font-family: var(--font-display);
	font-weight: 700;
	/* 77px a 1440: la C de "Casas" mide 56px de altura de caja en el diseno */
	font-size: clamp(36px, 5.35vw, 103px);
	letter-spacing: -0.04em;
	line-height: 1;
}

/* Datos del proyecto (arquitectura, interiorismo, localización…), en dos
   columnas: la etiqueta en mono y mayúsculas, el valor en la de texto.
   Medido en FICHA PROYECTO.png a 1440: valores a 18px, etiquetas a 16px,
   una línea cada 25px y 43px de la base del titular a la de la primera. */
.proyecto__datos {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: baseline;
	column-gap: 0.5em;
	margin-top: 0.58em;
	font-size: clamp(15px, 1.25vw, 24px);
	line-height: 1.39;
}

.proyecto__datos dt {
	font-family: var(--font-mono);
	font-size: 0.889em;
	text-transform: uppercase;
}

.proyecto__datos dd { margin: 0; }

/* Medido en PROYECTOS.png: caja de 229 x 42 y letra de 19px a 1440, con
   menos relleno a los lados que el botón de siempre. 47px de la base de la
   última línea de datos a la caja. */
.proyecto__button {
	margin-top: clamp(16px, 1.53vw, 29px);
	padding: 0.53em 0.79em;
	font-size: clamp(15px, 1.32vw, 25.3px);
}

/* Line drawings of the products used in the project, three per row. El dibujo
   ocupa siempre la misma caja, de modo que un nombre de dos lineas no descoloca
   los iconos de al lado. */
.proyecto__icons {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	gap: 20px 30px;
	margin-right: 8px;
}

.proyecto__icons a {
	display: grid;
	grid-template-rows: 100px auto;
	align-content: start;
	justify-items: center;
	gap: 4px;
	font-family: var(--font-mono);
	/* 17,5px a 1440, medido por el paso de letra de "Crepe" en el diseno */
	font-size: clamp(13px, 1.22vw, 23px);
	text-align: center;
}

.proyecto__icons img {
	width: 100px;
	height: 100%;
	object-fit: contain;
}

/* --- Galería -------------------------------------------------------------
   Photos scroll horizontally at their natural width on a fixed height; the
   counter and arrows sit on the first one, top left. */

.proyecto__gallery {
	position: relative;
	margin-top: 12px;
}

.proyecto__gallery-nav {
	position: absolute;
	top: 28px;
	left: var(--edge);
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 26px;
	font-family: var(--font-mono);
	/* 21px a 1440, medido en el "1/5" del diseno */
	font-size: clamp(15px, 1.46vw, 28px);
	color: var(--c-dark);
}

.proyecto__gallery-nav button {
	padding: 4px;
	line-height: 1;
}

.proyecto__gallery-track {
	display: flex;
	gap: 8px;
	/* la tira va a sangre a cualquier ancho, tambien por encima de 1920 */
	padding: 0;
	scroll-padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.proyecto__gallery-track::-webkit-scrollbar { display: none; }

.proyecto__gallery-item {
	flex: 0 0 auto;
	height: clamp(320px, 48.5vw, 700px);
	margin: 0;
	scroll-snap-align: start;
	background: var(--c-cream-light);
}

.proyecto__gallery-item img {
	width: auto;
	height: 100%;
	max-width: none;
}

/* --- Contenido libre y relacionados -------------------------------------- */

.proyecto__content {
	padding: clamp(32px, 5vw, 64px) var(--edge) 0;
	font-size: clamp(15px, 1.042vw, 20px);
	line-height: 1.5;
}

.proyecto__content p + p { margin-top: 1em; }

.proyecto .novedades { margin-top: 12px; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
	.proyecto__hero { height: auto; min-height: 60vw; }

	.proyecto__hero-inner { flex-direction: column; }

	.proyecto__icons { grid-template-columns: repeat(3, 72px); gap: 12px 16px; }

	.proyecto__icons img { width: 72px; }
}

/* En móvil los iconos de producto no aportan tanto: ocultos de momento, a
   la espera de que el cliente decida si se quitan del todo. */
@media (max-width: 720px) {
	.proyecto__icons { display: none; }
}