/* ==========================================================
 * Zones «Unde activăm?» with the map (tz v2 2026-11-01)
 * ========================================================== */
.zones {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.zones__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
}

.zones__title {
    max-width: 560px;
    margin: 0;
}

.zones__text {
    display: flex;
    flex: 0 1 460px;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Frame — the visible window of the map; on phones «+ / −» (assets/js/zones.js) make the map wider than the
   frame and the viewport scrolls it. The map keeps its proportions (no max-height!): pins are placed in %. */
.zones__frame {
    position: relative;
    width: 100%; /* a size container has no width of its own: without this the flex item collapses to 0 */
    max-width: 980px;
    margin: 0 auto;
    container: zones-frame / inline-size;
}

.zones__viewport {
    aspect-ratio: 1200 / 944;
    overflow: hidden;
    overscroll-behavior: contain;
    background: var(--c-bg);
    border-radius: var(--r-card);
}

.zones__frame[data-level="1"] .zones__viewport,
.zones__frame[data-level="2"] .zones__viewport {
    overflow: auto;
}

.zones__map {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 944;
    container: zones-map / inline-size;
}

/* Zoom levels: 700px — the labels are shown, 980px — the design size */
.zones__frame[data-level="1"] .zones__map {
    width: 700px;
}

.zones__frame[data-level="2"] .zones__map {
    width: 980px;
}

.zones__map-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Pin: drop + label to the right; the drop's centre sits on the city.
   Pins scale with the map like a picture: sizes are in --u = 1/980 of the map width (980px — the design size),
   so the layout that fits at 980px fits at any width. */
.zones__pin {
    --u: calc(min(100cqi, 980px) / 980);
    --dot: max(10px, 18 * var(--u));

    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: max(4px, 6 * var(--u));
    color: var(--c-ink);
    text-decoration: none;
    transform: translate(calc(var(--dot) / -2), -50%);
}

.zones__pin-dot {
    flex: none;
    width: var(--dot);
    height: var(--dot);
    background: var(--c-primary);
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 0 0 max(2px, 3 * var(--u)) var(--c-surface);
    transform: rotate(-45deg);
    transition: transform 0.15s;
}

.zones__pin--far .zones__pin-dot {
    background: var(--c-surface);
    box-shadow: inset 0 0 0 max(3px, 4 * var(--u)) var(--c-primary), 0 0 0 max(2px, 3 * var(--u)) var(--c-surface);
}

.zones__pin--base {
    --dot: max(16px, 28 * var(--u));
}

.zones__pin--base .zones__pin-dot {
    background: var(--c-accent);
    box-shadow: inset 0 0 0 max(3px, 5 * var(--u)) var(--c-ink), 0 0 0 max(2px, 3 * var(--u)) var(--c-surface);
}

.zones__pin-label {
    padding: 0.3em 0.77em;
    font-size: max(10px, 13 * var(--u));
    font-weight: 600;
    white-space: nowrap;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.zones__pin--base .zones__pin-label {
    padding: 0.43em 0.86em;
    font-size: max(11px, 14 * var(--u));
    color: var(--c-surface);
    background: var(--c-ink);
    border-color: var(--c-ink);
}

.zones__pin-sub {
    font-weight: 400;
    color: var(--c-on-dark);
}

.zones__pin:hover,
.zones__pin:focus-visible {
    z-index: 3;
}

.zones__pin:hover .zones__pin-label,
.zones__pin:focus-visible .zones__pin-label {
    color: var(--c-ink);
    background: var(--c-accent);
    border-color: var(--c-accent);
}

.zones__pin:hover .zones__pin-sub,
.zones__pin:focus-visible .zones__pin-sub {
    color: var(--c-ink);
}

.zones__pin:hover .zones__pin-dot {
    transform: rotate(-45deg) scale(1.2);
}

.zones__pin:focus-visible {
    outline: none;
}

.zones__pin:focus-visible .zones__pin-label {
    outline: var(--focus);
    outline-offset: 2px;
}

/* The city of the current calculator page: yellow label, shown even on a narrow map (Bălți keeps its dark label) */
.zones__pin--current {
    z-index: 2;
}

.zones__pin--current:not(.zones__pin--base) .zones__pin-label {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

/* Label to the left of the drop, so neighbouring labels don't overlap
   (Lipcani stays on the right: «Липканы» on the left is cut by the map edge) */
.zones__pin--edinet,
.zones__pin--costesti,
.zones__pin--riscani,
.zones__pin--glodeni,
.zones__pin--falesti {
    flex-direction: row-reverse;
    transform: translate(calc(-100% + var(--dot) / 2), -50%);
}

/* City coordinates in % of the map (from latitude/longitude, tz v2 2026-11-01 README) */
.zones__pin--balti { left: 49.25%; top: 54%; }
.zones__pin--falesti { left: 41.39%; top: 66.71%; }
.zones__pin--glodeni { left: 34.46%; top: 53.33%; }
.zones__pin--singerei { left: 56.89%; top: 62.25%; }
.zones__pin--soroca { left: 62.43%; top: 27.24%; }
.zones__pin--riscani { left: 35.82%; top: 40.75%; }
.zones__pin--drochia { left: 45.14%; top: 35.55%; }
.zones__pin--floresti { left: 62.54%; top: 45.22%; }
.zones__pin--orhei { left: 81.21%; top: 79.48%; }
.zones__pin--rezina { left: 86.14%; top: 54.81%; }
.zones__pin--telenesti { left: 64.86%; top: 71.71%; }
.zones__pin--soldanesti { left: 80.25%; top: 50.28%; }
.zones__pin--costesti { left: 25.29%; top: 47.45%; }
.zones__pin--donduseni { left: 37.79%; top: 22.84%; }
.zones__pin--edinet { left: 26.96%; top: 26.49%; }
.zones__pin--cupcini { left: 29.79%; top: 30.35%; }
.zones__pin--briceni { left: 18.82%; top: 13.38%; }
.zones__pin--lipcani { left: 9.11%; top: 20.01%; }
.zones__pin--ocnita { left: 31.68%; top: 11.76%; }
.zones__pin--otaci { left: 44.32%; top: 8.99%; }
.zones__pin--ungheni { left: 44.68%; top: 91.17%; }

/* Legend */
.zones__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    font-size: 14px;
    color: var(--c-text-2);
}

.zones__legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zones__key {
    flex: none;
    width: 12px;
    height: 12px;
    background: var(--c-primary);
    border-radius: 50%;
}

.zones__key--base {
    width: 14px;
    height: 14px;
    background: var(--c-accent);
    border: 3px solid var(--c-ink);
}

.zones__key--far {
    background: var(--c-surface);
    border: 3px solid var(--c-primary);
}

.zones__key--radius {
    width: 22px;
    height: 0;
    background: none;
    border-top: 2px dashed var(--c-primary);
    border-radius: 0;
}

/* Zoom buttons: only when the whole map is too narrow for the labels */
.zones__zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: none;
    flex-direction: column;
    gap: 8px;
}

.zones__zoom-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    cursor: pointer;
}

