/* ============================================
   UNOAVENTI — fixes.css
   1. Video YouTube responsive (fix desktop)
   2. Hamburger menu mobile
   3. Lightbox galleria immagini
   4. Fix hero mobile — portrait e landscape
   5. Hero slideshow — fade automatico
   6. Hero overlay — testi e gradiente aggiornati
   ============================================ */


/* ============================================
   1. FIX VIDEO YOUTUBE DESKTOP
   ============================================ */

.articolo-video {
  position: relative;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 16 / 9;
  padding-bottom: 0;   /* sovrascrive il vecchio trick */
  height: auto;
  overflow: hidden;
  border: 1.5px solid var(--inchiostro);
  background: var(--inchiostro);
}

.articolo-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ============================================
   2. HAMBURGER MENU MOBILE
   ============================================ */

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}

.ham-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--inchiostro);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.nav-hamburger.is-open .ham-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open .ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.is-open .ham-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 600px) {
  .nav-hamburger {
    display: flex;
  }

  /* Sovrascrive il display:none già in style.css */
  .nav-links {
    display: none !important;
  }

  .nav-links--open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--carta);
    border-bottom: 1.5px solid var(--inchiostro);
    z-index: 200;
    animation: menu-slide-in 0.2s ease;
  }

  .nav-links--open a {
    border-left: none;
    border-top: 1px solid var(--carta-mid);
    padding: 18px 24px;
    font-size: 13px;
    justify-content: flex-start;
  }

  .nav-links--open a::after {
    bottom: 0;
    height: 2px;
  }
}

@keyframes menu-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================
   3. LIGHTBOX GALLERIA IMMAGINI
   ============================================ */

/* Overlay — nascosto di default */
#lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 18, 0.96);
  z-index: 9000;
  display: none;               /* il JS aggiunge .lb-open */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.2s ease;
  opacity: 0;
}

/* Visibile: JS aggiunge questa classe */
#lb-overlay.lb-open {
  display: flex;
  opacity: 1;
}

/* Contenitore centrale immagine */
#lb-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
  pointer-events: none; /* click sullo sfondo passano all'overlay */
}

#lb-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  pointer-events: none;
  outline: 1px solid rgba(244, 239, 228, 0.1);
}

#lb-cap {
  margin-top: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.4);
  text-align: center;
  min-height: 14px;
  pointer-events: none;
}

#lb-count {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(244, 239, 228, 0.3);
  pointer-events: none;
}

/* Bottoni condivisi */
#lb-close,
#lb-prev,
#lb-next {
  position: fixed;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(244, 239, 228, 0.25);
  color: #F4EFE4;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.2s;
  pointer-events: all;
  line-height: 1;
}

#lb-close:hover,
#lb-prev:hover,
#lb-next:hover {
  background: rgba(244, 239, 228, 0.1);
  border-color: rgba(244, 239, 228, 0.5);
}

#lb-close {
  top: 20px;
  right: 20px;
  font-family: var(--font-mono, monospace);
  font-size: 14px;
}

#lb-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  padding-bottom: 2px;
}

#lb-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  padding-bottom: 2px;
}

/* Cursore zoom-in sulle figure cliccabili */
.galleria-item {
  cursor: zoom-in;
}

/* Mobile */
@media (max-width: 600px) {
  #lb-img   { max-width: 96vw; max-height: 72vh; }
  #lb-prev  { left: 6px; }
  #lb-next  { right: 6px; }
  #lb-close { top: 12px; right: 12px; }
}


/* ============================================
   4. FIX HERO MOBILE — portrait e landscape
   ============================================ */

@media (max-width: 900px) {
  .hero {
    max-height: none;
  }

  .hero-featured {
    min-height: 300px;
  }
}

