/*
 * Hero de Home — acturion_hero_video.
 *
 * Solo consume variables de tokens.css. Las medidas que el diseño fija pero que NO son
 * tokens globales se declaran aquí como custom properties del widget, cada una con su
 * procedencia, para no inflar la escala global con números de una sola pantalla.
 *
 * TRES MODOS (el diseño solo define 1440 y 375; los intermedios están razonados en la
 * respuesta de la fase):
 *   >= 1200px  texto SOBRE el video, titular y USP en dos columnas (referencia 1440).
 *   768–1199   texto SOBRE el video, titular y USP apilados — a menos de 1200 las dos
 *              columnas (816 + 24 + 396) ya no caben en el ancho de contenido.
 *   <  768px   maqueta mobile: el texto sale del media (referencia 375).
 */

.acturion-hero-video {
	/* --- Medidas del diseño [figma] --- */
	--hero-height:       800px;  /* Main section desktop 1440x800 */
	--hero-pad-bottom:   66px;   /* 800 - 734 (base de la caja de texto) */
	--hero-aside-col:    396px;  /* columna del párrafo USP; = --acturion-col */
	--hero-media-height: 230px;  /* frame «Photo» mobile 375x230 */
	--hero-top-gap:      28px;   /* mobile: Main section y=136 - header 108 */
	--hero-split:        29.5%;  /* corte de la franja: 236/800 desktop, 65/230 mobile */

	position: relative;
	background: var(--acturion-soft-beige);
	padding-top: var(--hero-top-gap);
}

/* ---------------------------------------------------------------- Media */

.acturion-hero-video__media {
	display: flex;
	height: var(--hero-media-height);
}

.acturion-hero-video__frame {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	/* Sin video ni póster el hero sigue siendo legible: el texto va en soft beige. */
	background: var(--acturion-dark-blue);
}

/* Especificidad (0,2,0) a propósito: Elementor trae `.elementor img { height: auto }`
   (0,1,1), que le ganaba a un selector de una sola clase y sacaba el póster a su alto
   intrínseco (cuadrado) en vez de cubrir el frame. Mismo bug y mismo arreglo que en
   leaders.css. */
.acturion-hero-video__frame .acturion-hero-video__video,
.acturion-hero-video__frame .acturion-hero-video__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* --hero-focus: encuadre vertical del recorte (control «Vertical focus» del widget).
	   Insurance lo fija en 22% para calcar la ventana del Figma sobre la foto vertical. */
	object-position: center var(--hero-focus, 50%);
	display: block;
}

/* Franja de degradado: gradient-1 arriba, gradient-2 abajo, cortadas en --hero-split.
   Los stops salen literalmente de los SVG exportados (tokens.css). */
.acturion-hero-video__strip {
	flex: 0 0 var(--acturion-strip);
	background: var(--acturion-gradient-strip);
}

/* [figma] El velo del hero son TRES capas sobre la foto/vídeo (rects 1608:9579-9581
   en About; mismos rects en los demás heros), de abajo arriba:
   1. degradado inferior negro 0 -> .2 entre el 28.5% y el 93.4%;
   2. viñeta radial elíptica centrada en (682,295) de 1365x800 = (50%, 36.9%), radios
      862x505 = ~63% por lado: transparente al centro y negro .6 en el borde, con la
      capa al 70% — es lo que despeja el centro y oscurece el marco para que el texto
      aguante sobre las luces de la foto. Las paradas de abajo ya llevan ese 70%
      premultiplicado (.15->.105, .3->.21, .6->.42);
   3. lavado de Gradient2 al 5%, más otro al 20% en soft-light (::after, porque
      mix-blend-mode no existe por capa de background) que atempera la saturación. */
.acturion-hero-video__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--acturion-sky) 5%, transparent) 31.7%,
			color-mix(in srgb, var(--acturion-sand) 5%, transparent) 68.3%,
			color-mix(in srgb, var(--acturion-tan) 5%, transparent) 100%
		),
		/* Viñeta e inferior van ~30% por encima de los valores del branch (.42/.2):
		   con los literales, las luces de los edificios seguían compitiendo con el
		   texto en pantallas reales; el centro se mantiene despejado. */
		radial-gradient(
			ellipse 63.1% 63.1% at 50% 36.9%,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.14) 20.1%,
			rgba(0, 0, 0, 0.21) 30.1%,
			rgba(0, 0, 0, 0.24) 35.1%,
			rgba(0, 0, 0, 0.28) 40.2%,
			rgba(0, 0, 0, 0.55) 79.8%
		),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 28.5%, rgba(0, 0, 0, 0.26) 93.4%);
}

.acturion-hero-video__scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--acturion-gradient-2);
	opacity: 0.2;
	mix-blend-mode: soft-light;
}

/* ---------------------------------------------------------------- Texto */

