/* ==========================================================================
   FOOTER — MOBILE (+ un fix che vale ovunque, segnato sotto)
   Il footer sta in layouts/default.htm, quindi queste regole valgono su tutte
   le pagine; quelle nella media query solo sotto gli 812px.

   Prima, su un telefono, il footer era: recapiti e CIN -> ripetizione del
   menu (.f-body) -> footer.jpg in verticale (512x768: a 393px di larghezza
   un blocco alto ~590px) -> credits spinti in fondo. E tra 481 e 812px la
   foto restava addirittura in position:absolute (style.css:213; le regole
   mobile di style.css:224 e override.css:353 coprono solo fino a 480px).

   Ora: la foto apre il footer come fascia orizzontale, poi il blocco con
   logo, recapiti e CIN, e per ultimi i credits, visibili.
   ========================================================================== */

/* Il logo WeMakeSolutions nei credits e' un SVG con fill #fff
   (assets/cromo/img/logo/logo-wms.svg) su sfondo bianco (.f-credits,
   style.css:219): era invisibile DA SEMPRE, a ogni larghezza — si leggeva
   solo la parola CREDITS. Lo si scurisce via filtro, cosi' il file resta
   quello e continua a funzionare anche su eventuali fondi scuri futuri
   togliendo questa regola. Vale anche su desktop, non solo mobile. */
.footer .f-credits img {
	filter: invert(1);
	opacity: .75;
}

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

	/* la ripetizione del menu di navigazione non serve sul telefono */
	.footer .f-body {
		display: none;
	}

	/* la foto apre il footer, prima del blocco con il logo: il footer
	   diventa una colonna flex e la foto sale in testa via order.
	   (style.css:207 lo aveva inline-block) */
	.footer {
		display: flex;
		flex-direction: column;
	}

	/* da decorazione assoluta a fascia in flusso. L'originale e' un
	   verticale 512x768: il taglio 3:2 (object-fit: cover sull'img, gia'
	   nel markup) ne mostra la banda centrale senza monopolizzare lo
	   schermo. */
	.footer .ft-image {
		order: -1;
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		z-index: auto;
	}

	/* I credits chiudono la pagina. Il markup ha pb-10 + mb-10
	   (override.css:204,365: 5.5rem l'una con !important): 11rem erano
	   troppi, ma il padding serve comunque a far scorrere il logo WMS
	   sopra i bottoni fissi (Book now a destra, chat a sinistra, entrambi
	   a bottom:20px), che altrimenti lo coprono. */
	.footer .f-credits {
		padding-top: 1.5rem;
		padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
		margin-bottom: 0 !important;
	}

}