/**
 * Modulo servizi pagina nebbiogeno (3 box).
 *
 * Scope: #nebbiogeno sul .container-services (consigliato)
 *        oppure body.page-id-29 (fallback se l’id manca).
 * service-content e bg-service-default sono sibling → body:has(...).
 */

/* Gradiente sull'immagine di sfondo: #F3F3F3 (alto) → trasparente (basso) */
body:is(:has(#nebbiogeno), .page-id-29) .bg-service-default::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		#f3f3f3 0%,
		rgba(243, 243, 243, 0.4) 9%,
		rgba(243, 243, 243, 0) 24%
	);
}

body:is(:has(#nebbiogeno), .page-id-29) .bg-service-default > :not(.bg-service-overlay-stack) {
	z-index: 2;
}

body:is(:has(#nebbiogeno), .page-id-29) .elementor-element:has(> .service-content.is-service-1),
body:is(:has(#nebbiogeno), .page-id-29) .elementor-element:has(> .service-content.is-service-2),
body:is(:has(#nebbiogeno), .page-id-29) .elementor-element:has(> .service-content.is-service-3) {
	display: flex !important;
	width: 100%;
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-1,
body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-2,
body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-3 {
	--service-content-width: min(36rem, 48%);
	/* quanto sporge oltre la griglia — regola qui */
	--service-content-offset-x: 9rem;

	display: flex !important;
	flex: 0 1 auto !important;
	width: var(--service-content-width) !important;
	max-width: var(--service-content-width) !important;
	box-sizing: border-box;
}

/*
 * MBA 13" / viewport ~≤1440px: riduce l’offset di 4vw dal bordo.
 */
@media (max-width: 1440px) {
	body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-1,
	body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-2,
	body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-3 {
		--service-content-offset-x: calc(9rem - 4vw);
	}
}

/* Consente al pannello di uscire dalla griglia/boxed senza essere ritagliato */
body:is(:has(#nebbiogeno), .page-id-29) .bg-service-default,
body:is(:has(#nebbiogeno), .page-id-29) .bg-service-default > .e-con-inner {
	overflow: visible !important;
}

/* Service-content 1 — destra, sfondo #4B4B4B @ 20%, testi neri */
body:is(:has(#nebbiogeno), .page-id-29) .elementor-element:has(> .service-content.is-service-1) {
	justify-content: flex-end !important;
	align-items: flex-end !important;
	overflow: visible !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-1 {
	--service-content-width: 400px;
	--service-content-bg: rgba(75, 75, 75, 0.2);
	--service-content-text: #000000;

	width: 400px !important;
	max-width: 400px !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	align-self: flex-end !important;
	transform: translateX(var(--service-content-offset-x));
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-1 > :is(.liquid-glass, .e-con) {
	--glass-surface: var(--service-content-bg);

	background-color: var(--service-content-bg) !important;
	background-image: none !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-1 :is(
	.title-service-default,
	.content-service-default,
	.content-service-dafault,
	.e-heading-base,
	.e-paragraph-base,
	h2,
	p
) {
	color: var(--service-content-text) !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .bg-service-default.is-service-1 {
	--service-bg-position: center center;
}

/* Service-content 2 — sinistra, sfondo nero, testi bianchi */
body:is(:has(#nebbiogeno), .page-id-29) .elementor-element:has(> .service-content.is-service-2) {
	justify-content: flex-end !important; /* stessa altezza (basso) */
	align-items: flex-start !important; /* sinistra */
	overflow: visible !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-2 {
	--service-content-width: 400px;
	--service-content-bg: #000000;
	--service-content-text: #ffffff;

	width: 400px !important;
	max-width: 400px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	align-self: flex-start !important;
	transform: translateX(calc(-1 * var(--service-content-offset-x)));
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-2 > :is(.liquid-glass, .e-con) {
	--glass-surface: var(--service-content-bg);

	background-color: var(--service-content-bg) !important;
	background-image: none !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-2 :is(
	.title-service-default,
	.content-service-default,
	.content-service-dafault,
	.e-heading-base,
	.e-paragraph-base,
	h2,
	p
) {
	color: var(--service-content-text) !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .bg-service-default.is-service-2 {
	--service-bg-position: center center;
}

/* Service-content 3 — sinistra, sfondo #4B4B4B @ 20%, testi neri */
body:is(:has(#nebbiogeno), .page-id-29) .elementor-element:has(> .service-content.is-service-3) {
	justify-content: flex-end !important; /* stessa altezza (basso) */
	align-items: flex-start !important; /* sinistra */
	overflow: visible !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-3 {
	--service-content-width: 400px;
	--service-content-bg: rgba(75, 75, 75, 0.2);
	--service-content-text: #000000;

	width: 400px !important;
	max-width: 400px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	align-self: flex-start !important;
	transform: translateX(calc(-1 * var(--service-content-offset-x)));
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-3 > :is(.liquid-glass, .e-con) {
	--glass-surface: var(--service-content-bg);

	background-color: var(--service-content-bg) !important;
	background-image: none !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-3 :is(
	.title-service-default,
	.content-service-default,
	.content-service-dafault,
	.e-heading-base,
	.e-paragraph-base,
	h2,
	p
) {
	color: var(--service-content-text) !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .bg-service-default.is-service-3 {
	--service-bg-position: center center;
}

/* Card attiva / hover: sfondo #4B4B4B @ 50% */
body:is(:has(#nebbiogeno), .page-id-29) .container-services :is(.service-1, .service-2, .service-3).liquid-glass:is(:hover, .is-active) {
	--glass-surface: rgba(75, 75, 75, 0.5);
	--glass-border: rgba(255, 255, 255, 0.28);

	background-color: rgba(75, 75, 75, 0.5) !important;
	background-image: none !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12),
		0 8px 22px rgba(15, 23, 42, 0.2) !important;
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
}

/* Rimuove i riflessi chiari del liquid-glass che coprono lo sfondo scuro */
body:is(:has(#nebbiogeno), .page-id-29) .container-services :is(.service-1, .service-2, .service-3).liquid-glass:is(:hover, .is-active)::before,
body:is(:has(#nebbiogeno), .page-id-29) .container-services :is(.service-1, .service-2, .service-3).liquid-glass:is(:hover, .is-active)::after {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
	background: none !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .container-services :is(.service-1, .service-2, .service-3):is(:hover, .is-active) :is(
	.title-service-1,
	.title-service-2,
	.title-service-3,
	.e-heading-base
) {
	color: #fff !important;
}

body:is(:has(#nebbiogeno), .page-id-29) .container-services :is(.service-1, .service-2, .service-3):is(:hover, .is-active) :is(img, svg) {
	filter: brightness(0) invert(1);
}

/*
 * Mobile: desc 100% larghe e centrate (come modulo servizi home).
 * Annulla offset translateX e larghezze fisse che causano crop.
 */
@media (max-width: 767px) {
	body:is(:has(#nebbiogeno), .page-id-29) .elementor-element:has(> .service-content.is-service-1),
	body:is(:has(#nebbiogeno), .page-id-29) .elementor-element:has(> .service-content.is-service-2),
	body:is(:has(#nebbiogeno), .page-id-29) .elementor-element:has(> .service-content.is-service-3) {
		justify-content: center !important;
		align-items: stretch !important;
	}

	body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-1,
	body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-2,
	body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-3 {
		--service-content-width: 100%;
		--service-content-offset-x: 0;

		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		align-self: stretch !important;
		transform: none !important;
	}

	body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-1 > :is(.liquid-glass, .e-con),
	body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-2 > :is(.liquid-glass, .e-con),
	body:is(:has(#nebbiogeno), .page-id-29) .service-content.is-service-3 > :is(.liquid-glass, .e-con) {
		width: 100% !important;
		max-width: 100% !important;
	}
}

.h500 {
	height: 500px;
}