.ml-municipality-hero {
    --ml-hero-height: 560px;
    isolation: isolate;
    min-height: var(--ml-hero-height);
    position: relative;
    display: flex;
    color: #fff;
    overflow: hidden;
    background: #06345d;
}
.ml-municipality-hero--compact { --ml-hero-height: 440px; }
.ml-municipality-hero--large { --ml-hero-height: 680px; }
.ml-municipality-hero__slides,
.ml-municipality-hero__overlay {
    position: absolute;
    z-index: -2;
    inset: 0;
}
.ml-municipality-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    will-change: opacity, transform;
}
.ml-municipality-hero__slide.is-active,
.ml-municipality-hero__slide.is-prev { z-index: 1; }
.ml-municipality-hero__slide picture,
.ml-municipality-hero__slide img {
    display: block;
    width: 100%;
    height: 100%;
}
.ml-municipality-hero__slide img {
    object-fit: cover;
    object-position: center;
}
.ml-municipality-hero__overlay {
    z-index: -1;
    background: var(--ml-hero-overlay, rgba(6, 46, 84, .52));
}

/* --- Efekt: pretapanje (fade) --- */
.ml-municipality-hero[data-effect="fade"] .ml-municipality-hero__slide {
    transition: opacity 1s ease;
}
.ml-municipality-hero[data-effect="fade"] .ml-municipality-hero__slide.is-active { opacity: 1; }

/* --- Efekt: Ken Burns (pretapanje + polagani zoom) --- */
.ml-municipality-hero[data-effect="zoom"] .ml-municipality-hero__slide {
    transition: opacity 1.2s ease;
}
.ml-municipality-hero[data-effect="zoom"] .ml-municipality-hero__slide.is-active { opacity: 1; }
/* Mirujuće stanje = završetak zooma, pa odlazeći slajd ostaje zumiran dok se pretapa. */
.ml-municipality-hero[data-effect="zoom"] .ml-municipality-hero__slide img {
    transform: scale(1.12);
}
/* Aktivni slajd svaki put iznova pokrene animaciju od scale(1) (skok na 1 dogodi se dok je slajd još nevidljiv). */
.ml-municipality-hero[data-effect="zoom"] .ml-municipality-hero__slide.is-active img {
    animation: ml-hero-kenburns var(--ml-hero-kb, 8s) ease-out forwards;
}
@keyframes ml-hero-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* --- Efekt: klizanje ustranu (slide) --- */
.ml-municipality-hero[data-effect="slide"] .ml-municipality-hero__slide {
    opacity: 1;
    transform: translateX(100%);
    transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}
.ml-municipality-hero[data-effect="slide"] .ml-municipality-hero__slide.is-active { transform: translateX(0); }
.ml-municipality-hero[data-effect="slide"] .ml-municipality-hero__slide.is-prev { transform: translateX(-100%); }

