/* SITO_GIONA/static/css/02_components.css */

/* ===================================== */
/* 1. GRIGLIE CARD (3D Glassmorphism) */
/* ===================================== */

/* Necessario per il 3D effect sul contenitore */
.process-grid, .pillars-grid, .case-study-grid, .education-skills-grid {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Stile comune per TUTTE le Card (3D/Glass) */
.process-card, .pillar-card, .experience-card, .project-card, .education-skill-card, .contact-card {
    padding: 30px;
    border-radius: 15px; 
    text-align: left;
    
    background-color: var(--color-glass-bg);
    border: 1px solid var(--color-glass-border);
    backdrop-filter: blur(10px); 
    
    transform: translateZ(0); 
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
    
    /* Variabili CSS per la rotazione JavaScript */
    --rX: 0deg; 
    --rY: 0deg;
    transform-style: preserve-3d;
    transform: translateZ(0);
}

.process-card:hover, .pillar-card:hover, .experience-card:hover, .project-card:hover, .education-skill-card:hover {
    border-color: var(--color-neon-magenta);
    box-shadow: 0 0 15px var(--color-hover-glow), 0 15px 40px rgba(0, 0, 0, 0.6);

    /* Aumentato il sollevamento e Z-index per garantire che sia sopra la sezione */
    transform: translateY(-12px) rotateX(var(--rX)) rotateY(var(--rY)) translateZ(20px); 

    /* CRITICO: Aumenta la priorità per non essere tagliato da schede vicine o bordi */
    z-index: 100; 
}

.process-grid, .pillars-grid, .experience-grid, .case-study-grid, .education-skills-grid {
    padding-top: 20px; 
    padding-bottom: 20px;
    margin-top: 1rem;
}

/* Stile Icone e Testo */
.process-card h3, .pillar-card h3 {
    font-size: 1.4rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: white;
}
.process-icon, .pillar-icon {
    width: 32px;
    height: 32px;
    color: var(--color-neon-magenta);
    filter: drop-shadow(0 0 5px var(--color-neon-magenta));
}

/* Dettagli Liste */
.skills-list, .acquired-skills-list {
    list-style-type: none; padding-left: 0; margin-top: 15px; color: #AAA; font-size: 0.95rem;
}
.acquired-skills-list .list-icon {
    width: 16px; height: 16px; margin-right: 10px; margin-top: 2px;
    color: var(--color-neon-blue); filter: drop-shadow(0 0 1px var(--color-neon-blue));
}
.skills-list li::before { content: none; } /* Rimuovi pallini vecchi */


/* ===================================== */
/* 2. ESPERIENZE 360° (Dettagli) */
/* ===================================== */

/* Assicurati che l'Impact Text (la descrizione) abbia buon contrasto */
.experience-card .project-impact {
    color: #CCC; /* Grigio chiaro leggibile */
    font-weight: 400;
    line-height: 1.4;
}

/* Regola la spaziatura della sezione per un migliore respiro generale */
.experience-card .card-content-wrap {
    flex-grow: 1; 
    margin-bottom: 20px; /* Più spazio prima del link Dettagli */
}

/* Stile specifico per la Card Esperienze (Flexbox per Allineamento Verticale) */
.experience-card {
    height: 420px;
    min-height: initial;
    text-align: left;
    /* Aumentato il padding superiore e laterale per più respiro */
    padding: 40px 30px 30px 30px; 

    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    overflow: visible;
}

/* Tag Neon (assicurati che sia sempre in cima con un margine positivo) */
.experience-card .neon-badge {
    margin-bottom: 10px;
    margin-top: -10px; /* Alza leggermente il badge per allinearsi al box */
}

/* Sposta il titolo e il tag leggermente più in basso per evitare il taglio */
.experience-card h3 {
    margin-top: 5px; /* Aggiunge un piccolo spazio tra il tag e il titolo */
}

/* Container per Ruolo e Periodo: Rimosso Flex orizzontale */
.card-role-details {
    display: block; 
    margin-top: 5px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

/* Ruolo (diventa riga singola) */
.role-tag {
    display: block; 
    margin-bottom: 4px; /* Spazio sotto il ruolo */
    font-weight: 700;
    color: var(--color-neon-blue); 
}

/* Periodo (diventa riga singola) */
.period {
    display: block; 
    margin-bottom: 10px; /* Spazio prima della sezione Location */
    font-weight: 500;
    color: #AAA;
    font-size: 0.9rem;
}

/* Stile per i gruppi di Ruolo e Periodo (Incolonnato) */
.role-period-group {
    display: block; /* Contenitore verticale */
    text-align: left;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Separatore */
    margin-bottom: 15px;
}

.role-detail-item, .period-detail-item {
    display: block; /* Garantisce che siano su righe separate */
    font-size: 0.95rem;
    margin-bottom: 4px; 
}

.role-tag, .period-text {
    font-weight: 700;
    color: var(--color-neon-blue);
}

/* Stile per i tag (Hash) */
.tag-list {
    margin-top: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-list .hashtag {
    font-size: 0.75rem;
    font-weight: 300;

    /* NUOVO: Colore scuro e discreto (Inverti il Neon) */
    color: var(--color-neon-magenta); /* Testo Magenta */
    background-color: rgba(192, 96, 255, 0.1); /* Sfondo molto scuro */
    border: 1px solid rgba(192, 96, 255, 0.3); /* Bordo sottile */

    padding: 3px 6px;
    border-radius: 3px;
}

/* Dettagli che compongono la riga: Ruolo, Periodo */
.experience-card .role-tag, 
.experience-card .period {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-neon-blue); /* Forza l'azzurro su Ruolo e Periodo */
    text-shadow: 0 0 3px rgba(0, 191, 255, 0.3);
}

/* Stile per i tag aziendali in alto (Welfare, Governance, Comunicazione) */
.experience-card .category-tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-neon-magenta); /* Usa il Magenta per la Categoria per contrastare il titolo Blue */
    border: 1px solid var(--color-neon-magenta);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: inline-block;
}

