/*  The page hero: the navy band every back-office page opens with (see the Finance hero
    convention). The gradient is deliberately fixed - the same in light and dark mode - and the
    content below it keeps using the --vz-* tokens.

    <div class="nx-hero">
        <span class="nx-hero-icon"><i class="ri-..."></i></span>
        <div class="nx-hero-text"><h3>Title</h3><p>One-line description.</p></div>
        <div class="nx-hero-actions"> optional buttons (btn btn-light / btn-outline-light) </div>
    </div>
    or, with no buttons: <partial name="_PageHero" model='new PageHeroDto("Title", "Description", "ri-...")' /> */
.nx-hero {
    background: linear-gradient(135deg, #0a1e3c 0%, #0f2f5f 100%);
    color: #fff; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; position: relative; overflow: hidden;
}
.nx-hero::after {
    content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, .22), transparent 65%); pointer-events: none;
}
.nx-hero-icon {
    width: 52px; height: 52px; border-radius: .9rem; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.6rem;
}
.nx-hero-text { flex: 1 1 22rem; min-width: 0; position: relative; z-index: 1; }
.nx-hero-text h3, .nx-hero-text h4 { color: #fff; margin: 0 0 .25rem; font-weight: 700; }
.nx-hero-text p { margin: 0; opacity: .78; max-width: 50rem; }
.nx-hero-eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7fdcec; font-weight: 700; margin-bottom: .2rem; }
.nx-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 1; }
@media (max-width: 575.98px) { .nx-hero { padding: 1.1rem; } .nx-hero-icon { width: 44px; height: 44px; font-size: 1.35rem; } }