/* ===== Reusable CTA submenus ===== */
.vi-cta-accordion {
    margin: 18px 0 6px;
}

.vi-wrap-narrow {
    max-width: 980px;
    margin-inline: auto;
    padding-inline: 0;
}

.vi-cta-panel[hidden] {
    display: none !important;
}

.vi-cta-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

/* each row */
.vi-cta-link {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    /* icon | title | optional pill */
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #E9EBED;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: #021B32;
    box-shadow: 0 1px 0 rgba(233, 235, 237, .6);
}

.vi-cta-link:hover {
    background: #F7F9FC;
    border-color: #dfe3e7;
}

.vi-cta-link img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}

.vi-cta-link-title {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    color: #021B32;
}

/* pill for “Popular” */
.vi-pill {
    justify-self: end;
    display: inline-block;
    line-height: 1;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
}

.vi-pill-popular {
    background: #FFE168;
    color: #042747;
}

/* Mobile */
@media (max-width: 560px) {
    .vi-cta-link {
        grid-template-columns: 28px 1fr auto;
        padding: 10px 12px;
    }

    .vi-cta-link img {
        width: 28px;
        height: 28px;
    }

    .vi-cta-link-title {
        font-size: 14px;
    }
}

/* ---- (keeps your CTA button visuals from earlier) ----
   Apply: 10px 32px #F9C90A; Extend: #DDE7F3 #021B32  */
.vi-single-post .vi-cta-actions {
    gap: 8px;
}

.vi-single-post .vi-btn-cta {
    padding: 10px 32px;
    background: #F9C90A;
    color: #021B32;
    border-color: #F9C90A;
}

.vi-single-post .vi-btn-cta:hover {
    filter: brightness(.98);
}

.vi-single-post .vi-btn-ghost {
    padding: 10px 32px;
    background: #DDE7F3;
    color: #021B32;
    border-color: #DDE7F3;
}

.vi-single-post .vi-btn-ghost:hover {
    background: #cfdced;
    border-color: #cfdced;
}