/* =========================================================================
   Genesal · Hero Home — estilos del front
   Fiel al diseño Figma "Genesal-Web-2026" (node 1:27869 · "Section - Destacados"):
   mosaico de 1 tile principal (imagen + tarjeta blanca superpuesta) + 2 tarjetas
   secundarias apiladas (imagen + banda blanca). Título 25/18px, CTA rojo con flecha.
   Autónomo: usa tokens DS (--gen-*) si el tema los aporta, con fallback.
   ========================================================================= */

.gen-he {
	/* Tokens del diseño (con fallback por si el tema no los aporta) */
	--gen-he-rojo:       var(--gen-color-primary-500, #cf0540);            /* bg/fill/primary · text/primary */
	--gen-he-card:       var(--gen-bg-surface-secondary-light, #fafcf8);  /* bg/fill/secondary-light */
	--gen-he-titulo:     var(--gen-text-darker, #000);
	--gen-he-placeholder: var(--gen-color-grey-200, #e1e1e1);
	--gen-he-font:       var(--gen-font-helvetica, "Helvetica Neue", Arial, sans-serif);

	/* Medidas Figma */
	--gen-he-gap:        24px;   /* Gap/gap-24 entre principal y columna derecha */
	--gen-he-gap-sec:    16px;   /* Gap/gap-16 entre las dos secundarias */
	--gen-he-card-w:     535px;  /* ancho tarjeta blanca del principal */
	--gen-he-card-bottom: 48px;  /* separación de la tarjeta al borde inferior */

	display: grid;
	grid-template-columns: 845fr 411fr; /* proporción Figma dentro del contenedor */
	gap: var(--gen-he-gap);
	align-items: stretch;
	font-family: var(--gen-he-font);
}

.gen-he *,
.gen-he *::before,
.gen-he *::after {
	box-sizing: border-box;
}

/* ---------- Imagen común ---------- */
/* !important: Enfold aplica estilos a `#top img` (p.ej. height:auto / max-width)
   que ganan a la clase y desanclan la imagen. Forzamos relleno + recorte cover
   centrado en H y V. */
.gen-he-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block;
}

.gen-he-img--empty {
	position: absolute;
	inset: 0;
	background: var(--gen-he-placeholder);
}

/* En las tarjetas secundarias la imagen va SOBRE la banda (no detrás): ocupa el
   espacio libre por encima y la banda queda debajo, para no tapar el motivo
   (el grupo electrógeno suele estar en la franja inferior de la foto). */
.gen-he-sec .gen-he-img,
.gen-he-sec .gen-he-img--empty {
	position: static;
	inset: auto;
	min-height: 0;
	width: 100% !important;
	height: 100% !important;   /* rellena la fila 1fr del grid de .gen-he-sec.
	                              GRID + height:100% (NO flex:1 sobre <img>): Safari
	                              colapsa a 0 un <img> con flex-grow → hero invisible. */
	object-fit: cover !important;
	object-position: center center !important;
}

/* ---------- Tile principal ---------- */
.gen-he-main {
	position: relative;
	overflow: hidden;
}

/* Altura por "padding-hack" en lugar de aspect-ratio: Safari IGNORA aspect-ratio
   en items de grid → el tile (y con él TODO el hero) colapsaba a ~0.
   El padding-top da la altura (ratio 640/845 = 75.74%) en todos los navegadores;
   la imagen y la tarjeta van en absoluto por encima. */
.gen-he-main::before {
	content: "";
	display: block;
	padding-top: 75.74%;
}

.gen-he-card {
	position: absolute;
	left: 0;
	bottom: var(--gen-he-card-bottom);
	width: var(--gen-he-card-w);
	max-width: calc(100% - 24px);
	display: flex;
	flex-direction: column;
	gap: 24px;                 /* Gap/gap-24 título → CTA */
	padding: 40px 48px;        /* Gap/gap-40 · Gap/gap-48 */
	background: var(--gen-he-card);
}

/* ---------- Columna derecha (2 secundarias) ---------- */
.gen-he-col {
	display: flex;
	flex-direction: column;
	gap: var(--gen-he-gap-sec);
	min-height: 0;
}

.gen-he-sec {
	position: relative;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	display: grid;
	grid-template-rows: 1fr auto;   /* imagen (rellena) arriba · banda debajo (robusto en Safari) */
}

.gen-he-band {
	position: relative;
	flex: 0 0 auto;            /* la banda va debajo de la imagen, sin superponerse */
	display: flex;
	flex-direction: column;
	gap: 16px;                 /* Gap/gap-16 título → CTA */
	padding: 16px 24px;        /* Gap/gap-16 · Gap/gap-24 */
	background: var(--gen-he-card);
}

/* ---------- Título ---------- */
.gen-he-title {
	margin: 0;
	color: var(--gen-he-titulo);
	font-weight: 500;
}

.gen-he-main .gen-he-title {
	/* !important: en Enfold, `#top p` (con id) gana a esta clase y forzaba 15/21. */
	font-size: 25px !important;           /* heading/sm */
	line-height: 31px !important;
	letter-spacing: -0.5px;
}

.gen-he-sec .gen-he-title {
	font-size: 18px !important;           /* heading/xs */
	line-height: 24px !important;
	letter-spacing: -0.2px;
}

/* ---------- CTA (texto + flecha) ---------- */
.gen-he-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;                  /* Gap/gap-4 */
	color: var(--gen-he-rojo);
	font-size: 14px;           /* button/sm */
	line-height: 20px;
	font-weight: 500;
	text-decoration: none;
}

.gen-he-cta::after {
	content: "→";
	font-size: 15px;
	line-height: 1;
}

.gen-he-cta:hover .gen-he-cta-text {
	text-decoration: underline;
}

/* Stretched-link: el CTA cubre toda la tarjeta secundaria */
.gen-he-cta--stretch::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ---------- Responsive: 1 columna en móvil ---------- */
@media (max-width: 767px) {
	.gen-he {
		grid-template-columns: 1fr;
		gap: var(--gen-he-gap-sec);
	}

	/* Bloque grande apilado como las secundarias: imagen arriba, texto debajo
	   (en móvil el texto NO se superpone a la imagen). */
	.gen-he-main {
		overflow: visible;
		display: flex;
		flex-direction: column;
	}

	.gen-he-main::before {
		display: none;   /* en móvil el tile se apila (imagen + texto en flujo) */
	}

	.gen-he-main .gen-he-img,
	.gen-he-main .gen-he-img--empty {
		position: static;
		inset: auto;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
		object-position: center center !important;
	}

	.gen-he-card {
		position: static;
		left: auto;
		right: auto;
		bottom: auto;
		width: auto;
		max-width: none;
		padding: 24px;
	}

	.gen-he-col {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--gen-he-gap-sec);
	}

	.gen-he-sec {
		min-height: 280px;
	}
}