/* Odessa city transport live preview v2 · compact lightweight preview, no Leaflet/tiles */
.city-transport-live {
    display: grid;
    grid-template-columns: minmax(250px, .82fr) minmax(0, 1.18fr);
    min-height: 188px;
    overflow: hidden;
    padding: 0;
    border: 1px solid #d8e8ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(25, 88, 120, .05);
}

.city-transport-live__info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 16px 18px;
}

.city-transport-live__title-wrap .eyebrow {
    font-size: 9px;
    line-height: 1.2;
}

.city-transport-live__info h2 {
    margin: 5px 0 5px;
    color: #143f59;
    font-size: clamp(19px, 2.1vw, 24px);
    line-height: 1.08;
}

.city-transport-live__lead {
    margin: 0;
    color: #667e8b;
    font-size: 11px;
    line-height: 1.4;
}

.city-transport-live__status {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin-top: 11px;
    color: #1d7650;
}

.city-transport-live__pulse {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #2aa86e;
    box-shadow: 0 0 0 4px rgba(42,168,110,.12);
}

.city-transport-live__status.is-stale,
.city-transport-live__status.is-empty {
    color: #6d818c;
}

.city-transport-live__status.is-stale .city-transport-live__pulse,
.city-transport-live__status.is-empty .city-transport-live__pulse {
    background: #9aaab2;
    box-shadow: 0 0 0 4px rgba(120,140,150,.1);
}

.city-transport-live__count {
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -.035em;
    line-height: 1;
}

.city-transport-live__status-label {
    font-size: 11px;
    font-weight: 850;
    line-height: 1.25;
}

.city-transport-live__types {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.city-transport-live__types[hidden],
.city-transport-live__count[hidden] {
    display: none !important;
}

.city-transport-live__type {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 23px;
    padding: 3px 7px;
    border: 1px solid #e1ebf0;
    border-radius: 999px;
    background: #f8fbfc;
    color: #506d7d;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

.city-transport-live__changes {
    width: fit-content;
    margin-top: 7px;
    color: #a86420;
    font-size: 9px;
    font-weight: 850;
}

.city-transport-mini-map {
    position: relative;
    display: block;
    min-height: 188px;
    overflow: hidden;
    border-left: 1px solid #e1edf2;
    background:
        radial-gradient(circle at 35% 40%, rgba(255,255,255,.82), transparent 30%),
        linear-gradient(145deg, #eaf7fb 0%, #f7fbfc 55%, #e5f4f8 100%);
    color: inherit;
    text-decoration: none;
    isolation: isolate;
}

.city-transport-mini-map__base,
.city-transport-mini-map__vehicles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.city-transport-mini-map__base { z-index: 1; opacity: .96; }
.city-transport-mini-map__vehicles { z-index: 3; pointer-events: none; }

.city-transport-mini-map__badge {
    position: absolute;
    z-index: 5;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 4px 14px rgba(31,91,117,.07);
    color: #24677f;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .05em;
    backdrop-filter: blur(6px);
}

.city-transport-mini-map__badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2baa71;
    box-shadow: 0 0 0 3px rgba(43,170,113,.13);
}

.city-transport-mini-map__open {
    position: absolute;
    z-index: 5;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(18,63,88,.91);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 6px 18px rgba(18,63,88,.16);
    backdrop-filter: blur(6px);
}

.city-transport-live-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(15,66,91,.25);
    transition: left 12s linear, top 12s linear, opacity .22s ease;
    will-change: left, top;
}

.city-transport-live-dot[data-type="tram"] { background: #2f8fc1; }
.city-transport-live-dot[data-type="trolleybus"] { background: #23a0a8; }
.city-transport-live-dot[data-type="bus"] { background: #eead2f; }

.city-service-card[data-service="transport"] .city-service-status.is-live-online {
    background: #edf8f1;
    color: #278055;
}

@media (max-width: 760px) {
    .city-transport-live {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 18px;
    }

    .city-transport-live__info {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas:
            "title status"
            "lead status"
            "types types"
            "changes changes";
        gap: 0 10px;
        padding: 13px 14px 11px;
    }

    .city-transport-live__title-wrap { grid-area: title; min-width: 0; }
    .city-transport-live__lead { grid-area: lead; }
    .city-transport-live__status {
        grid-area: status;
        align-self: center;
        justify-self: end;
        max-width: 145px;
        margin: 0;
        text-align: right;
    }
    .city-transport-live__types { grid-area: types; margin-top: 8px; }
    .city-transport-live__changes { grid-area: changes; }

    .city-transport-live__title-wrap .eyebrow { font-size: 8px; }
    .city-transport-live__info h2 { margin: 4px 0; font-size: 17px; }
    .city-transport-live__lead { font-size: 10px; }
    .city-transport-live__count { font-size: 21px; }
    .city-transport-live__status-label { font-size: 9px; }
    .city-transport-live__pulse { width: 7px; height: 7px; }

    .city-transport-mini-map {
        min-height: 122px;
        border-top: 1px solid #e1edf2;
        border-left: 0;
    }

    .city-transport-mini-map__open {
        right: 9px;
        bottom: 9px;
        padding: 7px 9px;
    }

    .city-transport-live-dot {
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
    }
}

@media (max-width: 390px) {
    .city-transport-live__info {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "lead"
            "status"
            "types"
            "changes";
    }

    .city-transport-live__status {
        justify-self: start;
        max-width: none;
        margin-top: 8px;
        text-align: left;
    }

    .city-transport-mini-map { min-height: 116px; }
}