/**
 * Lamitex Showcase — stili del custom element.
 * File esterno per gestione pulita degli asset (mai inline nel template).
 */

/* Il tema lascia box-sizing: content-box su questi nodi: senza border-box
   il padding del pannello si SOMMA all'altezza calc(100% - 40px) e il
   pannello sborda sotto la sezione tagliando le frecce (bug verificato). */
.lmx-showcase,
.lmx-showcase *,
.lmx-showcase *::before,
.lmx-showcase *::after {
	box-sizing: border-box;
}

.lmx-showcase {
	/* Override dal campo CSS della tab Avanzate:
	   .lmx-showcase { --lmx-showcase-panel-width: 50vw; } */
	--lmx-showcase-font: inherit;

	/* Calcolata dal JS: altezza viewport meno ciò che sta sopra la sezione
	   (header sito, admin bar). Evita che la sezione sbordi sotto il viewport
	   tagliando il fondo del pannello e le frecce. */
	--lmx-showcase-computed-offset: 0px;

	--lmx-showcase-panel-bg: #ffffff;
	--lmx-showcase-panel-color: #111111;
	/* Allineata alla larghezza VISIVA dell'hero in home (content-box:
	   la 35vw + 64px di padding). Qui siamo border-box, quindi i 64px
	   vanno sommati alla width totale per pareggiare al pixel. */
	--lmx-showcase-panel-width: calc(35vw + 64px);
	--lmx-showcase-panel-inset-x: 20px;
	--lmx-showcase-panel-inset-y: 20px;
	--lmx-showcase-panel-padding: 32px;
	--lmx-showcase-panel-radius: 10px;
	--lmx-showcase-panel-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);

	--lmx-showcase-label-color: #999999;

	/* Proporzione dell'immagine prodotto (dal Figma: 272×380) */
	--lmx-showcase-product-ratio: 272 / 380;

	--lmx-showcase-cta-bg: #000000;
	--lmx-showcase-cta-color: #ffffff;
	--lmx-showcase-cta-bg-hover: #333333;

	--lmx-showcase-nav-bg: #000000;
	--lmx-showcase-nav-color: #ffffff;
	--lmx-showcase-nav-radius: 5px;
	--lmx-showcase-nav-size: 32px;

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

/* ============================================================
   BG-SLIDESHOW full-screen
   ============================================================ */
