/* =========================================================================
   Hero carousel — Home pubblica Formadora
   Palette brand: navy #102241 / #0d2857, giallo #FFB52F, arancio #E5631F
   Sostituisce l'hero statico (.SubHeader) mantenendo lo stile del brand.
   ========================================================================= */

.hero {
    position: relative;
    width: 100%;
    height: clamp(460px, calc(100vh - 160px), 720px);
    overflow: hidden;
    border-radius: 0;
    background: radial-gradient(120% 140% at 12% 0%, #ffffff 0%, #f4f7fc 55%, #eef2fa 100%);
    isolation: isolate;
}

/* Il testo dell'hero resta allineato al container del sito; l'hero è full-bleed */
.hero .container {
    position: relative;
    z-index: 2;
}

/* Motivo lampadina del brand, sfumato sullo sfondo */
.hero__lamp {
    position: absolute;
    left: -60px;
    top: 6%;
    width: 320px;
    height: 320px;
    background: url(../images/Home/Lampadina.svg) no-repeat center / contain;
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
    animation: heroLampFloat 9s ease-in-out infinite;
}

@keyframes heroLampFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(-2deg); }
}

/* ---- Slides ------------------------------------------------------------- */
.hero__track {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    transition: opacity .7s ease, transform .9s ease, visibility 0s linear .7s;
    will-change: opacity, transform;
}

    .hero__slide.is-active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        transition: opacity .7s ease, transform 6s ease, visibility 0s;
    }

/* Immagine di slide con parallasse */
.hero__media {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 46%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 1;
}

.hero__img {
    height: 92%;
    max-width: 100%;
    object-fit: contain;
    transform: translate3d(0, 0, 0);
    transition: transform .3s ease-out;
    will-change: transform;
}

/* ---- Contenuto testuale ------------------------------------------------- */
.hero__content {
    position: relative;
    z-index: 2;
    max-width: 58%;
}

.hero__eyebrow {
    display: inline-block;
    font-family: 'Aristotelica', 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #E5631F;
    background: rgba(255, 181, 47, .16);
    padding: 6px 14px 0;
    border-radius: 999px;
    margin-bottom: 18px;
}

.hero__title {
    font-family: 'Aristotelica', 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 52px;
    line-height: .98;
    color: #102241;
    letter-spacing: .3px;
    margin: 0 0 12px;
    max-width: 16ch;
}

.hero__subtitle {
    font-family: 'Aristotelica', 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.25;
    color: #FFB52F;
    margin: 0 0 22px;
    max-width: 40ch;
}

.hero__cta .rz-button {
    box-shadow: 0 10px 24px rgba(16, 34, 65, .18);
}

/* Animazione d'ingresso, con stagger sui figli della slide attiva */
.hero__anim {
    opacity: 0;
    transform: translateY(26px);
}

.hero__slide.is-active .hero__anim {
    animation: heroReveal .7s cubic-bezier(.22, .61, .36, 1) forwards;
}

.hero__slide.is-active .hero__eyebrow { animation-delay: .10s; }
.hero__slide.is-active .hero__title { animation-delay: .22s; }
.hero__slide.is-active .hero__subtitle { animation-delay: .34s; }
.hero__slide.is-active .hero__cta { animation-delay: .46s; }

@keyframes heroReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Controlli: frecce -------------------------------------------------- */
.hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #102241;
    box-shadow: 0 6px 18px rgba(16, 34, 65, .16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .hero__nav:hover {
        background: #FFB52F;
        color: #102241;
        transform: translateY(-50%) scale(1.08);
    }

    .hero__nav:focus-visible {
        outline: 3px solid #102241;
        outline-offset: 2px;
    }

.hero__nav--prev { left: 16px; }
.hero__nav--next { right: 16px; }

/* ---- Controlli: indicatori --------------------------------------------- */
.hero__dots-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    z-index: 5;
}

.hero__dots {
    display: flex;
    gap: 10px;
}

.hero__dot {
    width: 34px;
    height: 5px;
    border: none;
    border-radius: 999px;
    background: rgba(16, 34, 65, .18);
    cursor: pointer;
    padding: 0;
    transition: background .3s ease, width .3s ease;
}

    .hero__dot.is-active {
        width: 54px;
        background: linear-gradient(90deg, #FFB52F 0%, #E5631F 100%);
    }

    .hero__dot:focus-visible {
        outline: 2px solid #102241;
        outline-offset: 3px;
    }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 992px) {
    .hero__content { max-width: 78%; }
    .hero__media { width: 40%; opacity: .5; }
    .hero__title { font-size: 42px; }
}

@media (max-width: 768px) {
    .hero {
        height: clamp(420px, 78vh, 560px);
        border-radius: 0;
    }
    .hero__media { display: none; }
    .hero__content { max-width: 100%; text-align: center; }
    .hero__title { font-size: 34px; max-width: none; }
    .hero__subtitle { font-size: 20px; }
    .hero__lamp { width: 200px; height: 200px; opacity: .18; }
    .hero__dots-wrap .container { display: flex; justify-content: center; }
    .hero__nav { width: 40px; height: 40px; font-size: 18px; }
}

/* Rispetta le preferenze di riduzione del movimento */
@media (prefers-reduced-motion: reduce) {
    .hero__lamp,
    .hero__slide.is-active .hero__anim { animation: none; }
    .hero__anim { opacity: 1; transform: none; }
    .hero__slide { transition: opacity .3s ease; transform: none; }
    .hero__img { transition: none; }
}