/* --- Točkice za navigaciju --- */
.ml-municipality-hero__dots {
    position: absolute;
    z-index: 3;
    top: clamp(1rem, 2vw, 1.6rem);
    right: clamp(1rem, 2.5vw, 2rem);
    display: flex;
    gap: .5rem;
}
.ml-municipality-hero__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.ml-municipality-hero__dot:hover { transform: scale(1.15); }
.ml-municipality-hero__dot.is-active { background: #fff; }
.ml-municipality-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ml-municipality-hero__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: clamp(4.75rem, 9vw, 8.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 3rem);
}
.ml-municipality-hero__content { max-width: 700px; }
.ml-municipality-hero--center .ml-municipality-hero__content {
    max-width: 780px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.ml-municipality-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    color: rgba(255,255,255,.95);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.ml-municipality-hero__eyebrow::before {
    content: '';
    width: 3.1rem;
    height: 3px;
    background: #6fbd63;
}
.ml-municipality-hero__title {
    max-width: 13ch;
    margin: 0;
    color: inherit;
    font-size: clamp(2.45rem, 5vw, 4.75rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.ml-municipality-hero--center .ml-municipality-hero__title { margin-inline: auto; }
.ml-municipality-hero__intro {
    max-width: 590px;
    margin-top: 1.15rem;
    color: rgba(255,255,255,.96);
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    line-height: 1.6;
}
.ml-municipality-hero--center .ml-municipality-hero__intro { margin-inline: auto; }
.ml-municipality-hero__intro p { margin: 0; }
.ml-municipality-hero__intro p + p { margin-top: .65rem; }
.ml-municipality-hero__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    width: min(100%, 1080px);
    margin-top: clamp(2.25rem, 4vw, 4rem);
}
.ml-municipality-hero--center .ml-municipality-hero__cards { margin-inline: auto; }
.ml-municipality-hero__card {
    min-height: 110px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ml-municipality-hero__card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.24); }
.ml-municipality-hero__card > a,
.ml-municipality-hero__card > :not(a) {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 110px;
    padding: 1.2rem 1.15rem;
    color: inherit;
    text-decoration: none;
}
.ml-municipality-hero__card--navy { background: #06477f; color: #fff; }
.ml-municipality-hero__card--green { background: #438d4b; color: #fff; }
.ml-municipality-hero__card--blue { background: #137bb6; color: #fff; }
.ml-municipality-hero__card--white { background: rgba(255,255,255,.97); color: #246b3c; border-color: rgba(255,255,255,.8); }
.ml-municipality-hero__icon {
    flex: 0 0 auto;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
}
.ml-municipality-hero__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ml-municipality-hero__card-copy { display: grid; gap: .15rem; min-width: 0; }
.ml-municipality-hero__card-title { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.ml-municipality-hero__card-subtitle { font-size: .78rem; line-height: 1.35; opacity: .82; }
.ml-municipality-hero__arrow { margin-left: auto; font-size: 1.55rem; line-height: 1; transition: transform .2s ease; }
.ml-municipality-hero__card:hover .ml-municipality-hero__arrow { transform: translateX(4px); }
@media (max-width: 980px) {
    .ml-municipality-hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}
@media (max-width: 767px) {
    .ml-municipality-hero,
    .ml-municipality-hero--compact,
    .ml-municipality-hero--large { --ml-hero-height: auto; min-height: 0; }
    .ml-municipality-hero__container { padding-top: 6.25rem; padding-bottom: 1.15rem; }
    .ml-municipality-hero__title { max-width: 11ch; font-size: clamp(2.25rem, 11vw, 3.3rem); }
    .ml-municipality-hero__intro { margin-top: .9rem; font-size: .98rem; }
    .ml-municipality-hero__cards { gap: .7rem; margin-top: 2rem; }
    .ml-municipality-hero__card,
    .ml-municipality-hero__card > a,
    .ml-municipality-hero__card > :not(a) { min-height: 94px; }
    .ml-municipality-hero__card > a,
    .ml-municipality-hero__card > :not(a) { gap: .65rem; padding: .9rem .8rem; }
    .ml-municipality-hero__icon { width: 1.85rem; height: 1.85rem; }
    .ml-municipality-hero__card-title { font-size: .89rem; }
    .ml-municipality-hero__card-subtitle,
    .ml-municipality-hero__arrow { display: none; }
}
@media (max-width: 420px) {
    .ml-municipality-hero__cards { grid-template-columns: 1fr; }
    .ml-municipality-hero__card,
    .ml-municipality-hero__card > a,
    .ml-municipality-hero__card > :not(a) { min-height: 74px; }
}
@media (prefers-reduced-motion: reduce) {
    .ml-municipality-hero__card,
    .ml-municipality-hero__arrow,
    .ml-municipality-hero__slide,
    .ml-municipality-hero__slide img { transition: none; }
    .ml-municipality-hero[data-effect="slide"] .ml-municipality-hero__slide { transform: none; opacity: 0; }
    .ml-municipality-hero[data-effect="slide"] .ml-municipality-hero__slide.is-active { opacity: 1; }
    .ml-municipality-hero[data-effect="zoom"] .ml-municipality-hero__slide img { animation: none; transform: none; }
}