/* 1. RESET E FONT */
@font-face {
    font-family: 'RobotoFlex';
    src: url(Fonts/robotoflex.ttf) format('truetype-variations'); /* Specifica che è variabile */
    font-weight: 100 900; /* Dice al browser che il file supporta pesi da 100 a 900 */
    font-style: normal;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
p {
    font-family: 'RobotoFlex', sans-serif;
    font-size: 1rem;      /* Dimensione standard (solitamente 16px) */
    font-weight: 500;     /* Peso Medium */
    line-height: 1.6;     /* Migliora la leggibilità dando respiro alle righe */
    margin: 0;            /* Rimuove margini di default se necessario */
}
body {
    background-color: #000;
    color: #fff;
    font-family: 'RobotoFlex', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
    overflow-x: hidden;
}
/* Titoli dei progetti nella Home */
.project-info h3 {
    font-weight: 300; /* Light */
}

/* Link Social (Belli evidenti) */
.social-link span {
    font-weight: 500; /* Bold */
    font-size: 14px;
    font-family: 'RobotoFlex';
    src: url(Fonts/robotoflex.ttf) format('truetype-variations');
    font-style: italic;
}
/* 2. NAVBAR (Il tuo stile originale) */
.navbar {
    position: fixed;
    top: 0;
    left: 0; /* Aggiunto per centrare correttamente su tutta la larghezza */
    width: 100%;
    padding: 30px 0;
    background-color: transparent; 
    display: flex;
    justify-content: center;
    z-index: 1000; /* Fondamentale per stare sopra l'immagine hero */
}

.nav-links {
    display: flex;
    gap: 15px;
}

.nav-item {
    text-decoration: none;
    color: #fff;
    padding: 8px 25px;
    border: 1px solid #383838;
    border-radius: 25px;
    font-size: 0.85rem;
    transition: 0.3s;
}

.nav-item:hover {
    border-color: #AA00FF;
    color: #AA00FF;
}

/* 3. HERO (HOME) */
.hero {
    padding: 180px 5% 100px;
    text-align: center;
}

.hero h1 {
    font-size: 8rem;
    font-weight: 100;
    margin-bottom: 24px;
}

.intro-text {
    max-width: 500px;
    margin-left: auto;
    text-align: left;
    padding-top: 50px;
    font-size: 1 rem;
    opacity: 0.9;
    font-weight: 500;

}

/* 6. GRIGLIA PROGETTI (Aggiornata per allineamento perfetto) */
.container {
    padding: 50px 5%;
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* Distanza tra le card */
    align-items: stretch; /* Forza le card ad avere la stessa altezza per riga */
}

.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.img-container {
    width: 100%;
    aspect-ratio: 4 / 3; /* TRUCCO: Tutte le immagini avranno la stessa proporzione */
    border-radius: 15px;
    overflow: hidden;
    background-color: #1a1a1a;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Taglia l'eccesso del mockup Mac senza deformarlo */
    display: block;
    transition: transform 0.5s ease;
}

/* Effetto Zoom */
.project-link:hover .img-container img {
    transform: scale(1.05);
}
.tag {
    background: #fff;       /* Sfondo bianco */
    color: #000;           /* Testo nero */
    padding: 4px 12px;     /* Spazio interno */
    border-radius: 20px;   /* Arrotondamento */
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    margin-top: 24px;
    font-size: 0.9rem;
    color: #fff;
}
/* Reset Link - Toglie il blu e la sottolineatura */
a {
    text-decoration: none;
    color: inherit; /* Prende il colore del testo circostante (bianco) */
}

.project-link {
    display: block;
    color: #fff;
    text-decoration: none;
}

/* 5. ABOUT & CONTACTS */
.about-section { padding: 100px 5%; }
.about-content { display: flex; justify-content: space-between; align-items: flex-end; size: 200px; }
.about-text h2 { font-size: 6rem; font-weight: 100; line-height: 0.9;}
.about-image img { max-width: 450px; filter: grayscale(100%); }

.contacts-section { padding: 50px 5% 100px; border-top: 1px solid #383838; }
.contacts-header { display: flex; justify-content: space-between; font-size: 3rem; margin-bottom: 30px; }
.contacts-links a { display: block; color: #fff; text-decoration: none; margin-bottom: 10px; }

/* 6. DETTAGLIO PROGETTO (ARTEMIDE) */
.project-hero-detail {
    height: 70vh;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.8)), url('Immagini/mockup lampada fronte-retro.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* --- SPECIFICO PAGINA ARTEMIDE --- */

.project-hero-detail 
.project-description, .about-text, p {
    text-align: left; /* Forza l'allineamento a sinistra */
}
.hero-artemide { /* <-- Assicurati che ci sia il nome della classe! */
    height: 85vh; 
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.7)), 
                url('Immagini/mockup\ lampada\ fronte-retro.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-hero-detail h1 {
    font-size: 5.5rem; /* Grande e leggero */
    font-weight: 100;
    text-align: center;
}

.project-wrapper {
    padding: 100px 8%;
}

.project-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;    /* Mantiene tutto il gruppo a destra dello schermo */
    text-align: left;         /* Il testo scrive da sinistra a destra */
    margin-bottom: 80px;
    padding-right: 8%;        /* Opzionale: per non farlo toccare il bordo destro */
}

.description-text {
    max-width: 500px;         /* Larghezza del blocco di testo */
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 25px;
}

.tag-container-project {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* <--- CAMBIA DA flex-end A flex-start */
    width: 100%;                /* Usa lo spazio del genitore */
    max-width: 500px;           /* DEVE essere uguale a quello del testo */
    gap: 12px;
    margin-top: 10px;
}
.tag {
    font-style: italic; /* Rende "EDITORIAL DESIGN" ecc. in corsivo */
    text-transform: uppercase;
    /* ... gli altri stili che hai già (bordo, padding) ... */
}
/* Questo colpirà tutti i tag in ogni pagina progetto */
.tag {
    font-family: 'RobotoFlex', sans-serif;
    font-size: 0.6rem;      /* Leggermente più piccolo del paragrafo */
    font-weight: 400;       /* Peso Medium */
    font-style: italic;     /* <--- Ecco il corsivo per tutti */
    text-transform: uppercase; /* Spesso i tag stanno bene in maiuscolo */
    border: 1px solid #fff; /* Se vuoi il bordo come nel mockup */
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
    margin-right: 10px;
}
.skill-badge {
    background-color: #ffffff; /* Sfondo bianco */
    color: #000000;            /* Testo nero */
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: bold;         /* Rende la scritta più leggibile sul bianco */
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;              /* Rimuoviamo il bordo perché ora c'è il fill */
    font-style: italic;
}
/* Griglia Immagini */
.image-layout {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.image-layout img {
    width: 100%;
    border-radius: 12px; /* Angoli leggermente arrotondati come le card */
}
/* --- SEZIONE ABOUT ME (REVISIONE FINALE) --- */
.about-section {
    padding: 120px 8%;
    background-color: #000;
}

.about-container {
    display: flex;
    justify-content: space-between; /* Spinge il testo a sinistra e la foto a destra */
    align-items: flex-start;
    gap: 80px;
}

.about-text {
    flex: 1; /* Permette al testo di occupare lo spazio necessario */
    margin-bottom: 40px;
}

/* Titolo 128px - Pulito e bilanciato */
.huge-title {
    font-size: 128px;
    font-weight: 100;
    line-height: 0.9;      /* Ridotto: essenziale per titoli così grandi */
    letter-spacing: -2px;  /* Spesso i titoli grandi stanno meglio con spaziatura negativa */
    margin-bottom: 60px;   /* Ora questo valore sarà "reale" e visibile */
    color: #fff;
    text-transform: none;
}

/* Paragrafo - Spaziatura interna */
.about-p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    max-width: 550px;
    padding-top:50px ;
    color: #fff;
    text-align: justify;   /* Opzionale: rende il blocco di testo più grafico */
    margin-bottom: 30px;   /* Spazio tra un paragrafo e l'altro se ne hai più di uno */
}
/* Gestione Immagine */
.about-image {
    flex-shrink: 0; /* Impedisce alla foto di rimpicciolirsi troppo */
}

.about-image img {
    width: 400px; /* Regola questa misura in base alla tua foto */
    height: auto;
    filter: grayscale(100%); /* Effetto bianco e nero come nel mockup */
    display: block;
}
/* --- SEZIONE CONTACTS (REVISIONE FINALE) --- */
.contacts-section {
    padding: 100px 8% 50px;
    background-color: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
}

/* 1. Contenitore dei Link Social */
.social-wrapper {
    display: flex;
    justify-content: flex-end; /* Spinge il contenuto verso destra */
    width: 100%;
    padding: 0 8%;            /* Margine di sicurezza dal bordo destro */
    margin-bottom: 60px;
    box-sizing: border-box;    /* Assicura che il padding non sballi la larghezza */
}
/* Forza l'incolonnamento verticale */
.social-links {
    display: flex !important;   /* Forza l'attivazione di flex */
    flex-direction: column !important; /* Forza i link ad andare uno sotto l'altro */
    align-items: flex-start;    /* Allinea icone e testo a sinistra del blocco */
    gap: 15px;                  /* Spazio tra una riga e l'altra */
}
.social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}
.social-icon {
    width: 24px;
    height: auto;
    /* Rimuovi filter: invert se le tue icone sono già bianche */
}
/* 2. Titolo Contacts e Freccia */
.contacts-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}

