@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');

:root {
  --black: #0b0b0b;
  --white: #f7f4ed;
  --cream: #ded5c4;
  --muted: #8d867a;
  --line: rgba(255,255,255,.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: .12;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.35) 0 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
}

.cursor-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cursor-color, var(--white));
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9998;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
  transition: background-color .18s ease, background .18s ease;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 34px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  mix-blend-mode: normal;
}

.topbar nav { display: flex; gap: 24px; }
.topbar a:hover { opacity: .55; }

.panel { position: relative; min-height: 100vh; }
.dark { background: var(--black); color: var(--white); }
.light { background: var(--white); color: var(--black); }
.cream { background: var(--cream); color: var(--black); }

.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 90px 44px 44px;
  overflow: hidden;
}



.hero-meta {
  position: absolute;
  top: 96px;
  left: 44px;
  right: 44px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
}

.mega-title {
  position: relative;
  z-index: 2;
  font-size: clamp(70px, 15vw, 210px);
  line-height: .78;
  letter-spacing: -0.09em;
  font-weight: 900;
  text-transform: uppercase;
  max-width: 1200px;
}

.hero-caption {
    margin-top: 28px;
    max-width: 620px;
    font-size: larger;
    line-height: 1.15;
    color: rgba(255,255,255,.75);
    font-weight: 300;
}
.scroll-hint {
  position: absolute;
  right: 44px;
  bottom: 44px;
  writing-mode: vertical-rl;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.split-section {
  display: grid;
  grid-template-columns: .25fr 1fr .75fr;
  gap: 50px;
  align-items: center;
  padding: 80px 44px;
}
.section-number {
  font-size: clamp(52px, 10vw, 160px);
  font-weight: 900;
  letter-spacing: -.08em;
  opacity: .18;
}
.eyebrow, .small-label {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 28px;
  color: currentColor;
  opacity: .68;
}
.split-text h2,
.statement h2,
.section-head h2,
.ending h2 {
    font-size: clamp(42px, 6vw, 96px);
    line-height: .92;
    letter-spacing: -.055em;
    font-weight: 500;
}
.image-card {
  height: 75vh;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
}
.image-card.tall { transform: translateY(35px); }

.statement {
  padding: 80px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.statement h2 { max-width: 1280px; }
.floating-note {
  position: absolute;
  right: 8vw;
  bottom: 14vh;
  border: 1px solid rgba(0,0,0,.4);
  padding: 16px 20px;
  border-radius: 999px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.cards-section { padding: 90px 44px; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 44px;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.card {
  min-height: 430px;
  border: 1px solid var(--line);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255,255,255,.03);
  transition: transform .4s ease, background .4s ease;
}
.card:hover { transform: translateY(-10px); background: rgba(255,255,255,.08); }
.card span { font-size: 14px; color: rgba(255,255,255,.55); }
.card h3 { font-size: clamp(34px, 4vw, 70px); letter-spacing: -.06em; line-height: .9; }
.card p { font-size: 18px; line-height: 1.35; color: rgba(255,255,255,.72); }

.horizontal-section { height: 520vh; }
.horizontal-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.horizontal-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.slide {
  flex: 0 0 82vw;
  height: 100vh;
  padding: 60px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(0,0,0,.15);
}
.intro-slide h2,
.text-slide h2 {
    font-size: clamp(50px, 8vw, 130px);
    line-height: 1;
    letter-spacing: -.08em;
    max-width: 1000px;
    font-weight: 500;
}
.intro-slide p:last-child,
.text-slide p {
  margin-top: 30px;
  max-width: 560px;
  font-size: 21px;
  line-height: 1.3;
}
.photo-slide { justify-content: flex-end; }
.photo-slide img {
  height: 72vh;
  width: 65%;
  margin-left: auto;
  object-fit: cover;
  filter: contrast(105%);
}
.photo-slide.big img { width: 82%; height: 82vh; }
.slide-caption {
  margin-top: 18px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
}

.gallery-wall { padding: 80px 44px; overflow: hidden; }
.wall-text h2 {
  font-size: clamp(48px, 8vw, 130px);
  line-height: .85;
  letter-spacing: -.07em;
  max-width: 900px;
  margin-bottom: 60px;
}






.ending {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 90px 44px 38px;
}
.ending h2 { max-width: 1250px; }
.ending footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(0,0,0,.35);
  padding-top: 24px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.reveal {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1s ease, transform 1s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .cursor-dot { display: none; }
  .topbar nav { display: none; }
  .hero-meta { flex-direction: column; gap: 8px; }
  .split-section { grid-template-columns: 1fr; padding: 90px 24px; }
  .statement, .cards-section, .gallery-wall, .ending, .hero { padding-left: 24px; padding-right: 24px; }
  .cards-grid { grid-template-columns: 1fr; }
  .section-head { display: block; }
  .horizontal-section { height: auto; }
  .horizontal-sticky { position: relative; height: auto; overflow: visible; }
  .horizontal-track { display: block; transform: none !important; }
  .slide { width: 100%; height: auto; min-height: 100vh; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.15); }
  .photo-slide img, .photo-slide.big img { width: 100%; height: 65vh; }
  
  
  .ending footer { flex-direction: column; }
}


/* LIGHTBOX / APERTURA IMMAGINI IN GRANDE
   Aggiunta al template originale senza cambiare caratteri, effetti, layout o struttura. */
.js-lightbox-image {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.96);
  color: var(--white);
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 38px;
}

.lightbox.open {
  display: flex;
}

.lightbox-content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 42px;
  align-items: center;
}

