/* ===========================================================================
 * STAMPA DELLA SCHEDA IMMOBILE
 *
 * Chi stampa dal browser vuole una SCHEDA da consegnare o portarsi dietro, non
 * la pagina web su carta. Quindi non si «adatta» il sito: si tiene solo quello
 * che serve a descrivere l'immobile e si butta tutto il resto — navigazione,
 * moduli, mappe, richiami commerciali.
 *
 * ┌─ COME SONO IMPAGINATI I DUE FOGLI ───────────────────────────────────────┐
 * │ FOGLIO 1  testata col logo a colori · foto principale grande · titolo ·   │
 * │           prezzo · dati principali con le icone · descrizione             │
 * │ FOGLIO 2  le caratteristiche, su due colonne perché stiano in un foglio   │
 * │                                                                          │
 * │ Il salto fra i due è imposto (`break-before: page` sulle caratteristiche) │
 * │ invece di essere lasciato al caso: una descrizione lunga o corta          │
 * │ sposterebbe il confine e le caratteristiche finirebbero spezzate a metà   │
 * │ fra due fogli, che è esattamente ciò che si voleva evitare.               │
 * └──────────────────────────────────────────────────────────────────────────┘
 *
 * ⚠️ Questo file è caricato con `media="print"`: NON tocca la pagina a schermo,
 * e non serve avvolgerlo in @media print. Il blocco @page invece deve stare
 * qui perché è la stampa a definirlo.
 * ======================================================================== */

@page {
	size: A4 portrait;
	/* Margini stretti: il contenuto ha già il suo respiro, e ogni millimetro
	   in più aiuta a far stare le caratteristiche in un foglio solo. */
	margin: 12mm 12mm 14mm;
}

/* --- Base: si stampa in nero su bianco, testo un po' più piccolo ---------- */

body {
	background: #fff !important;
	color: #111 !important;
	font-size: 10.5pt;
	line-height: 1.45;
}

/* Il browser di suo NON stampa gli sfondi. Qui servono — il logo e le pastiglie
   dei dati sono riconoscibili dal colore — quindi si chiede esplicitamente di
   tenerli. Senza questa riga la testata esce bianca su bianco. */
.si-print-head,
.si-print-head *,
.si-strip,
.si-strip * {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* --- VIA TUTTO QUELLO CHE NON È LA SCHEDA -------------------------------- */

/* Cornice del sito */
header.site,
.site-header,
footer.site,
.site-footer,
.topbar,
.sv-barra-mobile,
.breadcrumb,
.breadcrumbs,
[class*="breadcrumb"],
#wpadminbar {
	display: none !important;
}

/* Sezioni intere che non hanno senso su carta */
#si-planimetria,      /* «Richiedi la planimetria 1:100» */
#si-posizione,        /* «Dove si trova» + mappa */
#si-quartiere,        /* «Scopri Milano San Felice» */
.si-valuta,           /* «Quanto vale la tua proprietà» */
.si-simili,           /* «Immobili simili» */
.si-side,             /* la colonna contatti appiccicata */
.si-links,            /* le ancore «Planimetria / Caratteristiche» */
.si-video,
.si-video-modal,
.si-plan-modal,
.cta-form,
.cta-band,
[class*="cta-"],
form,
.si-share {
	display: none !important;
}

/* Tutti i bottoni spariscono: su carta un bottone è un rettangolo muto. */
.btn,
button,
[role="button"],
input[type="submit"] {
	display: none !important;
}

/* I link restano leggibili come testo, senza sottolineatura né URL stampato:
   su una scheda immobile l'indirizzo di ogni link sarebbe rumore. */
a,
a:visited {
	color: inherit !important;
	text-decoration: none !important;
}

/* --- TESTATA DI STAMPA --------------------------------------------------- */

/* Compare SOLO in stampa: a schermo il logo sta nell'header vero, che qui è
   nascosto. Il markup è in single-immobile.php, marcato .si-print-head. */
