/* =============================================================================
   Blocco «Dove siamo» (page builder, dalla 1.2.493). Partial:
   views/partials/_dove_siamo.twig; mappa: App\Services\MappaPunti (posizioni
   in percentuale, strada in un SVG 1000×500 stirato come il riquadro).
   Colori dal pannello: --ds-sfondo (vuoto = avorio), --ds-accento (vuoto =
   rosso), --ds-immagine. Dal computer (≥ 1100 px) la foto sta a destra a
   tutta altezza col bordo curvo; sotto, in alto come striscia.
   ============================================================================= */
.ds {
    --ds-fondo: var(--ds-sfondo, #f7f5f1);
    --ds-acc: var(--ds-accento, #c8102e);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ds-fondo);
    color: #1c1c1c;
    overflow: hidden;
}
.ds-dentro { position: relative; z-index: 1; width: 100%; max-width: var(--container-max-width, 1280px); margin: 0 auto; padding: 40px 16px 44px; }

/* Foto (telefono: striscia in alto col bordo curvo sotto) */
.ds-foto {
    position: relative;
    height: 220px;
    background-image: var(--ds-immagine);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    clip-path: ellipse(120% 100% at 50% 0%);
}
.ds-frase {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
    color: #2a2a2a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .32em;
    text-transform: uppercase;
}
.ds-frase--chiara { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.ds-frase::after { content: ''; width: 40px; height: 2px; margin-top: 6px; background: var(--ds-acc); }

/* Testi */
.ds .ds-occhiello {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    color: var(--ds-acc);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.ds-occhiello::before,
.ds-occhiello::after { content: ''; flex: none; width: 36px; height: 2px; background: currentColor; }
.ds .ds-titolo {
    margin: 0;
    padding: 0;
    color: #111;
    font-size: clamp(32px, 2.6vw + 14px, 58px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.02em;
}
.ds .ds-testo { max-width: 34em; margin: 18px 0 0; color: #444; font-size: 18px; line-height: 1.55; }
.ds a.ds-pulsante,
.ds a.ds-pulsante:visited {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
    padding: 15px 26px 15px 24px;
    border-left: 6px solid var(--ds-acc);
    background: #151515;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .2s ease;
}
.ds a.ds-pulsante svg { color: var(--ds-acc); }
.ds a.ds-pulsante:hover,
.ds a.ds-pulsante:focus-visible { background: #000; color: #fff; }
.ds a.ds-pulsante:focus-visible { outline: 2px solid var(--ds-acc); outline-offset: 3px; }

/* Mappa: pin e nomi in percentuale sopra la strada */
.ds-mappa { position: relative; width: 100%; aspect-ratio: 5 / 3; margin-top: 36px; }
.ds-strada { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ds-strada path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ds-strada-fondo { stroke: #cdc8c0; stroke-width: 8; }
.ds-strada-riga { stroke: var(--ds-fondo); stroke-width: 3.5; }
.ds-scritta {
    position: absolute;
    transform: translate(-50%, -50%);
    color: #9a958d;
    font-size: 12px;
    font-style: italic;
    letter-spacing: .38em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.ds-pin { position: absolute; width: 28px; height: 38px; transform: translate(-50%, -100%); }
.ds-pin svg { display: block; width: 100%; height: 100%; }
.ds-pin path { fill: #141414; }
.ds-pin circle { fill: var(--ds-fondo); }
.ds-nome {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #111;
    text-align: center;
    white-space: nowrap;
    line-height: 1.25;
}
.ds-nome strong { font-size: 14px; font-weight: 700; }
.ds-nome span { color: #444; font-size: 12px; }
/* Dove sta il nome rispetto al pin: telefono (--tel-*) e, dal tablet, computer */
.ds-nome--tel-sopra { transform: translate(-50%, calc(-100% - 44px)); }
.ds-nome--tel-sotto { transform: translate(-50%, 8px); }
.ds-nome--tel-destra { align-items: flex-start; text-align: left; transform: translate(17px, calc(-50% - 21px)); }
.ds-nome--tel-sinistra { align-items: flex-end; text-align: right; transform: translate(calc(-100% - 17px), calc(-50% - 21px)); }
@media (min-width: 760px) {
    .ds-nome strong { font-size: 15px; }
    .ds-nome span { font-size: 13px; }
    .ds-nome--sopra { align-items: center; text-align: center; transform: translate(-50%, calc(-100% - 46px)); }
    .ds-nome--sotto { align-items: center; text-align: center; transform: translate(-50%, 8px); }
    .ds-nome--destra { align-items: flex-start; text-align: left; transform: translate(18px, calc(-50% - 22px)); }
    .ds-nome--sinistra { align-items: flex-end; text-align: right; transform: translate(calc(-100% - 18px), calc(-50% - 22px)); }
}

/* Punti con icona */
.ds-punti {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 32px 0 0;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, .12);
    list-style: none;
}
.ds-punto { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; }
.ds-punto + .ds-punto { border-top: 1px solid rgba(0, 0, 0, .08); }
.ds-punto-icona { flex: none; color: #161616; }
.ds-punto-icona .ke-icona { width: 40px; height: 40px; stroke-width: 1.6; }
.ds .ds-punto-titolo { margin: 2px 0 0; padding: 0; color: #111; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ds .ds-punto-testo { margin: 4px 0 0; color: #555; font-size: 15px; line-height: 1.45; }

/* Tablet: punti affiancati */
@media (min-width: 760px) {
    .ds-dentro { padding: 48px 24px 48px; }
    .ds-foto { height: 280px; }
    .ds-mappa { aspect-ratio: 2 / 1; max-width: 680px; }
    .ds-punti--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-punti--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ds-punto { padding: 22px 22px 4px; }
    .ds-punto + .ds-punto { border-top: 0; border-left: 1px solid rgba(0, 0, 0, .12); }
    .ds-punto:first-child { padding-left: 0; }
}

/* Computer: testi e mappa affiancati, foto a destra a tutta altezza */
@media (min-width: 1100px) {
    .ds { display: block; }
    .ds-alto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
    .ds--senza-mappa .ds-alto { grid-template-columns: minmax(0, 1fr); }
    .ds-mappa { max-width: none; margin-top: 0; }
    .ds-dentro { padding: 56px 24px 52px; }
    .ds--immagine .ds-dentro {
        max-width: none;
        margin: 0;
        padding-left: max(24px, calc((100% - var(--container-max-width, 1280px)) / 2 + 16px));
        padding-right: calc(30% + 16px);
    }
    .ds--immagine .ds-foto {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30%;
        height: auto;
        clip-path: ellipse(100% 115% at 100% 0%);
    }
    .ds-frase { top: 44px; right: 48px; font-size: 13px; }
}