.lightbox-image-wrap {
  width: 100%;
  height: 88vh;
  overflow: hidden;
  background: #000;
}

.lightbox-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox-text {
  align-self: end;
  padding-bottom: 30px;
  font-family: inherit;
}

.lightbox-text p:first-child {
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: .72;
}

.lightbox-text h2 {
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.06em;
  font-weight: 700;
  margin-bottom: 28px;
}

.lightbox-text p:last-child {
  font-size: 21px;
  line-height: 1.35;
  max-width: 560px;
  color: rgba(247,244,237,.78);
}

.close-lightbox {
  position: fixed;
  top: 28px;
  right: 34px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(247,244,237,0.45);
  background: transparent;
  color: var(--white);
  font-size: 34px;
  line-height: 42px;
  cursor: pointer;
  z-index: 20001;
  font-family: inherit;
}

.close-lightbox:hover {
  background: var(--white);
  color: var(--black);
}

@media (max-width: 900px) {
  .lightbox {
    padding: 22px;
  }

  .lightbox-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lightbox-image-wrap {
    height: 58vh;
  }

  .lightbox-text {
    align-self: start;
    padding-bottom: 0;
  }
}



/* CONTACT SECTION */

.alice-contact-section{
    min-height:100vh;
    background:#111;
    color:#f4f1ea;
    padding:120px 60px;
    display:flex;
    align-items:center;
}

.alice-contact-inner{
    width:100%;
    max-width:1200px;
}

.alice-contact-small{
    font-size:12px;
    letter-spacing:2.4px;
    text-transform:uppercase;
    margin-bottom:26px;
    opacity:0.7;
}

.alice-contact-section h2{
    font-size: clamp(50px, 10vw, 96px);
    line-height: 0.88;
    letter-spacing: -0.06em;
    font-weight: 200;
    margin-bottom: 70px;
    font-style: normal;
    font-family: Inter, Helvetica, Arial, sans-serif;
}

.alice-contact-form{
    display:flex;
    flex-direction:column;
    gap:24px;
    max-width:720px;
}

.alice-contact-form input,
.alice-contact-form textarea{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(244,241,234,0.3);
    padding:18px 0;
    color:#f4f1ea;
    font-size:18px;
    font-family:inherit;
    outline:none;
}

.alice-contact-form textarea{
    min-height:160px;
    resize:none;
}

.alice-contact-form input::placeholder,
.alice-contact-form textarea::placeholder{
    color:rgba(244,241,234,0.5);
}

.alice-contact-button{
    width:fit-content;
    margin-top:20px;
    padding:18px 34px;
    border:1px solid rgba(244,241,234,0.35);
    background:transparent;
    color:#f4f1ea;
    font-family:inherit;
    text-decoration:none;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:2px;
    cursor:pointer;
    transition:all 0.4s ease;
}

.alice-contact-button:hover{
    background:#f4f1ea;
    color:#111;
}

