/* ═══ property-hero — primo schermo della scheda alloggio su mobile ═══════
 *
 * Solo sotto i 768px (04/09/2026, dal canvas "Scheda senza header"):
 * niente header del sito su questa pagina, prima foto a tutta larghezza
 * con indietro e condividi in sovrimpressione e il contatore foto, la
 * foto che sfuma nel fondo pagina e la prima card che sale sulla foto
 * con gli angoli arrotondati (stesso raggio dello sheet). La griglia a
 * cinque foto resta su desktop; il tocco sulla foto apre la galleria
 * PhotoSwipe come prima. La descrizione, da accordion chiuso, diventa
 * quattro righe con "Leggi tutto" in linea e la sfumatura che parte
 * qualche px prima del tasto (property-hero.js). Caricato dal solo
 * controller della scheda: le regole sull'header valgono qui e basta. */

.paf-hero-actions,
.paf-hero-count,
.paf-desc-more {
	display: none;
}

/* Il badge e (su mobile) tasti, contatore e sfumatura si posizionano sul
   contenitore della galleria, non sulla griglia: su mobile la griglia
   scorre in orizzontale e cio' che sta dentro scorrerebbe con lei. */
.page-x--property .gallery {
	position: relative;
}

@media (max-width: 767px) {
	#nav-bar {
		display: none;
	}

	.page-x--property {
		margin-top: 0;
	}

	/* Slider (04/09/2026): il contenitore e' largo quanto il viewport a
	   prescindere dai margini della colonna; la griglia diventa una fila
	   orizzontale di foto a tutta larghezza che scorre a scatti con lo
	   scroll-snap nativo, niente librerie. Il tocco su una foto apre
	   PhotoSwipe sulla stessa foto (l'indice e' quello del link). */
	/* Altezza 340px piu' la safe area in alto: in PWA su iPhone (status bar
	   traslucida, vedi property.php) la foto riempie anche lo spazio sotto
	   la tacca; nel browser l'inset e' 0 e non cambia nulla. */
	.page-x--property .gallery {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		height: calc(340px + env(safe-area-inset-top, 0px));
	}

	.page-x--property .gallery-grid {
		display: flex;
		width: 100%;
		height: calc(340px + env(safe-area-inset-top, 0px));
		margin: 0;
		border-radius: 0;
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.page-x--property .gallery-grid::-webkit-scrollbar {
		display: none;
	}

	/* Tutte le foto, anche oltre la quinta (photoswipe.css le nasconde
	   nella griglia desktop) */
	.page-x--property .gallery-grid a,
	.page-x--property .gallery-grid a:nth-of-type(n+6) {
		display: block;
		flex: 0 0 100%;
		width: 100%;
		height: calc(340px + env(safe-area-inset-top, 0px));
		scroll-snap-align: start;
	}

	/* La foto sfuma nel fondo pagina: niente taglio netto col corpo */
	.page-x--property .gallery::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 96px;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, .45) 55%, rgba(239, 239, 239, .9) 100%);
		z-index: 1;
	}

	/* Il badge della tipologia scende in basso a sinistra, sopra la
	   sfumatura: in alto ci sono i tasti azione */
	.page-x--property .paf-badge {
		top: auto;
		bottom: 44px;
		left: 16px;
		z-index: 3;
	}

	.paf-hero-actions {
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: calc(16px + env(safe-area-inset-top, 0px));
		left: 16px;
		right: 16px;
		z-index: 3;
	}

	.paf-hero-btn {
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, .92);
		box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
		color: var(--c-text, #282828);
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.paf-hero-count {
		display: block;
		position: absolute;
		right: 16px;
		bottom: 44px;
		z-index: 3;
		padding: 5px 10px;
		border-radius: 999px;
		background: rgba(40, 40, 40, .55);
		color: #fff;
		font-family: var(--f-font1, "Raleway", sans-serif);
		font-size: 12px;
		font-weight: 600;
		pointer-events: none;
	}

	/* ── Sezioni piatte (04/09/2026) ──────────────────────────────────
	   Le due card bianche (titolo, descrizione) diventano sezioni sul
	   corpo pagina come le altre: niente sfondo, niente padding laterale
	   speso due volte. Titoli di sezione in maiuscoletto piccolo e
	   divisori sottili fanno l'orientamento al posto delle cornici. Il
	   corpo grigio sale sulla foto con gli angoli arrotondati. */
	.page-x--property .pagina-specifica {
		background: transparent;
		border-radius: 0;
		padding: 0;
		margin: 0 0 22px;
	}

	/* La foto resta ferma mentre il corpo le scorre sopra: sticky sulla
	   sezione galleria (sotto), corpo in un contenitore con fondo e curva
	   (.paf-property-body, vedi template).
	   ⚠️ style.css mette overflow-x:hidden su html e body: cosi' il body
	   diventa un contenitore di scorrimento che non scorre e lo sticky non
	   aggancia mai. overflow-x:clip taglia ugualmente lo sbordo orizzontale
	   senza creare un contenitore; la classe la mette property-hero.js. */
	html.paf-hero-page,
	html.paf-hero-page body {
		/* overflow-y torna visible: con "auto" su html E body il body e' un
		   contenitore di scorrimento a se', e in PWA su iPhone (status bar
		   traslucida) la pagina partiva con una fascia grigia sopra la foto,
		   che spariva solo al primo scroll. Scorrimento del documento e
		   basta; clip taglia comunque lo sbordo orizzontale. */
		overflow-y: visible;
		overflow-x: clip;
	}

	.page-x--property .gallery {
		position: sticky;
		top: 0;
		z-index: 0;
	}

	.page-x--property .paf-property-body {
		position: relative;
		z-index: 2;
		margin-top: -38px;
		padding-top: 24px;
		/* min-height: se il contenuto fosse corto la foto sticky resterebbe
		   scoperta in fondo; qui non capita, ma il fondo deve coprire sempre */
		background: var(--c-bg, #efefef);
	}

	/* Lo sfondo arrotondato e' largo quanto lo schermo, non quanto la
	   colonna: disegnato da uno pseudo-elemento a tutta larghezza sotto il
	   testo, altrimenti ai lati degli angoli restava una tacca di foto
	   (visto su Android, 04/09/2026). Il testo resta allineato ai margini.
	   Il bordo non e' netto: parte semitrasparente e diventa pieno dopo
	   44px, cosi' la foto traspare solo sotto la curva. */
	.page-x--property .paf-property-body::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 50vw);
		width: 100vw;
		background: linear-gradient(180deg, rgba(239, 239, 239, .72) 0, rgba(239, 239, 239, .92) 22px, var(--c-bg, #efefef) 44px);
		border-radius: 38px 38px 0 0;
		z-index: -1;
	}

	/* il contenitore ha gia' il fondo: il proprio background del corpo va
	   tolto sopra la curva, altrimenti copre la sfumatura dello pseudo */
	.page-x--property .paf-property-body {
		background: transparent;
	}

	.page-x--property .paf-desc-panel {
		border-top: 1px solid rgba(0, 0, 0, .08);
		padding-top: 22px;
	}

	/* Il blocco delle informazioni extra e' piatto come i pannelli, ma le sue
	   righe interne non devono ereditare linea e aria dei pannelli */
	.page-x--property .paf-rows {
		background: transparent;
		border-radius: 0;
		padding: 22px 0 0;
		margin: 0;
		border-top: 1px solid rgba(0, 0, 0, .08);
	}

	.page-x--property .paf-rows .paf-row {
		border-top: 1px solid rgba(0, 0, 0, .08);
		padding-top: 0;
		margin-bottom: 0;
	}

	/* La lista inline (dentro una sezione) non e' un blocco a se' */
	.page-x--property .paf-rows--inline {
		border-top: 0;
		padding-top: 0;
	}

	.page-x--property .paf-rows--inline .paf-row:first-of-type {
		border-top: 1px solid rgba(0, 0, 0, .08);
	}

	/* La regola del pannello azzera il padding del bottone: le righe lo rivogliono */
	.page-x--property .paf-rows .paf-row-toggle {
		padding: 13px 0;
	}

	.page-x--property .paf-rows .paf-row:first-of-type {
		border-top: 0;
	}

	.page-x--property .paf-map {
		height: 220px;
	}

	/* Il pannello ha gia' la sua linea in alto: il divisore che lo precede
	   farebbe una doppia riga */
	.page-x--property .paf-menu-divider:has(+ .paf-rows),
	.page-x--property .paf-menu-divider:has(+ .paf-desc-panel) {
		display: none;
	}

	.page-x--property .paf-desc-toggle {
		padding: 0;
	}

	.page-x--property .colonna h2,
	.page-x--property .paf-desc-toggle h2 {
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		margin: 0 0 12px;
	}

	.page-x--property .paf-menu-divider {
		margin: 22px 0;
		background: rgba(0, 0, 0, .08);
	}

	/* Descrizione: quattro righe visibili, "Leggi tutto" in linea in
	   fondo all'ultima, con sfumatura e blur che partono prima del tasto.
	   Il titolo resta (e resta anche cliccabile, stessa fisarmonica),
	   sparisce solo il chevron: aperta o chiusa lo dice il testo. */
	#paf-desc-panel-main .modulo-fisso-toggle-icon {
		display: none;
	}

	#paf-desc-panel-main .paf-desc-content {
		position: relative;
		max-height: 77px;
		opacity: 1;
	}

	#paf-desc-panel-main.is-open .paf-desc-content {
		max-height: none;
	}

	.paf-desc-more {
		display: inline-flex;
		align-items: flex-end;
		position: absolute;
		right: 0;
		bottom: 0;
		height: 22px;
		padding: 0 0 0 44px;
		border: 0;
		background: linear-gradient(90deg, rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, .85) 26px, var(--c-bg, #efefef) 44px);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px);
		mask-image: linear-gradient(90deg, transparent 0, #000 18px);
		font-family: var(--f-font1, "Raleway", sans-serif);
		font-size: 14px;
		font-weight: 600;
		line-height: 22px;
		color: var(--c-text, #282828);
		text-decoration: underline;
		white-space: nowrap;
		cursor: pointer;
	}

	#paf-desc-panel-main.is-open .paf-desc-more {
		display: none;
	}
}