/*
 * Stile dei template di templates/detail/ (la scheda struttura su /book/{slug}).
 *
 * Tutte le regole sono confinate dalla classe contenitore .kross-tpl-detail,
 * che il template mette sull'elemento radice: cosi non interferiscono con le
 * altre viste del plugin ne con il tema. Le primitive generiche (messaggi)
 * arrivano da common.css.
 *
 * Come per la homepage, la dark mode non e' gestita: colori chiari sempre.
 */

.kross-tpl-detail {
	--kross-be-detail-ink: #1a3b5d;
	--kross-be-detail-muted: #5b6b7c;
	--kross-be-detail-line: #e3e8ee;
}

/* --------------------------------------------------------------------------
 * Galleria: mosaico, miniature, lightbox
 *
 * Il markup e lo script (assets/js/detail-gallery.js) sono descritti in
 * templates/detail/page.php. L'API non fornisce le dimensioni intrinseche
 * delle immagini, quindi non si possono mettere width/height sui tag: lo
 * spazio viene riservato con aspect-ratio, per non far spostare il layout al
 * caricamento (CLS).
 * -------------------------------------------------------------------------- */

/* --- Mosaico -------------------------------------------------------------
 *
 * Una foto grande a sinistra e fino a tre piccole a destra, su una griglia di
 * tre colonne e due righe. Le varianti --1, --2 e --3 adattano la griglia a
 * quante foto ci sono davvero.
 */

.kross-tpl-detail .kross-be-detail__mosaic {
	display: grid;
	grid-template-columns: 3fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
	height: 360px;
	margin: 0 0 24px;
	border-radius: 12px;
	overflow: hidden;
}

.kross-tpl-detail .kross-be-detail__mosaic-item {
	display: block;
	overflow: hidden;
	background: #f1f4f7;
	cursor: zoom-in;
}

.kross-tpl-detail .kross-be-detail__mosaic-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kross-tpl-detail .kross-be-detail__mosaic-item:nth-child( 1 ) {
	grid-column: 1;
	grid-row: 1 / 3;
}

.kross-tpl-detail .kross-be-detail__mosaic-item:nth-child( 2 ) {
	grid-column: 2 / 4;
	grid-row: 1;
}

.kross-tpl-detail .kross-be-detail__mosaic-item:nth-child( 3 ) {
	grid-column: 2;
	grid-row: 2;
}

.kross-tpl-detail .kross-be-detail__mosaic-item:nth-child( 4 ) {
	grid-column: 3;
	grid-row: 2;
}

/* Una foto sola: occupa tutto. */
.kross-tpl-detail .kross-be-detail__mosaic--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.kross-tpl-detail .kross-be-detail__mosaic--1 .kross-be-detail__mosaic-item:nth-child( 1 ) {
	grid-row: 1;
}

/* Due foto: la seconda copre tutta l'altezza a destra. */
.kross-tpl-detail .kross-be-detail__mosaic--2 .kross-be-detail__mosaic-item:nth-child( 2 ) {
	grid-row: 1 / 3;
}

/* Tre foto: la terza occupa la riga bassa a destra. */
.kross-tpl-detail .kross-be-detail__mosaic--3 .kross-be-detail__mosaic-item:nth-child( 3 ) {
	grid-column: 2 / 4;
}

@media ( max-width: 600px ) {
	/* Su schermi stretti basta la prima foto: le altre stanno nella galleria. */
	.kross-tpl-detail .kross-be-detail__mosaic {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		height: 240px;
	}

	.kross-tpl-detail .kross-be-detail__mosaic-item:nth-child( n + 2 ) {
		display: none;
	}

	.kross-tpl-detail .kross-be-detail__mosaic-item:nth-child( 1 ) {
		grid-row: 1;
	}
}

/* --- Miniature ----------------------------------------------------------- */

.kross-tpl-detail .kross-be-detail__thumbs {
	position: relative;
}

.kross-tpl-detail .kross-be-detail__thumbs-track {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	/* Le miniature si fermano intere, senza restare a meta' sul bordo. */
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.kross-tpl-detail .kross-be-detail__thumb-item {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}

.kross-tpl-detail .kross-be-detail__thumb {
	display: block;
	width: 96px;
	border-radius: 6px;
	overflow: hidden;
	background: #f1f4f7;
	cursor: zoom-in;
}

.kross-tpl-detail .kross-be-detail__thumb:focus-visible {
	outline: 2px solid var( --kross-be-detail-ink );
	outline-offset: 2px;
}

.kross-tpl-detail .kross-be-detail__thumb-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Immagine che non si e' caricata: lo spazio resta, il simbolo di errore no. */
.kross-tpl-detail .is-broken {
	visibility: hidden;
}

/* Frecce, create dallo script solo se la striscia scorre davvero. */
.kross-tpl-detail .kross-be-detail__thumbs-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 1;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: var( --kross-be-detail-ink );
	font-size: 22px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
}