.acturion-hero-video__title,
.acturion-hero-video__aside {
	padding-inline: var(--acturion-gutter);
	color: var(--acturion-dark-blue);
}

.acturion-hero-video__title {
	/* [figma] branch Confirmed: los H1 de hero van en MEDIUM 85/0.9 (38/0.9 en
	   mobile), más grandes y pesados que el resto de titulares — leído por MCP de
	   los nodos de texto (1582:8346, 1365:12565, 1582:8062, 1365:10246). */
	font-size: var(--acturion-hero-h1);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
	/* [figma] mobile: caja del titular 0→74, media a 122 => 48 de separación. */
	margin: 0 0 var(--acturion-space-8);
	text-wrap: balance;
}

/* [figma] los saltos de línea de los titulares son cosa del DESKTOP: en los frames
   mobile los H1 rompen solos donde toca ("About Acturion" cabe en una línea,
   "Confident Future. / Stable Assets." rompe tras el punto). Sin esto, el <br> del
   copy fuerza saltos que el diseño mobile no tiene. */
@media (max-width: 767px) {
	.acturion-hero-video__title br { display: none; }
}

.acturion-hero-video__aside {
	/* [figma] mobile: media termina en 352, USP arranca en 376 => 24. */
	margin-top: var(--acturion-space-5);
}

.acturion-hero-video__usp {
	margin: 0;
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
	max-width: var(--hero-aside-col);
}

/* ---------------------------------------------------------------- Botón */
/* Oculto en los dos frames de Figma (se renderiza solo si se le pone texto):
   proporciones tomadas de la capa «Button primary» 391x57 / 327x57. */

.acturion-hero-video__button {
	display: inline-flex;
	align-items: center;
	gap: var(--acturion-space-5);
	min-height: 57px;
	margin-top: var(--acturion-space-8);
	padding-inline: var(--acturion-space-5);
	background: var(--acturion-dark-blue);
	color: var(--acturion-soft-beige);
	font-size: var(--acturion-body-18);
	line-height: var(--acturion-lh-body);
	text-decoration: none;
	border-radius: var(--acturion-radius);
	transition: background var(--acturion-duration) var(--acturion-ease);
}

.acturion-hero-video__button:hover,
.acturion-hero-video__button:focus-visible {
	background: var(--acturion-blue);
}

.acturion-hero-video__button-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

/* ================================================================ >= 768px
   El texto pasa a ir encima del video: media a pantalla completa detrás,
   contenido anclado abajo y en soft beige. */

@media (min-width: 768px) {

	.acturion-hero-video {
		display: grid;
		align-content: end;
		min-height: clamp(520px, 55.6vw, var(--hero-height));
		padding-top: 0;
		padding-bottom: var(--hero-pad-bottom);
		/* El gutter pasa al CONTENEDOR: en mobile lo llevan los ítems porque el media
		   va a sangre, pero aquí el media es absoluto (inset:0 se resuelve contra la
		   caja de padding, así que sigue llegando al borde) y ponerlo en los ítems lo
		   contaría dos veces dentro de las columnas del grid.

		   Va el gutter CAPADO (tokens.css) y no el normal: el hero no cuelga de
		   .acturion-container porque el media va a sangre, así que por encima de 1440
		   hay que reproducir aquí el tope del contenedor o el titular se pega al borde
		   de la pantalla mientras el resto del sitio se queda en 1440. */
		padding-inline: var(--acturion-gutter-capped);
		background: var(--acturion-dark-blue);
	}

	.acturion-hero-video__media {
		position: absolute;
		inset: 0;
		height: auto;
	}

	.acturion-hero-video__title,
	.acturion-hero-video__aside {
		/* position:relative solo no basta: el media también queda "positioned" (absolute,
		   z-index:auto) y al ir DESPUÉS del título en el DOM lo tapaba — el USP se veía de
		   pura casualidad, por ir DESPUÉS del media. z-index fuerza a los dos por encima. */
		position: relative;
		z-index: 1;
		padding-inline: 0;
		color: var(--acturion-soft-beige);
	}

	.acturion-hero-video__title {
		margin-bottom: 0;
	}

	.acturion-hero-video__aside {
		/* Apilado bajo el titular mientras no caben dos columnas. */
		margin-top: var(--acturion-space-5);
	}

	/* [figma] halo tras el USP para que aguante sobre el vídeo/foto: en el diseño es
	   un rectángulo rgba(0,0,0,.3) con blur de 15 detrás del bloque de texto
	   («Rectangle 3468513/4» en los cuatro heros desktop, ~10-14px más grande que la
	   caja del texto). Solo existe aquí: en mobile el texto va sobre el fondo beige. */
	.acturion-hero-video__usp {
		position: relative;
	}

	.acturion-hero-video__usp::before {
		content: "";
		position: absolute;
		inset: -12px -14px;
		z-index: -1;
		/* Con la viñeta del scrim en su sitio, el .3 del diseño basta: la lectura
		   del USP la sostienen las dos capas juntas, no el halo solo. */
		background: rgba(0, 0, 0, 0.3);
		filter: blur(15px);
		pointer-events: none;
	}
}

