/* ==========================================================================
   PAGINE — MOBILE (regole condivise, tutte sotto gli 812px)
   Caricato da layouts/default.htm: vale su ogni pagina, home compresa.
   Nato come estensione di home-mobile.css alle pagine interne: le regole
   generiche stanno qui, quelle della sola home restano in home-mobile.css
   (poster dell'hero video, gallery a scorrimento, tasto audio).

   Breakpoint unico 812px: e' gia' quello di style.css:123,
   hero-cartolina.css:168 e prenota.css:30. Le utility -xs- di override.css
   si fermano a 667px: la fascia morta 668-812px e' dove il layout si
   rompeva, e questo file la chiude.
   ========================================================================== */

:root {
	/* Rapporto dell'area media delle copertine su mobile (video della home e
	   foto di page-cover). Un 16:9 dentro un box 4:3 con object-fit:cover
	   perde il 25% della larghezza, contro il ~75% del vecchio fullscreen. */
	--pg-hero-ratio: 4 / 3;

	/* Foto orizzontali: gli originali in libreria sono 1152x768 / 1536x1024,
	   cioe' 3:2 — un box 3:2 non ritaglia nulla. Verticali: 512x768 = 2:3. */
	--pg-foto-ratio: 3 / 2;
	--pg-foto-ratio-vert: 2 / 3;
}

@media all and (max-width: 812px) {

/* --------------------------------------------------------------------------
   COPERTINA IN 4:3 (tutte le pagine con hero pieno)
   Prima: hero-cartolina.css:180-183 forzava la copertina a 100svh anche su
   mobile, con la cornice fatta da clip-path; il media 16:9 in cover dentro
   un box ~9:19,5 mostrava il ~22% della larghezza. Il clip-path ritaglia la
   finestra ma non ridimensiona il media: per questo qui la cornice diventa
   il padding della sezione e la .mask-obj un box con aspect-ratio.
   I token --hc-* (90/14/14px) sono quelli di hero-cartolina.css:170-176.
   -------------------------------------------------------------------------- */

.cover-pagina.hero-cartolina.wh-100 {
	height: auto !important;   /* prima 100vh/100svh */
	width: 100% !important;    /* prima 100vw: includeva la scrollbar -> overflow orizzontale */
	padding: var(--hc-top) var(--hc-side) var(--hc-bottom);
	background-color: #fff;
}

.cover-pagina.hero-cartolina .mask-obj.ww-100.wh-100 {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--pg-hero-ratio);
	clip-path: none;           /* la cornice ora e' il padding qui sopra */
	display: block;            /* .mask-obj e' flex: qui non serve */
}

/* L'espansione "cartolina" e' un gesto da desktop: su mobile la copertina
   nasce gia' nella sua forma finale. La classe hero-expanded continua a
   essere gestita da main.js:366-427 (serve ancora a hero-past e al logo). */
body.hero-expanded .cover-pagina.hero-cartolina .mask-obj {
	clip-path: none;
}

.cover-pagina.hero-cartolina .cover-content-wrapper,
.cover-pagina.hero-cartolina .cover-content-wrapper video {
	width: 100% !important;
	height: 100% !important;
}

/* i gradienti erano in vh (style.css:137-138): dentro un box alto ~274px un
   30vh lo copriva quasi tutto. Ora sono in % del box. */
.cover-pagina.hero-cartolina .c-top-gradiente    { height: 35%; }
.cover-pagina.hero-cartolina .c-bottom-gradiente { height: 40%; }


/* --------------------------------------------------------------------------
   PROPORZIONI DELLE FOTO
   Prima: 16:9 sulle foto di sezione (221px su un iPhone, una striscia) e
   4:7 sul verticale. Ora 3:2 e 2:3, cioe' i rapporti dei file originali:
   taglio zero. Il 4:3 delle card resta 4:3.
   -------------------------------------------------------------------------- */

.aspect-ratio-16-9 { aspect-ratio: var(--pg-foto-ratio) !important; }
.aspect-ratio-4-7  { aspect-ratio: var(--pg-foto-ratio-vert) !important; }

/* override.css:572: border clamp(1.2rem, 2.5vw, 2rem) su box-sizing:
   border-box -> su una card da 180px il minimo di 19,2px per lato lasciava
   142px di foto e alterava il rapporto effettivo da 1,33 a ~1,48. */
.border-alpha-40 { border-width: 8px; }

/* lo sfalsamento verticale non ha senso a colonne impilate; prima la
   neutralizzazione si fermava a 667px (override.css) */
.transform-xs-none { transform: none !important; }


/* --------------------------------------------------------------------------
   TITOLI PRIMA DELLE FOTO, E SEPARATI
   Le colonne titolo con order-2 (foto a sinistra sul desktop) venivano dopo
   la foto nella fascia 668-812px, dove le order-xs-* (che si fermano a
   667px) non arrivano. E i titoli con mb-0 finivano incollati alla foto.
   -------------------------------------------------------------------------- */

.order-2.order-xs-1 { order: 1 !important; }
.order-1.order-xs-2 { order: 2 !important; }

h2.clipmask,
h3.clipmask {
	margin-bottom: 1.25rem !important;
	margin-top: 1rem;
}

}