/* RICOMINCIO DA QUA */
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-BlackItalic.otf);font-weight:900;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Black.otf);font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-ExtraBold.otf);font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-ExtraBoldItalic.otf);font-weight:800;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Bold.otf);font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-BoldItalic.otf);font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-SemiBold.otf);font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-SemiBoldItalic.otf);font-weight:600;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Medium.otf);font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-MediumItalic.otf);font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Regular.otf);font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-RegularItalic.otf);font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Light.otf);font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-LightItalic.otf);font-weight:300;font-style:italic;font-display:swap;}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

:root{
  --pad:24px;
  --hamburger-size:32px;
  --report-col-width:min(680px,44vw);
  --content-x:40%;
  --content-w:55%;
  --text-light:#EAE9E8;
  --text-dark:#253126;
  --gray-dark:#A7A6A6;
  --gray-light:#D1D0D1;
  --bg:#EAE9E8;
  --bg-dark:#253126;
  --accent:#ff3b30;
}

/* =========================
   BASE
========================= */
body{
  background:#EAE9E8;
  font-family:"tt-commons-pro",sans-serif;
  color:#253126;
}

.hero{
  position:relative;
  padding:var(--pad);
  width: 100%;
}

/* HERO OVERLAY - Rimosso margin-top auto e altezza fissa */
.hero-overlay {
  position: relative;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

/* HEADER */
.hero-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:clamp(10px, 2vw, 24px) clamp(16px,3vw,48px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:9999;
  pointer-events:none;
}

/* ============================================================
   HEADER, LOGO & MENU - UNIFORMED STYLE (BLACK & BOXED)
   ============================================================ */

   .hero-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: clamp(10px, 2vw, 24px) clamp(16px, 3vw, 48px);
    display: flex;
    justify-content: space-between; /* Spinge il logo a sx e hamburger a dx */
    align-items: center;
    z-index: 9999;
    pointer-events: none;
}

/* LOGO BOX (Grigio come in Technology) */
.logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    height: 40px;
    --r: 6px;
    border-radius: var(--r);
    pointer-events: auto;
    background-color: #D1D0D1 !important; /* Box grigio fisso */
}

.logo img {
    height: 28px;
    width: auto;
    display: block;
}

/* Rimuoviamo i vecchi effetti di blur/overlay che non servono più in questa versione boxed */
.logo-blur {
    display: none !important;
}

/* TITOLO E SOTTOTITOLO */ /* copiare tutta per prima parte senza immagine */
.hero-content{
  margin-top: clamp(80px, 12vh, 56px); 
  margin-left:clamp(16px,3vw,calc(var(--pad)/4));
  z-index:10;
  pointer-events:none;
}
.hero-content h1{
  font-family:"Serotiva",serif;
  font-size:clamp(42px, 7vw, 100px);
  line-height:1;
  font-weight:600;
  color:var(--text-dark);
}
.hero-description {
    margin-top: 284px; 
    margin-bottom: 24px; 
    margin-left: clamp(16px, 3vw, calc(var(--pad)/4));
    z-index: 10;
    pointer-events: none;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 300;
    line-height: 1.3;
    max-width: 1200px;
    color: var(--text-dark);
}

/* Stato iniziale per i titoli e descrizioni */
.hero-content h1, 
.hero-description {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

/* Classe attivata da JS */
body.is-loaded .hero-content h1,
body.is-loaded .hero-description {
    opacity: 1;
    transform: translateY(0);
}

/* Ritardo per la descrizione (per far apparire prima il titolo) */
body.is-loaded .hero-description {
    transition-delay: 0.4s;
}

/* copiare tutta per prima parte senza immagine */

/* ===== EVENTS ENGAGEMENT - FULL BLEED STYLE ===== */
.events-engagement {
    width: 100%;
    /* Padding laterale coerente con il resto del sito */
    padding: 0 clamp(16px, 3vw, 48px) 80px; 
    position: relative;
    z-index: 4;
}

.engagement-card {
    width: 100%;
    min-height: 454px; 
    background: var(--bg-dark);
    border-radius: 30px;
    overflow: hidden;
    position: relative; 
    display: flex;
    align-items: center; 
}

/* Immagine di sfondo che copre tutto il box */
.engagement-card-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.engagement-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    filter: brightness(0.6); /* Overlay scuro per leggibilità testo */
}

/* Contenitore Testo in Grid sopra l'immagine */
.engagement-card-top {
    position: relative;
    z-index: 2; 
    width: 100%;
    padding: 64px; 
    display: grid;
    /* Struttura: Titolo fisso a sx, Testo flessibile a dx */
    grid-template-columns: 200px 1fr; 
    column-gap: clamp(40px, 15vw, 350px); /* Spazio dinamico tra etichetta e testo */
    align-items: start;
}

