/* ============================================================
   style.css — A.R.I.F.I.S.S.
   Approccio: Mobile First
   Base: 320px (tutti i telefoni)
   Tablet: @media (min-width: 768px)
   Desktop: @media (min-width: 1024px)
   ============================================================ */


/* ============================================================
   1. RESET E BASE
   Azzeramento degli stili predefiniti del browser per avere
   una base uniforme su tutti i dispositivi.
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box; /* il padding non espande le dimensioni dell'elemento */
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* scorrimento fluido per i link ancorati */
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--testo);
    background-color: var(--bianco);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--azzurro);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
}


/* ============================================================
   2. VARIABILI CSS (Custom Properties)
   Definite una volta qui, usate in tutto il foglio.
   Per cambiare il colore primario del sito: cambia solo qui.
   ============================================================ */
:root {
    /* Colori principali */
    --blu-scuro:    #1B3A5C;  /* intestazioni, footer */
    --azzurro:      #2A6DB5;  /* link, accenti */
    --arancio:      #E05A1A;  /* bottoni CTA, evidenziazioni */
    --arancio-sc:   #C04A10;  /* hover sul CTA */

    /* Grigi e neutri */
    --bianco:       #FFFFFF;
    --grigio-cl:    #F7F6F2;  /* sfondi sezioni alternate */
    --grigio-bd:    #E2E0DB;  /* bordi */
    --grigio-txt:   #555555;  /* testo secondario */
    --testo:        #1A1A1A;  /* testo principale */

    /* Overlay slideshow */
    --overlay:      rgba(10, 20, 40, 0.55);

    /* Ombra */
    --ombra-sm:     0 2px 8px  rgba(0,0,0,0.08);
    --ombra-md:     0 4px 20px rgba(0,0,0,0.12);

    /* Raggio bordi */
    --raggio:       8px;
    --raggio-lg:    14px;

    /* Transizione standard */
    --trans:        all 0.3s ease;

    /* Larghezza massima contenuto */
    --max-w:        1140px;
}


/* ============================================================
   3. TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    color: var(--blu-scuro);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem;  }

p {
    margin-bottom: 1rem;
}

.testo-muted {
    color: var(--grigio-txt);
    font-size: 0.92rem;
}


/* ============================================================
   4. LAYOUT — CONTAINER
   Centrato, con padding laterale per mobile.
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  16px;
    padding-right: 16px;
}


/* ============================================================
   5. BOTTONI
   ============================================================ */
.btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: var(--raggio);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--trans);
    text-align: center;
    white-space: nowrap;
}

/* CTA principale — arancione */
.btn--primario {
    background-color: var(--arancio);
    color: var(--bianco);
    border-color: var(--arancio);
}
.btn--primario:hover,
.btn--primario:focus {
    background-color: var(--arancio-sc);
    border-color: var(--arancio-sc);
    text-decoration: none;
    color: var(--bianco);
}

/* Bottone secondario — contorno */
.btn--secondario {
    background-color: transparent;
    color: var(--bianco);
    border-color: var(--bianco);
}
.btn--secondario:hover {
    background-color: var(--bianco);
    color: var(--blu-scuro);
    text-decoration: none;
}

/* Bottone azzurro */
.btn--azzurro {
    background-color: var(--azzurro);
    color: var(--bianco);
    border-color: var(--azzurro);
}
.btn--azzurro:hover {
    background-color: var(--blu-scuro);
    border-color: var(--blu-scuro);
    text-decoration: none;
    color: var(--bianco);
}

/* Bottone piccolo */
.btn--sm {
    padding: 8px 18px;
    font-size: 0.85rem;
}

/* Bottone larghezza piena su mobile */
.btn--full {
    display: block;
    width: 100%;
}


/* ============================================================
   6. HEADER E NAVIGAZIONE
   Mobile: logo + hamburger + menu nascosto
   Desktop: logo + menu orizzontale
   ============================================================ */
.header {
    position: sticky; /* rimane in cima allo scroll */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--bianco);
    border-bottom: 1px solid var(--grigio-bd);
    box-shadow: var(--ombra-sm);
}

.header__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

