/* GR Medical — "Come raggiungerci".
 *
 * Qui c'e' pochissimo: la grafica e' quella del design, che vive negli stili in
 * linea dentro desktop.html e mobile.html. Questo foglio fa solo quattro cose:
 * scegliere quale dei due blocchi mostrare, non far pesare i contenitori che
 * ho aggiunto al posto degli sc-if, restituire gli effetti hover che nel design
 * erano un attributo del canvas, e tenere ferme le animazioni finche' la fascia
 * non e' sullo schermo.
 */

.grcr {
	/* Il design compone su Raleway. Non la carico: se il tema ce l'ha si usa
	   quella, altrimenti si scende al carattere di sistema. Una richiesta di
	   font in piu' su questa pagina non ce la possiamo permettere. */
	font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: #fff;
	padding: 56px 0 64px;
}

.grcr *, .grcr *::before, .grcr *::after { box-sizing: border-box; }

/* I contenitori che sostituiscono <sc-if> non devono esistere per il layout:
   senza questo diventerebbero elementi di flex e griglie del design, e la
   disposizione cambierebbe. `display: contents` li rende trasparenti. */
.grcr .grcr-quando { display: contents; }
.grcr .grcr-quando[hidden] { display: none !important; }

/* Gli elementi del design hanno il colore negli stili in linea, che batte
   qualunque selettore: per l'hover serve !important. */
.grcr .grcr-hover-scuro:hover { background: #014D6B !important; }

.grcr img { max-width: 100%; height: auto; }
.grcr :focus-visible { outline: 2px solid #0087BD; outline-offset: 2px; }

/* Il blocco del design si porta il proprio contenitore: max-width 1250px con
   40px di padding per lato, cioe' 1170px di larghezza utile. Nel tema quel
   contenitore c'e' gia — `.ld-container` e' 1170px — e i due padding si
   sommano: la colonna utile scende a 1090 e le righe strette vanno a capo
   ("Parcheggio Arcaplanet" su due righe, la pastiglia "Piu' vicino" a capo
   dentro se stessa). Sopra i 1200px il contenitore del tema fa gia da margine,
   quindi il padding del design si toglie e si torna ai 1170 per cui e'
   disegnato — allineati con tutto il resto della pagina. Sotto quella soglia
   il contenitore diventa fluido e quel padding e' l'unico margine che c'e':
   li' resta. */
@media (min-width: 1200px) {
	.grcr-largo > div { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Le animazioni del design sono d'ingresso, con ritardi scaglionati fino a
   0,9s: sono fatte per partire quando la fascia si guarda. In homepage sta in
   fondo, quindi al caricamento si esaurirebbero fuori schermo e chi scorre
   fin li' troverebbe tutto gia' fermo. Restano in pausa sul primo fotogramma
   (il fill `both` lo tiene) finche' il JS non segna la fascia come vista. */
.grcr:not(.grcr-in-vista) *,
.grcr:not(.grcr-in-vista) *::before,
.grcr:not(.grcr-in-vista) *::after {
	animation-play-state: paused !important;
}

/* Chi ha chiesto meno movimento vede lo stato finale, subito. Non si spengono
   le animazioni: `grmDraw` porta il percorso da nascosto a visibile, quindi
   toglierla lascerebbe la mappa senza strade. */
@media (prefers-reduced-motion: reduce) {
	.grcr *, .grcr *::before, .grcr *::after {
		animation-duration: 1ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
	}
}

/* Il design ha due blocchi separati, uno per il desktop e uno per il
   telefono: si mostra quello giusto invece di adattarne uno solo. */
.grcr-stretto { display: none; }

@media (max-width: 900px) {
	.grcr { padding: 32px 0 40px; }
	.grcr-largo { display: none; }
	.grcr-stretto { display: block; }
}