.si-print-head {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12mm;
	padding-bottom: 4mm;
	margin-bottom: 6mm;
	border-bottom: 2px solid #e8a33d;
}

.si-print-head__logo img {
	height: 16mm;
	width: auto;
}

.si-print-head__meta {
	text-align: right;
	font-size: 9pt;
	line-height: 1.4;
	color: #33465c;
}

.si-print-head__meta strong {
	display: block;
	font-size: 10pt;
	color: #12263d;
}

/* --- FOGLIO 1 ------------------------------------------------------------ */

/* La galleria si riduce a UNA foto grande: la prima. Le altre non servono a
   chi ha il foglio in mano, e mangerebbero il foglio.
 *
 * ⚠️ NON basta nascondere le celle in più. Il mosaico è una GRIGLIA con misure
 * proprie (`.si-gal--n5` e compagnia): lasciandola in piedi, le cinque celle
 * restano incastrate nella stessa fascia alta un centimetro e la foto esce
 * schiacciata a strisce. Prima si smonta la griglia — display, position,
 * altezze, aspect-ratio — POI si tiene una cella sola. */
.si-gal,
.si-gal__mosaico,
.si-gal__cella,
.si-gal__frame {
	display: block !important;
	position: static !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	grid-template: none !important;
	grid-area: auto !important;
	inset: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

.si-gal {
	margin: 0 0 6mm !important;
}

/* Tutto ciò che è comando della galleria, non fotografia.
 *
 * ⚠️ `.si-gal__vedi-li` è la cella «Tutte le 17 foto»: sta DENTRO il mosaico,
 * quindi non basta la regola sulle celle in più — quella la salterebbe se
 * capitasse prima — e non la prende nemmeno la regola sui bottoni, perché è
 * un `<a>` senza `.btn`. Smontata la griglia, se non la si nasconde qui
 * riappare in mezzo alla descrizione, dove nessuno se l'aspetta. */
.si-gal__tutte,
.si-gal__barra,
.si-gal__scroll,
.si-gal__vedi-li,
.si-gal__vedi,
.si-gal__cella:not(:first-child),
.si-gal .si-badge,
.si-gal .pcard__badge {
	display: none !important;
}

/*
 * La foto esce a PROPORZIONI NATURALI: niente `object-fit: cover` e niente
 * altezza imposta. Ritagliarla a una fascia fissa tagliava via la parte alta
 * e bassa dello scatto — su una foto d'interni sono soffitto e pavimento,
 * cioè metà di quello che si sta vendendo.
 *
 * `max-height` e non `height`: mette un tetto perché una foto molto verticale
 * non si mangi il foglio, ma su tutte le altre non fa nulla e l'immagine
 * resta quella che il fotografo ha inquadrato.
 */
.si-gal__cella:first-child img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: 150mm !important;
	object-fit: contain !important;
	border-radius: 2mm;
	break-inside: avoid;
}

/* Il layout a due colonne diventa una colonna sola: la seconda era la card
   contatti, che qui non c'è più. */
.si-layout,
.layout-2col {
	display: block !important;
}

.si-titlebar {
	display: block !important;
	margin-bottom: 4mm;
	break-after: avoid;   /* il titolo non resta orfano in fondo al foglio */
}

.si-title {
	font-size: 17pt !important;
	line-height: 1.2;
	margin: 0 0 2mm !important;
	color: #12263d !important;
}

