/* Services V1 — Featured Services with tabbed panel */

.srv.v1 {
    --img-bg-o: 0.08;
    background: linear-gradient(to bottom, var(--background), var(--inner-theme));



    /* ── Tab bar ───────────────────────────────────────── */

    .srv-v1-tabs {
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-radius: 6.25rem;
        padding: 0.125rem;

        li {
            display: contents;
        }
    }

    .srv-v1-tab {
        font-weight: 700;
        font-size: 1.125rem;
        color: white;
        background: transparent;
        border: 2px solid transparent;
        border-radius: 4.375rem;
        height: 3.4375rem;
        padding-inline: 1.875rem;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color 0.2s ease, border-color 0.2s ease;

        &.active {
            background: rgba(255, 206, 52, 0.1);
            border-color: var(--clr-acc, #ffce34);
        }

        @media (hover: hover) and (pointer: fine) {
            &:is(:hover, :focus-visible):not(.active) {
                background: rgba(255, 255, 255, 0.08);
            }
        }
    }


    /* ── Panel ─────────────────────────────────────────── */

    .srv-v1-pnl-hd {
        flex-shrink: 0;
        max-width: 37ch;
        
    }

    strong.srv-v1-pnl-name {
        line-height: 1;
        --title-color: var(--fnt-t-1);
        font-family: var(--fnt-t);
        font-weight: var(--fnt-t-1-w);

        em {
            font-size: clamp(3rem, 5.5vw, 5.3125rem); /* 85px @ Figma */
            line-height: 0.9;
            display: block;
        }
    }

    .srv-v1-pnl-body {
        

        > p {
            font-size: 1.25rem;
            font-weight: 500;
            color: white;
            line-height: 1.7;
            margin: 0;
        }
    }


    /* ── Responsive ────────────────────────────────────── */

    @media screen and (max-width: 1279px) {
        .srv-v1-tabs {
            border-radius: 1.5rem;
            padding: 0.25rem;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.25rem;
        }

        .srv-v1-tab {
            border-radius: 4.375rem;
            height: auto;
            padding: 0.75rem 1.25rem;
        }
    }

    @media screen and (max-width: 699px) {
        .srv-v1-tab {
            font-size: 1rem;
            padding: 0.625rem 1rem;
        }
    }
}