/*
 * Villa Fiore - Mapa wyboru lokali
 * Responsive layout 2.3.4
 * Desktop pozostaje na oryginalnym renderze. Mobile ma osobny stage,
 * w którym obraz i SVG używają dokładnie tego samego kadrowania.
 */

.vf-global-map-wrap {
    width: 100%;
}

.vf-global-map {
    position: relative;
    overflow: hidden;
}

/* Elementy mobilne są całkowicie wyłączone na desktopie. */
.vf-global-map .vf-mobile-map-stage,
.vf-global-map-wrap > .vf-mobile-table,
.vf-global-map .unit-label-mobile {
    display: none;
}

@media (max-width: 767px) {
    .vf-global-map-wrap {
        display: block !important;
        width: 100% !important;
    }

    /*
     * Na mobile nie dotykamy desktopowego SVG - po prostu je ukrywamy.
     * Mobilny SVG ma też klasę locale-overlay-svg wyłącznie po to, aby
     * odziedziczyć identyczne style polygonów (fill/opacity/stroke) jak desktop.
     * Dzięki temu wszystkie desktopowe style, gradienty i shadow zostają
     * dokładnie takie jak wcześniej dla >= 768px.
     */
    .vf-global-map > .locale-overlay-svg {
        display: none !important;
    }

    .vf-global-map {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: none !important;
    }

    /*
     * Jeden wspólny viewport dla zdjęcia i polygonów.
     * IMG = object-fit: cover + center.
     * SVG = xMidYMid slice.
     * Oba używają więc tej samej geometrii i ten sam punkt budynku
     * pozostaje pod tym samym polygonem niezależnie od szerokości ekranu.
     */
    .vf-global-map .vf-mobile-map-stage {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        aspect-ratio: 4 / 5 !important;
        overflow: hidden !important;
        background: #2b2119 !important;
    }

    .vf-global-map .vf-mobile-map-image {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: 50% 50% !important;
    }

    .vf-global-map .vf-mobile-map-stage::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            rgba(36,25,17,.72) 0%,
            rgba(36,25,17,.30) 25%,
            rgba(36,25,17,.04) 52%,
            rgba(36,25,17,.18) 100%
        );
    }

    .vf-global-map .vf-mobile-overlay-svg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        overflow: visible !important;
    }

    .vf-global-map .vf-mobile-overlay-svg .unit-shape {
        display: none !important;
        pointer-events: none !important;
    }


    /* Nagłówek leży nad tym samym mobilnym kadrem zdjęcia. */
    .vf-global-map .selector-head {
        position: absolute !important;
        top: 26px !important;
        left: 18px !important;
        right: 18px !important;
        z-index: 4 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .vf-global-map .selector-head .heading-lg,
    .vf-global-map .selector-head h2 {
        margin: 0 0 14px !important;
        font-size: clamp(28px, 8.2vw, 40px) !important;
        line-height: 1.05 !important;
        letter-spacing: -.035em !important;
        overflow-wrap: anywhere;
    }

    .vf-global-map .selector-head .body-copy,
    .vf-global-map .selector-head p {
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.42 !important;
    }

    .vf-global-map .vf-mobile-overlay-svg .unit-label-mobile {
        display: block !important;
    }

    .vf-global-map .unit-label-box-mobile {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: auto !important;
        max-width: 205px !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
        color: #fff !important;
        background: var(--vf-map-color, #B8853E) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,.16) !important;
        font-size: 10px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .vf-global-map .unit-label-box-mobile > span:first-child {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .02em !important;
    }

    .vf-global-map .unit-label-box-mobile > span:last-child {
        flex: 0 0 auto !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    /* Lista jest poza mapą i nie może zostać przycięta przez jej overflow. */
    .vf-global-map-wrap > .vf-mobile-table {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        color: #2f2419 !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 12px !important;
        padding: 16px 18px !important;
        border-bottom: 1px solid rgba(47,36,25,.13) !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-head strong {
        font-size: 16px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        letter-spacing: .04em !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-head span {
        font-size: 12px !important;
        line-height: 1.25 !important;
        color: rgba(47,36,25,.66) !important;
        text-align: right !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-row {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: minmax(0,1fr) 24px !important;
        gap: 14px !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 72px !important;
        padding: 14px 18px !important;
        color: #2f2419 !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(47,36,25,.11) !important;
        background: transparent !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-row:last-child {
        border-bottom: 0 !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-main {
        min-width: 0 !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-main strong {
        display: block !important;
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-main small {
        display: block !important;
        margin: 5px 0 0 !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        color: rgba(47,36,25,.68) !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-arrow {
        justify-self: end !important;
        font-size: 22px !important;
        line-height: 1 !important;
        color: #6c5232 !important;
    }
}

@media (max-width: 390px) {
    .vf-global-map .selector-head {
        top: 22px !important;
        left: 14px !important;
        right: 14px !important;
    }

    .vf-global-map .unit-label-box-mobile {
        max-width: 170px !important;
        padding-right: 7px !important;
        padding-left: 7px !important;
        font-size: 9px !important;
    }

    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-head,
    .vf-global-map-wrap > .vf-mobile-table .vf-mobile-table-row {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}