.engagement-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px; 
}

.engagement-card-label .label-text {
    font-size: 20px;
    color: var(--text-light);
    font-weight: 300;
}

/* Testo grande stile Technology */
.engagement-card-text {
    font-size: clamp(24px, 3.8vw, 46px);
    line-height: 1.2;
    font-weight: 300;
    color: var(--text-light);
    margin: 0;
    max-width: 95%;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); 
}

/* =========================
   RESPONSIVE (MOBILE)
========================= */
@media (max-width: 980px) {
    .events-engagement {
        padding-bottom: 40px;
    }

    .engagement-card {
        min-height: 320px;
    }

    .engagement-card-top {
        grid-template-columns: 1fr;
        padding: 40px 32px;
        gap: 24px;
    }
    
    .engagement-card-text {
        font-size: clamp(20px, 5vw, 28px);
    }

    .events-upcoming {
        padding: 48px 0;
    }

    .events-upcoming-top {
        margin-bottom: 24px;
    }

    .events-upcoming-list {
        padding-bottom: 24px;
    }

    .events-card {
        min-height: auto;
        padding-bottom: 56px;
    }

    .events-card-arrow {
        position: absolute;
        top: 24px;
    }
}

/* ===== UPCOMING EVENTS (STILE TECHNOLOGY) ===== */
.events-upcoming {
    width: 100%;
    padding: 80px 0;
    background: var(--bg);
  }
  
  /* Header della sezione allineato allo stile System */
  .events-upcoming-top {
    padding: 12px clamp(16px, 3vw, 48px) 0;
    margin-bottom: 32px;
  }
  
  .events-upcoming-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 300;
    color: var(--text-dark);
  }
  
  /* Contenitore lista: una card sopra l'altra a larghezza intera */
  .events-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Gap ereditato da Technology */
    padding: 0 clamp(16px, 3vw, 48px) 40px;
  }
  
  /* Stile Card ereditato da .system-card */
 /* ===== UPCOMING EVENTS - CORREZIONI ===== */

.events-card {
    background: #253126;
    color: var(--text-light);
    border-radius: 20px;
    min-height: 320px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    /* Rimosso gap qui per gestire meglio lo spazio tra top e bottom */
    position: relative;
    width: 100%;
}

/* Allineamento testi in basso */
.events-card-body {
    margin-top: auto; /* Questa riga spinge tutto il blocco body in fondo */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Spazio tra H2 e P */
}

.events-card-body h2 {
    /* Rimosso margin-top auto da qui per darlo al contenitore padre */
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 300;
    line-height: 1.1;
    margin: 0;
}

.events-card-body p {
    font-size: 16px;
    font-weight: 200;
    line-height: 1.25;
    color: #D1D0D1;
    margin: 0;
    max-width: 800px;
}

/* FRECCIA GRAFICA - Convergenza Perfetta */
.events-card-arrow {
    position: absolute; 
    right: 28px; 
    bottom: 28px;
    width: 24px; 
    height: 24px;
    text-decoration: none;
}

.events-card-arrow span {
    position: absolute;
    background-color: var(--text-light);
    transition: all 0.3s ease;
    /* Punto di origine per la rotazione: l'estremità destra della linea */
    transform-origin: right center; 
}

/* Linea orizzontale centrale */
.events-card-arrow span:nth-child(1) {
    width: 20px; 
    height: 1.5px;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
}

/* Punta superiore */
.events-card-arrow span:nth-child(2) {
    width: 10px; 
    height: 1.5px;
    top: 50%;
    right: 2px;
    /* Ruota partendo dalla punta destra */
    transform: translateY(-50%) rotate(45deg); 
}

/* Punta inferiore */
.events-card-arrow span:nth-child(3) {
    width: 10px; 
    height: 1.5px;
    top: 50%;
    right: 2px;
    /* Ruota partendo dalla punta destra */
    transform: translateY(-50%) rotate(-45deg);
}

/* Effetto Hover */
.events-card:hover .events-card-arrow span {
    background-color: var(--accent);
}

.events-card:hover .events-card-arrow span:nth-child(1) {
    transform: translateY(-50%) translateX(4px);
}
.events-card:hover .events-card-arrow span:nth-child(2) {
    transform: translateY(-50%) translateX(4px) rotate(45deg);
}
.events-card:hover .events-card-arrow span:nth-child(3) {
    transform: translateY(-50%) translateX(4px) rotate(-45deg);
}

/* Stato iniziale Card .events */
.events-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
  }
  
  /* Classe attivata via JavaScript */
.events-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

@media (max-width: 980px) {
  :root {
    --content-x: 0%;
    --content-w: 100%;
  }
}