/* Mappe Google - Gruppo Basso */

.ak-mappa {
    width: 100%;
    height: 500px;
    background-color: #e5e5e5;
}

/* Popup (InfoWindow di Google) -------------------------------------------
 * Google stampa il popup dentro il contenitore della mappa, quindi basta
 * prefissare le sue classi con .ak-mappa per non toccare altre mappe.
 * Gli !important servono perche' l'API scrive gli stessi stili inline. */

.ak-mappa .gm-style .gm-style-iw-c {
    /* Spigoli vivi e nessun padding: gli spazi li gestisce il contenuto, cosi'
     * il popup non ha piu' la fascia vuota sopra. */
    padding: 0 !important;
    border-radius: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
    overflow: visible;
}

.ak-mappa .gm-style .gm-style-iw-d {
    padding: 0 !important;
    overflow: hidden !important;
    max-height: none !important;
}

/* Coda del fumetto: stesso bianco del corpo, senza arrotondamenti. */
.ak-mappa .gm-style .gm-style-iw-tc::after {
    background: #fff;
}

/* Barra header nativa (quella che conteneva la X e aggiungeva ~40px di spazio
 * sopra il contenuto): la togliamo, la chiusura e' il bottone custom. */
.ak-mappa .gm-style .gm-style-iw-chr {
    display: none;
}

.ak-mappa-popup {
    position: relative;
    line-height: 1.4;
}

.ak-mappa-popup-chiudi {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: white !important;
    color: #000 !important;
    font-size: 30px !important;
    line-height: 0px !important;
    text-align: center;
    cursor: pointer;
    font-weight: 300 !important;
}

.ak-mappa-popup-chiudi:hover,
.ak-mappa-popup-chiudi:focus {
    background: #000;
    color: #fff;
}

/* Il padding destro lascia spazio alla X sovrapposta. */
.ak-mappa-tooltip {
    padding: 14px 44px 14px 16px;
    max-width: 260px;
}

.ak-mappa-tooltip strong {
    display: block;
    font-weight: 600;
}

.ak-mappa-tooltip-indirizzo {
    margin-top: 6px;
}

/* Mappa con tutti i progetti */

.ak-mappa-progetti {
    height: 600px;
}

.ak-mappa-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 20px;
}

.ak-mappa-filtro {
    cursor: pointer;
    opacity: .6;
}

.ak-mappa-filtro.attivo,
.ak-mappa-filtro:hover {
    opacity: 1;
}

/* Il link avvolge tutto il contenuto: il popup e' cliccabile per intero,
 * non solo sul titolo. */
.ak-mappa-progetto-link {
    display: block;
    width: 240px;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

.ak-mappa-progetto-link:hover,
.ak-mappa-progetto-link:focus {
    color: inherit;
    text-decoration: none;
}

.ak-mappa-progetto-thumb {
    display: block;
    width: 100%;
    height: auto;
}

.ak-mappa-progetto-testi {
    display: block;
    padding: 12px 14px;
}

/* Senza miniatura la X sta sopra i testi: le lasciamo spazio. */
.ak-mappa-progetto--senza-thumb .ak-mappa-progetto-testi {
    padding-right: 36px;
}

.ak-mappa-progetto-titolo {
    display: block;
    font-weight: 600;
    font-size: 17px;
}

.ak-mappa-progetto-link:hover .ak-mappa-progetto-titolo {
    color: var(--ak-rlz-hover, #0088fa);
}

.ak-mappa-progetto-luogo {
    display: block;
    margin-top: 4px;
    opacity: .7;
}

@media only screen and (max-width: 600px) {
    .ak-mappa {
        height: 300px;
    }

    .ak-mappa-progetti {
        height: 400px;
    }
}