/* =============================================================================
   Blocco «Dove siamo», stile «Contatti e mappa» (dalla 1.3.39). Partial:
   views/partials/_dove_siamo_contatti.twig; si appoggia a dove-siamo.css
   (caricato prima) per la mappa, e qui cambia solo l'impaginazione: in alto
   i testi a sinistra, sotto il riquadro dei contatti coi due pulsanti e la
   mappa in un riquadro arrotondato. Colori: --ds-sfondo, --ds-accento.
   ============================================================================= */
.ds--contatti { display: block; }
.ds--contatti .ds-dentro { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }

.dc-testa { margin-bottom: 28px; }
.ds .dc-occhiello::before { display: none; }
.ds .dc-titolo {
    color: var(--color-primary, #111);
    font-size: clamp(30px, 2.4vw + 14px, 52px);
}

.dc-griglia {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}
@media (min-width: 960px) {
    .dc-griglia { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    .ds--senza-mappa .dc-griglia { grid-template-columns: minmax(0, 560px); }
    /* Solo la mappa (niente punti né pulsanti): a tutta larghezza, non nella colonna stretta */
    .dc-griglia > .dc-mappa:only-child { grid-column: 1 / -1; }
}

/* Il riquadro dei contatti */
.dc-scheda {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(20px, 2.5vw, 32px);
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .06);
}
.dc-righe { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.dc-riga { display: flex; align-items: flex-start; gap: 16px; }
.dc-icona { flex: none; display: flex; color: var(--color-primary, #1c1c1c); }
.dc-icona .ke-icona { width: 28px; height: 28px; }
.dc-riga-testi { min-width: 0; overflow-wrap: anywhere; }
.ds .dc-riga-titolo { margin: 2px 0 0; color: #111827; font-size: 17px; font-weight: 600; line-height: 1.35; }
.ds .dc-riga-testo { margin: 2px 0 0; color: #4b5563; font-size: 15px; line-height: 1.45; }

.dc-pulsanti { display: flex; flex-wrap: wrap; gap: 12px; }
.ds a.dc-pulsante,
.ds a.dc-pulsante:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border: 1.5px solid var(--ds-acc);
    border-radius: 10px;
    background: var(--ds-acc);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: filter .15s ease;
}
.ds a.dc-pulsante .ke-icona { width: 20px; height: 20px; }
.ds a.dc-pulsante:hover { filter: brightness(1.07); color: #fff; }
.ds a.dc-pulsante--bordo,
.ds a.dc-pulsante--bordo:visited {
    border-color: var(--color-primary, #1c1c1c);
    background: transparent;
    color: var(--color-primary, #1c1c1c);
}
.ds a.dc-pulsante--bordo:hover { background: rgba(15, 23, 42, .04); color: var(--color-primary, #1c1c1c); filter: none; }
.ds a.dc-pulsante:focus-visible { outline: 2px solid var(--ds-acc); outline-offset: 3px; }

/* La mappa in un riquadro arrotondato; sotto, nel riquadro, la nota a sinistra e il
   pulsante delle indicazioni a destra (in fila: una nota lunga va a capo invece di
   finire sotto il pulsante o sopra i nomi dei punti) */
.dc-mappa {
    --ds-fondo: #eef1f6; /* le strade «vuote» della mappa prendono il colore del riquadro */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    /* sopra c'è posto per i nomi dei punti in cima alla mappa (scritti sopra il pin) */
    padding: 64px clamp(24px, 3vw, 40px) 64px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #eef1f6;
    overflow: hidden;
}
.dc-mappa .ds-mappa { max-width: none; margin-top: 0; }
.dc-mappa .ds-strada-fondo { stroke: #d6dbe4; }
.dc-mappa .ds-strada-riga { stroke: var(--ds-acc); }
.dc-mappa .ds-pin path { fill: var(--color-primary, #141414); }
/* Col piede il margine basso lo fa il piede (spazio per i nomi scritti sotto i punti in basso) */
.dc-mappa:has(> .dc-mappa-piede) { padding-bottom: 16px; }
/* la mappa al centro dello spazio libero, il piede in fondo al riquadro */
.dc-mappa:has(> .dc-mappa-piede) > .ds-mappa { margin-block: auto; }
.dc-mappa-piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 44px;
}
.ds .dc-didascalia {
    flex: 1 1 12em;
    min-width: 0;
    margin: 0;
    color: #4b5563; /* #6b7280 sul grigio del riquadro: 4,3:1, sotto il minimo per 12 px */
    font-size: 12px;
    line-height: 1.4;
}
.ds a.dc-indicazioni,
.ds a.dc-indicazioni:visited {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid var(--color-primary, #1c1c1c);
    border-radius: 10px;
    background: #fff;
    color: var(--color-primary, #1c1c1c);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.ds a.dc-indicazioni:hover { background: #f9fafb; color: var(--color-primary, #1c1c1c); }
.ds a.dc-indicazioni:focus-visible { outline: 2px solid var(--ds-acc); outline-offset: 3px; }
@media (max-width: 480px) {
    .dc-mappa { min-height: 0; }
    .ds a.dc-indicazioni { flex: 1 1 100%; justify-content: center; }
}