/* ================================================================ >= 1200px
   Dos columnas, como en 1440: el titular ocupa el resto y el USP mide 396,
   separados por 24. A 1440 eso da exactamente 816 + 24 + 396 = 1236. */

@media (min-width: 1200px) {

	.acturion-hero-video {
		grid-template-columns: minmax(0, 1fr) var(--hero-aside-col);
		column-gap: var(--acturion-space-5);
		align-items: end;
	}

	.acturion-hero-video__title {
		grid-column: 1;
	}

	.acturion-hero-video__aside {
		grid-column: 2;
		margin-top: 0;
	}
}

/* ================================================================ A sangre
   Interruptor «Full-width heroes» (Apariencia > Personalizar > Site frame): el hero
   se sale del marco de --acturion-site-max y llega al borde de la pantalla, con tope
   en --acturion-hero-max. El resto del sitio sigue dentro del marco.

   Solo por encima del marco: a 1440 o menos el hero YA ocupa todo el ancho, así que
   la maqueta sigue siendo idéntica al artboard de Figma y mobile no se entera. */

@media (min-width: 1441px) {

	.acturion-heroes-full .acturion-hero-video {
		/* Sin `width`: con márgenes negativos la caja mide lo que mide el contenedor
		   (el marco, 1440) más lo que se salga por cada lado, o sea min(100vw, tope).
		   El contenedor ya está centrado, así que el hero queda centrado también. */
		margin-inline: calc(50% - min(50vw, var(--acturion-hero-max) / 2));
		/* --acturion-gutter-capped no sirve una vez ensanchado: sus porcentajes se
		   resuelven contra el CONTENEDOR (1440), no contra el hero, y el titular se
		   quedaría anclado al borde de la pantalla en vez de a la columna del sitio.
		   Esto lo alinea con los 1236 de contenido, que están centrados en pantalla. */
		padding-inline: calc((min(100vw, var(--acturion-hero-max)) - var(--acturion-content-max)) / 2);
		/* El alto acompaña al ancho para que el ENCUADRE no cambie: la proporción del
		   diseño es 800/1440 = 0.5556, así que un hero de 1920 pide 1067 de alto. Si
		   el alto se quedara en 800, cada foto se acercaría (la de Insurance es
		   vertical y el recorte se iba al cielo, sin skyline).

		   Y con tope en el alto de la ventana (100dvh, no 100vh, por si el navegador
		   tiene barras retráctiles): así el hero llena la pantalla exacta en vez de
		   pasarse de largo. En una de 1920x950 eso da 950 de alto y 2.02:1, entre el
		   1.8 del diseño y el 2.4 que saldría con el alto congelado. */
		min-height: min(
			calc(min(100vw, var(--acturion-hero-max)) * 0.5556),
			100dvh
		);

		/* Los 66 del diseño son el 8% de un hero de 800: a esa altura el titular queda
		   pegado al borde de abajo a propósito. En un monitor grande el hero mide 1300
		   o más y esos mismos 66 dejan el texto raspando el suelo de la pantalla, así
		   que el hueco crece con el ancho — pero SOLO a partir de 1920, que es donde
		   estaba el tope hasta ahora: por debajo, `max()` devuelve los 66 de siempre y
		   no se mueve ni un píxel de lo ya revisado.

		   --hero-pad-growth es el único número que hay que tocar para dar más o menos
		   aire: 0.103 dobla los 66 a 2560 (132); 0.206 los triplica (198). */
		--hero-pad-growth: 0.103;
		--hero-pad-bottom: max(
			66px,
			calc(66px + (min(100vw, var(--acturion-hero-max)) - 1920px) * var(--hero-pad-growth))
		);
	}

	/* 100vw cuenta la barra de scroll, así que el hero se pasa ~15px del ancho real y
	   el sitio quedaría con scroll horizontal (criterio de terminado: cero entre 320 y
	   1920). `clip` en el body se propaga al viewport y recorta ese sobrante SIN crear
	   un contenedor de scroll —a diferencia de `hidden`—, de modo que ni el sticky ni
	   el menú fixed se enteran. Va aquí y no en base.css porque esta hoja solo se
	   encola en las páginas que llevan el widget. */
	body.acturion-heroes-full {
		overflow-x: clip;
	}
}

/* ================================================================ Motion
   El JS no llega a cargar el video con reduced motion, así que aquí solo se
   neutralizan las transiciones. El póster lo pinta el atributo `poster`. */

@media (prefers-reduced-motion: reduce) {
	.acturion-hero-video__button {
		transition: none;
	}
}