/**
 * Utility responsive — Karmaweb Exploriamo
 *
 * Elementor: sezione / colonna / widget → Avanzate → Classi CSS
 * Valore: karmaweb-hide-smartphone
 *
 * Breakpoint: max 767px (= breakpoint "Mobile" predefinito Elementor).
 */

@media screen and (max-width: 767px) {
	/* Nasconde su mobile il pulsante "torna in alto" del tema Bridge. */
	#back_to_top,
	#back_to_top.on,
	#back_to_top.off {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Nasconde il blocco e tutto il contenuto (figli inclusi dal rendering). */
	.karmaweb-hide-smartphone {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
		width: 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden !important;
		position: absolute !important;
		left: -9999px !important;
		clip-path: inset(50%) !important;
		clip: rect(0, 0, 0, 0) !important;
	}

	/* Rinforzo per iframe / video / canvas (alcuni temi forzano dimensioni). */
	.karmaweb-hide-smartphone iframe,
	.karmaweb-hide-smartphone video,
	.karmaweb-hide-smartphone audio,
	.karmaweb-hide-smartphone canvas,
	.karmaweb-hide-smartphone embed,
	.karmaweb-hide-smartphone object {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	#back_to_top,
	#back_to_top.on,
	#back_to_top.off {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

@media screen and (max-width: 767px) and (orientation: portrait) {
	/*
	 * Sinergie d'eccellenza: forza su mobile lo stesso sfondo hero configurato per desktop/tablet.
	 * Elementor aveva generato una background image mobile diversa.
	 */
	.page-id-1697 .elementor-1697 .elementor-element.elementor-element-1bb7aa4:not(.elementor-motion-effects-element-type-background),
	.page-id-1697 .elementor-1697 .elementor-element.elementor-element-1bb7aa4 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-image: url("/wp-content/uploads/2026/04/struttura-lux-1.webp") !important;
		background-position: top center !important;
		background-repeat: no-repeat !important;
	}

	/*
	 * Immagini Elementor full-bleed solo su telefono verticale.
	 * Per escludere un'immagine: Avanzate > Classi CSS > karmaweb-keep-mobile-image-margins
	 */
	.elementor-widget-image:not(.karmaweb-keep-mobile-image-margins),
	.elementor-widget-wrap:has(> img.e-image-base:not(.karmaweb-keep-mobile-image-margins)),
	.elementor-widget-wrap:has(> img[data-e-type="widget"]:not(.karmaweb-keep-mobile-image-margins)) {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-right: calc(50% - 50vw) !important;
		margin-left: calc(50% - 50vw) !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.elementor-column:has(> .elementor-widget-wrap > img.e-image-base:not(.karmaweb-keep-mobile-image-margins)),
	.elementor-column:has(> .elementor-widget-wrap > img[data-e-type="widget"]:not(.karmaweb-keep-mobile-image-margins)) {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-right: calc(50% - 50vw) !important;
		margin-left: calc(50% - 50vw) !important;
	}

	.elementor-widget-image:not(.karmaweb-keep-mobile-image-margins) > .elementor-widget-container {
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.elementor-widget-image:not(.karmaweb-keep-mobile-image-margins) img,
	.elementor img.e-image-base:not(.karmaweb-keep-mobile-image-margins),
	.elementor img[data-e-type="widget"]:not(.karmaweb-keep-mobile-image-margins) {
		display: block !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: auto !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		border-radius: 0 !important;
	}
}