/*
Theme Name: Lauri Portfolio
Author: Michele Lauri
Description: Tema custom per portfolio Cinematographer
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    --bg: #000000;
    --text: #ffffff;
    --line: #ffffff; 
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif; 
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.mono {
    font-family: 'Space Mono', monospace;
}

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

/* HEADER FISSO */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1.2fr 1fr; 
    gap: 2vw;
    padding: 2vw;
    font-size: 0.75vw; 
    font-weight: 400;
    line-height: 1.2; 
    letter-spacing: 0.02vw;
    z-index: 100;
    mix-blend-mode: difference;
    text-transform: uppercase;
}

.header-logo {
    font-weight: 700;
    font-size: 0.9vw;
}

.header-col-4 {
    display: flex;
    justify-content: space-between;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.nav-menu a {
    transition: opacity 0.3s;
    margin-bottom: 0.2vw;
}

.nav-menu a:hover {
    opacity: 0.5;
}

/* SEZIONI HOME */
#home {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-showreel {
    width: 100%;
    height: 65vh; 
    margin-top: 10vw; 
    margin-bottom: 5vw; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.showreel-video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.section {
    padding: 8vw 2vw 2vw 2vw;
    min-height: 50vh;
}

.section-label {
    font-size: 1.5vw; /* Il valore originale era 0.9vw. Aumentalo a 2vw o 2.5vw se le vuoi ancora più grandi */
    padding-bottom: 2vw;
}

/* WORKS */
.works-list { display: flex; flex-direction: column; }
.work-item { display: flex; align-items: center; border-bottom: 1px solid var(--line); padding: 1.5vw 0; position: relative; cursor: pointer; transition: padding-left 0.3s; color: inherit; }
.work-item:first-child { border-top: 1px solid var(--line); }
.work-item:hover { padding-left: 1.5vw; }
.work-num { font-size: 0.9vw; margin-right: 2vw; margin-bottom: 1vw; align-self: center; }
.work-title { font-weight: 600; font-size: 4.5vw; letter-spacing: -0.05vw; flex-grow: 1; text-transform: none; }
.work-desc { font-size: 0.75vw; text-align: left; width: 20vw; line-height: 1.4; color: #cccccc; text-transform: none; }
.hover-img { position: absolute; width: 25vw; height: 16vw; object-fit: cover; top: 50%; right: 0; transform: translateY(-50%); opacity: 0; pointer-events: none; z-index: 10; transition: opacity 0.3s ease; }
.work-item:hover .hover-img { opacity: 1; }

/* ABOUT */
.about-container { display: grid; grid-template-columns: 1fr 2.5fr; gap: 4vw; }
.about-name { font-weight: 600; font-size: 4.5vw; line-height: 1.05; letter-spacing: -0.1vw; text-transform: none; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3vw; }
.about-col h5 { font-family: 'Space Mono', monospace; font-size: 0.7vw; font-weight: 700; margin-bottom: 1.5vw; }
.about-col p { font-family: 'Space Mono', monospace; font-size: 0.8vw; line-height: 1.5; text-transform: none; margin-bottom: 2vw; color: #cccccc; }

/* CONTACT */
#contact { margin-top: 5vw; }
.contact-list { display: flex; flex-direction: column; }
.contact-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 1.5vw 0; transition: background 0.3s, padding-left 0.3s; }
.contact-item:first-child { border-top: 1px solid var(--line); }
.contact-item:hover { background-color: var(--text); color: var(--bg); padding-left: 2vw; padding-right: 2vw; }
.contact-label { font-weight: 600; font-size: 4vw; letter-spacing: -0.05vw; text-transform: none; }
.contact-val { font-size: 0.7vw; font-weight: 500; text-transform: uppercase; }

/* FOOTER FIRMA */
.site-footer { padding: 6vw 2vw 2vw 2vw; font-weight: 600; font-size: 1.5vw; letter-spacing: 0.05vw; }

/* MOBILE */
@media (max-width: 768px) {
    header { grid-template-columns: 1fr 1fr; font-size: 2.5vw; }
    .header-info { display: none; }
    .work-desc { display: none; }
    .work-title { font-size: 7vw; }
    .about-container, .about-grid { grid-template-columns: 1fr; }
    .about-name { font-size: 10vw; margin-bottom: 5vw; }
    .contact-label { font-size: 8vw; }
    .work-num { font-size: 2.5vw; }
    .site-footer { font-size: 5vw; padding: 10vw 4vw 4vw 4vw; }
}/* GRIGLIA VIDEO HOVER (PAGINE CINEMATOGRAPHY / GAFFER) */
.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    padding: 0 2vw 4vw 2vw;
}
.video-card {
    display: block;
    color: inherit;
    transition: opacity 0.3s;
}
.video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
    margin-bottom: 1vw;
    position: relative;
}
.video-wrapper video, .video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.video-title {
    font-weight: 600;
    font-size: 1.5vw;
    margin-bottom: 0.5vw;
    text-transform: none;
}
.video-meta {
    font-size: 0.8vw;
    color: #ccc;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .video-grid { grid-template-columns: 1fr; gap: 8vw; }
    .video-title { font-size: 5vw; }
    .video-meta { font-size: 3vw; }
}/* VIDEO PREVIEW HOVER */
.hover-video {
    position: absolute;
    width: 25vw;
    height: 16vw;
    object-fit: cover;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.work-item:hover .hover-video {
    opacity: 1;
}/* PAGINA SINGOLO PROGETTO *//* PAGINA SINGOLO PROGETTO (LAYOUT ORIGINALE 3 COLONNE) */
.project-hero {
    padding: 12vw 2vw 2vw 2vw;
    display: grid;
    grid-template-columns: 1fr 1.2fr 2.5fr; /* 3 colonne: sx piccola, centro media, dx grande */
    gap: 4vw;
    align-items: start;
}

/* Colonna Sinistra (Titolo + Specifiche) */
.project-col-left {
    display: flex;
    flex-direction: column;
}

.project-title {
    font-size: 3vw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05vw;
    margin-bottom: 8vw; /* Lo stacco largo sotto al titolo come nel video */
    text-transform: none;
}

.project-specs {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.spec-label {
    font-size: 0.7vw;
    color: #777777;
    margin-bottom: 0.3vw;
    text-transform: uppercase;
}

.spec-value {
    font-size: 0.8vw;
    color: #ffffff;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Colonna Centrale (Testo) */
.project-col-mid {
    font-size: 0.85vw;
    line-height: 1.6;
    color: #cccccc;
    text-transform: none;
    padding-top: 0.5vw;
}

/* Colonna Destra (Video) */
.project-col-right {
    width: 100%;
}

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #111111;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* BARRA STICKY (Con le due linee orizzontali) */
.sticky-project-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5vw 2vw;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background-color: var(--bg);
    z-index: 90;
    font-size: 0.8vw;
    text-transform: uppercase;
    margin-top: 4vw;
}

/* GALLERIA 6 FOTO */
.project-gallery {
    padding: 4vw 2vw;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 foto affiancate per riga */
    gap: 2vw;
}

.gallery-frame {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.gallery-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555555;
    font-size: 1vw;
}

/* MOBILE ADATTAMENTO */
@media (max-width: 768px) {
    .project-hero { grid-template-columns: 1fr; padding-top: 25vw; gap: 8vw; }
    .project-title { font-size: 12vw; margin-bottom: 4vw; }
    .spec-label, .spec-value, .project-col-mid { font-size: 3.5vw; }
    .sticky-project-nav { font-size: 3.5vw; padding: 4vw 2vw; }
    .project-gallery { grid-template-columns: 1fr; } /* Colonna singola da telefono */
}/* CONTENITORE INSTAGRAM */
.ig-container {
        width: 100%;
        /* Niente aspect-ratio fisso, lasciamo che Instagram calcoli la sua altezza */
}

.ig-container iframe {
        width: 100% !important;
        margin: 0 !important;
        background-color: #111111;
}.work-desc {
    width: 15vw; /* Forza la colonna ad avere la stessa identica larghezza per tutti */
    flex-shrink: 0; /* Impedisce che si deformi se il titolo del progetto è lunghissimo */
    text-align: left; /* Allinea perfettamente il testo a sinistra */
}/* PAGINA GEAR - SPAZIATURA CATEGORIE */
.gear-content h3 {
    margin-top: 4vw; /* Crea lo spazio vuoto sopra la categoria */
    margin-bottom: 1vw; /* Distanzia leggermente la categoria dai punti elenco */
    font-size: 1vw; /* Mantiene la grandezza coerente col resto del testo */
    font-weight: normal;
}

/* Evita che "CAMERAS" abbia uno spazio inutile in cima alla pagina */
.gear-content h3:first-child {
    margin-top: 0;
}/* =========================================
   BANNER SCORREVOLE (Senza alterare gli spazi)
========================================= */
.marquee-container {
width: 100%;
    overflow: hidden;
    padding: 2vw 0; /* Aggiunge un leggero respiro sopra e sotto, staccandosi dai Main Works */
    margin: 0; 
    display: flex;
    background-color: #000000;
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 20s linear infinite;
}

.marquee-content {
display: flex;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 7vw; /* Aumentato da 5vw a 7vw per renderlo più grande e d'impatto */
    font-weight: 500;
    letter-spacing: -0.05vw;
    text-transform: uppercase; 
    color: #ffffff;
    padding-right: 2vw;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}/* =========================================
   ABOUT: RE-IMPAGINAZIONE CON FOTO
========================================= */
.about-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    width: 100%; 
    gap: 4vw; /* Spazio proporzionato tra colonna sinistra e destra, senza eccessi neri */
}

.about-col-left { 
    width: 45%; 
    display: flex; 
    flex-direction: column; 
}

.about-name { 
    /* Ripristina il font senza grazie corretto (lo stesso dei titoli) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; 
    font-size: 5vw; 
    line-height: 0.9; 
    font-weight: bold; 
    letter-spacing: -0.1vw; 
    margin-bottom: 2vw; /* Distanza minima tra nome e foto */
}

.about-photo { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    display: block; 
    filter: grayscale(100%); /* Opzionale: per mantenere l'estetica bianco e nero */
}

.about-col-right { 
    width: 50%; 
}
.bio-testo, .bio-testo p {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.95vw !important;
    line-height: 1.7 !important;
    font-weight: normal !important;
    text-transform: none;
}

/* =========================================
   CONTACT: FIX FONT
   ========================================= */
#contact, #contact * {
    font-family: 'Space Grotesk', sans-serif !important;
}

.contact-label, .contact-val {
    font-weight: normal !important;
}

/* =========================================
   OTTIMIZZAZIONE IPHONE / MOBILE
   ========================================= */
@media only screen and (max-width: 768px) {
    /* Impila Nome e Bio uno sotto l'altro a tutto schermo */
    .about-container {
        flex-direction: column !important;
        gap: 25px !important;
    }
    .about-col-left, .about-col-right {
        width: 100% !important;
    }
    .about-name {
        font-size: 9vw !important;
    }

    /* Rende leggibile la Bio su telefono */
    .bio-testo, .bio-testo p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Rende leggibili Mail e Instagram su telefono */
    .contact-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 15px 0 !important;
    }
    .contact-label {
        font-size: 7vw !important;
    }
    .contact-val {
        font-size: 14px !important;
    }
}