/**
 * Lamitex Hero — stili del custom element (VERSIONE 7, design "HOME" rev. ottobre).
 * File esterno per gestione pulita degli asset e caching browser.
 * NON modificare inline dentro il template PHP.
 *
 * Misure prese dal Figma (frame 1728x1117):
 *  - card decorativo: 414px, raggio 10, padding 10, thumb 43x60 (r5);
 *    espansa: thumb 160x160, codice 16px, nome 24px;
 *  - card a destra 20px, sotto l'header (top 101 nel frame);
 *  - dots quadratini centrati in basso, frecce bianche 30x30 a destra.
 */
.lmx-hero{
	--lmx-hero-font:"At Hauss",sans-serif;
	--lmx-hero-mono:"Geist Mono",monospace;

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

	--lmx-hero-inset:20px;         /* margine dei layer dal bordo */
	--lmx-hero-top:100px;          /* quota della card decorativo, sotto l'header */
	--lmx-hero-caption-x:40px;     /* rientro del blocco titolo */

	position:relative; width:100%;
	/* Stessa altezza delle slide (variabile calcolata da hero.js). Prima era
	   100vh: su Safari iOS 100vh e' l'altezza con la barra ritratta, mentre le
	   slide usavano quella reale -> all'apertura la sezione sbordava sotto lo
	   schermo e le frecce sparivano finche' non si scrollava. */
	height:var(--lmx-hero-computed-height);
	max-height:var(--lmx-hero-computed-height);
	overflow:hidden;
	background:#fff;
	background-size:cover; background-position:center; background-repeat:no-repeat;
	font-family:var(--lmx-hero-font);
}
.tm-header > .uk-sticky{ pointer-events: none; }
.tm-header .uk-navbar-container{ pointer-events: auto; }

/*
 * L'header standard del sito resta visibile anche in home: supera le
 * regole body.home .tm-header{opacity:0} rimaste in custom.css (che a
 * questo punto si possono anche eliminare dal tema).
 */
body.home .tm-header{ opacity:1 !important; pointer-events:auto !important; }

/* ============================================================
   SLIDESHOW UNICO
   ============================================================ */
.lmx-hero__slideshow{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.lmx-hero__slideshow .uk-slideshow-items{
	min-height:var(--lmx-hero-computed-height) !important;
	height:var(--lmx-hero-computed-height) !important;
}
.lmx-hero__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;
	overflow:hidden;
}

/* --- media: immagine di sfondo + eventuale video sopra --- */
.lmx-hero__media{
	position:absolute; inset:0;
	background-size:cover; background-position:center; background-repeat:no-repeat;
}
.lmx-hero__video{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
}
/* velo per la leggibilità del testo bianco, come nel Figma */
.lmx-hero__media::after{
	content:"";
	position:absolute; inset:auto 0 0 0; height:55%;
	background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
	pointer-events:none;
}

/* ============================================================
   CONTENUTO: basso a sinistra
   ============================================================ */