.experience-card:hover {
    transform: translateY(-8px) rotateX(var(--rX)) rotateY(var(--rY)) translateZ(10px);
}

.location-detail {
    margin-top: 10px; margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 15px; font-size: 0.9rem;
}
.location-text, .modality-text {
    display: flex; align-items: center; color: var(--color-neon-blue); font-weight: 500;
    text-shadow: 0 0 2px rgba(0, 191, 255, 0.3);
}
.detail-icon {
    width: 14px; height: 14px; color: var(--color-neon-blue); margin-right: 5px;
}
.project-impact { color: #CCC; font-weight: 400; min-height: 50px; }
.view-link {
    display: inline-block; margin-top: 15px; color: var(--color-neon-blue);
    text-decoration: none; font-weight: 500; transition: text-shadow 0.3s;
}
.view-link:hover { text-shadow: 0 0 5px var(--color-neon-blue); }


/* Contenitore Swiper (Non Grid) - Aggiunge più spazio ai lati per le frecce */
.experience-grid-slider {
    width: 100%;
    padding: 20px 50px;
    display: block; 
    overflow: hidden; 
}

/* Stile per i bottoni di navigazione (Arrows) - Aggiornato */
.swiper-button-next, .swiper-button-prev {
    color: var(--color-neon-magenta) !important; /* Forza il colore Neon */
    opacity: 1; /* Rendi sempre visibili */
    transform: scale(1); /* Rendi più grandi */
    top: 45%; /* Centra le frecce meglio con l'altezza della card */

    /* Sposta le frecce più vicino al bordo del contenitore esterno */
    left: 15px; /* Sposta la freccia PREV a 15px dal bordo (dentro il padding 60px) */
    right: 15px; /* Sposta la freccia NEXT a 15px dal bordo */

    filter: drop-shadow(0 0 5px rgba(192, 96, 255, 0.8)); /* Glow più evidente */
    transition: transform 0.2s;
    z-index: 100;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    transform: scale(1.1);
    opacity: 1;
}

.swiper-button-prev { left: 10px; }
.swiper-button-next { right: 10px; }

/* SITO_GIONA/static/css/style.css - Logica Visibilità Swiper */

/* Regola base: Le slide sono nitide di default (visibili) */
.swiper-slide {
    opacity: 1; 
    filter: blur(0px) brightness(1); 
    transition: opacity 0.4s, filter 0.4s;
}

/* Rimuovi la sfocatura e l'oscuramento selettivo per una vista pulita */
/* Queste regole non sono necessarie se vuoi una vista pulita di tutte le schede */
.swiper-slide:not(.swiper-slide-active) {
    opacity: 1; /* Rendi tutte le schede pienamente visibili */
    filter: blur(0px) brightness(1); 
}

/* SITO_GIONA/static/css/02_components.css */

/* ===================================== */
/* 1. GRIGLIE CARD (3D Glassmorphism) */
/* ===================================== */

/* Necessario per il 3D effect sul contenitore */
.process-grid, .pillars-grid, .case-study-grid, .education-skills-grid {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Stile comune per TUTTE le Card (3D/Glass) */
.process-card, .pillar-card, .experience-card, .project-card, .education-skill-card, .contact-card {
    padding: 30px;
    border-radius: 15px; 
    text-align: left;
    
    background-color: var(--color-glass-bg);
    border: 1px solid var(--color-glass-border);
    backdrop-filter: blur(10px); 
    
    transform: translateZ(0); 
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
    
    /* Variabili CSS per la rotazione JavaScript */
    --rX: 0deg; 
    --rY: 0deg;
    transform-style: preserve-3d;
    transform: translateZ(0);
}

/* 3D Effect on Hover */
.process-card:hover, .pillar-card:hover, .experience-card:hover, .project-card:hover, .education-skill-card:hover {
    border-color: var(--color-neon-magenta);
    box-shadow: 0 0 15px var(--color-hover-glow), 0 15px 40px rgba(0, 0, 0, 0.6);
    transform: translateY(-8px) rotateX(var(--rX)) rotateY(var(--rY)) translateZ(10px);
}


/* SITO_GIONA/static/css/02_components.css */

/* ===================================== */
/* 1. GRIGLIE CARD (3D Glassmorphism) */
/* ===================================== */

/* Necessario per il 3D effect sul contenitore */
.process-grid, .pillars-grid, .case-study-grid, .education-skills-grid {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Stile comune per TUTTE le Card (3D/Glass) */
.process-card, .pillar-card, .experience-card, .project-card, .education-skill-card, .contact-card {
    padding: 30px;
    border-radius: 15px; 
    text-align: left;
    
    background-color: var(--color-glass-bg);
    border: 1px solid var(--color-glass-border);
    backdrop-filter: blur(10px); 
    
    transform: translateZ(0); 
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
    
    /* Variabili CSS per la rotazione JavaScript */
    --rX: 0deg; 
    --rY: 0deg;
    transform-style: preserve-3d;
    transform: translateZ(0);
}

/* 3D Effect on Hover */
.process-card:hover, .pillar-card:hover, .experience-card:hover, .project-card:hover, .education-skill-card:hover {
    border-color: var(--color-neon-magenta);
    box-shadow: 0 0 15px var(--color-hover-glow), 0 15px 40px rgba(0, 0, 0, 0.6);
    transform: translateY(-8px) rotateX(var(--rX)) rotateY(var(--rY)) translateZ(10px);
}

/* ===================================== */
/* 3. TIMELINE SLIDER (Formazione) */
/* ===================================== */

/* VARIABILI LOCALI (Riflettono le tue variabili root) */
:root {
    --timeline-primary: var(--color-neon-magenta); /* Usa il tuo colore primario */
    --timeline-black: var(--color-dark-void);
    --timeline-white: var(--color-text-light);
}

.timeline-slider-wrap {
    width: 100%;
    max-width: 1400px;
    margin: 40px auto;
    /* Rimuovi Glassmorphism dal contenitore, lo mettiamo sulla slide */
}

.expertise-timeline-swiper.swiper-container {
    height: 600px; /* Altezza fissa per l'effetto Timeline */
    width: 100%;
    position: relative;
    /* Rimuovi la prospettiva 3D per evitare conflitti con la rotazione slide */
    box-shadow: 0 5px 25px 5px rgba(0, 0, 0, .4);
    border-radius: 15px; /* Mantieni il tuo border radius */
    overflow: hidden;
}
 
/* Transizione Slide: Rende la navigazione visivamente d'impatto */
.expertise-timeline-swiper .swiper-wrapper { 
    transition: 2s cubic-bezier(.68,-0.4,.27,1.34) .2s; 
}

/* Stile della Singola Slide (Il "Punto" della Timeline) */
.expertise-timeline-swiper .swiper-slide {
    position: relative;
    color: var(--timeline-white);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Sovrapposizione (L'equivalente del tuo Glassmorphism per la background image) */
.swiper-slide-overlay {
    content: "";
    position: absolute;
    z-index: 1;
    right: -115%; /* Inizia fuori dallo schermo */
    bottom: -10%;
    width: 100%;
    height: 100%;
    /* Scatola d'ombra: crea l'effetto di oscuramento sul lato destro */
    background-color: rgba(0, 0, 0, .7); 
    box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, .7); 
    border-radius: 100%;
}

/* Contenuto Testuale (Sempre in Z-Index 2) */
.swiper-slide-content {
    position: absolute;
    text-align: center;
    width: 80%;
    max-width: 380px; /* Aumentato per contenere più testo */
    right: 50%;
    top: 13%;
    transform: translate(50%, 0);
    font-size: 14px;
    z-index: 2;
    padding: 20px;
    /* Stile Glassmorphism al contenuto per renderlo leggibile sull'immagine */
    background-color: var(--color-glass-bg); 
    border: 1px solid var(--color-glass-border);
    backdrop-filter: blur(8px);
    border-radius: 10px;
}

/* ===================================== */
/* Animazioni del Contenuto (Opacity & Move) */
/* ===================================== */

.timeline-year {
    display: block;
    font-style: italic;
    font-size: 42px;
    margin-bottom: 30px; /* Ridotto il margine */
    transform: translate3d(20px, 0, 0);
    color: var(--timeline-primary);
    font-weight: 300;
    opacity: 0;
    transition: .2s ease .4s;
}

.timeline-title {
    font-weight: 800;
    font-size: 34px;
    margin: 0 0 10px;
    opacity: 0;
    transform: translate3d(20px, 0, 0);
    transition: .2s ease .5s;
}

.timeline-text {
    line-height: 1.5;
    opacity: 0;
    transform: translate3d(20px, 0, 0);
    transition: .2s ease .6s;
    color: var(--timeline-white);
}

/* Stato Attivo: Inizia l'animazione di entrata */
.swiper-slide-active {
    .timeline-year {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition: .4s ease 1.6s;
    }
    
    .timeline-title {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition: .4s ease 1.7s;
    }
    
    .timeline-text, .acquired-skills-list, .skills-heading {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition: .4s ease 1.8s;
    }
}

/* ===================================== */
/* 3. EXPERTISE & FORMAZIONE (Griglia Compatta Simmetrica) */
/* ===================================== */

.education-skill-card {
    /* Flexbox CRITICO: Forziamo la card a usare la sua altezza massima e allineare il contenuto */
    display: flex;
    flex-direction: column;
    height: 100%; /* Acquisisce l'altezza massima dalla riga della griglia */
    padding: 20px;
    position: relative;
    overflow: hidden; 
}

/* Contenitore per gli elementi statici (Icona, Titolo, Istituzione, Anno) */
.card-static-content {
    /* Impedisce a questo blocco di crescere, lasciando spazio alla lista competenze */
    flex-shrink: 0; 
}

/* Lista Competenze (il contenuto variabile) - Spinta in basso per simmetria */
.acquired-skills-list-compact {
    margin-top: auto; /* CRITICO: Spinge il blocco in basso, garantendo allineamento verticale */
    flex-grow: 1; /* Permette alla lista di occupare lo spazio rimanente */
    
    padding: 0;
    list-style: none;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.acquired-skills-list-compact li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3px;
    color: var(--color-text-light);
}

.acquired-skills-list-compact li .list-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    color: var(--color-neon-magenta);
    flex-shrink: 0; 
}

/* --- DETTAGLI VISIVI --- */

/* Contenitore Intestazione (per Icona + Tag) */
.card-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* ICONA PRINCIPALE con Effetto Glow (WOW!) */
.header-main-icon {
    width: 30px;
    height: 30px;
    opacity: 0.8;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-shrink: 0; 
}
.header-main-icon.blue-icon {
    color: var(--color-neon-blue);
    filter: drop-shadow(0 0 10px var(--color-neon-blue));
}
.header-main-icon.magenta-icon {
    color: var(--color-neon-magenta);
    filter: drop-shadow(0 0 10px var(--color-neon-magenta));
}

/* ANIMAZIONE Icona all'Hover della card (Glow Mix) */
.education-skill-card:hover .header-main-icon {
    opacity: 1;
    transform: scale(1.1) translateY(-3px);
    filter: drop-shadow(0 0 15px var(--color-neon-blue)) drop-shadow(0 0 15px var(--color-neon-magenta)); 
}


.education-title-compact {
    font-size: 1.3rem; 
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 3px;
    color: var(--color-neon-blue); 
    text-shadow: 0 0 3px rgba(0, 191, 255, 0.3);
    line-height: 1.2;
}

.institution-name {
    color: #AAA;
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 5px;
}

.year-compact-small {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: #999;
    margin-bottom: 10px;
}

.year-compact-small i {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    color: var(--color-neon-magenta);
}

.card-divider-light {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* --- TAG (Categorizzazione Dinamica) --- */

.education-tag-laurea-magistrale, .education-tag-laurea-triennale, .education-tag-diploma, .education-tag-certificazione-tech, .education-tag-patente-certificazione-tech, .education-tag-certificazione-business, .education-tag-corso-speciale {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-block;
    margin-left: 10px;
    text-transform: uppercase;
    align-self: flex-start;
    transition: all 0.3s;
}

/* 1. MAGGIORE GRADO - Neon Blue Solido */
.education-tag-laurea-magistrale, .education-tag-laurea-triennale, .education-tag-diploma {
    color: var(--color-dark-void); background-color: var(--color-neon-blue); border: 1px solid var(--color-neon-blue); box-shadow: 0 0 8px rgba(0, 191, 255, 0.6);
}

/* 2. CERTIFICAZIONI TECNICHE - Blue Glass/Glow */
.education-tag-certificazione-tech, .education-tag-patente-certificazione-tech {
    color: var(--color-neon-blue); background-color: rgba(0, 191, 255, 0.1); border: 1px solid var(--color-neon-blue); box-shadow: 0 0 5px rgba(0, 191, 255, 0.3);
}

/* 3. CERTIFICAZIONI BUSINESS/CORSI SPECIALI - Magenta Glass/Glow */
.education-tag-certificazione-business, .education-tag-corso-speciale {
    color: var(--color-neon-magenta); background-color: rgba(192, 96, 255, 0.1); border: 1px solid var(--color-neon-magenta); box-shadow: 0 0 5px rgba(192, 96, 255, 0.3);
}

.education-skill-card:hover .education-tag-laurea-magistrale,
.education-skill-card:hover .education-tag-laurea-triennale,
.education-skill-card:hover .education-tag-diploma {
    background-color: var(--color-neon-blue);
    color: var(--color-dark-void);
    transform: scale(1.05);
}