/* Padel28 - la mappa di "Dove siamo" e la fascia del parcheggio riservato.

   Sta in un file a parte, caricato da app/viste/mappa.php: la mappa si porta
   dietro tutto il suo e stile.css non va toccato. I colori sono le variabili
   del marchio definite in stile.css; il valore dopo la virgola e' lo stesso
   colore scritto per esteso, nel caso questo file venga usato da solo. */

/* ---------------------------------------------------------------- il riquadro */
.mappa-zona{margin:0;background:var(--carta,#fff);border:1px solid var(--bordo,#E2DCCC);
  border-radius:var(--raggio,10px);overflow:hidden;box-shadow:var(--ombra,0 1px 2px rgba(17,53,43,.06))}
.mappa-quadro{position:relative;background:#EFEADC}     /* il fondo della mappa, mentre l'immagine arriva */
.mappa-quadro img{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- il parcheggio */
/* La fascia verde sotto la mappa: il segno P in ottone e il motto. E' il
   verde della testata, con lo stesso filetto. */
.mappa-parcheggio{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;
  background:var(--verde,#11352B);color:var(--crema,#F2EDE1);
  border-top:3px solid var(--ottone,#C9A227);padding:14px 16px}
.mappa-p{flex:none;width:46px;height:46px;border-radius:9px;
  background:var(--ottone,#C9A227);color:var(--verde,#11352B);
  font-family:var(--titoli,"Oswald",sans-serif);font-weight:700;font-size:30px;line-height:46px;text-align:center}
.mappa-parole{display:flex;flex-direction:column;gap:4px;flex:1 1 180px;min-width:0}
.mappa-occhiello{font-family:var(--titoli,"Oswald",sans-serif);font-weight:500;font-size:13px;line-height:1.2;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--ottone,#C9A227)}
.mappa-motto{font-family:var(--titoli,"Oswald",sans-serif);font-weight:600;font-size:21px;line-height:1.12;
  letter-spacing:.8px;text-transform:uppercase;color:var(--crema,#F2EDE1)}
/* L'ultima riga: la fonte dei dati - piccola, ma c'e': e' la condizione d'uso
   della mappa - e, sul telefono, il bottone che apre la mappa grande con i
   nomi delle strade, da allargare con le dita. */
.mappa-piede{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;
  margin-top:4px}
.mappa-fonte{font-size:12.5px;line-height:1.3;color:var(--crema,#F2EDE1);opacity:.78}
.mappa-fonte a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.mappa-grande{display:inline-block;border:1px solid var(--ottone,#C9A227);border-radius:999px;padding:8px 14px;
  color:var(--ottone,#C9A227);text-decoration:none;
  font-family:var(--titoli,"Oswald",sans-serif);font-weight:500;font-size:13px;line-height:1;
  letter-spacing:1.4px;text-transform:uppercase}
.mappa-grande:hover{background:var(--ottone,#C9A227);color:var(--verde,#11352B)}
.mappa-grande:focus-visible{outline:3px solid var(--crema,#F2EDE1);outline-offset:2px}

/* ---------------------------------------------------------------- schermi larghi */
/* Da 700 px la mappa mostrata e' gia' quella grande: il bottone non serve. */
@media (min-width:700px){
  .mappa-grande{display:none}
  .mappa-parcheggio{padding:16px 22px;gap:6px 18px}
  .mappa-p{width:52px;height:52px;font-size:34px;line-height:52px;border-radius:10px}
  .mappa-motto{font-size:26px}
  .mappa-piede{flex:0 0 auto;margin:0 0 0 auto;align-self:flex-end}
}

/* Dal computer la mappa prende tutta la larghezza della pagina: accanto al
   testo resterebbe a 350 px e i nomi non si leggerebbero. Il testo sale
   sopra, su due colonne: a sinistra l'indirizzo, a destra il resto.
   Queste regole correggono .dove di stile.css (che la vuole a fianco) e
   valgono perche' questo foglio arriva dopo. */
@media (min-width:760px){
  .dove{grid-template-columns:1fr;gap:30px}
  .dove > div:first-child{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:56px;align-items:start}
  .dove > div:first-child > *{grid-column:2}
  .dove > div:first-child > .titolo-fascia{grid-column:1 / -1}
  .dove > div:first-child > .indirizzo{grid-column:1;grid-row:2 / span 12;margin-bottom:0}
}

@media print{
  .mappa-grande{display:none}
  .mappa-zona{box-shadow:none}
}