/*!
 * Maison des Fleurs — personalizzazioni CSS
 * -----------------------------------------
 * 1) Lightbox delle gallerie appartamento.
 *
 * PROBLEMA
 * Cliccando una foto della galleria non si apriva nulla. Il markup e'
 * gia' corretto (Elementor Pro scrive data-elementor-open-lightbox="yes"
 * e mette tutte le foto nello stesso slideshow), e il lightbox veniva
 * effettivamente creato nel DOM: restava pero' invisibile perche' il tema
 * lo disattiva di proposito in
 *     themes/thecappa-beach-resort/style.css
 *     div.dialog-widget.dialog-lightbox-widget { display: none !important; }
 *
 * SOLUZIONE
 * Non tocchiamo il tema (verrebbe sovrascritto dagli aggiornamenti):
 * batttiamo quella regola con un selettore piu' specifico. Entrambe le
 * regole sono !important, quindi vince la specificita' piu' alta:
 *     tema  -> 1 elemento + 2 classi
 *     nostra-> 1 elemento + 3 classi + 1 attributo
 *
 * Le dimensioni sono dichiarate SEMPRE (non solo da aperto) perche' Swiper
 * misura il contenitore appena il lightbox entra nel DOM: se in quel
 * momento e' largo zero, le frecce avanti/indietro restano bloccate.
 * La visibilita', invece, segue lo stile inline che Elementor scrive
 * quando apre e chiude, cosi' da chiuso resta nascosto.
 */

