/* Services V6 — Accordion service list */
.srv.v6 {
    /* Section heading (h4 → fnt_t-1) — Bayon 100px / lh 0.8 / mixed case */
    --fnt-t-1-tt: none;
    --fnt-t-1-lh: 0.8;

    /* Item title (fnt_t-itm) — Bayon 40px / lh 1 / mixed case (default uppercase) */
    --fnt-t-itm-tt: none;
    --fnt-t-itm-lh: 1;

    /* Native <details> open/close animation (mirrors faq-tools.css; scoped to .srv.v6 so faq-tools.css isn't pulled in) */
    details {
        interpolate-size: allow-keywords;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    details::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
    }

    details[open]::details-content {
        height: auto;
    }

    /* Accordion list — 10px gap between items */
    .srv-v6-lst {
        gap: 0.56rem;
    }

    /* Card chrome — Figma 20px radius */
    .srv-v6-itm {
        --bdr-rds-crd: 1.11rem;
    }

    --srv-v6-open-fg: var(--white);

    &[data-colors$="-dark"] {
        --srv-v6-open-fg: var(--black);
    }

    .srv-v6-itm > details[open] {
        background-color: var(--callout);
        color: var(--srv-v6-open-fg);
        --accent: var(--srv-v6-open-fg);

        .fnt_t-itm {
            --title-color: var(--srv-v6-open-fg);
        }
    }

    @media (hover: hover) and (pointer: fine) {
        details:is(:hover, :focus-visible) {
            background-color: var(--callout);
            color: var(--srv-v6-open-fg);
            --accent: var(--srv-v6-open-fg);

            .fnt_t-itm {
                --title-color: var(--srv-v6-open-fg);
            }
         }
    }

    /* Summary row */
    .srv-v6-smy {
        cursor: pointer;
        list-style: none;
        gap: 1.33rem;
    }

    .srv-v6-smy::-webkit-details-marker {
        display: none;
    }

    /* Title takes remaining space */
    .srv-v6-ttl {
        flex: 1 1 auto;
    }

    /* Yellow service icon (40px) */
    .srv-icn {
        color: var(--buttons);
        font-size: 2.22rem;
        line-height: 1;
        flex: 0 0 auto;
    }

    /* Plus / X toggle icons — swap on open */

    .tggl {
        flex-shrink: 0;
        width: 3rem;
        height: 3rem;

        svg {
            width: 100%;
            height: 100%;
        }

        .tb-open {
            display: block;
        }

        .tb-close {
            display: none;
        }
    }

    details[open] .tggl {
        .tb-open {
            display: none;
        }

        .tb-close {
            display: block;
            transform: rotate(45deg);
        }
    }

    /* Edge radii — only first item rounds top, only last rounds bottom */
    .srv-v6-itm:not(:first-child) > .crd {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .srv-v6-itm:not(:last-child) > .crd {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Desktop overrides — Figma title 40px, summary 42×60 padding */
    @media screen and (min-width: 1280px) {
        & {
            --fnt-t-itm-s: 2.22rem;
        }

        .srv-v6-itm > details > .srv-v6-smy {
            padding: 2.33rem 3.33rem;
        }

        .srv-v6-itm > details > .srv-v6-bdy {
            padding-inline: 3.33rem;
            padding-bottom: 2.33rem;
        }
    }
}