*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#130F8A; font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif; color:#fff; user-select:none; }

/* --- Background --- */
#bg-container { position:fixed; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; background:#130F8A; overflow:hidden; z-index:1; }
#bg-image { max-width:100%; max-height:100%; display:block; transition:opacity .5s ease; transform-origin:center center; clip-path:inset(0 0 30% 0); }
#bg-image.fade { opacity:0; }
#bg-image.cover-clip { clip-path:inset(0 0 22% 0); }

/* --- Bottom bar --- */
#bottom-bar { position:fixed; bottom:0; left:0; width:100%; background:#130F8A; z-index:10; display:flex; flex-direction:column; align-items:center; padding:10px 0 8px; }

/* --- Icon strip --- */
#icon-strip-wrapper { display:flex; align-items:center; justify-content:center; width:100%; padding:0 10px; opacity:0; transition:opacity .4s ease; pointer-events:none; margin-bottom:8px; }
#icon-strip-wrapper.visible { opacity:1; pointer-events:auto; }
.strip-arrow { background:none; border:none; color:rgba(255,255,255,.65); font-size:28px; cursor:pointer; padding:0 10px; flex-shrink:0; transition:color .2s; line-height:1; }
.strip-arrow:hover { color:#fff; }
#icon-strip { display:flex; gap:5px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; padding:2px 0; width:845px; max-width:845px; flex-shrink:0; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
#icon-strip::-webkit-scrollbar { display:none; }
.icon-thumb { flex-shrink:0; width:80px; height:60px; object-fit:cover; border:2px solid transparent; border-radius:1px; cursor:pointer; transition:border-color .2s,transform .2s,opacity .2s; opacity:.8; }
.icon-thumb:hover { border-color:rgba(255,255,255,.6); transform:scale(1.08); opacity:1; }
.icon-thumb.selected { border-color:#fff; opacity:1; }

/* --- Menu --- */
#menu-bar { display:flex; justify-content:center; gap:12px; padding:4px 10px; flex-wrap:wrap; }
.menu-item { color:rgba(255,255,255,.55); text-decoration:none; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; cursor:pointer; padding:2px 2px; transition:color .2s; white-space:nowrap; }
.menu-item:hover { color:#fff; }
.menu-item.active { color:#fff; }

/* --- Footer --- */
#footer-email { text-align:center; font-size:10px; letter-spacing:1.5px; color:rgba(255,255,255,.4); padding-top:3px; }
#footer-email a { color:rgba(255,255,255,.4); text-decoration:none; }
#footer-email a:hover { color:#fff; }

/* --- Home button --- */
#btn-home { display:none; position:fixed; top:15px; right:20px; background:rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.25); padding:7px 16px; border-radius:3px; font-size:12px; letter-spacing:2px; cursor:pointer; z-index:20; transition:background .3s; }
#btn-home:hover { background:rgba(255,255,255,.15); }
#btn-home.visible { display:block; }

/* --- Click overlay & hint --- */
#click-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; cursor:pointer; z-index:5; }
#click-overlay.active { display:block; }
#click-hint { display:none; position:fixed; bottom:140px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.55); color:#fff; padding:7px 18px; border-radius:18px; font-size:12px; letter-spacing:1px; z-index:15; pointer-events:none; animation:fadeHint 3s ease forwards; }
#click-hint.visible { display:block; }
@keyframes fadeHint { 0%{opacity:0;transform:translateX(-50%) translateY(5px);} 15%{opacity:1;transform:translateX(-50%) translateY(0);} 75%{opacity:1;} 100%{opacity:0;} }

/* --- Lightbox --- */
#lightbox { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.92); z-index:100; justify-content:center; align-items:center; flex-direction:column; }
#lightbox.open { display:flex; animation:lbIn .3s ease; }
@keyframes lbIn { from{opacity:0} to{opacity:1} }
#lb-image { max-width:88vw; max-height:72vh; object-fit:contain; border-radius:2px; box-shadow:0 8px 40px rgba(0,0,0,.6); }
.lb-btn { position:fixed; background:rgba(255,255,255,.1); border:none; color:#fff; font-size:36px; cursor:pointer; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; line-height:1; }
.lb-btn:hover { background:rgba(255,255,255,.25); }
#lb-close { top:20px; right:20px; font-size:26px; }
#lb-prev { left:20px; top:50%; transform:translateY(-50%); }
#lb-next { right:20px; top:50%; transform:translateY(-50%); }
#lb-counter { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); font-size:13px; letter-spacing:2px; color:rgba(255,255,255,.6); }
#lb-thumbs { position:fixed; bottom:15px; left:50%; transform:translateX(-50%); display:flex; gap:4px; max-width:80vw; overflow-x:auto; padding:4px; -ms-overflow-style:none; scrollbar-width:none; }
#lb-thumbs::-webkit-scrollbar { display:none; }
.lb-thumb { flex-shrink:0; width:50px; height:38px; object-fit:cover; border:2px solid rgba(255,255,255,.25); border-radius:2px; cursor:pointer; opacity:.5; transition:all .2s; }
.lb-thumb:hover { opacity:.9; border-color:rgba(255,255,255,.7); }
.lb-thumb.active { opacity:1; border-color:#fff; }

/* --- Responsive --- */
@media(max-width:768px) { .menu-item{font-size:9px;letter-spacing:1.5px;} .icon-thumb{width:60px;height:45px;} #icon-strip{width:auto;max-width:100%;} }


/* --- Scheda testuale (sezioni tipo PROFILO) ------------------------
   Lo sfondo e il colore del testo arrivano da config.js
   ("textBackground" / "textColor" della sezione) e vengono applicati
   inline da script.js: qui c'e' solo la struttura.                   */
#scheda { position:fixed; top:0; left:0; width:100%; height:calc(100% - 130px); z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:2.5vw;
  /* il padding sinistro lascia scoperta la scritta verticale "Pietro De Simoni"
     che fa parte dell'immagine di sfondo */
  padding:4vh 4vw 2vh 21vw; pointer-events:none; }
#scheda[hidden] { display:none; }
/* Le misure di foto e pannello arrivano da config.js
   ("photoWidth", "textWidth", "textMaxHeight" della sezione) e vengono
   applicate inline da script.js: qui ci sono solo i valori di ripiego. */
.scheda-foto { flex:0 1 36%; max-width:36%; min-width:0; display:flex; justify-content:flex-start; }
/* --foto-scala arriva da config.js ("photoScale" della sezione): 1 = piena,
   0.8 = ridotta all'80%. Riduce insieme larghezza e altezza massime.       */
.scheda-foto img { max-width:calc(100% * var(--foto-scala,1));
  max-height:calc(70vh * var(--foto-scala,1)); object-fit:contain; display:block;
  box-shadow:0 10px 40px rgba(0,0,0,.45); }
.scheda-testo { flex:0 1 42%; max-width:42%; min-width:0; max-height:84vh; overflow-y:auto;
  padding:26px 30px; border-radius:2px; pointer-events:auto; user-select:text;
  font-family:Georgia,'Times New Roman',serif; font-size:15px; line-height:1.5;
  position:relative; z-index:0; background:transparent; }
/* Fondo del pannello: colore e trasparenza arrivano da config.js
   ("textBackground" / "textOpacity") come variabili CSS inline.
   Sta su ::before per non rendere semitrasparente anche il testo.        */
.scheda-testo::before { content:''; position:absolute; inset:0; border-radius:2px;
  background:var(--scheda-bg,#e2e2de); opacity:var(--scheda-op,.6);
  box-shadow:0 10px 40px rgba(0,0,0,.35); }
.scheda-testo > * { position:relative; }
.scheda-testo h2 { font-size:19px; font-weight:700; text-align:center; margin-bottom:16px;
  letter-spacing:.3px; }
.scheda-testo p { text-align:justify; text-indent:1.6em; margin-bottom:9px; }
.scheda-testo p:last-child { margin-bottom:0; }
.scheda-testo i { font-style:italic; }
.scheda-testo::-webkit-scrollbar { width:6px; }
.scheda-testo::-webkit-scrollbar-thumb { background:rgba(0,0,0,.2); border-radius:3px; }

@media(max-width:900px) {
  #scheda { flex-direction:column; justify-content:flex-start; gap:14px;
    padding:3vh 4vw 2vh; overflow-y:auto; pointer-events:auto; }
  .scheda-foto, .scheda-testo { flex:none !important; max-width:100% !important;
    flex-basis:auto !important; width:100%; max-height:none !important; }
  .scheda-foto { justify-content:center; }
  .scheda-foto img { max-height:32vh; }
  .scheda-testo { max-height:none; font-size:13.5px; padding:18px 20px; }
}


/* --- CONTATTI: file al centro e indirizzi sotto ----------------------
   Dimensione del file e colore degli indirizzi arrivano da config.js
   ("photoWidth", "photoScale", "textColor" della sezione).            */
#scheda.contatti { flex-direction:column; justify-content:center; align-items:center;
  gap:26px; padding:4vh 5vw 2vh; }
.contatti-media { object-fit:contain; display:block; pointer-events:auto;
  box-shadow:0 10px 40px rgba(0,0,0,.45); }
.contatti-mail { display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:auto; user-select:text; }
.contatti-mail a, .contatti-mail span { color:inherit; text-decoration:none;
  font-size:15px; letter-spacing:2px; }
.contatti-mail a:hover { text-decoration:underline; }

@media(max-width:900px) {
  #scheda.contatti { gap:16px; padding:3vh 4vw 2vh; }
  .contatti-media { max-width:92% !important; max-height:42vh !important; }
  .contatti-mail a, .contatti-mail span { font-size:13px; letter-spacing:1px; }
}


/* ===================================================================
   TELEFONI — tre correzioni:
   1. la strip si sfoglia col dito e le frecce, che a schermo stretto
      finivano mezze fuori, spariscono
   2. l'immagine di apertura riempie lo schermo invece di restare una
      striscia in mezzo al blu
   3. le schede testuali restano leggibili: sfondo attenuato sotto il
      testo e niente giustificazione
   =================================================================== */
@media(max-width:768px) {
  /* Galleria: sul telefono e' la schermata principale, quindi le si lascia
     tutto lo spazio e si nasconde quello che c'e' sotto. */
  body.galleria-aperta #bottom-bar,
  body.galleria-aperta #btn-home { opacity:0; pointer-events:none; }
  #lb-image { max-width:96vw; max-height:66vh; }
  .lb-btn { width:40px; height:40px; font-size:26px; }
  #lb-close { top:12px; right:12px; font-size:22px; }
  #lb-prev { left:4px; }
  #lb-next { right:4px; }
  #lb-counter { bottom:64px; font-size:12px; }
  #lb-thumbs { bottom:10px; }
  .lb-thumb { width:44px; height:33px; }

  .strip-arrow { display:none; }
  #icon-strip-wrapper { padding:0 8px; }
  #icon-strip { width:100%; max-width:100%; gap:6px; }
  .icon-thumb { scroll-snap-align:start; }
  #icon-strip { scroll-snap-type:x proximity; }
}

/* Sul telefono lo sfondo si ferma dove comincia la barra, invece di
   passarci sotto: altrimenti in orizzontale la barra copriva la coda
   della scritta verticale. --barra la calcola script.js. */
@media(max-width:900px) {
  #bg-container { height:calc(100% - var(--barra, 130px)); }
}

@media(max-width:900px) and (orientation:portrait) {
  /* Niente ritagli sul telefono: il logo si vede tutto, e le cover dei
     progetti non perdono il 22% in basso come sul desktop. Sulle immagini
     larghe resta del blu sopra e sotto, ed e' il male minore: meglio uno
     sfondo pulito che un'immagine mozzata. */
  #bg-image.home { clip-path:inset(0 0 30% 0); }
  #bg-image.cover-clip { clip-path:none; }
  #bg-image.dietro-scheda { opacity:.22; }
}

@media(max-width:900px) {
  #scheda { height:calc(100% - 150px); }
  .scheda-testo p { text-align:left; text-indent:1em; }
  .scheda-testo h2 { font-size:17px; }
}