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

@media screen and (min-width: 1280px) {
    .nv:has(.fly-wd) {
        position: static;
        --flx-gap: var(--grd-sp);
    }
    /* Make li static so the flyout anchors to the nav's container (.mn_, which has position: relative) */
    .nv li:has(.fly-wd) {
        position: static;
    }

    .fly-nv.fly-wd {
        max-width: none;
        min-width: 0;
        width: auto;
        max-height: none;
        overflow-y: auto;
        border-radius: 0 0 1rem 1rem;
        left: 0;
        right: 0;
        top: 100%;
        transform: none;
        background-color: var(--background);
    }

    /* Locations-only: its link grid runs edge-to-edge against the flyout
       background with no inset. Give it the same horizontal gutter the
       CTA card content already uses (pd_h-30) so the first column and
       every link sit fully inside the panel, without touching the other
       (unaffected) dropdowns. */
    .fly-nv.fly-wd.fly-wd-loc .fly-wd-inner {
        padding-inline: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5));
    }
}

.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;
    }
}