/* ==========================
   MUNICIPALITY MAP
========================== */

.municipality-map {
    padding: 120px 0;
    background: var(--color-light);
}

.municipality-map__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.municipality-map__content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}

.municipality-map__svg {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.municipality-map__svg svg {
    width: 100%;
    height: auto;
    display: block;
}

.municipality-map__info {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 110px;
}

.municipality-map__info h3 {
    margin-bottom: 20px;
    font-size: 30px;
}

.municipality-map__info p {
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: 30px;
}

/* ==========================
   Krajevne skupnosti
========================== */

.municipality-map svg g[id] {
    cursor: pointer;
}

.municipality-map svg g[id] path {
    transition: fill .25s ease;
}

.municipality-map svg g[id]:hover path {
    fill: #234089 !important;
}

.municipality-map svg g[id].active path {
    fill: #FFD100 !important;
}

#Map {
    pointer-events: none;
}

#Map path {
    pointer-events: none;
}

.community {
    cursor: pointer;
}

.community path {
    fill: #F3F5F8;
    stroke: #234089;
    stroke-width: 2;
    transition: fill .25s ease;
}

.community:hover path {
    fill: #234089;
}

.community.active path {
    fill: #FFD100;
}

.community-projects li{

    margin-bottom:10px;

    color:var(--color-text);

}
/* ==========================
   INFO CARD
========================== */

.community-image{

    width:100%;
    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:24px;

}

.community-tag{

    display:inline-block;

    padding:6px 14px;

    background:#EEF3FF;

    color:#234089;

    font-size:13px;

    font-weight:700;

    border-radius:999px;

    margin-bottom:18px;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.community-projects{

    margin:30px 0;

    padding-left:20px;

}

.community-projects li{

    margin-bottom:12px;

    color:var(--color-text);

}
/* ==========================
   RESPONSIVE
========================== */

@media (max-width: 768px) {

    .municipality-map {
        padding: 80px 0;
    }

    .municipality-map__header {
        margin-bottom: 40px;
    }

    .municipality-map__content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .municipality-map__svg {
        width: 100%;
        padding: 15px;
        border-radius: 16px;
    }

    .municipality-map__svg svg {
        width: 100%;
        height: auto;
    }

    .municipality-map__info {
        position: static;
        width: 100%;
        padding: 25px;
    }

    .municipality-map__info h3 {
        font-size: 26px;
    }

}
/* ==========================================
   COMMUNITY MAP LABELS
========================================== */

#municipality-map .community-label {
    fill: var(--color-primary);

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    text-anchor: middle;
    dominant-baseline: middle;

    pointer-events: none;

    paint-order: stroke;

    stroke: rgba(255, 255, 255, .96);
    stroke-width: 4px;
    stroke-linejoin: round;

    transition:
        fill .25s ease,
        opacity .25s ease;
}


#municipality-map .community-label.hover {
    fill: #fff;
}


#municipality-map .community-label.active {
    fill: var(--color-primary);
}


@media (max-width: 768px) {

    #municipality-map .community-label {
        font-size: 11px;
        stroke-width: 3px;
    }

}
/* ==========================================
   SVG MAP FOCUS
========================================== */

#municipality-map g.community {
    outline: none;
}


#municipality-map g.community:focus {
    outline: none;
}


#municipality-map g.community:focus-visible {
    outline: none;
}