.kross-tpl-detail .kross-be-detail__thumbs-nav[hidden] {
	display: none;
}

.kross-tpl-detail .kross-be-detail__thumbs-nav:disabled {
	opacity: 0;
	pointer-events: none;
}

.kross-tpl-detail .kross-be-detail__thumbs-nav--prev {
	left: 6px;
}

.kross-tpl-detail .kross-be-detail__thumbs-nav--next {
	right: 6px;
}

/* --- Lightbox -------------------------------------------------------------
 *
 * <dialog> nativo: il browser fornisce da solo il livello superiore, il
 * blocco del focus, la chiusura con Esc e l'inerzia del resto della pagina.
 * Sta nel top layer, quindi nessun antenato con overflow o transform puo'
 * tagliarlo.
 */

.kross-tpl-detail .kross-be-lightbox {
	width: 100vw;
	height: 100vh;
	/* Sui telefoni 100vh include la barra degli indirizzi e taglia il fondo
	   (il contatore): dvh e' l'altezza realmente visibile. */
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	/* Quasi opaco: con meno trasparenza si intravede il testo della pagina
	   sotto, che distrae dalla foto. */
	background: rgba( 8, 13, 18, 0.97 );
	color: #fff;
}

/* display solo da aperta: impostarlo sempre vincerebbe sul nascondimento
   nativo di <dialog> e la lightbox resterebbe visibile a pagina caricata. */
.kross-tpl-detail .kross-be-lightbox[open] {
	display: block;
}

.kross-tpl-detail .kross-be-lightbox::backdrop {
	background: rgba( 8, 13, 18, 0.94 );
}

.kross-tpl-detail .kross-be-lightbox__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior: contain;
}

.kross-tpl-detail .kross-be-lightbox__track::-webkit-scrollbar {
	display: none;
}

.kross-tpl-detail .kross-be-lightbox__slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 56px 64px;
	box-sizing: border-box;
	scroll-snap-align: center;
	/* Impedisce a una spinta forte di saltare delle foto. */
	scroll-snap-stop: always;
}

.kross-tpl-detail .kross-be-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.kross-tpl-detail .kross-be-lightbox__close,
.kross-tpl-detail .kross-be-lightbox__nav {
	position: absolute;
	z-index: 2;
	border: 0;
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
	cursor: pointer;
	text-align: center;
}

.kross-tpl-detail .kross-be-lightbox__close:hover,
.kross-tpl-detail .kross-be-lightbox__nav:hover {
	background: rgba( 255, 255, 255, 0.28 );
}

.kross-tpl-detail .kross-be-lightbox__close {
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 26px;
	line-height: 40px;
}

.kross-tpl-detail .kross-be-lightbox__nav {
	top: 50%;
	transform: translateY( -50% );
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 30px;
	line-height: 44px;
}

.kross-tpl-detail .kross-be-lightbox__nav[hidden] {
	display: none;
}

.kross-tpl-detail .kross-be-lightbox__nav:disabled {
	opacity: 0.25;
	cursor: default;
}

.kross-tpl-detail .kross-be-lightbox__nav--prev {
	left: 12px;
}

.kross-tpl-detail .kross-be-lightbox__nav--next {
	right: 12px;
}

.kross-tpl-detail .kross-be-lightbox__counter {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	font-size: 0.9em;
	opacity: 0.85;
}

/* Con la lightbox aperta la pagina sotto non deve scorrere. */
html.kross-be-lightbox-open {
	overflow: hidden;
}

