/* ============================================================
   Archivio Gino Marotta — Header/Footer definitivi (v3 top:-50)
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#4c4c4c;background:#fff;line-height:1.5}

.container-980,.brand-row,.header-rule,.main-menu,.sub-menu,main#content,.site-footer .footer-inner{
  max-width:980px;margin:0 auto;padding:0 20px;
}

.site-header{background:#fff;padding:10px 0 0;position:relative;}

/* Logo + titolo */
.brand-row{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:8px 20px 14px;line-height:0;position:relative;
}
.brand-row .logo img{width:238px;height:119px;display:block}
.brand-row .title{
  margin:0;text-transform:uppercase;color:#b8b8b8;letter-spacing:.36em;
  font-weight:300;font-size:28px;line-height:1;white-space:nowrap;
}

/* La barra non è usata per posizionare, fa solo da separatore/placeholder */
.header-rule{position:relative;height:0;padding:0}

/* === ITA/ENG "dentro" il logo: offset verticale calibrato === */
.lang-menu{
  position:absolute;
  right:86px;      /* allineamento orizzontale come approvato */
  top:-50px;       /* <-- valore definitivo */
  transform:none;
  display:flex; gap:14px;
  z-index:2;
}
.lang-menu a{
  font-size:12px;text-transform:uppercase;letter-spacing:.25em;
  color:#6c7a86;text-decoration:none;border:0;padding-bottom:1px;
}
.lang-menu a:hover{color:#111}
.lang-menu a.active{color:#111 !important;font-weight:600 !important}

/* MENU PRINCIPALE */
.main-menu{
  display:flex;justify-content:space-between;gap:24px;background:#fff;padding:4px 20px;
}
.main-menu a{
  text-decoration:none;color:#4c4c4c;font-size:13.5px;font-weight:400;
  text-transform:uppercase;letter-spacing:.28em;padding:1px 0 4px;transition:color .15s;
}
.main-menu a:hover{color:#111}
.main-menu a.active{color:#111 !important;font-weight:600}

/* CONTENUTO + GALLERY 200px (opzionale, può restare anche altrove) */
main#content{margin:14px auto 40px}
.section{margin:40px 0}
.decade{display:flex;align-items:center;justify-content:center;margin:40px auto 20px;text-transform:uppercase;letter-spacing:.2em;font-size:16px;color:#555}
.decade .line{flex:1;height:1px;background:#ccc}
.decade .label{margin:0 12px;font-weight:600}
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px auto;max-width:1300px}
figure.tile{display:inline-block;width:200px;margin:6px;border:0;vertical-align:top}
.thumb-wrap{width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:3px;background:#f8fafc;border:1px solid #f1f5f9}
.thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease,opacity .25s ease}
.tile a:hover .thumb-wrap img{transform:scale(1.05);opacity:.9}

/* FOOTER */
.site-footer{background:#fff;border-top:1px solid #bfc5c8;padding:24px 0 26px;color:#8f8f8f;font-size:14px;line-height:1.6}
.site-footer .footer-inner{text-align:center}
.footer-legal{margin-bottom:10px;letter-spacing:.02em;color:#8f8f8f}
.footer-legal .sep,.footer-links .sep{margin:0 .45em;color:#a8adb0}
.footer-social{display:flex;justify-content:center;align-items:center;gap:18px;margin:6px 0 10px}
.footer-social .ico{width:36px;height:36px;border-radius:50%;background:#d8dadc;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:filter .15s}
.footer-social .ico:hover{filter:brightness(.9)}
.footer-social svg{width:20px;height:20px;fill:#6f777c}
.footer-links{color:#6c7a86;font-size:14px}
.footer-links a{color:#6c7a86;text-decoration:none;border-bottom:1px solid #6c7a86;padding-bottom:2px}
.footer-links a:hover{border-bottom-color:transparent}

/* GLightbox bianco piatto (opzionale se usi le gallery) */
.goverlay{background:#fff !important;opacity:1 !important}
.gslide,.gslide-media,.gslide-content,.ginner-container{background:#fff !important;box-shadow:none !important;filter:none !important}
.gslide-media{margin:0 !important;border-radius:2px}
.gslide-media img,.gslide-media video{box-shadow:none !important;border:none !important;outline:none !important;background:#fff !important}
.gdesc{padding:10px 14px !important;background:#fff !important;opacity:1 !important;filter:none !important}
.gdesc-inner{text-align:center !important;opacity:1 !important;filter:none !important}
.gdesc-inner p{margin:4px 0;line-height:1.4;font-size:1rem;color:#000;font-weight:700;font-family:Arial,Helvetica,sans-serif;opacity:1 !important;text-shadow:none !important;-webkit-text-fill-color:#000}
.gdesc-inner .italic{font-style:italic}
.gclose svg,.gnext svg,.gprev svg{fill:#111 !important;stroke:#111 !important}
.glightbox-clean .gdesc,
.glightbox-clean .gdesc *,
.glightbox-clean .gslide-description,
.glightbox-clean .gslide-description *,
.glightbox-clean .gslide-desc,
.glightbox-clean .gslide-desc *,
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-title *,
.glightbox-clean .desc-bottom,
.glightbox-clean .desc-bottom *,
.glightbox-mobile .gdesc,
.glightbox-mobile .gdesc *,
.glightbox-mobile .gslide-description,
.glightbox-mobile .gslide-description *,
.glightbox-mobile .gslide-desc,
.glightbox-mobile .gslide-desc *,
.glightbox-mobile .gslide-title,
.glightbox-mobile .gslide-title *,
.glightbox-mobile .desc-bottom,
.glightbox-mobile .desc-bottom *{
  color:#000 !important;
  font-weight:700 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  line-height:1.4 !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
  -webkit-text-fill-color:#000 !important;
}

@media (max-width: 768px) {
  .glightbox-mobile .gslide-media,
  .glightbox-mobile .gslide-image {
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
    margin:0 auto 10px !important;
    overflow:visible !important;
    display:block !important;
  }

  .glightbox-mobile .gslide-media img,
  .glightbox-mobile .gslide-image img,
  .glightbox-mobile .gslide-media video {
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:68vh !important;
    margin:0 auto !important;
    object-fit:contain !important;
  }

  .glightbox-mobile .gdesc,
  .glightbox-mobile .gslide-description,
  .glightbox-mobile .gslide-desc,
  .glightbox-mobile .desc-bottom {
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 !important;
    padding:12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    background:#fff !important;
  }

  .glightbox-mobile .gdesc-inner,
  .glightbox-mobile .gslide-description > * {
    max-width:100% !important;
  }
}

/* Responsivo fine-tuning (se mai servisse) */
@media(max-width:900px){
  .brand-row{
    flex-direction:column;
    gap:10px;
    padding-bottom:10px;
    line-height:1.1;
  }
  .brand-row .logo img{
    width:min(220px, 60vw);
    height:auto;
  }
  .brand-row .title{
    white-space:normal;
    text-align:center;
    font-size:20px;
    letter-spacing:.22em;
    line-height:1.2;
  }
  .header-rule{
    height:auto;
    padding:0 0 6px;
  }
  .lang-menu{
    position:static;
    justify-content:center;
    gap:12px;
    margin-top:4px;
  }
  .main-menu{
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 18px;
    padding-top:8px;
  }
  .main-menu a{
    font-size:12px;
    letter-spacing:.18em;
  }
  .sub-opere{
    padding:14px 20px 4px;
    gap:8px 18px;
  }
  .sub-opere a{
    margin:0;
    white-space:normal;
  }
}
@media(max-width:640px){
  .container-980,.brand-row,.header-rule,.main-menu,.sub-menu,main#content,.site-footer .footer-inner{
    padding-left:14px;
    padding-right:14px;
  }
  .site-header{
    padding-top:6px;
  }
  .brand-row .title{
    font-size:16px;
    letter-spacing:.14em;
  }
  .lang-menu a{
    font-size:11px;
    letter-spacing:.18em;
  }
  .main-menu{
    gap:8px 14px;
  }
  .main-menu a{
    font-size:11px;
    letter-spacing:.12em;
  }
  .gallery{
    gap:8px;
  }
  figure.tile{
    width:calc(33.333% - 6px);
    margin:0;
  }
  .sub-opere{
    font-size:14px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 16px;
    text-align:left;
  }
  .sub-opere a{
    text-align:center;
  }
  .footer-legal .sep,
  .footer-links .sep{
    display:none;
  }
  .footer-legal,
  .footer-links{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
}
@media(max-width:480px){
  .brand-row .logo img{
    width:min(190px, 58vw);
  }
  .brand-row .title{
    font-size:14px;
    letter-spacing:.1em;
  }
  .main-menu{
    gap:6px 10px;
  }
  .sub-opere{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 12px;
    padding-top:12px;
    padding-bottom:2px;
  }
  .sub-opere a{
    width:auto;
    text-align:center;
  }
  figure.tile{
    width:calc(50% - 4px);
  }
}
/* ================================
   Sotto-menù "Le opere"
   ================================ */

.sub-opere {
  max-width: 1160px;        /* allineato al corpo pagina */
  margin: 0 auto 24px;      /* centrato, con spazio sotto */
  padding: 18px 0 8px;      /* spazio sopra e sotto il testo */
  /* border-top: 1px solid #cfcfcf;  linea superiore come nello screenshot */
  font-size: 15px;
  letter-spacing: 0.015em;
  text-align: center;         /* se lo vuoi perfettamente centrato usa 'center' */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 28px;
}

.sub-opere a {
  display:block;
  margin-right: 0;
  text-decoration: none;
  color: #777;
  white-space: nowrap;      /* evita che spezzino su due righe dove possibile */
}

.sub-opere a.active {
  color: #000;
  font-weight: 600;         /* “Opere scelte” più marcato */
}

.sub-opere a:hover {
  color: #000;
}
/* Overlay: bianco puro, niente aloni */
.glightbox-container {
  background: #ffffff !important;
}

/* Immagine senza ombre o “effetti sporco” */
.glightbox-container .gslide,
.glightbox-container .gslide-media,
.glightbox-container .gslide-inner-content {
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Contenitore del video */
.video-embed {
  max-width: 640px;     /* larghezza massima del riquadro video */
  margin: 24px auto;    /* centrato, con un po' di spazio sopra/sotto */
}

/* Il video occupa tutta la larghezza del suo contenitore */
.video-embed video {
  width: 100%;
  height: auto;
  display: block;
}

/* Contenitore per i video verticali “problematici” */
.video-embed.video-portrait {
  max-width: 640px;       /* regola a gusto: 480 / 560 / 640… */
  margin: 24px auto;
  aspect-ratio: 16 / 9;   /* riquadro orizzontale */
  background: #000;       /* sfondo nero tipo cinema */
  overflow: hidden;
}

/* Il video si adatta dentro al riquadro senza deformarsi */
.video-embed.video-portrait video {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* il video verticale sta “dentro” il 16:9 */
  display: block;
}

/* Banner cookie: nascosto di default */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;               /* default: nascosto */
  background: rgba(20, 20, 20, 0.96);
  color: #f5f5f5;
  font-size: 14px;
}

/* Quando il JS decide di mostrarlo */
.cookie-banner.is-visible {
  display: block;
}

.cookie-inner {
  max-width: 1160px;           /* allineato al corpo pagina */
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.cookie-text {
  margin: 0;
  line-height: 1.4;
}

.cookie-text a {
  color: #ffffff;
  text-decoration: underline;
}

.cookie-button {
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.cookie-button:hover {
  background: #ffffff;
  color: #111111;
}

/* Piccoli schermi: testo e bottone vanno a capo */
@media (max-width: 640px) {
  .cookie-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-button {
    margin-left: 0;
    align-self: flex-end;
  }
}

@media (max-width: 640px) {
  .sub-opere {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    padding: 12px 14px 4px;
  }

  .sub-opere a {
    width: auto;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .sub-opere {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
  }

  .sub-opere a {
    font-size: 12px;
    letter-spacing: 0;
  }
}

@media (max-width: 768px) {
  .glightbox-container .ginner-container,
  .glightbox-container .gslide,
  .glightbox-container .gslide-content,
  .glightbox-container .gslide-inner-content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .glightbox-container .gslide-media,
  .glightbox-container .gslide-image,
  .glightbox-container .gslide-media img,
  .glightbox-container .gslide-image img,
  .glightbox-container .gslide-media video {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 62vh !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .glightbox-container .gslide-media,
  .glightbox-container .gslide-image {
    margin-bottom: 10px !important;
    overflow: visible !important;
  }

  .glightbox-container .gdesc,
  .glightbox-container .gslide-description,
  .glightbox-container .gslide-desc,
  .glightbox-container .desc-bottom {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    background: #fff !important;
  }
}