/* RESET GLOBALE */
html, body {
    background-color: #fafafa;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


header {
    width: 100%;
    /* Occupa tutta l'altezza dello schermo, ma non oltre */
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Opzionale: sfondo nero se l'immagine è più piccola */
}

.banner-container {
    width: 100%;
    height: 100%;
}

.banner {
    width: 100%;
    height: 100%;
    /* 'contain' su mobile evita il crop eccessivo, 'cover' riempie.
       Usiamo 'cover' per coprire tutto, ma limitiamo l'altezza dell'header */
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Ottimizzazione per Mobile */
@media (max-width: 768px) {
    header {
        /* Su telefono l'altezza si adatta al contenuto per non tagliare troppo l'immagine */
        height: auto;
        max-height: 50vh; /* Limita l'ingombro verticale sui piccoli schermi */
    }

    .banner {
        /* Mantiene le proporzioni originali senza deformare */
        object-fit: contain;
        background-color: #fafafa; /* Torna al tuo colore di sfondo se l'immagine non copre tutto */
    }
}

/* LAYOUT E CONTENUTI */
.content {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* SWIPER - Dimensioni necessarie per il funzionamento */
.swiper-container {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    overflow: hidden; /* Evita scroll orizzontali del browser */
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px; /* Larghezza fissa necessaria per l'effetto coverflow */
    background-color: transparent;
}

/* CARD - Design pulito */
.card {
    background-color: #ffffff;
    border-radius: 30px; /* Ridotto leggermente per estetica */
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.card img {
    width: 100%;
    max-width: 200px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.app-name {
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}

/* SKILLS */
.skill-block { margin-bottom: 20px; }
.skill-info { display: flex; justify-content: space-between; margin-bottom: 5px; }

.progress-bar {
    background-color: #eee;
    height: 10px;
    border-radius: 5px;
    width: 100%;
}

.progress-fill {
    background-color: #000;
    height: 100%;
    border-radius: 5px;
}

/* ================================================================
   CONTATTI – 3 CARD CLICCABILI E RESPONSIVE
================================================================ */

.contatti-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px; /* distanza tra card su mobile */
    align-items: center;
}

.contatto-card {
    width: 90%;
    text-align: center;
    text-decoration: none; /* niente sottolineature */
    color: inherit; /* niente blu */
    cursor: pointer;
    display: block; /* rende tutta la card cliccabile */
}

.contatto-card img {
    width: 60px;
    margin-bottom: 15px;
}

/* DESKTOP: card affiancate */
@media (min-width: 900px) {
    .contatti-wrapper {
        flex-direction: row;
        justify-content: center;
        gap: 40px; /* distanza tra card su desktop */
    }

    .contatto-card {
        width: 28%; /* 3 card affiancate */
    }
}





/* BANNER & FOOTER */
.banner { width: 100%; height: auto; display: block; }

footer {
    background-color: #ffffff;
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid #eee;
    margin-top: 50px;
}

.logo-footer { max-width: 120px; margin-bottom: 10px; }