/**
 * Estilos del bloque `ipropanel/featured-projects` (desktop + mobile).
 *
 * Verificado vía MCP contra Figma: 501:1093 (desktop) y 627:6398 (mobile),
 * con `get_design_context` + `get_metadata` (posiciones absolutas exactas)
 * para spacing preciso. Fondo: degradado sólido `dark-blue-gradient`
 * (mismo token de `advantages-grid`) + degradado de oscurecimiento
 * `featured-projects-scrim` (rgba(0,0,0,0.8), token nuevo — no coincide
 * con ningún alpha ya declarado, criterio sin excepciones de S2.7).
 *
 * Gap encabezado→cards (64px) coincide exacto con `section-padding-block-sm`.
 * Gap cards→botón (48px, desktop) y los gaps mobile (32px entre bloques,
 * 8px título→subtítulo) no tienen preset equivalente — literales,
 * medidos con precisión desde `get_metadata` (posiciones absolutas de
 * 501:1093/627:6398, no estimados). Padding-block de la sección (79px
 * desktop / 63px mobile medidos) sin preset exacto: se usan
 * `section-padding-block-lg`/`-sm` como aproximación más cercana (mismo
 * criterio de tolerancia "drift" de V8).
 *
 * Botón CTA con texto+ícono NEGROS (`neutral-black`), a diferencia de los
 * CTA blancos ya construidos (`hero-slider`, `site-header`) — verificado
 * en Figma, no es un error de exportación (ver comentario en render.php).
 *
 * Mobile (DT.3, 2026-08-07): carrusel horizontal con snap por tarjeta.
 * Sustituye el apilado en 1 columna que S4.1 había elegido como criterio
 * conservador ante un desborde sin affordance documentado. Ver el bloque
 * de comentario de la media query para los valores y su porqué.
 */

.ipropanel-featured-projects {
	background-color: var( --wp--preset--color--dark-blue-gradient );
	background-image: linear-gradient( to bottom, var( --wp--custom--color--featured-projects-scrim ), transparent 69.246% );
}

.ipropanel-featured-projects__inner {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--section-padding-inline );
	padding-block: var( --wp--preset--spacing--section-padding-block-lg );
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ipropanel-featured-projects__encabezado {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.ipropanel-featured-projects__titulo {
	margin: 0;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--heading-2 );
	font-weight: 700;
	line-height: 60px;
	color: var( --wp--preset--color--neutral-white );
}

.ipropanel-featured-projects__subtitulo {
	margin: 0;
	max-width: 672px;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--heading-2-parrafo );
	font-weight: 400;
	line-height: 28px;
	color: var( --wp--preset--color--neutral-white );
}

.ipropanel-featured-projects__grid {
	width: 100%;
	margin: var( --wp--preset--spacing--section-padding-block-sm ) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	/* Sin preset equivalente (medido en 501:1106); no confundir con el
	   token `card-gap` (16px/10px), que aquí no aplica. */
	gap: 32px;
}

/* Las 3 cards deben medir lo mismo aunque un título se vaya a dos
   líneas. El `<li>` ya se estiraba a la altura de la fila (`stretch` por
   defecto del grid), pero la card de dentro conservaba su alto natural,
   así que la diferencia se veía igual. Con el `<li>` como flex y la card
   al 100 %, el bloque blanco de las cards más cortas crece hasta igualar
   a la más alta. */
.ipropanel-featured-projects__item {
	display: flex;
}

.ipropanel-featured-projects__item .ipropanel-project-card {
	width: 100%;
	height: 100%;
}

.ipropanel-featured-projects__cta-wrap {
	width: 100%;
	margin-top: 48px; /* sin preset equivalente, medido en 501:1205 */
	display: flex;
	justify-content: center;
}

.ipropanel-featured-projects__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 12px 32px;
	border-radius: var( --wp--custom--border-radius--full );
	background-color: var( --wp--preset--color--primary-light-blue );
	box-shadow: var( --wp--preset--shadow--shadow-lg );
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--boton );
	font-weight: 600;
	line-height: 24px;
	color: var( --wp--preset--color--neutral-white );
	text-decoration: none;
	transition: background-color var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