.alice-contact-details{
    display:flex;
    flex-wrap:wrap;
    gap:14px 28px;
    margin-top:42px;
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.alice-contact-details a{
    color:#f4f1ea;
    text-decoration:none;
    border-bottom:1px solid rgba(244,241,234,.35);
    padding-bottom:5px;
}

.alice-contact-details a:hover{
    opacity:.65;
}

@media(max-width:900px){

.alice-contact-section{
    padding:80px 24px;
}

.alice-contact-section h2{
    margin-bottom:50px;
}

}



/* ABOUT SECTION */

.alice-about-section{
    min-height: 100vh;
    background: #f4f1ea;
    color: #111;
    display: grid;
    grid-template-columns: 0.6fr 1.4fr;
    padding: 120px 60px;
    gap: 60px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.alice-about-small{
    font-size:12px;
    letter-spacing:2.4px;
    text-transform:uppercase;
    opacity:0.6;
}

.alice-about-right h2{
    font-size:clamp(40px,6vw,95px);
    line-height:0.94;
    letter-spacing:-0.06em;
    font-weight:500;
    max-width:1200px;
    margin-bottom:40px;
}

.alice-about-right p{
    font-size:22px;
    line-height:1.45;
    max-width:760px;
    opacity:0.82;
}

/* Tutti i titoli principali delle sezioni condividono lo stile di About. */
main h2,
.alice-contact-section h2{
    font-family:Inter, Helvetica, Arial, sans-serif !important;
    font-size:clamp(40px, 6vw, 95px) !important;
    font-weight:500 !important;
    line-height:1.05 !important;
    letter-spacing:-.06em !important;
}

/* La sezione finale dei messaggi resta più raccolta. */
.alice-contact-section h2{
    font-size:clamp(32px, 4.3vw, 68px) !important;
}

@media(max-width:900px){

.alice-about-section{
    grid-template-columns:1fr;
    padding:80px 24px;
    gap:30px;
}

.alice-about-right p{
    font-size:18px;
}

}




/* VISUAL WALL — immagini più distanziate */

.gallery-grid,
.visual-wall,
.archive-grid,
.mini-grid{
    gap:34px !important;
}

.gallery-item,
.visual-wall-item{
    padding:10px;
}

.gallery-item img,
.visual-wall-item img{
    border-radius:2px;
}

/* layout più arioso */

@media(min-width:1200px){

.gallery-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:42px !important;
    padding-top:20px;
}

}

@media(max-width:900px){

.gallery-grid{
    gap:22px !important;
}

}



/* CREATIVE COMMONS */

.alice-cc-section{
    background:#0d0d0d;
    color:#f4f1ea;
    padding:60px 24px 80px;
    border-top:1px solid rgba(244,241,234,0.08);
}

.alice-cc-inner{
    max-width:1400px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:24px;
}

.alice-cc-icons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    justify-content:center;
}

.alice-cc-icon{
    width:58px;
    height:58px;
    border:1px solid rgba(244,241,234,0.25);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    transition:all 0.4s ease;
}

.alice-cc-icon:hover{
    background:#f4f1ea;
    color:#111;
}

.alice-cc-text{
    max-width:720px;
    font-size:14px;
    line-height:1.6;
    opacity:0.72;
}

@media(max-width:900px){

.alice-cc-section{
    padding:50px 24px 70px;
}

.alice-cc-icon{
    width:50px;
    height:50px;
}

}



/* OFFICIAL CREATIVE COMMONS ICONS */

.alice-cc-icons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.alice-cc-realicon{
    width:28px;
    height:28px;
    opacity:0.78;
    transition:all 0.3s ease;
    filter:invert(1);
}

.alice-cc-realicon:hover{
    opacity:1;
    transform:scale(1.08);
}





/* NAVBAR BLACK FIXED */

.nav,
.topbar,
.navbar{
    position:fixed !important;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    padding:22px 34px !important;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(10,10,10,0.92) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(244,241,234,0.05);
    mix-blend-mode:normal !important;
}

.nav a,
.topbar a,
.navbar a{
    color:#f4f1ea !important;
    text-decoration:none;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:1.8px;
    opacity:0.82;
    transition:all 0.3s ease;
}

.nav a:hover,
.topbar a:hover,
.navbar a:hover{
    opacity:1;
}



/* =========================================================
   VISUAL WALL DEFINITIVO — COME REFERENCE
   10 immagini: 5 sopra + 5 sotto, quadrate, ordinate.
   ========================================================= */

