/**
 * Lamitex Hero — stili del custom element.
 * File esterno per gestione pulita degli asset e caching browser.
 * NON modificare inline dentro il template PHP.
 */
.lmx-hero{
	--lmx-hero-font:"At Hauss",sans-serif;

	--lmx-hero-computed-offset:0px;
	--lmx-hero-computed-height:100vh;

	--lmx-hero-panel-bg:#fff;
	--lmx-hero-panel-color:#111;
	--lmx-hero-panel-width:35vw;
	--lmx-hero-panel-inset-x:48px;
	--lmx-hero-panel-inset-y:48px;
	--lmx-hero-panel-padding:32px;
	--lmx-hero-panel-shadow:0 2px 20px rgba(0,0,0,.08);

	--lmx-hero-nav-bg:#000;
	--lmx-hero-nav-color:#fff;
	--lmx-hero-nav-radius:5px;
	--lmx-hero-nav-inset-x:32px;
	--lmx-hero-nav-inset-y:32px;

	position:relative; width:100%;
	height:calc(100vh - var(--lmx-hero-computed-offset));
	max-height:100vh;
	overflow:hidden;
	background:#fff;
	background-size:cover; background-position:center; background-repeat:no-repeat;
	font-family:var(--lmx-hero-font);
}

/* ============================================================
   BG-SLIDESHOW: full-viewport, dietro tutto
   ============================================================ */