/* Titolo 128px Extra Light */
.huge-title {
    font-size: 128px;
    font-weight: 100;
    line-height: 0.8;
    letter-spacing: -3px;
    margin: 0;
}

.huge-arrow {
    font-size: 128px; /* Stessa dimensione del titolo */
    font-weight: 100;
    line-height: 1;
}

/* 3. Linea e Firma Finale */
.footer-divider {
    border:0px;
    border-top: 1px solid #383838;
    margin-bottom: 80px;
    margin-inline-start: -150px;
    margin-inline-end: -150px;
}

.footer-signature {
    text-align: center;
    padding-bottom: 50px;
}
/* --- LAYOUT PAGINA PROGETTO --- */

/* Hero con testo sopra l'immagine */
/* Il titolo grande dentro la sezione Hero */
.hero-title {
    font-family: 'RobotoFlex', sans-serif;
    font-size: 128px;
    font-weight: 100;
    line-height: 1;
    text-align: center; /* Centra il testo */
    color: #fff;
    width: 100%;
    z-index: 10; /* Lo tiene sopra l'immagine/gradiente */
}

.hero-bg {
    width: 100%;
    height: 50%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    bottom: 10%;
    right: 5%;
    text-align: right;
}
.hero-overlay-1 {
    position: absolute;
    bottom: 60%;
    right: 5%;
    text-align: right;
}