/* Logo */
.header__logo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    color: var(--blu-scuro);
    text-decoration: none;
}
.header__logo strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--blu-scuro);
}
.header__logo span {
    font-size: 0.68rem;
    color: var(--grigio-txt);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Hamburger — visibile solo su mobile */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;    /* minimo 44px per usabilità touch */
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--raggio);
    transition: var(--trans);
}
.hamburger:hover {
    background-color: var(--grigio-cl);
}
.hamburger span {
    display: block;
    height: 2px;
    background-color: var(--blu-scuro);
    border-radius: 2px;
    transition: var(--trans);
}

/* Animazione hamburger → X quando il menu è aperto */
.hamburger.aperto span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.aperto span:nth-child(2) {
    opacity: 0;
}
.hamburger.aperto span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menu di navigazione — nascosto su mobile */
.nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background-color: var(--bianco);
    border-bottom: 1px solid var(--grigio-bd);
    box-shadow: var(--ombra-md);
    z-index: 999;
}

.nav.aperto {
    display: block;
}

.nav__lista {
    padding: 8px 16px 16px;
}

.nav__link {
    display: block;
    padding: 12px 8px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--testo);
    border-bottom: 1px solid var(--grigio-bd);
    transition: var(--trans);
}
.nav__link:hover {
    color: var(--azzurro);
    text-decoration: none;
    padding-left: 14px;
}

/* Ultimo elemento — bottone CTA nel menu */
.nav__link--cta {
    display: inline-block;
    margin-top: 12px;
    background-color: var(--arancio);
    color: var(--bianco) !important;
    border-radius: var(--raggio);
    border-bottom: none;
    padding: 12px 20px;
    text-align: center;
    width: 100%;
    font-weight: 600;
}
.nav__link--cta:hover {
    background-color: var(--arancio-sc);
    padding-left: 20px;
}


/* ============================================================
   7. SLIDESHOW
   Pannelli sovrapposti, visibilità gestita da JS con la
   classe .attivo. Transizione fade (opacity).
   ============================================================ */
.slideshow {
    position: relative;
    width: 100%;
    height: 70vw;        /* proporzionale su mobile */
    min-height: 300px;
    max-height: 600px;
    overflow: hidden;
    background-color: var(--blu-scuro);
}

/* Traccia — contenitore di tutte le slide */
.slideshow__traccia {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Singola slide — sovrapposta alle altre */
.slideshow__slide {
    position: absolute;
    inset: 0; /* shorthand per top/right/bottom/left: 0 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.9s ease;
    /* Slide senza foto: gradiente di fallback */
    background-color: var(--blu-scuro);
    background-image: linear-gradient(135deg, #1B3A5C 0%, #2A6DB5 100%);
}

/* Slide visibile */
.slideshow__slide.attivo {
    opacity: 1;
}

/* Overlay scuro sopra l'immagine per leggibilità del testo */
.slideshow__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay);
}

/* Contenuto testuale della slide */
.slideshow__contenuto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* testo in basso */
    padding: 24px 20px 36px;
    color: var(--bianco);
}

/* Etichetta piccola sopra il titolo */
.slideshow__categoria {
    display: inline-block;
    background-color: var(--arancio);
    color: var(--bianco);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    width: fit-content;
}

.slideshow__titolo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bianco);
    line-height: 1.2;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.slideshow__testo {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.88);
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* massimo 2 righe */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slideshow__prezzo {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 16px;
    margin-right: 12px;
}

/* Frecce prev/next */
.slideshow__freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--bianco);
    font-size: 1.1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--trans);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    z-index: 10;
}
.slideshow__freccia:hover {
    background: rgba(255,255,255,0.3);
}
.slideshow__freccia--prec { left: 10px; }
.slideshow__freccia--succ { right: 10px; }