/* Il prezzo: resta, e resta arancione — è il dato che si cerca per primo. */
.si-prezzo,
.si-titlebar .si-price,
[class*="si-price"],
[class*="si-prezzo"] {
	font-size: 15pt !important;
	font-weight: 700;
	color: #d98324 !important;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* I dati principali con le icone: si tengono, distesi su una riga sola. */
.si-strip {
	display: flex !important;
	flex-wrap: wrap;
	gap: 3mm 6mm;
	margin: 0 0 6mm !important;
	padding: 3mm 4mm !important;
	border: 1px solid #dfe5ec;
	border-radius: 2mm;
	break-inside: avoid;
	list-style: none;
}

.si-strip li {
	font-size: 9.5pt;
}

.si-strip svg {
	width: 4mm;
	height: 4mm;
}

/* --- FOGLIO 2: LA DESCRIZIONE -------------------------------------------- */

/*
 * La descrizione ha un foglio suo. Sul primo restano testata, fotografia,
 * titolo, prezzo e i dati principali: è la «copertina» della scheda, e con la
 * foto a proporzioni naturali il primo foglio è già pieno. Facendo scorrere
 * la descrizione lì sotto, il salto pagina sarebbe caduto a caso in mezzo a
 * un periodo — e su una foto verticale avrebbe spinto tutto in avanti.
 */
#si-descrizione {
	break-before: page;
	page-break-before: always;
	break-inside: auto;
}

.si-sec__h {
	font-size: 12pt !important;
	color: #12263d !important;
	margin: 0 0 2mm !important;
	break-after: avoid;
}

.si-prose p {
	margin: 0 0 2.5mm !important;
	orphans: 3;
	widows: 3;
}

/* --- FOGLIO 3: LE CARATTERISTICHE ---------------------------------------- */

#si-caratteristiche {
	/* Il salto è imposto: vedi il riquadro in cima. */
	break-before: page;
	page-break-before: always;   /* per i motori vecchi */
}

/*
 * ┌─ DUE COLONNE SULL'INTERA SEZIONE, NON SUL SINGOLO ELENCO ────────────────┐
 * │ Le colonne stanno su `#si-caratteristiche`, così TUTTI i gruppi —        │
 * │ Informazioni finanziarie, Dettagli, il resto — scorrono in un flusso     │
 * │ solo e si bilanciano fra le due colonne. Applicandole a ogni `ul` come   │
 * │ nella prima stesura, ogni gruppo faceva colonne per conto suo e il       │
 * │ titolo di gruppo occupava tutta la larghezza: risultato, molta aria      │
 * │ sprecata e due fogli invece di uno.                                      │
 * │                                                                          │
 * │ `columns` e non una griglia: l'elenco è di lunghezza variabile e le      │
 * │ colonne CSS lo ripartiscono da sole. Con una griglia dovrei decidere io  │
 * │ dove spezzare, e il punto giusto cambia da immobile a immobile.          │
 * └──────────────────────────────────────────────────────────────────────────┘
 */
#si-caratteristiche {
	columns: 2;
	column-gap: 9mm;
}

/* Il titolo della sezione sta sopra le colonne, non dentro una. */
#si-caratteristiche > .si-sec__h {
	column-span: all;
	margin-bottom: 3mm !important;
}

/*
 * ⚠️ A schermo `.si-carat` è GIÀ una griglia a due colonne. Lasciandola tale
 * dentro le colonne di stampa il risultato sono QUATTRO colonne di contenuto:
 * ogni voce si stringe, il valore va a capo sotto la sua etichetta e l'ultima
 * colonna esce dal foglio tagliata a metà.
 *
 * Qui l'elenco torna una lista semplice, una voce per riga: a fare le due
 * colonne ci pensa `columns` sulla sezione, che è l'unico posto in cui la
 * ripartizione può tenere conto di TUTTI i gruppi insieme.
 */
