/* Slideshow vetrina Kiwi — tre modelli (vetrina, scheda, mosaico), orizzontali e verticali.
   Misure in vmin: lo stesso slideshow sta bene su un monitor da 24" come su un TV da 65". */
:root {
	--primario: #1d2a24;
	--accento: #a3b02e;
	--su-primario: #ffffff;
	--su-accento: #151515;
	--testo: #ffffff;
	--font: 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
	color: var(--testo);
	font-family: var(--font);
	cursor: none;
	-webkit-font-smoothing: antialiased;
}
html.anteprima, html.anteprima body { cursor: default; }

.schermo { position: fixed; inset: 0; }

.messaggio {
	position: fixed; inset: 0; display: grid; place-items: center; padding: 8vmin;
	text-align: center; font-size: 3.4vmin; line-height: 1.4; background: #111; color: #ddd; z-index: 10;
}
.messaggio[hidden] { display: none; }

/* ── Slide e dissolvenza ─────────────────────────────────────────── */
.slide {
	position: absolute; inset: 0; overflow: hidden;
	opacity: 0; transition: opacity 1.1s ease;
}
.slide.visibile { opacity: 1; }

.foto { position: relative; overflow: hidden; background: #222; }
.foto img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 1.4s ease;
}
.foto img.attiva { opacity: 1; animation: zoom 18s ease-out both; }
@keyframes zoom { from { transform: scale(1.0); } to { transform: scale(1.08); } }