/* Pallini di navigazione */
.slideshow__pallini {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.slideshow__pallino {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: var(--trans);
    padding: 0;
}
.slideshow__pallino.attivo {
    background: var(--bianco);
    width: 24px;
    border-radius: 4px;
}


/* ============================================================
   8. SEZIONI GENERALI
   ============================================================ */
.sezione {
    padding: 48px 0;
}

.sezione--grigia {
    background-color: var(--grigio-cl);
}

.sezione--blu {
    background-color: var(--blu-scuro);
    color: var(--bianco);
}
.sezione--blu h2,
.sezione--blu h3 {
    color: var(--bianco);
}

/* Intestazione di sezione centrata */
.sezione__header {
    text-align: center;
    margin-bottom: 36px;
}

.sezione__header h2 {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.sezione__header p {
    color: var(--grigio-txt);
    max-width: 600px;
    margin: 0 auto;
}

.sezione--blu .sezione__header p {
    color: rgba(255,255,255,0.75);
}

/* Linea decorativa sotto i titoli di sezione */
.sezione__header h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background-color: var(--arancio);
    margin: 12px auto 0;
    border-radius: 2px;
}


/* ============================================================
   9. CARD CORSI
   ============================================================ */
.griglia-corsi {
    display: grid;
    grid-template-columns: 1fr;  /* 1 colonna su mobile */
    gap: 20px;
}

.card-corso {
    background: var(--bianco);
    border-radius: var(--raggio-lg);
    border: 1px solid var(--grigio-bd);
    overflow: hidden;
    box-shadow: var(--ombra-sm);
    transition: var(--trans);
    display: flex;
    flex-direction: column;
}

.card-corso:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombra-md);
    border-color: var(--azzurro);
}

/* Foto del corso */
.card-corso__foto {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: var(--grigio-cl);
}

/* Placeholder se non c'è foto */
.card-corso__foto-placeholder {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, var(--blu-scuro) 0%, var(--azzurro) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 2.5rem;
}

.card-corso__corpo {
    padding: 18px;
    flex: 1;            /* cresce per riempire lo spazio */
    display: flex;
    flex-direction: column;
}

/* Badges modalità/diploma */
.card-corso__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    margin-right: 4px;
}
.badge--presenza { background: #E8F4FD; color: #1B5E99; }
.badge--online   { background: #E8F8EF; color: #1A6B3A; }
.badge--blended  { background: #FFF3E0; color: #8B4A00; }

.card-corso__titolo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--blu-scuro);
    margin-bottom: 8px;
    line-height: 1.3;
}

.card-corso__desc {
    font-size: 0.88rem;
    color: var(--grigio-txt);
    line-height: 1.55;
    margin-bottom: 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Piede della card con prezzo e bottone */
.card-corso__piede {
    border-top: 1px solid var(--grigio-bd);
    padding-top: 14px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.card-corso__prezzo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blu-scuro);
}
.card-corso__prezzo small {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--grigio-txt);
    display: block;
    line-height: 1;
}

/* Prossima data */
.card-corso__data {
    font-size: 0.8rem;
    color: var(--arancio);
    font-weight: 600;
    margin-bottom: 8px;
}
.card-corso__data::before {
    content: '📅 ';
}


/* ============================================================
   10. SEZIONE "PERCHÉ SCEGLIERE NOIS"
   Icone + testo in griglia
   ============================================================ */
.griglia-punti {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.punto {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.punto__icona {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 12px;
    background-color: rgba(42, 109, 181, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.punto__testo h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.punto__testo p {
    font-size: 0.88rem;
    color: var(--grigio-txt);
    margin: 0;
}


/* ============================================================
   11. BANNER CTA
   ============================================================ */
.banner-cta {
    background: linear-gradient(135deg, var(--blu-scuro) 0%, var(--azzurro) 100%);
    color: var(--bianco);
    padding: 48px 0;
    text-align: center;
}

.banner-cta h2 {
    color: var(--bianco);
    font-size: 1.6rem;
    margin-bottom: 12px;
}
.banner-cta h2::after { display: none; }

.banner-cta p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 24px;
    font-size: 1rem;
}

.banner-cta__bottoni {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}


/* ============================================================
   12. FOOTER
   ============================================================ */
.footer {
    background-color: var(--blu-scuro);
    color: rgba(255,255,255,0.8);
    padding: 48px 0 0;
    font-size: 0.9rem;
}

.footer__griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 36px;
}

.footer__logo {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--bianco);
    margin-bottom: 10px;
}

.footer__desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin-bottom: 0;
}