.lmx-hero__bg-slideshow{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.lmx-hero__bg-slideshow .uk-slideshow-items{
	min-height:var(--lmx-hero-computed-height) !important;
	height:var(--lmx-hero-computed-height) !important;
}
.lmx-hero__bg-slideshow .uk-slideshow-items > li{
	position:absolute; inset:0;
	width:100%;
	height:var(--lmx-hero-computed-height) !important;
	min-height:var(--lmx-hero-computed-height) !important;
	max-height:var(--lmx-hero-computed-height) !important;
}
.lmx-hero__bg{
	position:absolute; inset:0;
	background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* ============================================================
   PANNELLO STATICO: non si muove mai
   ============================================================ */
.lmx-hero__panel{
	position:absolute; z-index:2;
	top:20px; left:20px;
	width:var(--lmx-hero-panel-width);
	max-width:calc(100% - (var(--lmx-hero-panel-inset-x) * 2));
	height:calc(100% - 110px);
	background:var(--lmx-hero-panel-bg); color:var(--lmx-hero-panel-color);
	box-shadow:var(--lmx-hero-panel-shadow);
	padding:var(--lmx-hero-panel-padding);
	display:flex; flex-direction:column;
	border-radius:10px;
}

.lmx-hero__panel-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.lmx-hero__logo{ display:inline-flex; align-items:center; color:inherit; text-decoration:none; }
.lmx-hero__logo img{ display:block; max-height:auto; width:auto; height:auto; aspect-ratio:initial; }
.lmx-hero__logo-fallback{ font-weight:700; font-size:18px; letter-spacing:.02em; }

.lmx-hero__menu-btn{
	display:inline-flex; align-items:center; gap:10px;
	background:transparent; color:inherit; text-decoration:none;
	padding:0; font-size:14px; line-height:1;
	transition:opacity .15s ease;
}
.lmx-hero__menu-btn:hover,.lmx-hero__menu-btn:focus{
	background:transparent; color:inherit; text-decoration:none; opacity:.8;
}
.lmx-hero__menu-label{ font-weight:500; letter-spacing:.04em; }
.lmx-hero__menu-icon{ display:inline-block; width:40px; height:40px; flex:0 0 auto; }
.lmx-hero__menu-icon svg{ display:block; width:100%; height:100%; }

/* ============================================================
   CONTENT-SLIDESHOW: dentro il pannello, scorre nell'area centrale
   ============================================================ */
.lmx-hero__content-slideshow{
	flex:1 1 auto; min-height:0;
	position:relative;
	overflow:hidden;
}
.lmx-hero__content-slideshow .uk-slideshow-items{
	min-height:100% !important;
	height:100% !important;
}
.lmx-hero__content-slideshow .uk-slideshow-items > li{
	/* UIkit sovrappone le slide in absolute: NON usare relative,
	   altrimenti i li si impilano in verticale nel flusso e la slide
	   entrante anima fuori dall'area visibile (appare "di colpo"). */
	position:absolute; inset:0;
	width:100%; height:100%;
}
.lmx-hero__slide-content, .lmx-hero__slide-link{
	width:100%; height:100%;
	display:flex; flex-direction:column;
	align-items:center; justify-content:center; gap:10vh; text-align:center;
}
.lmx-hero__slide-link{ color:inherit; text-decoration:none; }
/* SAFARI FIX: il wrap deve avere un'ALTEZZA DEFINITA (height, non solo
   max-height): l'immagine dentro usa height:100%, e una percentuale
   contro un'altezza indefinita in WebKit collassa a zero (immagine
   invisibile su Safari, mentre Blink/Chrome risolve via aspect-ratio).
   height:55% risolve ovunque perche' il parent ha height:100% definita. */
.lmx-hero__product-wrap{ height:55%; aspect-ratio: 272 / 380; max-width:70%; display:flex; align-items:center; justify-content:center; }
.lmx-hero__product{ width:100%; height:100%; object-fit:cover; display:block; }
.lmx-hero__text{ margin:0; font-size:18px; line-height:1.5; max-width:85%; }

.lmx-hero__panel-footer{ margin-top:24px; text-align:center; font-size:14px; letter-spacing:.06em; }

/* ============================================================
   NAVIGAZIONE: dotnav a pillole + frecce, in basso a destra.
   Vive DENTRO il container bg-slideshow perché uk-slideshow-item
   deve trovare il proprio uk-slideshow come ancestor.
   ============================================================ */
.lmx-hero__nav{
	position:absolute; z-index:3;
	bottom:var(--lmx-hero-nav-inset-y);
	right:var(--lmx-hero-nav-inset-x);
	display:flex; align-items:center; gap:24px;
}

.lmx-hero__dotnav{
	display:flex; align-items:center; gap:8px;
	margin:0; padding:0; list-style:none;
}
.lmx-hero__dotnav > *{ margin:0; padding:0; display:block; }
.lmx-hero__dotnav > * > *{
	display:block; width:24px; height:2px;
	background:rgba(255,255,255,.5);
	transition:background .2s ease, width .2s ease;
	text-indent:-9999px; overflow:hidden;
}
.lmx-hero__dotnav > *:hover > *,
.lmx-hero__dotnav > *:focus > *{ background:rgba(255,255,255,.85); }
.lmx-hero__dotnav > .uk-active > *{ background:#fff; width:40px; }

.lmx-hero__nav-arrows{ display:flex; gap:8px; }
.lmx-hero__nav-btn{
	display:inline-flex; align-items:center; justify-content:center;
	width:40px; height:40px;
	background:var(--lmx-hero-nav-bg);
	color:var(--lmx-hero-nav-color);
	border-radius:var(--lmx-hero-nav-radius);
	text-decoration:none;
	transition:background .15s ease, transform .15s ease;
}
.lmx-hero__nav-btn:hover,.lmx-hero__nav-btn:focus{
	background:#222; color:var(--lmx-hero-nav-color);
	transform:scale(1.05); text-decoration:none;
}
.lmx-hero__nav-btn .uk-icon,
.lmx-hero__nav-btn svg{ color:var(--lmx-hero-nav-color); }

@media (max-width:960px){
	.lmx-hero{
		--lmx-hero-panel-width:min(50vw, 380px);
		--lmx-hero-panel-inset-x:32px; --lmx-hero-panel-inset-y:32px;
		--lmx-hero-nav-inset-x:24px; --lmx-hero-nav-inset-y:24px;
	}
}
@media (max-width:640px){
	.lmx-hero{
		--lmx-hero-panel-inset-x:16px; --lmx-hero-panel-inset-y:16px;
		--lmx-hero-panel-padding:20px;
		--lmx-hero-nav-inset-x:16px; --lmx-hero-nav-inset-y:16px;
	}
	.lmx-hero__panel{
		width:auto; max-width:none;
		right:var(--lmx-hero-panel-inset-x);
		left:var(--lmx-hero-panel-inset-x);
	}
	.lmx-hero__nav-btn{ width:36px; height:36px; }
}