@media (max-width: 600px) {
  .hero {
    max-height: none;
    min-height: auto;
  }

  .hero-title {
    font-size: clamp(56px, 18vw, 100px);
    margin-bottom: 24px;
  }

  .hero-left {
    padding: 40px 20px 36px;
  }

  .hero-featured {
    min-height: 260px;
    max-height: 320px;
  }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-stat {
    padding: 14px 12px;
  }

  .hero-stat-num {
    font-size: 28px;
  }

  .hero-stat-label {
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .hero-desc {
    font-size: 14px;
  }

  .hero-tags .tag {
    font-size: 9px;
    padding: 4px 10px;
  }
}

/* Landscape mobile */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
    max-height: none;
  }

  .hero-left {
    border-right: 1.5px solid var(--inchiostro);
    border-bottom: none;
    padding: 32px 24px;
  }

  .hero-title {
    font-size: clamp(48px, 8vw, 80px);
    margin-bottom: 16px;
  }

  .hero-featured {
    min-height: 200px;
  }

  .hero-stats {
    display: none;
  }
}


/* ============================================
   5. HERO SLIDESHOW — fade automatico
   ============================================ */

.hero-slideshow {
  cursor: default;
}

.hero-slides-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Ogni slide: assoluta, piena, invisibile di default */
.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  display: block;
  /* Ken Burns leggero */
  transform: scale(1.04);
  transition: opacity 0.9s ease-in-out, transform 6s ease-out;
}

/* Slide attiva */
.hero-slide-img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Dots indicatori — RIMOSSI: sostituiti da etichetta dinamica */
/* .hero-slide-dots, .hero-slide-dot → vedi #heroSlideLabel */

/* L'overlay testo deve stare sopra le slide */
.hero-slideshow .hero-featured-overlay {
  position: relative;
  z-index: 3;
}

/* Il pattern bg sopra le immagini per la texture carta */
.hero-slideshow .hero-featured-bg {
  z-index: 1;
  pointer-events: none;
  opacity: 0.25;   /* ridotto: non deve coprire l'immagine */
}

@media (max-width: 900px) {
  /* placeholder — etichetta dinamica non necessita aggiustamenti specifici tablet */
}


/* ============================================
   6. HERO OVERLAY — testi e gradiente
   ============================================ */

/*
   Gradiente scuro dal basso: l'immagine respira in cima,
   il testo ha uno sfondo sicuro dove serve.
   Sostituisce il vecchio gradiente carta chiaro che
   "sbiadiva" l'immagine e indeboliva il testo.
*/
.hero-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(26, 22, 18, 0.04) 0%,
    rgba(26, 22, 18, 0.10) 35%,
    rgba(26, 22, 18, 0.68) 75%,
    rgba(26, 22, 18, 0.82) 100%
  );
  pointer-events: none;
}

/* L'overlay testo sale sopra lo pseudo-element */
.hero-featured .hero-featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 0 32px 28px;
  /* Rimuove il vecchio background carta */
  background: none;
}

/* Barra accent — colore aggiornato via JS ad ogni slide */
.hero-overlay-accent-bar {
  width: 28px;
  height: 3px;
  background: var(--cmyk-m); /* colore iniziale, sovrascitto da JS */
  margin-bottom: 14px;
  transition: background 0.4s ease;
}

/* Titolo grande, bianco carta */
.hero-featured-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--carta);
  margin-bottom: 16px;
}

/* Punto dopo il titolo — colore sincronizzato alla barra via JS */
.hero-title-dot {
  color: var(--cmyk-m);
}

/* ---- ETICHETTA DINAMICA PER SLIDE ---- */
/*
  Sostituisce le pill statiche: mostra la categoria
  della slide corrente con il suo colore CMYK.
  Struttura HTML:
    <div class="hero-slide-label-wrap" id="heroSlideLabel">
      <span class="hero-slide-label-pill" id="heroSlideLabelPill">effimera</span>
      <span class="hero-slide-label-text" id="heroSlideLabelText">Architetture effimere</span>
    </div>
*/
.hero-slide-label-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Badge categoria — background e color impostati da JS */
.hero-slide-label-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 10px;
  background: var(--cmyk-m); /* sovrascitto da JS */
  color: var(--carta);
  opacity: 1;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