@media ( max-width: 600px ) {
	.kross-tpl-detail .kross-be-lightbox__slide {
		padding: 56px 8px;
	}

	/* Su touch si scorre con il dito: le frecce occuperebbero solo spazio. */
	.kross-tpl-detail .kross-be-lightbox__nav {
		display: none;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.kross-tpl-detail .kross-be-lightbox__track {
		scroll-behavior: smooth;
	}
}

/* --------------------------------------------------------------------------
 * Intestazione: nome e sottotitolo
 * -------------------------------------------------------------------------- */

.kross-tpl-detail .kross-be-detail__name {
	margin: 0 0 4px;
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.2;
	color: var( --kross-be-detail-ink );
}

.kross-tpl-detail .kross-be-detail__header {
	margin: 0 0 20px;
}

.kross-tpl-detail .kross-be-detail__subtitle {
	margin: 0;
	font-style: italic;
	color: var( --kross-be-detail-muted );
}

.kross-tpl-detail .kross-be-detail__category {
	color: var( --kross-be-detail-ink );
}

/* Intestazioni fornite dal Booking Engine (h2_t / h3_t). */
.kross-tpl-detail .kross-be-detail__h2 {
	margin: 0 0 8px;
	font-size: 1.3em;
	line-height: 1.3;
	color: var( --kross-be-detail-ink );
}

.kross-tpl-detail .kross-be-detail__h3 {
	margin: 0 0 24px;
	font-size: 1.05em;
	font-weight: 400;
	line-height: 1.5;
	color: var( --kross-be-detail-muted );
}

/* --------------------------------------------------------------------------
 * Sezioni: una linea sopra, il titolo, il contenuto
 * -------------------------------------------------------------------------- */

/* Sezione «Verifica disponibilità»: il widget e le tariffe sono in
   availability.css; qui solo il margine con cui il browser ferma la sezione
   quando salta all'ancora (#kross-be-availability, dopo l'invio del modulo),
   per non finire sotto un'eventuale intestazione fissa del tema. */
.kross-tpl-detail .kross-be-detail__availability {
	scroll-margin-top: 80px;
}

.kross-tpl-detail .kross-be-detail__section {
	padding: 20px 0;
	border-top: 1px solid var( --kross-be-detail-line );
}

.kross-tpl-detail .kross-be-detail__heading {
	margin: 0 0 12px;
	font-size: 1.2em;
	color: var( --kross-be-detail-ink );
}

/* --------------------------------------------------------------------------
 * Descrizione
 * -------------------------------------------------------------------------- */

.kross-tpl-detail .kross-be-detail__guests {
	margin: 0 0 8px;
}

.kross-tpl-detail .kross-be-detail__legal {
	margin: 0 0 12px;
	font-size: 0.9em;
	color: var( --kross-be-detail-muted );
}

.kross-tpl-detail .kross-be-detail__legal-line {
	display: block;
}

.kross-tpl-detail .kross-be-detail__description {
	line-height: 1.7;
}

/* Check-in, late check-in, check-out, prezzo. */
.kross-tpl-detail .kross-be-detail__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.kross-tpl-detail .kross-be-detail__pill {
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: #f1f4f7;
	font-size: 0.9em;
}

/* --------------------------------------------------------------------------
 * Dotazioni: tre colonne, una sola su schermi stretti
 * -------------------------------------------------------------------------- */

.kross-tpl-detail .kross-be-detail__amenities {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kross-tpl-detail .kross-be-detail__amenities li {
	margin: 0;
	padding-left: 18px;
	position: relative;
}

.kross-tpl-detail .kross-be-detail__amenities li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --kross-be-detail-ink );
}

@media ( max-width: 600px ) {
	.kross-tpl-detail .kross-be-detail__amenities {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Località
 *
 * Il riquadro lo riempie detail-map.js (Leaflet + MapLibre) quando si avvicina
 * alla finestra. Altezza fissa: Leaflet ha bisogno di un'altezza esplicita, e
 * riservarla evita lo spostamento del layout quando la mappa compare.
 * -------------------------------------------------------------------------- */

.kross-tpl-detail .kross-be-detail__map {
	height: 280px;
	border-radius: 12px;
	background: #f7f4ef;
	/* Leaflet usa z-index fino a 1000 per pannelli e controlli: senza isolare la
	   mappa finirebbero sopra l'intestazione fissa del tema. */
	isolation: isolate;
}

/* Se la mappa non parte (CDN irraggiungibile, nessun WebGL) il riquadro vuoto
   non serve: restano l'indirizzo e il collegamento. */
.kross-tpl-detail .kross-be-detail__map.is-failed {
	display: none;
}

/* Segnaposto: la forma e' un SVG inline, il colore viene da qui. */
.kross-tpl-detail .kross-be-detail__marker {
	background: none;
	border: 0;
	color: var( --kross-be-detail-ink );
}

.kross-tpl-detail .kross-be-detail__address {
	margin: 8px 0 0;
	color: var( --kross-be-detail-muted );
}