/* Services Panel V7 — Content-driven 4-Up Hero Service Cards
 * Alternate of ServicesPanelV4: the service list (icon, title, link) is
 * authored in /pages/servicesPanelV7.cnd instead of the SQL panel source.
 * Layout guideline: Figma 9005:4513 (blue hero over a photo, frosted
 * white-bordered cards, card turns red on hover). */
.srv.v7 {
    @media screen and (min-width: 1280px) {
        &:has(.bt.deco){
            padding-bottom: 20rem;
        }
    }

    
    position: relative;
    overflow: hidden;

    /* Full-bleed background photo (optional — set Media.BackgroundImageUrl) */
    .bg {
        position: absolute;
        inset: 0;
        z-index: 0;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    /* Blue hero gradient — sits over the photo (or the base bg when no photo) */


    .mn_wd {
        position: relative;
        z-index: 2;
    }

    /* Big centered uppercase headline (Figma ~100px display type) */
    .srv-v7-hd {
        font-size: clamp(2.6rem, 6vw, 5.55rem);
        line-height: 0.9;
        text-transform: uppercase;
    }

    /* Frosted glass card — translucent white surface + backdrop blur */
    .srv-v7-crd {
        background-color:        hsl(0 0% 100% / 0.06);
        border:                  3px solid hsl(0 0% 100% / 0.9);
        backdrop-filter:         blur(7px);
        -webkit-backdrop-filter: blur(7px);
        color:                   #ffffff;
        transition:              background-color 0.25s ease, border-color 0.25s ease;
    }

    /* Hover / focus — solid red highlight (Figma active card color) */
    a.srv-v7-crd:is(:hover, :focus-visible) {
        background-color: var(--dk-alt-bg); /* #c0252c */
        border-color:     #ffffff;
    }

    .srv-v7-inr {
        gap: 1.66rem;
        min-height: 13.5rem;
        justify-content: center;
    }

    /* White line icons (~74px in Figma), aspect ratio preserved */
    .srv-v7-icn {
        color: #ffffff;
        font-size: 3.6rem;
        line-height: 1;

        svg {
            display: block;
            height: 1em;
            width: auto;
        }
    }

    .srv-v7-ttl {
        color: #ffffff;
        text-transform: uppercase;
    }

    /* Desktop card padding — Figma ~40px */
    @media screen and (min-width: 1280px) {
        .srv-v7-crd .pd_v.pd_h {
            padding: 2.22rem;
        }
    }
}