/* Info Progetto */
.project-info {
    padding: 100px 8%;
    display: flex;
    justify-content: flex-end; /* Allinea il testo a destra come nel mockup */
}

.info-content {
    max-width: 600px;
}

.tag-container {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.tag-container-1 {
    margin-right: 165px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* Griglia Mockup */
.mockup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-bottom: 150px;
}

.grid-left, .grid-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mockup-img {
    width: 100%;
    border-radius: 15px;
    display: block;
}
/* --- SPECIFICO PAGINA ZERO --- */

/* Contenitore descrizione (allineato a destra come mockup) */
/* Il titolo grande dentro la sezione Hero */
.hero-title {
    font-family: 'RobotoFlex', sans-serif;
    font-size: 128px;
    font-weight: 100;
    line-height: 1;
    text-align: center; /* Centra il testo */
    color: #fff;
    width: 100%;
    z-index: 10; /* Lo tiene sopra l'immagine/gradiente */
}
.project-description {
    padding: 100px 8%;
    display: flex;
    justify-content: flex-end;
}
.description-content {
    max-width: 650px;
}

.tag-container-project {
    margin-top: 30px;
    display: flex;
    gap: 10px;
}

/* Gallery Layout */
.zero-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 100px;
}

.gallery-row-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.gallery-row-double img, 
.gallery-row-single img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
}

.gallery-row-single {
    width: 100%;
}
/* --- SPECIFICO PAGINA PHILOS --- */

/* Sfondo giallo per i mockup di Philos */
.yellow-bg {
    background-color: #FFFC8A; /* Regola questo giallo per farlo uguale al mockup */
    border-radius: 15px;
    padding: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Gallery Layout Philos */
.philos-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 120px;
}
.philos-row-single {
    width: 100%;
}
.philos-row-single img {
    max-width: 90%;
    height: auto;
    display: block;
}
.philos-row-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.philos-row-double img {
    max-width: 85%;
    height: auto;
}
/* Ottimizzazione per mobile */
@media (max-width: 768px) {
    .philos-row-double {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   VERSIONE MOBILE (Smartphone e Tablet)
   ============================================================ */

@media (max-width: 768px) {
    
    /* 1. Titoli Giganti: li rimpiccioliamo per farli stare nello schermo */
    .hero-title, .huge-title, .huge-title-contacts {
        font-size: 48px !important; /* Molto più piccolo dei 128px originali */
        line-height: 1.1;
        text-align: center;
        width: 100%;
        margin-top: 50px;
        
    }

    /* 2. Navigazione: i tasti Home, About, etc. ora respirano */
    nav {
        display: flex;
        flex-wrap: wrap;       /* Se non ci stanno, vanno a capo */
        justify-content: center;
        gap: 15px;
        padding: 20px 10px;
    }

    nav a {
        font-size: 0.9rem;
        padding: 8px 15px;
    }

    /* 3. Descrizione Progetto: spostiamo tutto al centro per il mobile */
    .project-info {
        align-items: center !important; /* Annulla il flex-end (destra) */
        text-align: center !important;  /* Annulla l'allineamento a sinistra/destra */
        padding: 0 20px;
        margin-bottom: 50px;
    }

    .description-text {
        max-width: 100% !important;   /* Occupa tutta la larghezza disponibile */
        font-size: 1rem;
        line-height: 1.5;
    }

    /* 4. Skill/Tag: li centriamo sotto il testo */
    .tag-container-project {
        justify-content: center !important;
        max-width: 100% !important;
        margin-top: 25px;
        gap: 10px;
    }

    .tag {
        font-size: 0.8rem;
        padding: 5px 12px;
    }

    /* 5. Sezione Contatti: icone e testi più grandi e centrati */
    .contact-container {
        padding: 40px 20px;
        text-align: center;
    }

    .contact-item {
        justify-content: center; /* Centra l'icona con il testo */
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    /* 6. Correzione Freccia Emoji: impedisce che diventi un tastone grigio */
    /* Nota: Se usi il metodo SVG che ti ho dato prima, questa parte non serve */
    .huge-title span, .arrow-symbol {
        display: inline-block;
        font-family: serif; /* Forza un font testuale per la freccia */
        vertical-align: middle;
    }

    /* 7. Immagini: assicuriamoci che non escano dai bordi */
    img, .project-image, .hero-project {
        max-width: 100%;
        height: auto;
    }
    
    .hero-project {
        height: 60vh; /* Riduciamo l'altezza dell'immagine iniziale su mobile */
    }
}