.contratto {
	display: inline-block; align-self: flex-start;
	padding: 0.7vmin 1.8vmin; border-radius: 99px;
	background: var(--accento); color: var(--su-accento);
	font-size: 2.1vmin; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.titolo { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.luogo { opacity: 0.85; }
.prezzo { font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }

.dati { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2vmin 3vmin; }
.dati li { display: flex; align-items: center; gap: 1vmin; font-size: 2.6vmin; font-weight: 600; }
.dati svg { width: 3.2vmin; height: 3.2vmin; flex: none; opacity: 0.9; }

.logo { display: block; max-height: 9vmin; max-width: 32vmin; object-fit: contain; }
.logo-testo { font-size: 3.2vmin; font-weight: 800; letter-spacing: -0.01em; }

.qr { display: flex; flex-direction: column; align-items: center; gap: 0.8vmin; }
.qr img { width: 14vmin; height: 14vmin; border-radius: 1.2vmin; background: #fff; padding: 0.6vmin; }
.qr span { font-size: 1.6vmin; font-weight: 600; text-align: center; max-width: 16vmin; line-height: 1.2; }

.avanzamento {
	position: absolute; left: 0; bottom: 0; height: 0.6vmin; width: 100%;
	background: var(--accento); transform-origin: left center; z-index: 5;
	animation: avanza linear forwards;
}
@keyframes avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.striscia {
	position: absolute; left: 0; right: 0; bottom: 0.6vmin; z-index: 4;
	height: 5.6vmin; display: flex; align-items: center; overflow: hidden;
	background: var(--accento); color: var(--su-accento);
	font-size: 2.6vmin; font-weight: 700;
}
.striscia-testo { display: flex; white-space: nowrap; animation: scorri 28s linear infinite; }
.striscia-testo span { padding-right: 12vmin; }
@keyframes scorri { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.slide:has(.striscia) .avanzamento { z-index: 6; }

.vuota {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vmin;
	background: var(--primario); color: var(--su-primario); font-size: 4vmin; font-weight: 600;
}
.vuota .logo { max-height: 18vmin; max-width: 60vmin; }

/* ── Modello 1: VETRINA — foto a tutto schermo ───────────────────── */
.m-vetrina .foto { position: absolute; inset: 0; }
.m-vetrina .sfumatura {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0) 22%),
		linear-gradient(0deg, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.45) 32%, rgb(0 0 0 / 0) 60%);
}
.m-vetrina .testa {
	position: absolute; top: 4vmin; left: 5vmin; right: 5vmin;
	display: flex; justify-content: space-between; align-items: flex-start;
}
.m-vetrina .testa .logo, .m-vetrina .testa .logo-testo {
	background: rgb(255 255 255 / 0.94); color: #151515; padding: 1.6vmin 2.4vmin; border-radius: 1.6vmin;
	box-sizing: content-box;
}
.m-vetrina .testa .qr span { text-shadow: 0 0.2vmin 0.8vmin rgb(0 0 0 / 0.8); }
.m-vetrina .piede {
	position: absolute; left: 5vmin; right: 5vmin; bottom: 6vmin;
	display: flex; justify-content: space-between; align-items: flex-end; gap: 4vmin;
}
.slide.m-vetrina:has(.striscia) .piede { bottom: 11vmin; }
.m-vetrina .info { display: flex; flex-direction: column; gap: 1.6vmin; max-width: 68%; }
.m-vetrina .titolo { font-size: 6.4vmin; text-shadow: 0 0.3vmin 1.6vmin rgb(0 0 0 / 0.5); }
.m-vetrina .luogo { font-size: 3vmin; font-weight: 600; }
.m-vetrina .dati li { background: rgb(255 255 255 / 0.14); backdrop-filter: blur(6px); padding: 1vmin 1.8vmin; border-radius: 99px; }
.m-vetrina .prezzo {
	font-size: 6vmin; padding: 2vmin 3.4vmin; border-radius: 2vmin;
	background: var(--accento); color: var(--su-accento); box-shadow: 0 1vmin 4vmin rgb(0 0 0 / 0.35);
}

/* ── Modello 2: SCHEDA — foto + pannello laterale ───────────────── */
.m-scheda { display: grid; grid-template-columns: 1fr 38%; }
.m-scheda .foto { height: 100%; }
.m-scheda .pannello {
	background: var(--primario); color: var(--su-primario);
	display: flex; flex-direction: column; gap: 2.2vmin; padding: 5vmin 4.5vmin 6vmin;
	overflow: hidden;
}
.slide.m-scheda:has(.striscia) .pannello { padding-bottom: 11vmin; }
.m-scheda .pannello > .logo, .m-scheda .pannello > .logo-testo { margin-bottom: 2vmin; }
.m-scheda .pannello > .logo { background: rgb(255 255 255 / 0.95); padding: 1.4vmin 2vmin; border-radius: 1.4vmin; box-sizing: content-box; }
.m-scheda .titolo { font-size: 5vmin; }
.m-scheda .luogo { font-size: 2.8vmin; font-weight: 600; }
.m-scheda .prezzo { font-size: 6.4vmin; color: var(--accento); margin: 1vmin 0; }
.m-scheda .dati { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8vmin 2vmin; }
.m-scheda .dati svg { color: var(--accento); opacity: 1; }
.m-scheda .basso { margin-top: auto; display: flex; align-items: center; gap: 2.6vmin; }
.m-scheda .basso .qr span { color: var(--su-primario); opacity: 0.85; }
.m-scheda .contatti { display: flex; flex-direction: column; gap: 0.8vmin; font-size: 2.2vmin; opacity: 0.9; line-height: 1.35; }
.m-scheda .contatti strong { font-size: 2.4vmin; }

/* ── Modello 3: MOSAICO — testata, griglia di foto, barra dati ──── */
.m-mosaico {
	display: grid; grid-template-rows: auto 1fr auto;
	background: #f4f4ef; color: #151515;
}
.m-mosaico .testa {
	display: flex; justify-content: space-between; align-items: center; gap: 3vmin;
	padding: 2vmin 4vmin; background: var(--primario); color: var(--su-primario);
}
.m-mosaico .testa .logo { max-height: 6.5vmin; background: rgb(255 255 255 / 0.95); padding: 0.8vmin 1.4vmin; border-radius: 1vmin; box-sizing: content-box; }
.m-mosaico .testa-destra { display: flex; align-items: center; gap: 3vmin; font-size: 2.2vmin; }
.m-mosaico .ora { font-size: 3.4vmin; font-weight: 800; font-variant-numeric: tabular-nums; }
.m-mosaico .griglia {
	display: grid; gap: 1.2vmin; padding: 1.6vmin 4vmin 0;
	grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; min-height: 0;
}
.m-mosaico .griglia .foto { border-radius: 1.6vmin; }
.m-mosaico .griglia .grande { grid-row: 1 / 3; }
.m-mosaico .griglia.foto-1 { grid-template-columns: 1fr; }
.m-mosaico .griglia.foto-2 .piccola { grid-row: 1 / 3; }
.m-mosaico .info {
	display: flex; justify-content: space-between; align-items: center; gap: 4vmin;
	padding: 2.6vmin 4vmin 4vmin;
}
.slide.m-mosaico:has(.striscia) .info { padding-bottom: 9vmin; }
.m-mosaico .info-testo { display: flex; flex-direction: column; gap: 1.2vmin; min-width: 0; }
.m-mosaico .titolo { font-size: 4.6vmin; }
.m-mosaico .luogo { font-size: 2.6vmin; font-weight: 600; color: #555; opacity: 1; }
.m-mosaico .dati li { color: #333; }
.m-mosaico .dati svg { color: var(--primario); }
.m-mosaico .info-prezzo { display: flex; align-items: center; gap: 3vmin; }
.m-mosaico .prezzo { font-size: 5.6vmin; padding: 1.6vmin 3vmin; border-radius: 1.6vmin; background: var(--accento); color: var(--su-accento); }
.m-mosaico .qr img { width: 12vmin; height: 12vmin; border: 1px solid #ddd; }

/* ── Monitor verticali ───────────────────────────────────────────── */
@media (orientation: portrait) {
	.m-vetrina .info { max-width: 100%; }
	.m-vetrina .piede { flex-direction: column; align-items: flex-start; }
	.m-vetrina .titolo { font-size: 7vmin; }

	.m-scheda { grid-template-columns: 1fr; grid-template-rows: 46% 1fr; }
	.m-scheda .pannello { gap: 1.6vmin; }
	.m-scheda .pannello { padding: 4vmin 5vmin 6vmin; }
	.m-scheda .titolo { font-size: 6vmin; }
	.m-scheda .prezzo { font-size: 7.4vmin; }

	.m-mosaico .griglia { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; }
	.m-mosaico .griglia .grande { grid-column: 1 / 3; grid-row: auto; }
	.m-mosaico .griglia.foto-2 .piccola { grid-column: 1 / 3; grid-row: auto; }
	.m-mosaico .info { flex-direction: column; align-items: flex-start; }
	.m-mosaico .testa .contatti { display: none; }
}