.gallery-wall{
  background:#0b0b0b !important;
  color:#f7f4ed !important;
  min-height:100vh !important;
  padding:120px 44px 160px !important;
  overflow:hidden !important;
}

.gallery-wall .wall-text{
  margin-bottom:55px !important;
}

.gallery-wall .wall-text .eyebrow{
  margin-bottom:18px !important;
}

.gallery-wall .wall-text h2{
  max-width:980px !important;
  margin:0 !important;
  font-size:clamp(62px, 7.8vw, 138px) !important;
  line-height:.86 !important;
  letter-spacing:-.075em !important;
}

/* griglia ordinata: 5 sopra, 5 sotto */
.gallery-wall 

/* annulla tutti i vecchi span/posizionamenti */


/* telefono */
@media(max-width:700px){
  .gallery-wall{
    padding:95px 24px 120px !important;
  }

  .gallery-wall 

  .gallery-wall .wall-text h2{
    font-size:clamp(48px, 14vw, 78px) !important;
  }
}



/* =========================================================
   VISUAL WALL DEFINITIVA — 10 IMMAGINI DISTANZIATE
   5 SOPRA + 5 SOTTO, nessuna sovrapposizione.
   ========================================================= */

.gallery-wall{
  background:#0b0b0b !important;
  color:#f7f4ed !important;
  min-height:auto !important;
  padding:120px 44px 180px !important;
  overflow:visible !important;
}

.gallery-wall .wall-text{
  margin-bottom:70px !important;
}

.gallery-wall .wall-text h2{
    max-width: 1050px !important;
    margin: 0 !important;
    font-size: clamp(62px, 7.8vw, 138px);
    font-weight: 500;
}

/* griglia vera: 5 colonne, 2 righe, con spazio ampio */
.gallery-wall .mosaic{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows:auto auto !important;
  column-gap:5cm !important;
  row-gap:5cm !important;
  width:100% !important;
  max-width:1650px !important;
  margin:0 auto !important;
  padding:0 !important;
  align-items:start !important;
  justify-items:center !important;
  transform:none !important;
}

/* ogni immagine identica e senza vecchie regole */
.gallery-wall .mosaic > img,
.gallery-wall .mosaic > img:nth-child(n){
  position:static !important;
  display:block !important;
  float:none !important;

  grid-column:auto !important;
  grid-row:auto !important;

  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  min-height:220px !important;
  max-width:220px !important;
  max-height:220px !important;

  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;

  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  translate:none !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  filter:grayscale(20%) !important;
}

/* schermi medi: mantengo ordine e distanze sensate */
@media(max-width:1400px){
  .gallery-wall .mosaic{
    column-gap:40px !important;
    row-gap:60px !important;
  }

  .gallery-wall .mosaic > img,
  .gallery-wall .mosaic > img:nth-child(n){
    width:190px !important;
    height:190px !important;
    min-width:190px !important;
    min-height:190px !important;
    max-width:190px !important;
    max-height:190px !important;
  }
}

@media(max-width:1100px){
  .gallery-wall .mosaic{
    grid-template-columns:repeat(3, 1fr) !important;
    column-gap:28px !important;
    row-gap:38px !important;
  }
}

@media(max-width:700px){
  .gallery-wall{
    padding:95px 24px 120px !important;
  }

  .gallery-wall .mosaic{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:18px !important;
  }

  .gallery-wall .mosaic > img,
  .gallery-wall .mosaic > img:nth-child(n){
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
  }
}


/* IMMAGINI PIÙ GRANDI */

.gallery-wall .mosaic{
  max-width:1900px !important;
  column-gap:3.2cm !important;
  row-gap:3.2cm !important;
}

.gallery-wall .mosaic > img,
.gallery-wall .mosaic > img:nth-child(n){
  width:320px !important;
  height:320px !important;
  min-width:320px !important;
  min-height:320px !important;
  max-width:320px !important;
  max-height:320px !important;
}

@media(max-width:1400px){

.gallery-wall .mosaic > img,
.gallery-wall .mosaic > img:nth-child(n){
  width:240px !important;
  height:240px !important;
  min-width:240px !important;
  min-height:240px !important;
  max-width:240px !important;
  max-height:240px !important;
}

}