/* Testo descrittivo della categoria */
.hero-slide-label-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.65);
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Pill statiche vecchie — mantenute per retrocompatibilità ma nascoste */
.hero-overlay-pills       { display: none; }
.hero-overlay-pill        { display: none; }
.hero-overlay-pill--c     { display: none; }
.hero-overlay-pill--m     { display: none; }
.hero-overlay-pill--y     { display: none; }

/* Rimuove label e sub-label della vecchia struttura
   (rimangono nel DOM ma non si vedono più — zero breaking) */
.hero-featured-label,
.hero-featured-year {
  display: none;
}

/* Mobile: adatta i testi overlay */
@media (max-width: 600px) {
  .hero-featured .hero-featured-overlay {
    padding: 0 20px 20px;
  }

  .hero-featured-title {
    font-size: 36px;
    margin-bottom: 12px;
  }

  .hero-overlay-accent-bar {
    margin-bottom: 10px;
  }

  .hero-slide-label-pill {
    font-size: 8px;
    padding: 2px 8px;
  }

  .hero-slide-label-text {
    font-size: 9px;
  }
}

@media (max-width: 900px) {
  .hero-slide-dots {
    bottom: 66px;
  }
}


/* ============================================
   7. HERO TAG SINISTRA — hover colore categoria
   ============================================ */

/*
  I tag nella colonna sinistra dell'hero mostrano
  tutte le categorie. Al hover il bordo inferiore
  (l'underline animato via ::after in style.css)
  prende il colore specifico della categoria invece
  del nero generico.

  Struttura HTML:
    <span class="tag tag-c">Architetture effimere</span>
    <span class="tag tag-m">Interior design</span>
    <span class="tag tag-y">Arredo urbano</span>
    <span class="tag tag-k">Design di prodotto</span>    ← aggiunto
    <span class="tag tag-p">Grafica & comunicazione</span> ← aggiunto
    <span class="tag tag-v">Progetti visionari</span>    ← aggiunto
*/

/* tag-c → cyan: già gestito da style.css (.tag.tag-c) */
/* tag-m → magenta: già gestito da style.css (.tag.tag-m) */
/* tag-y → giallo: già gestito da style.css (.tag.tag-y) */

/* Hover bordo + testo per i tag colorati esistenti */
.hero-tags .tag.tag-c:hover {
  background: var(--cmyk-c);
  border-color: var(--cmyk-c);
  color: var(--carta);
}

.hero-tags .tag.tag-m:hover {
  background: var(--cmyk-m);
  border-color: var(--cmyk-m);
  color: var(--carta);
}

.hero-tags .tag.tag-y:hover {
  background: var(--c-yel-dark);
  border-color: var(--c-yel-dark);
  color: var(--inchiostro);
}

/* Nuovi tag per le categorie senza classe CMYK dedicata */

/* Design di prodotto — grigio medio */
.tag.tag-k {
  border-color: #6B6560;
  color: #6B6560;
}
.tag.tag-k:hover {
  background: #6B6560;
  border-color: #6B6560;
  color: var(--carta);
}

/* Grafica & comunicazione — viola Pantone */
.tag.tag-p {
  border-color: var(--pantone);
  color: var(--pantone-dark);
}
.tag.tag-p:hover {
  background: var(--pantone);
  border-color: var(--pantone);
  color: var(--carta);
}

/* Progetti visionari — nero K */
.tag.tag-v {
  border-color: var(--inchiostro);
  color: var(--inchiostro);
}
.tag.tag-v:hover {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--carta);
}

/* Sostenibilità e Didattica — hover neutro carta scura
   (non sono categorie progetto, restano neutrali) */
.hero-tags .tag:not([class*="tag-"]):hover,
.hero-tags .tag:not(.tag-c):not(.tag-m):not(.tag-y):not(.tag-k):not(.tag-p):not(.tag-v):hover {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--carta);
}