div.dialog-widget.dialog-lightbox-widget.elementor-lightbox {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

div.dialog-widget.dialog-lightbox-widget.elementor-lightbox[style*="display: block"],
div.dialog-widget.dialog-lightbox-widget.elementor-lightbox[style*="display:block"] {
	display: block !important;
}

/* La pagina sotto non deve scorrere mentre il lightbox e' aperto. */
body.maison-lightbox-aperto {
	overflow: hidden !important;
}

/* Le foto della galleria devono dire che sono cliccabili. */
.elementor-widget-gallery a.elementor-gallery-item {
	cursor: zoom-in;
}

/*
 * 1-bis) Galleria su mobile: foto intere, non quadrate.
 *
 * Il widget e' impostato con rapporto 1:1 mentre gli scatti sono 3:2:
 * in griglia si perde circa un terzo dell'inquadratura. Su desktop il
 * quadrato ha senso, sono tre colonne e formano una griglia ordinata;
 * su mobile invece la colonna e' UNA SOLA, quindi l'effetto griglia non
 * esiste e si sta solo tagliando la foto. Sotto i 768 px passiamo a 3:2.
 *
 * Elementor calcola l'altezza con "padding-bottom: var(--aspect-ratio)"
 * e scrive la variabile INLINE sul contenitore: per batterla serve
 * !important. Il rapporto non e' impostabile per dispositivo dal
 * pannello (la libreria e-gallery legge aspectRatio una volta sola,
 * non per breakpoint), quindi la strada e' il CSS.
 */
@media (max-width: 767px) {
	.elementor-widget-gallery .elementor-gallery__container,
	.elementor-widget-gallery .e-gallery-container {
		--aspect-ratio: 66.67% !important;   /* 3:2 */
	}

	/*
	 * Rete di sicurezza. La griglia ha due modalita': quella normale
	 * (display:grid, altezza dedotta dalle foto) e quella "animata",
	 * usata solo dalle gallerie con filtri, dove le foto sono in
	 * posizione assoluta e l'altezza la detta il contenitore. La nostra
	 * e' una galleria singola, quindi siamo nella prima e queste regole
	 * non si applicano; se un domani venisse attivata la seconda, senza
	 * queste righe resterebbero buchi verticali fra le foto.
	 */
	.elementor-widget-gallery .e-gallery-grid.e-gallery--animated {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-gap: var(--vgap) var(--hgap) !important;
		padding-bottom: 0 !important;
	}
	.elementor-widget-gallery .e-gallery-grid.e-gallery--animated .e-gallery-item {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
	}
}

/*
 * 1-ter) Planimetria in fondo alla galleria: intera nella miniatura.
 *
 * Dal 18 set 2026 l'ultima voce di ogni galleria appartamento e' la
 * planimetria (file "<camera>-planimetria.webp"). La libreria e-gallery
 * riempie le caselle con "background-size: cover": una pianta verticale in
 * una casella quadrata (3:2 su mobile) mostrerebbe solo una fetta centrale.
 * Qui la pianta si vede intera, alta il 92% della casella (sono tutte piu'
 * alte che larghe), su un fondo color carta che tiene il ritmo della griglia.
 * Il lightbox non cambia: apre il file intero.
 */
.elementor-widget-gallery .e-gallery-image[data-thumbnail*="-planimetria"] {
	background-size: auto 92% !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-color: #f1ede6;
}

/*
 * 2) Logo nel footer, prima colonna.
 *
 * Il file e' la versione con lettering crema: il fondo del footer e' teal
 * scuro (#0E5A67) e la variante con lettering teal usata nell'header
 * risulterebbe illeggibile.
 *
 * Sorgente 480 px mostrata a 240: il doppio, per restare nitido sugli
 * schermi ad alta densita'.
 */
.footer-about .footer-logo {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin-top: 20px;
}

@media (max-width: 767px) {
	/* in colonna singola il footer e' centrato: il logo lo segue */
	.footer-about .footer-logo {
		margin-left: auto;
		margin-right: auto;
	}
}

/*
 * 2-bis) Pagine legali (informativa privacy).
 *
 * Un testo lungo a tutta larghezza non si legge: la riga diventa
 * troppo lunga e l'occhio perde il segno. Lo teniamo entro 860 px.
 */
.maison-testo-legale .elementor-widget-text-editor {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.maison-testo-legale h2 {
	margin-top: 2em;
	margin-bottom: 0.6em;
	font-size: 24px;
}

.maison-testo-legale p {
	line-height: 1.75;
	margin-bottom: 1.1em;
}

.maison-legale-premessa {
	color: #5a6b6e;
	font-style: italic;
}

.maison-legale-chiusura {
	margin-top: 2.5em;
	padding-top: 1.2em;
	border-top: 1px solid #d9e0e1;
	color: #5a6b6e;
	font-size: 0.95em;
}

/* La tabella delle finalita' del trattamento. */
.maison-tabella-legale {
	margin: 1.6em 0;
}

.maison-tabella-legale table {
	width: 100%;
	border-collapse: collapse;
}

.maison-tabella-legale th,
.maison-tabella-legale td {
	border: 1px solid #d9e0e1;
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
}

.maison-tabella-legale th {
	background: #0e5a67;
	color: #fff;
	font-weight: 600;
}

.maison-tabella-legale tbody tr:nth-child(even) {
	background: #f6f8f8;
}

/*
 * Sul telefono una tabella a tre colonne diventa illeggibile. Qui la
 * trasformiamo in un elenco di schede: ogni valore si porta dietro la
 * propria intestazione, presa dall'attributo data-etichetta.
 */
@media (max-width: 767px) {
	.maison-tabella-legale thead { display: none; }

	.maison-tabella-legale table,
	.maison-tabella-legale tbody,
	.maison-tabella-legale tr,
	.maison-tabella-legale td {
		display: block;
		width: 100%;
	}

	.maison-tabella-legale tr {
		margin-bottom: 18px;
		border: 1px solid #d9e0e1;
	}

	.maison-tabella-legale td {
		border: none;
		border-bottom: 1px solid #eceff0;
	}

	.maison-tabella-legale td:last-child { border-bottom: none; }

	.maison-tabella-legale td::before {
		content: attr(data-etichetta);
		display: block;
		margin-bottom: 4px;
		font-weight: 600;
		font-size: 0.85em;
		color: #0e5a67;
	}
}

/*
 * 3) Carosello delle camere in home: frecce laterali.
 *
 * Il tema costruisce il carosello con nav:false. Le frecce pero' ESISTONO
 * gia' nel DOM (.owl-prev / .owl-next), con i gestori di click gia'
 * agganciati: vengono solo nascoste con la classe .disabled. Qui le
 * riportiamo a galla e le posizioniamo.
 *
 * ATTENZIONE, il layout si ALTERNA: su Hortensia e Herbe la card bianca
 * sta a sinistra e la foto a destra, su Azalee e' il contrario. Frecce
 * fisse ai bordi finirebbero SOPRA IL TESTO della card una volta su due.
 * Per questo le ancoriamo sempre alla foto: custom.js mette sul carosello
 * la classe .maison-foto-destra oppure .maison-foto-sinistra a ogni
 * cambio di camera.
 */
/*
 * NOTA sul perche' di tutti questi !important: il tema stila gia' queste
 * frecce per altre sezioni (.clients, .team, .news...) con regole
 * !important - top: 35% !important, left/right: 10px !important - e quei
 * selettori intercettano anche il nostro carosello. Senza forzare, le
 * frecce finiscono in basso e appiccicate ai bordi.
 */
.maison-rooms-nav.owl-carousel .owl-nav,
.maison-rooms-nav.owl-carousel .owl-nav.disabled {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	bottom: auto !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	transform: none !important;
	pointer-events: none;   /* i click "passano" alla card sottostante */
	z-index: 5;
}

.maison-rooms-nav.owl-carousel .owl-nav button.owl-prev,
.maison-rooms-nav.owl-carousel .owl-nav button.owl-next {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	pointer-events: auto;   /* ma sui bottoni si', ovviamente */
	margin: 0 !important;
	width: 48px !important;
	height: 48px !important;
	line-height: 48px !important;
	border-radius: 50% !important;
	border: none !important;
	background: rgba(14, 90, 103, 0.88) !important;
	color: #fff !important;
	font-size: 14px !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
	transition: background 0.2s ease, transform 0.2s ease;
}

.maison-rooms-nav.owl-carousel .owl-nav button.owl-prev:hover,
.maison-rooms-nav.owl-carousel .owl-nav button.owl-next:hover {
	background: #0e5a67 !important;
	transform: translateY(-50%) scale(1.08) !important;
}

/* Schermi larghi: le frecce inquadrano la foto, mai la card.
   La card occupa esattamente meta' del blocco: il 52% lascia una
   ventina di pixel di stacco fra la freccia e il bordo della card. */
@media (min-width: 992px) {
	.maison-foto-destra.owl-carousel .owl-nav button.owl-prev   { left: 52% !important; right: auto !important; }
	.maison-foto-destra.owl-carousel .owl-nav button.owl-next   { right: 2% !important; left: auto !important; }
	.maison-foto-sinistra.owl-carousel .owl-nav button.owl-prev { left: 2% !important; right: auto !important; }
	.maison-foto-sinistra.owl-carousel .owl-nav button.owl-next { right: 52% !important; left: auto !important; }
}

/* Sotto i 992 px il blocco si impila: foto sopra, card sotto.
   Le frecce vanno centrate sulla FOTO, non sull'insieme. */
@media (max-width: 991px) {
	.maison-rooms-nav.owl-carousel .owl-nav button.owl-prev,
	.maison-rooms-nav.owl-carousel .owl-nav button.owl-next {
		top: 27% !important;
		width: 42px !important;
		height: 42px !important;
		line-height: 42px !important;
	}
	.maison-rooms-nav.owl-carousel .owl-nav button.owl-prev { left: 10px !important; right: auto !important; }
	.maison-rooms-nav.owl-carousel .owl-nav button.owl-next { right: 10px !important; left: auto !important; }
}

/*
 * 4) Home, collage della sezione di presentazione: foto sempre quadrate.
 *
 * Il collage e' pensato per quattro foto quadrate. La camera matrimoniale
 * era un ritaglio quadrato (matrimoniale.jpg) della stessa foto usata come
 * copertina di Herbe Aromatique: il doppione e' stato eliminato e il
 * collage usa ora la foto intera 3:2 (_S7V7740), riportata al quadrato
 * qui con lo STESSO taglio di prima (bordo sinistro al 14% della foto,
 * quindi object-position al 42%).
 * Sulle altre tre foto, gia' quadrate, la regola non cambia nulla.
 */
body.home .elementor-widget-bdevs-about-section img.rounded {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

body.home .elementor-widget-bdevs-about-section img[src*="herbe-aromatique-camera-matrimoniale"] {
	object-position: 42% 50%;
}