.lmx-hero__caption{
	position:absolute; z-index:3;
	left:var(--lmx-hero-caption-x);
	right:var(--lmx-hero-caption-x);
	bottom:56px;
	max-width:720px;
	color:#fff;
}
.lmx-hero__eyebrow{
	display:block;
	font-family:var(--lmx-hero-mono);
	font-size:10px; letter-spacing:.08em; text-transform:uppercase;
	opacity:.75;
	margin-bottom:14px;
}
.lmx-hero__title{
	margin:0;
	color:#fff;
	font-family:var(--lmx-hero-font); font-weight:400;
	font-size:clamp(34px, 3.7vw, 64px);
	line-height:1.05;
}
.lmx-hero__text{
	margin:16px 0 0;
	max-width:560px;
	font-size:14px; line-height:1.45;
}
.lmx-hero__btn{
	display:inline-flex; align-items:center;
	margin-top:22px;
	padding:9px 18px;
	border-radius:999px;
	background:#fff; color:#111;
	font-family:var(--lmx-hero-font);
	font-size:10px; letter-spacing:.08em; text-transform:uppercase;
	text-decoration:none;
	transition:background .15s ease;
}
.lmx-hero__btn:hover{ background:#e8e8e8; color:#111; text-decoration:none; }

/* ============================================================
   CARD DECORATIVO: alto a destra, espansione all'hover
   ============================================================ */
.lmx-hero__deco{
	position:absolute; z-index:4;
	top:var(--lmx-hero-top); right:var(--lmx-hero-inset);
	width:414px; max-width:calc(100% - (var(--lmx-hero-inset) * 2));
	display:flex; align-items:flex-start; gap:10px;
	padding:10px;
	border-radius:10px;
	background:#fafafa; color:#111;
	text-decoration:none;
	box-shadow:0 2px 20px rgba(0,0,0,.08);
	margin-top:1px;
}
.lmx-hero__deco:hover{ color:#111; text-decoration:none; }

.lmx-hero__deco-media{
	flex:0 0 auto;
	width:43px; height:60px;
	border-radius:5px; overflow:hidden;
	transition:width .35s ease, height .35s ease;
}
.lmx-hero__deco-media img{
	display:block; width:100%; height:100%;
	object-fit:cover;
}
.lmx-hero__deco-body{
	flex:1 1 auto; min-width:0;
	display:flex; flex-direction:column; justify-content:space-between;
	height:60px;
	transition:height .35s ease;
}
.lmx-hero__deco-kicker{
	display:block;
	font-family:var(--lmx-hero-mono);
	font-size:10px; letter-spacing:.06em; text-transform:uppercase;
	margin-bottom:2px;
}
.lmx-hero__deco-row{
	display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
/* slot nome/codice: il nome piccolo lascia il posto al codice all'hover */
.lmx-hero__deco-swap{ position:relative; display:block; min-width:0; font-size:16px; line-height:18px; }
.lmx-hero__deco-name-sm{
	display:block;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	transition:opacity .2s ease;
}
.lmx-hero__deco-code{
	position:absolute; inset:0;
	opacity:0;
	transition:opacity .2s ease;
}
.lmx-hero__deco-icons{ display:inline-flex; gap:4px; flex:0 0 auto; color:#1d1d1b; }
.lmx-hero__deco-ico{ display:inline-flex; align-items:center; }
.lmx-hero__deco-ico--verticale svg{ transform:rotate(90deg); }

/* blocco inferiore: compatta = solo "Vedi decorativo"; espansa = nome grande + cta */
.lmx-hero__deco-name-lg{
	display:block;
	font-size:24px; line-height:1.1;
	max-height:0; opacity:0; overflow:hidden;
	transition:max-height .35s ease, opacity .25s ease, margin .35s ease;
}
.lmx-hero__deco-cta{
	display:block;
	font-size:10px; text-decoration:underline; text-underline-position:from-font;
	opacity:.5;
	transition:opacity .2s ease;
}

/* --- stato espanso (hover/focus; sul touch resta compatta, la card è un link) --- */
@media (hover:hover){
	.lmx-hero__deco:hover .lmx-hero__deco-media,
	.lmx-hero__deco:focus-visible .lmx-hero__deco-media{ width:160px; height:160px; }
	.lmx-hero__deco:hover .lmx-hero__deco-body,
	.lmx-hero__deco:focus-visible .lmx-hero__deco-body{ height:160px; }
	.lmx-hero__deco:hover .lmx-hero__deco-name-sm{ opacity:0; }
	.lmx-hero__deco:hover .lmx-hero__deco-code{ opacity:1; }
	.lmx-hero__deco:hover .lmx-hero__deco-name-lg{ max-height:60px; opacity:1; margin-bottom:5px; }
	.lmx-hero__deco:hover .lmx-hero__deco-cta{ opacity:1; }
}
/* senza codice compilato il nome piccolo resta anche all'hover */
.lmx-hero__deco-swap:not(:has(.lmx-hero__deco-code)) .lmx-hero__deco-name-sm{ opacity:1 !important; }

/* ============================================================
   NAVIGAZIONE: dots centrati in basso + frecce bianche a destra
   ============================================================ */
.lmx-hero__nav{ position:static; }

.lmx-hero__dotnav{
	position:absolute; z-index:5;
	left:50%; bottom:22px; transform:translateX(-50%);
	display:flex; gap:8px;
	margin:0; padding:0; list-style:none;
}
.lmx-hero__dotnav li a{
	display:block;
	width:5px; height:5px;
	border-radius:1.5px;
	background:#fff; opacity:.45;
	text-indent:-9999px; overflow:hidden;
	transition:opacity .2s ease;
}
.lmx-hero__dotnav li a:hover{ opacity:.8; }
.lmx-hero__dotnav li.uk-active a{ opacity:1; }

.lmx-hero__nav-arrows{
	position:absolute; z-index:5;
	right:var(--lmx-hero-inset); bottom:16px;
	display:flex; gap:6px;
}
.lmx-hero__nav-btn{
	display:inline-flex; align-items:center; justify-content:center;
	width:30px; height:30px;
	border-radius:8px;
	background:#fff; color:#111;
	transition:background .15s ease;
}
.lmx-hero__nav-btn:hover{ background:#e8e8e8; color:#111; }
.lmx-hero__nav-btn svg{ width:16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
	.lmx-hero{ --lmx-hero-caption-x:20px; --lmx-hero-top:110px; }
	.lmx-hero__deco{ width:320px; }
	.lmx-hero__caption{ bottom:64px; }
}
@media (max-width: 640px){
	/* 13/10/2026: top 150 -> 200 per lasciare spazio alla pill
	   "A Neodecortech Company" (copia mobile sotto il header) */
	.lmx-hero__deco{top:190px;left:10px;}
	.lmx-hero__deco{ width:calc(100% - 40px); }
	.lmx-hero__title{ font-size:34px; }
	.lmx-hero__nav-arrows{ bottom:20px; }
	.lmx-hero__dotnav{ left:20px; transform:none; bottom:28px; }
}