/* ============================================================
   Reusable gradient hero banner (.app-hero)

   Visual lifted from the Authority "cruscotto" hero (PANNELLO DI
   CONTROLLO) and de-namespaced so any page — home, Financial
   Assessment, future dashboards — can share it via the
   partials/_hero.html macro. Icon-library-agnostic (Font Awesome
   or Bootstrap Icons) because sizing is driven by .app-hero-icon.
   ============================================================ */

.app-hero {
    position: relative;
    border-radius: 1rem;
    color: #fff;
    padding: 1.6rem 1.8rem;
    background: linear-gradient(135deg, #0a1f3d 0%, #14365c 38%, #1f6f70 100%);
}

/* Gradient text title (white → light cyan), clipped to the glyphs. */
.app-hero h2 {
    margin: 0;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    background: linear-gradient(90deg, #fff 30%, #7dd3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.app-hero-icon {
    font-size: 2rem;
    line-height: 1;
}

/* Slow conic accent pan. Lives in its own clipped FX layer so the hero
   itself keeps overflow visible (any right-slot popover won't get clipped)
   while the shimmer stays inside the rounded corners. */
.app-hero-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.app-hero-fx::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg at 70% 30%,
                transparent 0deg, rgba(94, 234, 212, .14) 60deg,
                transparent 140deg, rgba(96, 165, 250, .12) 240deg, transparent 360deg);
    animation: appHeroPan 36s linear infinite;
}

/* Keep real content above the FX layer. */
.app-hero > :not(.app-hero-fx) {
    position: relative;
}

@keyframes appHeroPan {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app-hero-fx::before { animation: none; }
}