/* Verificado vía MCP contra Figma (component set "Button" 257:50,
   variant Primary/Hover 393:493): el hover cambia fondo a amarillo (no
   opacidad). `:active` cubre tablet/mobile (INTERACTIONS.md §4: sin hover
   táctil, mismo look al presionar).
   Guarda `@media ( hover: hover )` y reglas separadas por S11.1 — el porqué,
   en la forma canónica de `blocks/project-info/style.css`.

   **El `color` de estas dos reglas lo agregó S16.3 y NO es ejecutar `S15.2`.**
   Era la única de las ocho variantes de botón que no lo declaraba, porque hasta
   `RD-04` el texto ya era negro en reposo y lo heredaba. Con el texto base en
   blanco, sin estas dos líneas el hover amarillo quedaba en **2,03 : 1** —
   ilegible. El fondo amarillo ya existía desde antes; lo único que se hace
   explícito es el negro que era implícito. */
@media ( hover: hover ) {
	.ipropanel-featured-projects__cta:hover {
		background-color: var( --wp--preset--color--primary-yellow );
		color: var( --wp--preset--color--neutral-black );
	}
}

.ipropanel-featured-projects__cta:active {
	background-color: var( --wp--preset--color--primary-yellow );
	color: var( --wp--preset--color--neutral-black );
}

.ipropanel-featured-projects__cta-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

@media ( max-width: 767px ) {
	.ipropanel-featured-projects__inner {
		align-items: flex-start;
		padding-block: var( --wp--preset--spacing--section-padding-block-sm );
	}

	.ipropanel-featured-projects__encabezado {
		align-items: flex-start;
		gap: 8px; /* medido en 627:6403, sin preset equivalente */
		text-align: left;
	}

	.ipropanel-featured-projects__titulo {
		line-height: normal;
	}

	.ipropanel-featured-projects__subtitulo {
		max-width: 100%;
		font-size: var( --wp--preset--font-size--boton );
	}

	/* Track horizontal con snap por tarjeta (DT.3).
	   El nodo mobile `627:6411` es IDÉNTICO al desktop `501:1106` — 1040 de
	   ancho, 3 tarjetas de 325,33 y gap 32 —: el diseñador no adaptó la fila
	   al breakpoint, la metió tal cual en un viewport de 414. Por eso los
	   valores salen del nodo y no del recorte que midió el tablero de QA.

	   Sale del padding del `__inner` (margen negativo + padding propio) para
	   que la tarjeta siguiente se asome hasta el borde de la pantalla, como
	   en `627:6398`. El asomo NO se declara: es la resta
	   `viewport − padding − tarjeta − gap`, así que sigue siendo coherente
	   si cambia cualquiera de los tres.

	   `scroll-padding-inline` vive acá y no en `base/_scroll.scss`: ese
	   archivo gobierna el desplazamiento VERTICAL del documento bajo el
	   header sticky, y su invariante habla de `scroll-margin-top`. El
	   scroll-padding de un contenedor con snap propio es otro eje y otro
	   ámbito.

	   Último punto de snap: con padding 32 el `scrollWidth` es 1104 y el
	   `scrollLeft` máximo 690, mientras el snap de la 3.ª tarjeta caería en
	   714,67. El navegador para en el máximo y la última tarjeta queda al ras
	   del margen derecho (termina en 382 = 414 − 32), que es como la dibuja
	   el archivo. No se compensa con un `padding-inline-end` inventado.

	   Sin `scrollbar-width: none`: el nodo no dibuja barra, pero ocultarla es
	   quitar un affordance y en táctil es overlay que se desvanece sola.

	   Sin dots, flechas ni avance automático: no existen en el árbol del nodo
	   (consulta `CD-C3`, abierta). `overscroll-behavior-x` no es un valor
	   visual sino contención: evita que el swipe encadene al gesto de
	   "atrás" del navegador. */
	.ipropanel-featured-projects__grid {
		display: flex;
		gap: 32px; /* medido en 627:6411 */
		align-self: stretch;
		width: auto;
		margin-block-start: 32px; /* medido en 627:6403, sin preset equivalente */
		margin-inline: calc( -1 * var( --wp--preset--spacing--section-padding-inline ) );
		padding-inline: var( --wp--preset--spacing--section-padding-inline );
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var( --wp--preset--spacing--section-padding-inline );
	}

	/* El `stretch` implícito del flex row reemplaza al del grid, así que la
	   corrección de alturas iguales de S4.8 sigue funcionando sin cambios. */
	.ipropanel-featured-projects__item {
		flex: 0 0 325.33px; /* medido en 627:6412 */
		scroll-snap-align: start;
	}

	.ipropanel-featured-projects__cta-wrap {
		margin-top: 32px; /* medido en 627:6403, sin preset equivalente */
	}

	.ipropanel-featured-projects__cta {
		width: 100%;
	}
}