/* 1. DEFINIZIONE DEI FONT (Carichiamo i file) */

/* Rapid Black (File .ttf) - Ora per i Titoli H1 */
@font-face {
    font-family: "Rapid-Black";
    src: url("../fonts/RapidST-BlackExtended.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

/* Rapid Bold (File .ttf) - Ora per i Sottotitoli H2 */
@font-face {
    font-family: "Rapid-Bold";
    src: url("../fonts/RapidST-BoldExtended.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

/* Diatype (File .otf) - Per tutto il resto */
@font-face {
    font-family: "Diatype";
    src: url("../fonts/ABCDiatype-Regular-Trial.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

/* NUOVO FONT: Rapid Medium (Per i tasti del menu) */
@font-face {
    font-family: "Rapid-Medium";
    src: url("../fonts/RapidST-MediumExtended.ttf") format("truetype");
    font-weight: 500; /* Medium corrisponde circa a 500 */
    font-style: normal;
}


/* 2. ASSEGNAZIONE GLOBALE (Qui applichiamo le regole) */

/* Regola base: tutto il testo normale usa Diatype */
body, p, span, li, a, div, .btn, button, input, textarea {
    font-family: "Diatype", sans-serif !important;
}

/* TITOLI PRINCIPALI (H1) -> Ora usano RAPID BLACK */
h1, .h1, .display-1, .display-2, .display-3 {
    font-family: "Rapid-Black", sans-serif !important; 
    text-transform: uppercase; 
}

/* SOTTOTITOLI (H2, H3, ecc) -> Ora usano RAPID BOLD */
h2, .h2, h3, .h3, h4, .h4, .display-4, .display-5, .display-6 {
    font-family: "Rapid-Bold", sans-serif !important;
    text-transform: uppercase;
}

/* Eccezione: Quadrato Rosso dei corsi (solitamente vuole il Black) */
/* Se vuoi che anche questo segua la regola degli H2, metti Rapid-Bold, 
   altrimenti lascialo Rapid-Black se deve essere molto "cicciotto" */
.box-rosso-facoltativo {
    font-family: "Rapid-Black", sans-serif !important;
}

/* GLOBAL */

body {
    -webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

.page-title {
font-family: "rapid-bold";
}

/* MEDIA QUERIES */

@media screen and (max-width: 992px) {

body {
    }

}

/* BLOCKS */

.blocks img {
    max-width: 100%;
    height: auto;
}

/* Sfondo dell'intera barra */
.custom-navbar {
    background-color: #3300FF !important; /* Blu elettrico di Figma */
    padding: 15px 50px !important;
}

/* Logo */
.logo-img {
    height: 50px; /* Regola in base al tuo file */
    width: auto;
}

.logo-text {
    color: white;
    font-weight: bold;
    font-size: 24px;
}

/* Stile dei bottoni bianchi (Didattica, Sede, ecc) */
.custom-nav-link {
    background-color: white !important;
    color: black !important;
    border-radius: 50px !important; /* Arrotondamento a pillola */
    padding: 8px 25px !important;
    margin-left: 15px;
    font-weight: 600;
    text-transform: none;
    font-family: sans-serif; /* Se hai un font specifico, inseriscilo qui */
    display: inline-block;
}

/* Stile specifico per il tasto News (Rosso) */
.nav-news {
    background-color: #FF3300 !important; /* Rosso di Figma */
    color: white !important;
}

/* Rimuove lo stile di default del breadcrumb per pulizia */
.breadcrumb {
    background: transparent;
    padding: 0;
}
.breadcrumb-item a {
    color: #3300FF;
    text-decoration: none;
}

/* --- FOOTER RED DESIGN --- */

.footer-red {
    background-color: #FF0000; /* Rosso puro come da immagine */
    color: black;
    font-family: 'Helvetica', 'Arial', sans-serif; /* Font pulito */
    padding: 0 40px; /* Spaziatura laterale */
}

/* Logo nel footer */
.footer-logo {
    max-width: 300px; /* Logo bello grande come nel design */
    height: auto;
}

/* Titoli delle colonne (Contatti, Indirizzi) */
.footer-text h4 {
    font-size: 1.5rem;
    font-weight: normal; /* Sembra regular nell'immagine */
    margin-bottom: 1rem;
}

/* Testo dei paragrafi */
.footer-text p {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* Link (email, tel) nel testo */
.footer-text a {
    color: black;
    text-decoration: underline;
}

/* Linea separatrice */
.footer-line {
    border-top: 1px solid black;
    opacity: 1; /* Rende la linea nera piena */
    margin: 0;
}

/* Parte bassa (Copyright e link piccoli) */
.bottom-links {
    font-size: 0.8rem; /* Scritta più piccola */
    opacity: 0.8;
}

.bottom-links a {
    color: black;
    text-decoration: none;
    margin-left: 5px;
}

/* Placeholder Social - Da sistemare con icone vere */
.social-icons a {
    font-weight: bold;
    font-size: 1.5rem;
    margin-right: 15px;
    text-decoration: none;
    border: 2px solid black;
    padding: 5px;
    border-radius: 5px;
}

/* Colori custom basati sul design */
.bg-yellow { background-color: #DFFF00; color: #3300FF; }
.bg-blue   { background-color: #3300FF; color: white; }
.bg-pink   { background-color: #FF3399; }
.bg-red    { background-color: #FF0000; }

.headline-xl {
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.05em;
}

/* Bottoni tipo "pillola" o "outline" del design */
.btn-pill {
    background: #3300FF;
    color: white;
    border-radius: 50px;
    padding: 5px 20px;
    text-decoration: none;
    display: inline-block;
}

.object-fit-cover { object-fit: cover; }

.btn-pill-pink {
    background-color: #FF3399; /* Rosa del tuo design */
    color: white;
    border-radius: 50px;
    padding: 4px 18px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    display: inline-block;
}

.btn-pill-pink:hover {
    background-color: #e62e8a;
    color: white;
}

/* Stile Titolo Archivio */
.archive-title {
    color: #FF3399; /* Rosa vivace come da Figma */
    font-size: 5rem;
    font-weight: 900;
    text-transform: none; /* Mantiene il maiuscolo/minuscolo del design */
    line-height: 1;
}

/* Griglia e Immagini */
.archive-card img {
    aspect-ratio: 3 / 4; /* Molte foto nel tuo design sono verticali tipo flyer */
    object-fit: cover;
    background-color: #000; /* Se l'immagine non copre tutto, lo sfondo è nero */
    transition: transform 0.3s ease;
}

.archive-card img:hover {
    transform: scale(1.02);
}

/* Linea di separazione */
hr.border-dark {
    border-top: 2px solid black !important;
}

.text-pink {
    color: #FF3399; /* Il rosa del titolo PERSONE */
}

.teacher-photo-wrapper {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.teacher-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* Rende le foto tonde come nel design */
}

h2 {
    font-size: 3rem;
    font-weight: 800;
}

.text-pink {
    color: #FF3399 !important; /* Il rosa acceso di PERSONE */
}

h1.display-1 {
    font-size: 5rem;
    letter-spacing: -2px;
}

h2 {
    font-size: 2.5rem;
}

hr {
    opacity: 1;
    border-width: 2px;
}

.bg-green {
    background-color: #ADFF2F; /* Regola il colore in base al tuo Figma */
}

.text-primary {
    color: #0000FF !important; /* Blu per i titoli nel box verde */
}

.btn-primary {
    background-color: #0000FF;
    border-color: #0000FF;
}

.btn-outline-primary {
    color: #0000FF;
    border-color: #0000FF;
}

/* Sfondo Blu */
.bg-blue {
    background-color: #0000FF !important;
}

/* Titolo e bottoni verde acido dentro il box blu */
.text-green, .btn-green {
    color: #ADFF2F !important;
}

.btn-green {
    background-color: #ADFF2F !important;
    color: #0000FF !important; /* Testo blu su fondo verde */
}

.btn-outline-green {
    border: 2px solid #ADFF2F !important;
    color: #ADFF2F !important;
}

.aspect-ratio-square {
    aspect-ratio: 1 / 1;
    transition: opacity 0.3s ease;
}

.aspect-ratio-square:hover {
    opacity: 0.8;
}

/* Colore Blu per i bottoni scarica */
.btn-primary {
    background-color: #0000FF !important;
    border: none;
    font-size: 0.8rem;
}

/* Stile del quadrato rosso nei corsi facoltativi */
.box-rosso-corso {
    width: 200px;
    height: 200px;
    background-color: #FF0000;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 20px;
    line-height: 1.2;
}

/* Linea di divisione tra i dettagli */
.linea-dettaglio {
    border-top: 1px solid #000;
    margin-top: 20px;
    padding-top: 10px;
}

.box-rosso-facoltativo {
    width: 220px;
    height: 220px;
    background-color: #FF0000;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'RapidST-Black', sans-serif;
    text-transform: uppercase;
    padding: 15px;
    font-size: 1.2rem;
    line-height: 1.1;
}

/* --- FIX PER ATTACCARE HOME ALLA TESTATA --- */

/* Rimuove qualsiasi margine sotto l'header/navbar */
header, nav, .navbar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Rimuove spazi sopra il main della home */
main.home-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Se usi Bootstrap, a volte il body ha un padding-top predefinito: azzeriamolo per sicurezza */
body {
    padding-top: 0 !important;
}

/* --- MENU HEADER (TASTI IN ALTO A DESTRA) --- */
.navbar-nav .nav-link, 
.custom-nav-link {
    font-family: "Rapid-Medium", sans-serif !important;
    font-weight: 500 !important; /* Forza l'uso del peso Medium */
    text-transform: uppercase; /* Assicura che siano maiuscoli, se vuoi */
    font-size: 14px; /* Aggiusta questo numero se li vuoi più grandi o piccoli */
}

/* --- STILE HEADER E NAVBAR --- */

/* 1. Spaziatura e Centratura del contenitore principale */
.custom-navbar {
    padding-top: 20px !important;    /* Spazio sopra */
    padding-bottom: 20px !important; /* Spazio sotto */
    display: flex !important;
    align-items: center !important;  /* Questo centra verticalmente tutto il contenuto */
}

/* 2. Assicura che la lista dei tasti sia centrata */
.navbar-nav {
    display: flex;
    align-items: center !important;
    height: 100%;
}

/* 3. Stile dei Tasti (Font Rapid Medium) */
.navbar-nav .nav-link, 
.custom-nav-link {
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 16px !important;      /* Grandezza tasti */
    text-transform: uppercase !important;
    padding-top: 0 !important;       /* Rimuove padding extra di bootstrap che sfasa il centro */
    padding-bottom: 0 !important;
    margin-left: 15px;               /* Distanza tra i tasti */
    display: flex;
    align-items: center;
}

/* 4. Reset del Logo per evitare che spinga giù */
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}

/* Se il logo è un'immagine, assicurati che non abbia margini strani */
.navbar-brand img {
    vertical-align: middle;
    max-height: 50px; /* O l'altezza che preferisci */
    width: auto;
}

/* --- STILE UNIFICATO PER TUTTI I TASTI (Rapid Medium) --- */

/* Selettore che prende tutti i tipi di bottoni usati nel sito */
.btn, 
.btn-custom, 
.btn-outline, 
.btn-pill, 
.btn-pill-pink, 
button, 
input[type="submit"],
.btn-sm {
    font-family: "Rapid-Medium", sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important; /* Li rende tutti maiuscoli */
    letter-spacing: 0.5px; /* Opzionale: dà un po' di aria alle lettere */
}

/* --- HEADER FISSO (STICKY) --- */
.custom-navbar {
    /* 1. Blocca la header in alto */
    position: sticky !important; 
    position: -webkit-sticky !important; /* Per Safari */
    top: 0 !important;
    
    /* 2. Assicura che stia SOPRA a tutto il resto (immagini, testi) */
    z-index: 9999 !important; 
    
    /* 3. Diamo un fondo bianco, altrimenti mentre scorri vedi il sito in trasparenza sotto le scritte */
    background-color: white !important; 
    
    /* Le vecchie regole di spaziatura e centratura che avevamo già messo */
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    width: 100%; /* Assicura che prenda tutta la larghezza */
}

/* --- HEADER FISSO (STICKY) CORRETTO --- */
.custom-navbar {
    /* 1. Blocca la header in alto */
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    
    /* 2. SFONDO BLU (Importante: rimettiamo il blu al posto del bianco) */
    background-color: blue !important; /* Usa il tuo blu esatto se diverso, es: #0000FF */
    
    /* Spaziatura */
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    width: 100%;
}

/* --- STILE TASTI DEL MENU (Pillole Bianche) --- */
.navbar-nav .nav-link, 
.custom-nav-link {
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    
    /* 3. RIMETTIAMO LO STILE A BOTTONE BIANCO */
    background-color: white !important;
    color: black !important;          /* Scritta nera */
    padding: 8px 25px !important;     /* Ridà la forma allungata/cicciotta */
    border-radius: 50px !important;   /* Arrotonda i bordi */
    
    margin-left: 15px; /* Distanza tra i tasti */
}

/* Il Logo (Assicurati che sia allineato) */
.navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
} 

/* --- STILE TASTI MENU (TRASPARENTI -> HOVER VERDE) --- */
.navbar-nav .nav-link, 
.custom-nav-link {
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    
    /* 1. STATO NORMALE: Solo scritta bianca, sfondo trasparente */
    background-color: transparent !important; 
    color: white !important;                 
    
    /* Manteniamo le dimensioni così il tasto non "salta" quando appare il colore */
    padding: 8px 25px !important;     
    border-radius: 50px !important;   
    margin-left: 15px; 

    /* Transizione fluida (l'effetto dura 0.3 secondi) */
    transition: all 0.3s ease !important; 
}

/* 2. STATO HOVER (Quando passi col mouse) */
.navbar-nav .nav-link:hover, 
.custom-nav-link:hover {
    background-color: #CFF665 !important; /* Sfondo Verde Acido */
    color: blue !important;               /* Scritta Blu */
    /* Nota: se vuoi il blu scuro esatto del sito, metti il codice hex al posto di 'blue' */
}

/* --- TASTO "SCOPRI DI PIÙ" (BOX GIALLO) --- */
.btn-custom {
    /* Colori richiesti */
    background-color: #4101F6 !important;  /* Sfondo Blu Elettrico */
    color: #CFF665 !important;            /* Scritta Verde Acido */
    
    /* Forma e Dimensioni */
    padding: 10px 35px !important;        /* Spazio interno (Alto/Basso - Destra/Sinistra) */
    border-radius: 50px !important;       /* Forma a pillola cerchiata */
    border: none !important;              /* Toglie bordi grigi standard */
    display: inline-block !important;     /* Assicura che la forma sia corretta */
    text-decoration: none !important;     /* Toglie la sottolineatura del link */
    
    /* Font (già impostato nella regola generale, ma ribadiamo per sicurezza) */
    font-family: "Rapid-Medium", sans-serif !important;
    text-transform: uppercase !important;
    
    /* Transizione per l'effetto mouse */
    transition: all 0.3s ease;
}

/* Opzionale: Quando passi sopra col mouse, scambia i colori (se ti piace) */
.btn-custom:hover {
    background-color: #CFF665 !important; /* Diventa Verde */
    color: #4101F6 !important;            /* Scritta Blu */
}

/* --- TASTI "MASTER" E "DOCENTI" (VERDE -> HOVER BLU) --- */
.btn-outline {
    /* 1. STATO NORMALE */
    background-color: #CFF665 !important; /* Sfondo Verde */
    color: #4101F6 !important;            /* Scritta Blu */
    border: 2px solid #CFF665 !important; /* Bordo Verde (per mantenere la grandezza costante) */
    
    /* Forma e Stile */
    padding: 10px 35px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: inline-block !important;
    
    /* Font */
    font-family: "Rapid-Medium", sans-serif !important;
    text-transform: uppercase !important;
    
    /* Transizione fluida */
    transition: all 0.3s ease !important;
}

/* 2. STATO HOVER (QUANDO PASSI IL MOUSE) */
.btn-outline:hover {
    background-color: #4101F6 !important; /* Sfondo Blu */
    color: #CFF665 !important;            /* Scritta Verde */
    border-color: #4101F6 !important;     /* Bordo Blu */
}

/* --- TASTI A PILLOLA (NEWS) --- */
.btn-pill {
    /* 1. Impedisce al testo di andare a capo */
    white-space: nowrap !important;
    
    /* 2. Colori (Sfondo Blu, Scritta Bianca) */
    background-color: #4101F6 !important;
    color: white !important;
    
    /* 3. Forma e Dimensioni */
    padding: 10px 30px !important;    /* Se serve più largo, aumenta 30px a 40px */
    border-radius: 50px !important;
    display: inline-flex !important;  /* Usa flex per centrare freccia e testo */
    align-items: center !important;
    text-decoration: none !important;
    border: none !important;
    
    /* 4. Font */
    font-family: "Rapid-Medium", sans-serif !important;
    text-transform: uppercase !important;
    font-size: 16px !important;       /* Riduci leggermente se ancora non ci sta */
    
    transition: all 0.3s ease;
}

/* Opzionale: Hover */
.btn-pill:hover {
    background-color: white !important;
    color: #4101F6 !important;
}

/* --- TASTI FILTRO PAGINA NEWS --- */
.btn-filter {
    background-color: #CFF665 !important; /* Base Verde Acido */
    color: #4101F6 !important;            /* Scritta Blu Elettrico */
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 12px !important;           /* Grandezza 12 */
    text-transform: uppercase !important;
    padding: 8px 20px !important;         /* Spaziatura interna */
    border-radius: 50px !important;       /* Arrotondati a pillola */
    text-decoration: none !important;
    display: inline-block !important;
    border: none !important;
    margin-right: 10px;                   /* Spazio tra i tasti */
    transition: all 0.3s ease;
}

.btn-filter:hover {
    /* Opzionale: effetto hover inverso */
    background-color: #4101F6 !important;
    color: #CFF665 !important;
}

/* --- STILI PAGINA SEDE --- */

/* Titolo Rosa */
.text-pink {
    color: #F238A7 !important;
}

/* Tasto Blu con Scritta Verde (Pagina Sede) */
.btn-blue-green {
    background-color: #4101F6 !important; /* Sfondo Blu */
    color: #CFF665 !important;            /* Scritta Verde */
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 12px !important;           /* Grandezza 12px */
    text-transform: uppercase !important;
    padding: 8px 25px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: inline-block !important;
    border: none !important;
    transition: all 0.3s ease;
}

.btn-blue-green:hover {
    background-color: #CFF665 !important; /* Inversione: Sfondo Verde */
    color: #4101F6 !important;            /* Scritta Blu */
}

/* --- SLIDER DOCENTI (Fix Layout) --- */
.docenti-slide {
    display: none !important; /* Nasconde tutto di default */
    animation: fadeIn 0.8s ease-in-out; 
}

.docenti-slide.active {
    display: flex !important; /* Mostra solo il gruppo attivo */
    flex-wrap: wrap;          /* Assicura che stiano in griglia */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Stile per i nomi dei docenti */
.docente-name {
    font-family: "Rapid-Medium", sans-serif !important;
    text-transform: uppercase !important;
    font-size: 20px !important; /* Regola se necessario */
    margin-top: 15px;
    color: black !important;
}

/* --- STILI PAGINA MERCH --- */

/* Tasti Merch (Sfondo Verde #CFF665, Scritta Blu #4101F6) */
.btn-merch {
    background-color: #CFF665 !important;
    color: #4101F6 !important;
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    padding: 8px 25px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: inline-block !important;
    border: none !important;
    margin-right: 15px; /* Spazio tra i tasti */
    transition: all 0.3s ease;
}

.btn-merch:hover {
    background-color: #4101F6 !important;
    color: #CFF665 !important;
}

/* --- GRIGLIA FOTO MERCH (Più piccole) --- */
.merch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Colonne */
    gap: 20px;
    padding-bottom: 50px;
}

.merch-item {
    height: 250px; /* MODIFICATO: Era 400px, ora è più piccolo */
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease; /* Animazione più scattante per il cambio veloce */
}

.merch-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Regole Layout "Mosaico" ricalcolate per le nuove dimensioni */

/* La 1° foto (Alta): 2 righe (250 + 250 + 20 gap) = 520px */
.merch-item:nth-child(1) { 
    grid-row: span 2; 
    height: 520px; 
} 

/* La 4° foto (Larga): occupa 2 colonne */
.merch-item:nth-child(4) { 
    grid-column: span 2; 
}

/* --- GRIGLIA FLYER / SETTIMANA --- */
.flyer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Colonne esatte */
    gap: 30px; /* Spazio tra i box */
    padding-bottom: 50px;
}

.flyer-item {
    height: 600px; /* Altezza fissa */
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0; 
    transition: opacity 0.5s ease;
}

.flyer-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- TASTI DISCOTECA (Rossi) --- */
.btn-club {
    display: block;
    width: 100%;
    background-color: #FF0000; /* Rosso acceso */
    color: white !important;
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 20px !important; /* Un po' più grandi come nella foto */
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    border-radius: 50px; /* A pillola */
    text-decoration: none;
    margin-top: 15px; /* Spazio tra foto e tasto */
    transition: all 0.3s ease;
}

.btn-club:hover {
    background-color: black; /* Effetto hover (opzionale) */
    color: white !important;
}

/* Griglia Eventi */
.eventi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Colonne */
    gap: 40px; /* Spazio abbondante tra le card */
    padding-bottom: 80px;
}

/* --- TASTI BOX VERDE (Didattica) --- */
.btn-green-box {
    display: inline-block;
    background-color: #4101F6 !important; /* Sfondo Blu */
    color: #CFF665 !important;             /* Scritta Verde */
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 10px 30px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    border: 2px solid #4101F6 !important; /* Bordo Blu per mantenere dimensione al cambio */
    transition: all 0.3s ease;
    margin-right: 15px; /* Spazio tra i tasti */
    margin-top: 20px;
}

.btn-green-box:hover {
    background-color: #CFF665 !important; /* Sfondo Verde */
    color: #4101F6 !important;             /* Scritta Blu */
    border-color: #4101F6 !important;
}

/* --- TASTI FOOTER DIDATTICA (Blu scuro -> Verde acido) --- */
.btn-didattica-footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4101F6 !important; /* Blu scuro */
    color: #CFF665 !important;             /* Verde acido */
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 10px 30px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    border: 2px solid #4101F6 !important;
    transition: all 0.3s ease;
    margin-right: 15px;
    margin-bottom: 10px; /* Per sicurezza su mobile */
}

.btn-didattica-footer:hover {
    background-color: #CFF665 !important; /* Diventa Verde */
    color: #4101F6 !important;             /* Scritta Blu */
    border-color: #4101F6 !important;     /* Bordo resta Blu */
}

/* --- TASTI FOOTER DIDATTICA --- */
.btn-didattica-footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4101F6 !important;
    color: #CFF665 !important;
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 16px !important; /* MODIFICATO: Grandezza 16px */
    text-transform: uppercase !important;
    padding: 10px 30px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    border: 2px solid #4101F6 !important;
    transition: all 0.3s ease;
    margin-right: 15px;
    margin-bottom: 10px;
}

.btn-didattica-footer:hover {
    background-color: #CFF665 !important;
    color: #4101F6 !important;
    border-color: #4101F6 !important;
}

/* --- TASTI FOOTER MASTER (Verde acido -> Blu scuro) --- */
.btn-master-footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #CFF665 !important; /* Sfondo Verde */
    color: #4101F6 !important;             /* Scritta Blu */
    font-family: "Rapid-Medium", sans-serif !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    padding: 10px 30px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    border: 2px solid #CFF665 !important;
    transition: all 0.3s ease;
    margin-right: 15px;
    margin-bottom: 10px;
}

.btn-master-footer:hover {
    background-color: #4101F6 !important; /* Diventa Blu */
    color: #CFF665 !important;             /* Scritta Verde */
    border-color: #CFF665 !important;     /* Bordo resta Verde */
}

/* --- FIX GENERALE PER DISPOSITIVI MOBILE (Sotto i 768px) --- */
@media (max-width: 768px) {

    /* Reset dei contenitori fissi */
    [style*="width: 1400px"], 
    [style*="width: 914px"],
    .centered-content,
    .content-wrapper,
    .centered-block {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Titoli Rosa (H1) */
    h1[style*="font-size: 60px"], 
    .headline-xl {
        font-size: 35px !important;
        line-height: 1.1 !important;
    }

    /* Sottotitoli Neri (H2) */
    h2[style*="font-size: 40px"],
    h2[style*="font-size: 50px"] {
        font-size: 28px !important;
        white-space: normal !important; /* Permette al testo di andare a capo */
    }

    /* Sidebar che diventano testi normali sopra al contenuto */
    [style*="position: absolute; left: 0; top: 0; width: 350px"],
    [style*="position: absolute; left: -400px"] {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        margin-bottom: 20px !important;
    }

    /* Rimuove i margini enormi a sinistra (usati per far spazio alle sidebar) */
    [style*="margin-left: 400px"] {
        margin-left: 0 !important;
    }

    /* Griglie delle News e dei Corsi */
    .info-grid-row, .row {
        flex-direction: column !important; /* Stack verticale invece che orizzontale */
    }

    .info-item {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 10px;
    }

    /* Home Page: Blocchi colorati (Didattica, Sede, ecc) */
    .col-md-6[style*="height: 450px"] {
        height: auto !important;
        padding: 40px 20px !important;
    }

    /* Box Iscrizione e Corso Singolo */
    .info-block-container [style*="max-width: 800px"] {
        max-width: 100% !important;
    }

    /* Immagini e video */
    img {
        height: auto !important;
    }

    /* Navbar (Header) */
    .box-allineato {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* --- TABLET (Sotto i 1024px) --- */
@media (max-width: 1024px) {
    /* Qui mettiamo le modifiche per iPad/Tablet */
}

/* --- MOBILE STANDARD (Sotto i 768px) --- */
@media (max-width: 768px) {
    /* Qui iniziamo a impilare le colonne verticalmente */
}

/* --- MOBILE STRETTO (Sotto i 430px - Il tuo target) --- */
@media (max-width: 430px) {
    /* Qui rimpiccioliamo i font giganti e sistemiamo i dettagli fini */
}

/* Regole valide per TUTTE le pagine su Mobile (W430) */
@media (max-width: 430px) {

    /* 1. TITOLI GIGANTI (H1 Rosa) */
    /* Da 60px passiamo a circa 32px/35px per non farli uscire */
    h1, .headline-xl {
        font-size: 35px !important;
        line-height: 1.1 !important;
    }

    /* 2. SOTTOTITOLI (H2) */
    h2, .title-huge {
        font-size: 28px !important;
    }

    /* 3. PARAGRAFI (Diatype) */
    /* Da 24px scendiamo a 18px o 20px per lo smartphone */
    p, .testo-dettaglio, .intro-text-custom {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    /* 4. COLONNE BOOTSTRAP */
    /* Forziamo le righe a diventare colonne verticali */
    .row {
        display: flex;
        flex-direction: column !important;
    }
    
    .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9 {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 5. GESTIONE SIDEBAR (Quella spinta a 400px) */
    /* Se avevi un margine a sinistra per far spazio alla sidebar, qui lo azzeriamo */
    [style*="margin-left: 400px"] {
        margin-left: 0 !important;
        margin-top: 20px !important;
    }

    /* 6. IMMAGINI */
    img {
        height: auto !important; /* Mantiene le proporzioni corrette */
    }
}

/* --- TASTI FOOTER CTA (SCALABILI E CON HOVER INVERTITO) --- */
    .cta-buttons-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important; /* Li tiene affiancati come i tasti didattica */
        gap: clamp(5px, 1.2vw, 15px);
        margin-top: 30px;
    }

    .btn-cta-blue {
        display: inline-flex !important;
        width: fit-content !important;
        background-color: #4101F6; /* Blu */
        color: #CFF665 !important; /* Verde */
        border: 2px solid #4101F6 !important; /* Bordo blu per evitare scatti al passaggio */
        border-radius: 50px;
        text-transform: uppercase;
        font-family: 'Rapid-Medium', sans-serif !important;
        text-decoration: none;
        transition: all 0.3s ease;
        align-items: center;
        justify-content: center;
        white-space: nowrap;

        /* STESSA LOGICA GRADUALE DEI TASTI DIDATTICA */
        font-size: clamp(9px, 1.2vw, 16px) !important; 
        padding: clamp(6px, 1vw, 12px) clamp(15px, 2.5vw, 35px) !important;
    }

    /* EFFETTO HOVER INVERTITO */
    .btn-cta-blue:hover {
        background-color: #CFF665 !important; /* Sfondo diventa Verde */
        color: #4101F6 !important;           /* Testo diventa Blu */
    }