.lmx-showcase__bg-slideshow {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.lmx-showcase__bg-slideshow .uk-slideshow-items {
	min-height: 100% !important;
	height: 100% !important;
}
.lmx-showcase__bg-slideshow .uk-slideshow-items > li {
	/* UIkit sovrappone le slide in absolute: mai relative (le slide
	   entranti animerebbero fuori dall'area visibile). */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.lmx-showcase__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ============================================================
   PANNELLO STATICO a sinistra
   ============================================================ */
.lmx-showcase__panel {
	position: absolute;
	z-index: 2;
	top: var(--lmx-showcase-panel-inset-y);
	left: var(--lmx-showcase-panel-inset-x);
	width: var(--lmx-showcase-panel-width);
	max-width: calc(100% - (var(--lmx-showcase-panel-inset-x) * 2));
	height: calc(100% - (var(--lmx-showcase-panel-inset-y) * 2));
	background: var(--lmx-showcase-panel-bg);
	color: var(--lmx-showcase-panel-color);
	border-radius: var(--lmx-showcase-panel-radius);
	box-shadow: var(--lmx-showcase-panel-shadow);
	padding: var(--lmx-showcase-panel-padding);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Allineamento pannello a DESTRA (impostazione "Posizione pannello"
   nel builder): specchia gli inset lasciando tutto il resto identico. */
.lmx-showcase--panel-right .lmx-showcase__panel {
	left: auto;
	right: var(--lmx-showcase-panel-inset-x);
}

/* ============================================================
   CONTENT-SLIDESHOW dentro il pannello
   ============================================================ */
.lmx-showcase__content-slideshow {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	overflow: hidden;
}
.lmx-showcase__content-slideshow .uk-slideshow-items {
	min-height: 100% !important;
	height: 100% !important;
}
.lmx-showcase__content-slideshow .uk-slideshow-items > li {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Slide del content: header in alto, body centrato nello spazio restante */
.lmx-showcase__slide {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Header simmetrico: numero — etichetta — numero */
.lmx-showcase__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.lmx-showcase__number,
.lmx-showcase__label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lmx-showcase-label-color);
	white-space: nowrap;
}
/* I due numeri hanno la stessa larghezza per tenere l'etichetta centrata */
.lmx-showcase__number {
	flex: 1 1 0;
	min-width: 0;
}
.lmx-showcase__number:last-child {
	text-align: right;
}
.lmx-showcase__label {
	flex: 0 0 auto;
	text-align: center;
}

/* Body: contenuto centrato verticalmente e orizzontalmente */
.lmx-showcase__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	text-align: center;
}

.lmx-showcase__title {
	margin: 0;
	font-size: clamp(26px, 2.4vw, 40px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--lmx-showcase-panel-color);
}

.lmx-showcase__product-wrap {
	height: 60%;
	max-width: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lmx-showcase__product {
	/* Proporzione fissa dal Figma (272×380), riempita con crop centrale */
	aspect-ratio: var(--lmx-showcase-product-ratio);
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: cover;
	display: block;
}

.lmx-showcase__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	max-width: 75%;
}

.lmx-showcase__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 18px;
	background: var(--lmx-showcase-cta-bg);
	color: var(--lmx-showcase-cta-color);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s ease;
	white-space: nowrap;
}
.lmx-showcase__cta:hover,
.lmx-showcase__cta:focus {
	background: var(--lmx-showcase-cta-bg-hover);
	color: var(--lmx-showcase-cta-color);
	text-decoration: none;
}

/* ============================================================
   FRECCE: in basso al CENTRO del pannello
   ============================================================ */
.lmx-showcase__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-top: 20px;
}
.lmx-showcase__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lmx-showcase-nav-size);
	height: var(--lmx-showcase-nav-size);
	background: var(--lmx-showcase-nav-bg);
	color: var(--lmx-showcase-nav-color);
	border: 0;
	border-radius: var(--lmx-showcase-nav-radius);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}
.lmx-showcase__nav-btn:hover,
.lmx-showcase__nav-btn:focus {
	background: #222222;
	transform: scale(1.05);
}
.lmx-showcase__nav-btn .uk-icon,
.lmx-showcase__nav-btn svg {
	color: var(--lmx-showcase-nav-color);
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
	.lmx-showcase {
		--lmx-showcase-panel-width: min(60vw, 480px);
		--lmx-showcase-panel-inset-x: 24px;
	}
}
@media (max-width: 640px) {
	.lmx-showcase {
		--lmx-showcase-panel-inset-x: 16px;
		--lmx-showcase-panel-inset-y: 16px;
		--lmx-showcase-panel-padding: 20px;
	}
	.lmx-showcase__panel {
		width: auto;
		max-width: none;
		right: var(--lmx-showcase-panel-inset-x);
		left: var(--lmx-showcase-panel-inset-x);
	}
	.lmx-showcase__product-wrap {
		max-width: 75%;
	}
	.lmx-showcase__text {
		max-width: 100%;
	}
}
@media screen and (max-height: 700px) {
	.lmx-showcase__product-wrap{
		height: 50%;
	}
}
@media screen and (max-height: 600px) {
	.lmx-showcase__product-wrap{
		height: 40%;
	}
}

/* ============================================================
   MOBILE LANDSCAPE: viewport largo ma molto basso
   (telefono in orizzontale: es. 850x390)
   ============================================================ */
/* ============================================================
   MOBILE LANDSCAPE: la sezione supera il viewport (la pagina
   scrolla), così il layout a colonna respira senza compressioni
   ============================================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
	.lmx-showcase {
		height: 640px;
		max-height: none;
	}
}