/* =================================================================
   home-projects.css — Sección "Proyectos" del home (Figma 2280:9337).
   Antes "Iniciativas". Solo se encola en is_front_page() (inc/enqueue.php).
   Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {
	.home-projects {
		position: relative;
		isolation: isolate;
		height: 611px; /* alto fijo del banner (spec). En móvil/tablet se libera (ver @media abajo). */
		overflow: visible; /* la card sobresale 78px por arriba; el fondo se recorta en su propia capa */
		background: #367582; /* teal de marca — se ve como tinte detrás de la imagen desenfocada */
	}

	/* Fondo: imagen CRUDA del proyecto (project_imagen) tratada por CSS: desenfoque + opacidad (deja
	   pasar el teal) + overlay oscuro. El focal point (object-position) se setea inline desde el PHP.
	   Capa propia con overflow:hidden para que el blur escalado no se asome (la sección es visible). */
	.home-projects__bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
	}
	.home-projects__bg img {
		position: absolute;
		inset: -8%; /* escala de más para que el blur no deje bordes claros */
		width: 116%;
		height: 116%;
		object-fit: cover;
		filter: blur(22px);
		opacity: .55;
		display: block;
	}
	.home-projects__bg::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .42) 100%);
	}

	/* Mismo patrón de gutter que Recursos/Stories (padding afuera + inner con max-width centrado),
	   para que el borde izquierdo de la card alinee EXACTO con las cards de la sección de arriba. */
	.home-projects__inner {
		position: relative;
		z-index: 1;
		height: 100%;
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	.home-projects__row {
		max-width: var(--container);
		margin-inline: auto;
		height: 100%;
		display: flex;
		align-items: center;
		gap: clamp(2rem, 5vw, 5.5rem);
	}

	/* ---- Card vertical con la imagen del proyecto ---- */
	.home-projects__card {
		position: relative;
		flex: 0 0 clamp(17rem, 30vw, 24.6rem); /* ~393px máx */
		aspect-ratio: 393.5 / 575.49;
		border-radius: 12px;
		overflow: hidden;
		align-self: flex-start;
		margin-top: -78px; /* el inset queda 78px por encima del borde superior del banner (spec) */		
	}
	.home-projects__card-img {
		position: absolute;
		inset: 0;
		width: 100%; height: 100%;
		object-fit: cover;
	}
	/* Glass (blur + grano) en la franja inferior — mismo patrón que .story-card__glass /
	   .res-card__glass (backdrop-filter + máscara que desvanece hacia arriba + grano feTurbulence). */
	/* Glass desde ~la mitad del alto hacia abajo, igual que el carrusel de Historias: cubre toda la
	   card con una máscara que sólo deja el blur+grano en la mitad inferior (mismo
	   linear-gradient(to top, #000 30%, transparent 65%) que .story-card__glass). */
	.home-projects__card-glass {
		position: absolute;
		inset: 0;
		pointer-events: none;
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
		-webkit-mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 65%);
		mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 65%);
	}
	.home-projects__card-glass::after {
		content: '';
		position: absolute; inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 394 576' preserveAspectRatio='none'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='394' height='576' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E");
		background-size: 100% 100%;
	}
	/* Botón circular "Glass" dorado (Figma 2329:889) — mismo tratamiento que el CTA de la story card
	   (sombra de 5 capas + borde blanco translúcido) con un degradado dorado sutil encima. */
	.home-projects__card-cta {
		position: absolute;
		right: 1.5rem; bottom: 1.5rem;
		display: inline-flex; align-items: center; justify-content: center;
		width: 60px; height: 60px;
		border: 1px solid rgba(255, 255, 255, .55); /* borde más visible que el .3 original */
		border-radius: 50%;
		overflow: hidden; /* recorta el par de íconos del swap (ver abajo) */
		color: #fff;
		text-decoration: none;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px); /* frost: separa el botón del fondo, sea claro u oscuro */
		/* Base oscura translúcida (para que el blanco resalte sobre zonas CLARAS del inset) + el
		   tinte dorado del mock encima. */
		background:
			linear-gradient(153deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .22) 100%),
			linear-gradient(153deg, rgba(253, 181, 0, 0) 8%, rgba(253, 181, 0, .24) 100%);
		box-shadow:
			0 33px 9px 0 rgba(0, 0, 0, .01),
			0 21px 8px 0 rgba(0, 0, 0, .10),
			0 12px 7px 0 rgba(0, 0, 0, .35),
			0 5px 5px 0 rgba(0, 0, 0, .60),
			0 1px 3px 0 rgba(0, 0, 0, .69);
	}
	.home-projects__card-cta svg {
		width: 30px; height: 30px;
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); /* la flecha legible aunque el fondo sea claro */
	}

	/* Swap de dos íconos en hover (mismo patrón que .res-card__circle en home-resources.css):
	   ambos se mueven a la vez en vez de uno saliendo-y-regresando en secuencia, así no hay un
	   instante sin nada visible. transition (no keyframes) deja que el mouse-out revierta el
	   mismo recorrido solo. JS (home-projects.js) togglea .is-active en el hover de la card. */
	.home-projects__card-cta-icon {
		position: absolute; inset: 0;
		display: flex; align-items: center; justify-content: center;
		transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	}
	.home-projects__card-cta-icon--a { transform: translate(0, 0); }
	.home-projects__card-cta-icon--b { transform: translate(-140%, 140%); }
	.home-projects__card-cta.is-active .home-projects__card-cta-icon--a { transform: translate(140%, -140%); }
	.home-projects__card-cta.is-active .home-projects__card-cta-icon--b { transform: translate(0, 0); }

	/* ---- Bloque de texto ---- */
	.home-projects__content {
		flex: 1 1 auto;
		max-width: 34.5rem; /* ~552px */
		display: flex; flex-direction: column;
		gap: 15px;
		color: #fff;
	}
	.home-projects__eyebrow { /* DIA DS/Label/Section */
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 5.12px;
		text-transform: uppercase;
		color: #fff;
	}
	.home-projects__title { /* DIA DS/Heading News/H1 Stories — Noto Serif Condensed Light */
		margin: 0;
		font-family: var(--font-serif);
		font-stretch: 75%; /* Condensed */
		font-weight: 300; /* Light */
		font-size: clamp(1.75rem, 1.2rem + 1.6vw, 34px);
		line-height: 1.12; /* 38/34 */
		letter-spacing: -.5px;
		color: var(--dia-color-text-inverse, #fdfdfd);
	}
	.home-projects__body { /* DIA DS/Body/Body large — Noto Sans Light 22/32 */
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 300;
		font-size: clamp(1.125rem, .9rem + .7vw, 22px);
		line-height: 1.45;
		color: #fff;
	}
	/* Botón "Únete a la iniciativa mundial" (DIA DS/CTA/Button Secondary, borde inverso). */
	.home-projects__btn {
		align-self: flex-start;
		display: inline-flex; align-items: center; gap: 12px;
		margin-top: .5rem;
		padding: 16px 33px;
		border: 1px solid var(--dia-color-text-inverse, #fdfdfd);
		border-radius: 6px;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 4px;
		text-transform: uppercase;
		color: var(--dia-color-text-inverse, #fdfdfd);
		text-decoration: none;
		background: transparent;
	}
	.home-projects__btn svg { width: 24px; height: 24px; flex-shrink: 0; }
	.home-projects__btn:hover { background: rgba(255, 255, 255, .12); }

	/* En <1280 el padding inferior de la sección de Recursos es chico, así que la card que sobresale
	   -78px se acerca/traslapa con las cards de arriba. Un margin-top crea el aire necesario (la
	   card sobresale dentro de ese margen blanco). En desktop ≥1280 el padding de Recursos ya basta. */
	@media (width < 80rem) {
		.home-projects { margin-top: 6rem; }
		/* Pedido explícito 2026-07-06 (probado a 1024px): 48px exactos del fondo al texto/card, en
		   los 4 lados, y el alto de la sección DEFINIDO por esos paddings + el contenido — no un
		   número fijo. El alto fijo de 611px (regla base, pensada para ≥1280) forzaba centrar el
		   row verticalmente (align-items:center) para repartir el espacio sobrante, dando un gap
		   top/bottom que dependía de cuánto medía el contenido, no un valor fijo. height:auto +
		   flex-start + padding-block acá reemplaza eso: el alto de la sección sale de sumar
		   padding-top + contenido + padding-bottom, sin adivinar un alto "calculado" a mano. */
		.home-projects { height: auto; }
		.home-projects__row { align-items: flex-start; }
		.home-projects__inner { padding-block: 48px; padding-inline: 48px; }
	}

	/* 1024–1279: la card sobresale más que en desktop (-152px, no los -78px de la regla base
	   ≥1280) — pedido explícito 2026-07-06. De 1280 en adelante sigue el -78px de siempre. */
	@media (64rem <= width < 80rem) {
		.home-projects__card { margin-top: -152px; }
	}

	@media (width < 64rem) {
		.home-projects { height: auto; } /* se libera el alto fijo de 611px; el contenido manda */
		.home-projects__inner { padding-block: clamp(0rem, 5vw, 4rem) clamp(3rem, 7vw, 5rem); }
		.home-projects__row {
			flex-direction: column;
			align-items: center; /* centra la card de imagen; el texto va a la izquierda (abajo) */
		}
		.home-projects__card {
			align-self: center;
			margin-top: -78px; /* sigue sobresaliendo 78px arriba */
			width: clamp(16rem, 60vw, 22rem);
			flex-basis: auto;
		}
		.home-projects__content { align-items: flex-start; text-align: left; max-width: 36rem; }
		.home-projects__title br { display: none; } /* deja que el título fluya en móvil */
	}

	/* 768–1024: la card se alinea a la izquierda (con el borde de la card de Recursos arriba),
	   ya no centrada — mismo criterio de rango que usa .resources-grid__row--featured en
	   home-resources.css. El overlap sube a 140px acá también (mismo valor que el móvil real de
	   abajo, ya no los 78px del bloque <64rem de arriba). */
	@media (48rem <= width < 64rem) {
		.home-projects__card { align-self: flex-start; margin-top: -140px; }
		/* .home-projects__content ya tenía sus PROPIOS hijos (eyebrow/título/body) alineados a la
		   izquierda (align-items:flex-start del bloque <64rem de arriba), pero la CAJA del content
		   seguía centrada dentro de la fila (align-items:center heredado de .home-projects__row) —
		   por eso el texto se veía corrido a la derecha respecto al borde de la card. */
		.home-projects__content { align-self: flex-start; }
	}

	/* Mobile real (<48rem): valores fijos del Inspect, ya no el clamp fluido de tablet/desktop. */
	@media (width < 48rem) {
		/* Gap final contra la card de Recursos = 48px, fijo (no clamp) para que no varíe con el
		   ancho: resources-grid padding-bottom (72px, ver home-resources.css) + este margin-top
		   (116px) + home-projects__inner padding-top (0, fijado abajo) - 140px (overlap de
		   .home-projects__card sobre su propio fondo) = 48px. Antes el padding-top de
		   .home-projects__inner venía de un clamp(0rem, 5vw, 4rem) que crecía con el viewport y
		   volvía el gap impredecible (80px observado a 425px de ancho en vez de los 48px
		   esperados). El margin-top subió de 54 a 116px al pasar el overlap de 78 a 140px, para
		   que el gap de 48px se mantenga igual con el nuevo overlap. */
		.home-projects { margin-top: 116px; }
		.home-projects__inner { padding-block-start: 0; }
		.home-projects__card {
			width: 100%; max-width: 343px; margin-top: -140px; /* mismo ancho que la card de Recursos (topado a 343px); sobresale 140px de su fondo */
			aspect-ratio: 343 / 380; /* proporción del mock del diseñador (343x380), no la de desktop (393.5/575.49, mucho más alta) */
		}
		.home-projects__eyebrow { font-size: 11px; line-height: 18px; }
		.home-projects__title { font-size: 34px; line-height: 38px; }
		.home-projects__body { font-size: 14px; line-height: 20px; }
	}
}