/* Service Areas V5 — navy card + map bleeding off the left (shf-l) w/ yellow offset shadow */
.svc-areas.v5 {

    /* Heading: 27px Albert Sans 600, lh 1 (color = --dk-h2 #ffe45c via fnt_t-2 in card scope) */
    --fnt-t-2-s: 1.5rem;

    /* Map block — sits above the yellow offset shadow */
    .svc-areas-v5-map {
        position: relative;
    }

    .svc-areas-v5-img {
        position: relative;
        z-index: 2;
        border-radius: var(--bdr-rds);
        overflow: hidden;
    }

    /* Yellow offset "shadow" peeking below/right of the map */
    .svc-areas-v5-map::before {
        content: "";
        position: absolute;
        inset: 1rem -0.83rem -0.83rem 0;
        background: var(--btn-pry);
        border-radius: var(--bdr-rds);
        z-index: 2;
    }

    /* Keep the card's CTAs on the primary palette (the ulk default flips v1 to white) */

    @media screen and (min-width: 1280px) {
        .crd.bg-bx {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            
        }

        /* Figma card padding 60px; 2-column city list */
        .bg-bx > .pd_v.pd_h {
            padding: 3.33rem 3.33rem 3.33rem 6rem;

            .grd {
                --itm-val: 50;
            }
        }

        /* Map bleeds off the left edge — square the off-screen left corners, round the right */
        .svc-areas-v5-img {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .svc-areas-v5-map::before {
            inset: 1.5rem -1.5rem -1.5rem 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    @media screen and (max-width: 1279px) {
        .crd.bg-bx {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            
        }

        .svc-areas-v5-img {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .svc-areas-v5-map::before {
            display: none;
        }
    }
}