/* =========================================================
   VISUAL WALL — SPAZIATURE PRECISE
   lato pagina: 1cm
   spazio tra immagini: 0.4cm
   ========================================================= */

.gallery-wall{
  padding-left:1cm !important;
  padding-right:1cm !important;
}

.gallery-wall .mosaic{
  width:100% !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;

  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  column-gap:0.4cm !important;
  row-gap:0.4cm !important;

  justify-items:stretch !important;
  align-items:start !important;
}

.gallery-wall .mosaic > img,
.gallery-wall .mosaic > img:nth-child(n){
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;

  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

/* tablet */
@media(max-width:1100px){
  .gallery-wall .mosaic{
    grid-template-columns:repeat(3, 1fr) !important;
    column-gap:0.4cm !important;
    row-gap:0.4cm !important;
  }
}

/* telefono */
@media(max-width:700px){
  .gallery-wall{
    padding-left:0.6cm !important;
    padding-right:0.6cm !important;
  }

  .gallery-wall .mosaic{
    grid-template-columns:repeat(2, 1fr) !important;
    column-gap:0.3cm !important;
    row-gap:0.3cm !important;
  }
}



/* =========================================================
   LIGHTBOX — IMMAGINI QUADRATE
   ========================================================= */

.lightbox img,
.lightbox-image,
.lightbox-content img,
.modal img,
.viewer img{
    aspect-ratio:1 / 1 !important;
    width:min(80vw, 700px) !important;
    height:auto !important;
    object-fit:cover !important;

    max-width:700px !important;
    max-height:none !important;

    display:block !important;
    margin:0 auto !important;
}

/* mobile */
@media(max-width:700px){

.lightbox img,
.lightbox-image,
.lightbox-content img,
.modal img,
.viewer img{
    width:100% !important;
    max-width:none !important;
}

}


/* =========================================================
   LIGHTBOX CENTRATO + SFONDO NERO UNIFORME
   ========================================================= */

/* sfondo completamente uniforme */
.lightbox,
.lightbox-overlay,
.lightbox-content,
.modal,
.viewer{
    background:#000000 !important;
    background-color:#000000 !important;
    box-shadow:none !important;
}

/* contenitore centrale */
.lightbox-content,
.modal-content,
.viewer-content{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;

    width:100vw !important;
    min-height:100vh !important;

    margin:0 auto !important;
    padding:40px !important;

    background:#000000 !important;
}

/* immagine perfettamente centrata */
.lightbox img,
.lightbox-image,
.lightbox-content img,
.modal img,
.viewer img{
    display:block !important;
    margin:auto !important;

    aspect-ratio:1 / 1 !important;
    object-fit:cover !important;

    width:min(78vw, 700px) !important;
    height:auto !important;

    background:#000000 !important;
}

/* testo */
.lightbox p,
.lightbox-description,
.modal p{
    color:#f5f2eb !important;
    text-align:center !important;
    max-width:700px !important;
    margin-top:24px !important;
}

/* elimina gradienti o colori diversi */
.lightbox *,
.modal *,
.viewer *{
    background-image:none !important;
}

/* mobile */
@media(max-width:700px){

.lightbox-content,
.modal-content,
.viewer-content{
    padding:24px !important;
}

.lightbox img,
.lightbox-image,
.lightbox-content img,
.modal img,
.viewer img{
    width:100% !important;
    max-width:none !important;
}

}




/* =========================================================
   LIGHTBOX — mantieni layout laterale originale
   ========================================================= */

/* sfondo nero uniforme */
.lightbox,
.lightbox-overlay,
.modal,
.viewer{
    background:#000 !important;
    background-color:#000 !important;
}

/* NON centrare tutto */
.lightbox-content,
.modal-content,
.viewer-content{
    display:grid !important;
    grid-template-columns:1fr 420px !important;
    align-items:center !important;
    gap:60px !important;

    width:min(92vw, 1500px) !important;
    min-height:100vh !important;

    margin:0 auto !important;
    padding:60px !important;

    background:#000 !important;
}

/* immagine a lato */
.lightbox img,
.lightbox-image,
.lightbox-content img,
.modal img,
.viewer img{
    width:100% !important;
    max-width:850px !important;
    aspect-ratio:1 / 1 !important;
    object-fit:cover !important;

    margin:0 !important;
    justify-self:start !important;

    background:#000 !important;
}

/* testi come prima */
.lightbox-description,
.lightbox-text,
.modal p,
.viewer p{
    color:#f5f2eb !important;
    text-align:left !important;
    max-width:420px !important;
    margin:0 !important;
    background:none !important;
}

/* mobile */
@media(max-width:900px){

.lightbox-content,
.modal-content,
.viewer-content{
    grid-template-columns:1fr !important;
    gap:28px !important;
    padding:28px !important;
}

.lightbox img,
.lightbox-image,
.lightbox-content img,
.modal img,
.viewer img{
    max-width:none !important;
}

}


/* =========================================================
   "IL PROGETTO FOTOGRAFICO DIVENTA UNA GALLERIA IN MOVIMENTO"
   immagini quadrate
   ========================================================= */

.horizontal-section .photo-slide img,
.horizontal-track .photo-slide img,
.photo-slide img{
    aspect-ratio:1 / 1 !important;
    object-fit:cover !important;

    width:65vh !important;
    height:65vh !important;

    max-width:720px !important;
    max-height:720px !important;
}

/* mantiene equilibrio */
.photo-slide{
    align-items:flex-end !important;
}

/* mobile */
@media(max-width:900px){

.horizontal-section .photo-slide img,
.horizontal-track .photo-slide img,
.photo-slide img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
}

}


