/* Galleria moderna basata sulla struttura originale */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(135deg, #1a1714 0%, #2a2a2a 100%);
  color: #f5f4e8;
  font-family: 'Raleway', Arial, sans-serif;
}

body {
  min-height: 100vh;
}

/* Header moderno */
.header {
  background: rgba(42, 42, 42, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2rem;
  text-align: center;
  border-bottom: 2px solid rgba(196, 168, 130, 0.3);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.title2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 300;
  color: #f5f4e8;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: none;
}

/* Container slider moderno */
.container-slider {
  position: relative;
  width: 90%;
  max-width: 1400px;
  margin: 3rem auto;
  padding: 0 1rem;
}

/* Visualizzazione galleria verticale */
.slider-for {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 3rem;
}

.slider-for div {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  background: #0a0a0a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slider-for div:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 70px rgba(196, 168, 130, 0.3);
}

.slider-for div img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: 600px;
  max-width: 100%;
  object-fit: contain;
  background: #000;
}

.slider-for div h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(26, 23, 20, 0.95), transparent);
  color: #f5f4e8;
  padding: 2rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.6;
  font-family: 'Raleway', Arial, sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.slider-for div:hover h3 {
  opacity: 1;
}

.slider-for div h3::before {
  content: '';
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  /* Forza sempre visibilità */
  opacity: 1 !important;
}

/* Mostra il nome della raccolta basato sul data attribute */
.slider-for div[data-raccolta="in-parole-povere"] h3::before {
  content: 'In Parole Povere';
}

.slider-for div[data-raccolta="manoscritti-ritrovati"] h3::before {
  content: 'Manoscritti Ritrovati';
}

.slider-for div[data-raccolta="arte"] h3::before {
  content: 'ARTE! ARTE! ARTE!';
}

.slider-for div[data-raccolta="altre-opere"] h3::before {
  content: 'Altre Opere';
}
.slider-for div[data-raccolta="tutte-le-parole"] h3::before {
  content: 'Tutte le parole';
}


.slider-for div[data-raccolta="palinsesti"] h3::before {
  content: 'Palinsesti';
}

.slider-for div[data-raccolta="legenda-metropolitana"] h3::before {
  content: 'Legenda Metropolitana';
}

.slider-for div[data-raccolta="parola-di-musicista"] h3::before {
  content: 'Parola di Musicista';
}

.slider-for div[data-raccolta="opere-varie"] h3::before {
  content: 'Opere Varie';
}
.slider-for div[data-raccolta="periodo-figurativo"] h3::before {
  content: 'Periodo Figurativo';
}


/* Aggiungo il nome della raccolta per ogni sezione */
/* Rimosso: associazione basata su posizioni assolute (nth-child) perché è fragile e può sbagliare quando il contenuto cambia.
   Usare solo i data-raccolta specifici in HTML per mostrare il nome corretto della raccolta. */

/* Stili slider-nav rimossi - non più utilizzati nella galleria moderna */

/* Responsive */
@media screen and (max-width: 1024px) {
  .container-slider {
    width: 95%;
  }
  
  .slider-for div img {
    max-height: 60vh;
  }
  
  /* slider-nav rimosso - non più utilizzato */
}

@media screen and (max-width: 768px) {
  .container-slider {
    width: 98%;
    margin: 2rem auto;
    padding: 0 1rem;
  }
  
  .title2 {
    font-size: 2rem;
  }
  
  .header {
    padding: 1.5rem;
  }
  
  .slider-for div img {
    max-height: 50vh;
  }
  
  .slider-for div h3 {
    font-size: 0.9rem;
    padding: 1.5rem 1rem;
  }
  
  /* slider-nav e slick rimossi - non più utilizzati */
}

@media screen and (max-width: 480px) {
  .slider-for div img {
    max-height: 40vh;
  }
  
  /* slider-nav rimosso - non più utilizzato */
  
  .slider-for div h3 {
    font-size: 0.8rem;
    padding: 1rem 0.5rem;
  }
  
  .title2 {
    font-size: 1.5rem;
  }
}

/* Stili ereditati dal sito originale */
.title {
  font-family: "Arial";
  font-size: 18pt;
  letter-spacing: 1em;
  color: #D5C6A2;
}

.title-center {
  font-family: "Arial";
  font-size: 18pt;
  letter-spacing: 1em;
  color: #D5C6A2;
  text-align: center;
}

.links {
  font-family: "Arial";
  font-size: 12pt;
  color: #D5C6A2;
  font-weight: bold;
}

.menu {
  font-family: "Arial";
  font-size: 10pt;
  color: #D5C6A2;
  font-weight: bold;
}

.copy {
  font-family: "Arial";
  font-size: 10pt;
  color: #D5C6A2;
}

.big {
  font-family: "Arial";
  font-size: 20pt;
  color: #D5C6A2;
}

.small {
  font-family: "Arial";
  font-size: 9pt;
  color: #D5C6A2;
}

.piccolo {
  font-family: "Arial";
  font-size: 12pt;
  color: #D5C6A2;
  font-weight: bold;
}

.medio {
  font-family: "Arial";
  font-size: 16pt;
  color: #D5C6A2;
  font-weight: bold;
}

.grande {
  font-family: "Arial";
  font-size: 20pt;
  color: #D5C6A2;
  font-weight: bold;
}

.bottone {
  background-color: black;
  border-color: #BDA56E;
  color: #BDA56E;
  cursor: pointer;
  border-radius: 5px;
}

a:link {
  color: #BDA56E;
  text-decoration: none;
}

a:visited {
  color: #BDA56E;
  text-decoration: none;
}

a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

a:active {
  color: #BDA56E;
  text-decoration: none;
}

/* Footer moderno */
.footer-info {
  text-align: center;
  padding: 3rem 2rem;
  margin-top: 4rem;
  border-top: 1px solid rgba(196, 168, 130, 0.2);
  background: rgba(26, 23, 20, 0.5);
}

.footer-info p {
  color: #D5C6A2;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.stats {
  margin-top: 2rem;
}