.footer__titolo {
    color: var(--bianco);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.footer__lista li {
    padding: 4px 0;
}

.footer__lista a {
    color: rgba(255,255,255,0.7);
    transition: var(--trans);
}
.footer__lista a:hover {
    color: var(--bianco);
    text-decoration: none;
}

.footer__contatto {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 6px 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.88rem;
}

.footer__contatto strong {
    color: var(--bianco);
}

/* Barra inferiore copyright */
.footer__barra {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

/* Pulsante WhatsApp fisso in basso a destra */
.whatsapp-fisso {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    z-index: 900;
    transition: var(--trans);
}
.whatsapp-fisso:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}
.whatsapp-fisso img {
    width: 30px;
    height: 30px;
}


/* ============================================================
   13. UTILITÀ
   ============================================================ */
.testo-centro   { text-align: center; }
.mt-1  { margin-top:    8px; }
.mt-2  { margin-top:   16px; }
.mt-3  { margin-top:   24px; }
.mb-1  { margin-bottom: 8px; }
.mb-2  { margin-bottom:16px; }
.mb-3  { margin-bottom:24px; }

/* Nasconde visivamente ma lascia accessibile agli screen reader */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}


/* ============================================================
   14. MEDIA QUERY — TABLET (768px e oltre)
   Da qui in poi, tutto ciò che cambia su schermi più grandi.
   ============================================================ */
@media (min-width: 768px) {

    /* Tipografia */
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.75rem; }

    /* Container */
    .container {
        padding-left:  24px;
        padding-right: 24px;
    }

    /* Header — nascondi hamburger, mostra nav orizzontale */
    .hamburger { display: none; }

    .nav {
        display: block !important; /* sempre visibile su tablet/desktop */
        position: static;
        background: none;
        border: none;
        box-shadow: none;
    }

    .nav__lista {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0;
    }

    .nav__link {
        padding: 8px 12px;
        font-size: 0.92rem;
        border-bottom: none;
        border-radius: var(--raggio);
        color: var(--testo);
    }
    .nav__link:hover {
        background-color: var(--grigio-cl);
        padding-left: 12px;
    }

    .nav__link--cta {
        background-color: var(--arancio);
        color: var(--bianco) !important;
        padding: 8px 18px;
        width: auto;
        margin-top: 0;
    }
    .nav__link--cta:hover {
        background-color: var(--arancio-sc);
        padding-left: 18px;
    }

    /* Slideshow */
    .slideshow {
        height: 55vw;
        max-height: 620px;
    }

    .slideshow__contenuto {
        padding: 36px 48px 48px;
        max-width: 600px;
    }

    .slideshow__titolo  { font-size: 2.2rem; }
    .slideshow__testo   { font-size: 1rem; -webkit-line-clamp: 3; }
    .slideshow__freccia { width: 48px; height: 48px; font-size: 1.3rem; }
    .slideshow__freccia--prec { left: 20px; }
    .slideshow__freccia--succ { right: 20px; }

    /* Griglia corsi: 2 colonne */
    .griglia-corsi {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Punti: 2 colonne */
    .griglia-punti {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Banner CTA */
    .banner-cta__bottoni {
        flex-direction: row;
        justify-content: center;
    }

    /* Footer: 2 colonne */
    .footer__griglia {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__barra {
        flex-direction: row;
        justify-content: space-between;
    }

    /* Sezioni */
    .sezione { padding: 64px 0; }
}


/* ============================================================
   15. MEDIA QUERY — DESKTOP (1024px e oltre)
   ============================================================ */
@media (min-width: 1024px) {

    /* Slideshow */
    .slideshow {
        height: 90vh;
        max-height: 700px;
    }

    .slideshow__titolo  { font-size: 2.8rem; }
    .slideshow__testo   { font-size: 1.05rem; max-width: 500px; }

    /* Griglia corsi: 3 colonne */
    .griglia-corsi {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Punti: 4 colonne */
    .griglia-punti {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Footer: 4 colonne */
    .footer__griglia {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}