.zones__zoom-btn:disabled {
    color: var(--c-text-3);
    cursor: default;
    opacity: 0.5;
}

@container zones-frame (max-width: 639px) {
    .zones__zoom {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zones__pin-dot,
    .zones__pin-label {
        transition: none;
    }
}

/* Map narrower than 640px: drops only (labels would overlap), except «Bălți» */
@container zones-map (max-width: 639px) {
    .zones__pin-label {
        display: none;
    }

    .zones__pin--base .zones__pin-label,
    .zones__pin--current .zones__pin-label {
        display: inline-block;
    }

    /* On a city page only that city is signed: two labels don't fit on a small map */
    .zones__map:has(.zones__pin--current) .zones__pin--base:not(.zones__pin--current) .zones__pin-label {
        display: none;
    }

    /* …and its label points to the middle of the map, so it is never cut by the edge */
    .zones__pin--current {
        flex-direction: row;
        transform: translate(calc(var(--dot) / -2), -50%);
    }

    .zones__pin--current:is(.zones__pin--soroca, .zones__pin--singerei, .zones__pin--floresti, .zones__pin--orhei, .zones__pin--rezina, .zones__pin--telenesti, .zones__pin--soldanesti) {
        flex-direction: row-reverse;
        transform: translate(calc(-100% + var(--dot) / 2), -50%);
    }

    /* «baza noastră» is in the legend; the short label covers fewer neighbouring drops */
    .zones__pin-sub {
        display: none;
    }
}

/* Narrowest map: even «Bălți» covers the neighbouring drops; the yellow drop is explained by the legend */
@container zones-map (max-width: 319px) {
    .zones__pin--base:not(.zones__pin--current) .zones__pin-label {
        display: none;
    }
}