/* =========================================================
   GALLERIA IN MOVIMENTO — immagini centrate
   ========================================================= */

.photo-slide{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

/* contenitore */
.horizontal-track .photo-slide,
.horizontal-section .photo-slide{
    justify-content:center !important;
    align-items:center !important;
}

/* immagine */
.horizontal-section .photo-slide img,
.horizontal-track .photo-slide img,
.photo-slide img{
    margin:0 auto !important;
    justify-self:center !important;
    align-self:center !important;
}

/* didascalia */
.slide-caption{
    text-align:center !important;
    width:100% !important;
}


/* =========================================================
   FOTO REALI + LIGHTBOX SISTEMATO
   ========================================================= */

/* evita immagini rotte/placeholder neri nella Visual Wall */
.gallery-wall .mosaic img{
    background:#111 !important;
}

/* apertura fotografia */
.lightbox{
    background:#000 !important;
    background-color:#000 !important;
}

.lightbox-content{
    background:#000 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 420px !important;
    gap:60px !important;
    align-items:center !important;
    width:min(92vw, 1500px) !important;
    min-height:100vh !important;
    margin:0 auto !important;
    padding:60px !important;
}

.lightbox-image-wrap{
    width:100% !important;
    max-width:820px !important;
    aspect-ratio:1 / 1 !important;
    height:auto !important;
    overflow:hidden !important;
    background:#000 !important;
    justify-self:start !important;
}

.lightbox-image-wrap img,
#lightboxImage{
    width:100% !important;
    height:100% !important;
    aspect-ratio:1 / 1 !important;
    object-fit:cover !important;
    display:block !important;
    margin:0 !important;
    background:#000 !important;
}

/* Frecce visibili soltanto quando è aperta una foto della costellazione. */
.lightbox-image-wrap{
    position:relative !important;
}

.mosaic-nav{
    display:none;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border:1px solid rgba(247,244,237,.45);
    border-radius:0;
    background:transparent;
    color:var(--white);
    font-family:inherit;
    font-size:34px;
    line-height:42px;
    cursor:pointer;
    z-index:2;
}

.lightbox.mosaic-navigation-active .mosaic-nav{
    display:block;
}

.mosaic-nav:hover{
    background:#f7f4ed;
    color:#000;
}

.mosaic-nav-prev{ left:18px; }
.mosaic-nav-next{ right:18px; }

.lightbox-text{
    color:#f7f4ed !important;
    background:transparent !important;
    text-align:left !important;
    max-width:420px !important;
    justify-self:start !important;
}

.lightbox-text p,
.lightbox-text h2{
    color:#f7f4ed !important;
    text-align:left !important;
}

/* mobile */
@media(max-width:900px){

.lightbox-content{
    grid-template-columns:1fr !important;
    gap:28px !important;
    padding:28px !important;
    width:100vw !important;
}

.lightbox-image-wrap{
    max-width:none !important;
    width:100% !important;
}

.lightbox-text{
    max-width:none !important;
}

}