#si-caratteristiche .si-carat {
	display: block !important;
	grid-template-columns: none !important;
	columns: initial;            /* niente colonne annidate */
	list-style: none;
	margin: 0 0 4mm !important;
	padding: 0 !important;
	/* Anche il gruppo aveva il suo riquadro: via pure quello, o restava una
	   cornice attorno a voci che ormai non ne hanno più. */
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/*
 * ┌─ NESSUN BORDO, E ARIA FRA UNA VOCE E L'ALTRA ────────────────────────────┐
 * │ A schermo ogni voce è una cardina con bordo e angoli morbidi. In due     │
 * │ colonne su carta diventavano una griglia di scatolette attaccate una     │
 * │ all'altra: il bordo faceva da recinto invece che da guida.               │
 * │                                                                          │
 * │ Per un po' è rimasta una riga sottile sotto ogni voce, come guida per    │
 * │ l'occhio. Tolta anche quella: su carta, a corpo 9, non serve. A tenere   │
 * │ insieme etichetta e valore basta la RIGA — sono sui due estremi della    │
 * │ stessa riga di testo — e a separare le voci basta lo spazio.             │
 * │                                                                          │
 * │ Il padding raddoppia proprio per questo: senza una linea che li divida,  │
 * │ due voci troppo vicine si leggono come una sola. Lo spazio è l'unico     │
 * │ separatore rimasto, quindi deve bastare da solo.                         │
 * └──────────────────────────────────────────────────────────────────────────┘
 */
#si-caratteristiche .si-carat li {
	break-inside: avoid;         /* una voce non si spezza fra due colonne */
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-between;
	align-items: baseline;
	gap: 4mm;
	/* 1.5mm a destra: senza, il valore arriva a filo del bordo della colonna e
	   in stampa sembra tagliato — è a posto, ma non si direbbe. */
	padding: 2mm 1.5mm 2mm 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	outline: 0 !important;
	font-size: 9pt;
	line-height: 1.3;
	min-height: 0 !important;
}

/*
 * Via le icone: su carta non aggiungono informazione — la voce ha già la sua
 * etichetta scritta — e ognuna si porta via una colonna di spazio che serve
 * a far stare tutto in un foglio. È la rinuncia che il cliente ha messo in
 * conto per primo, ed è quella giusta.
 */
#si-caratteristiche .si-carat li > svg,
#si-caratteristiche .si-carat li > img,
#si-caratteristiche .si-carat__ic {
	display: none !important;
}

#si-caratteristiche .si-carat__testo {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-between;
	align-items: baseline;
	gap: 4mm;
	width: 100%;
	min-width: 0;                /* senza, il flex non lascia stringere l'etichetta */
	text-align: left !important;
}

/*
 * Etichetta e valore SULLA STESSA RIGA, sempre.
 *
 * A schermo il valore va a capo sotto l'etichetta, e in colonna stretta lo
 * faceva anche in stampa: due righe per ogni voce, il doppio dell'altezza, e
 * le caratteristiche non stavano più in un foglio.
 *
 * Il valore non va mai a capo (`nowrap`) perché è corto e conta; se lo spazio
 * non basta è l'ETICHETTA a stringersi, che è la parte che si capisce lo
 * stesso anche troncata.
 */
.si-carat__k {
	color: #5a6b7f;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.si-carat__v {
	font-weight: 600;
	color: #12263d;
	text-align: right;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* Il titolo di un gruppo non resta appeso in fondo a una colonna: si tiene
   attaccato alle voci che introduce. Niente `column-span`, o spezzerebbe il
   flusso in blocchi e tornerebbero i buchi. */
.si-carat-h {
	font-size: 9.5pt !important;
	letter-spacing: .06em;
	color: #12263d !important;
	margin: 0 0 1.5mm !important;
	padding-top: 2.5mm;
	break-after: avoid;
	break-inside: avoid;
}

/* Il primo gruppo non ha bisogno dello stacco sopra. */
#si-caratteristiche .si-carat-h:first-of-type { padding-top: 0; }

/* --- Ripuliture ---------------------------------------------------------- */

/* Ombre e angoli morbidi non si stampano bene: via. */
* {
	box-shadow: none !important;
	text-shadow: none !important;
}

/* Niente elementi appiccicati: in stampa non esiste lo scroll, e un
   `position: sticky` rimasto acceso può far sparire il contenuto. */
.sticky-side,
[style*="position:sticky"],
[class*="sticky"] {
	position: static !important;
}

/* Il contenitore della pagina non deve avere larghezze massime da schermo. */
.wrap,
.section,
.section--tight {
	max-width: none !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}