/* -- Wide flyout with CTA card ------------------------------- */

@media screen and (min-width: 1280px) {
    .nv:has(.fly-wd) {
        position: static;
        --flx-gap: 5.8rem;
    }
    /* Make li static so the flyout anchors to the nav (which has position: relative) */
    .nv li:has(.fly-wd) {
        position: static;
    }

    .fly-nv.fly-wd {
        max-width: none;
        min-width: 0;
        width: var(--vw_);
        max-height: none;
        overflow-y: visible;
        border-radius: 0 0 1rem 1rem;
        left: calc(-1 * (var(--shf-off-a) / 2) - 1px);
        right: 0;
        top: 100%;
        transform: none;
        background-color: var(--background);

        /* Scroll the content container, not the full-width panel — the panel spans 100vw,
           so its scrollbar would sit under the page scrollbar and never be visible */
        .fly-wd-inner {
            max-height: calc(100dvh - 20rem);
            overflow-y: auto;
            padding-right: 0.6rem;

            /* Brand-colored thumb on a light track so it reads as a scrollbar */
            &::-webkit-scrollbar-thumb {
                background-color: var(--link-color);
            }

            &::-webkit-scrollbar-thumb:hover {
                background-color: var(--link-hover);
            }

            &::-webkit-scrollbar-track {
                background-color: hsl(from var(--link-color) h s l / 0.15);
            }
        }
    }
}

.fly-nv.fly-wd {
   

    .fly-wd-links {
        @media screen and (min-width: 1500px) {
            
            width: calc(75% - (var(--flx-gap) / 2));
        }
        column-gap: var(--flx-gap);
        --itm-w: calc( var(--itm-val) * 1% - ( var(--flx-gap) * ( (100 - var(--itm-val)) * .01 ) ) );
    }

    .fly-wd-cta {
        @media screen and (min-width: 1500px) {
        width: calc(25% - (var(--flx-gap) / 2));
        }
    }

    .fly-wd-cta-img {
        border-radius: 1rem 1rem 0 0;
        aspect-ratio: 3 / 1;
        object-fit: cover;
        width: 100%;
        display: block;
    }
}