/* [ALESENSO] AS3.5 — video, slideshow e lente. 20260919-1
   Sostituisce gli stili che cms.js iniettava a runtime. */

/* ── Video ─────────────────────────────────────────────── */
.video-wrap{max-width:840px;margin:0 auto}
.video-wrap + .video-wrap{margin-top:2.5rem}
.video-wrap > iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;
  border:0;border-radius:3px;background:var(--ink,#1C1916)}
.video-title{text-align:center;font-size:.9rem;color:var(--ink-mid,#4A433A);
  margin-top:1rem;margin-bottom:1.6em;font-style:italic;
  font-family:var(--ff-serif,Georgia),serif}
.video-desc{text-align:center;font-size:1.15rem;color:var(--ink-mid);
  max-width:60ch;margin:.4rem auto 1.6em}

/* ── Slideshow ─────────────────────────────────────────── */
.opera-ss-section{padding:3rem 0;background:var(--cream,#F7F3EE)}
.opera-ss-title{font-family:var(--ff-serif,Georgia),serif;font-size:1.3rem;
  font-weight:300;text-align:center;margin-bottom:1.2rem}
.opera-ss{position:relative;max-width:1200px;margin:0 auto;
  border-radius:3px;overflow:hidden;background:var(--ink,#1C1916)}
.opera-ss-track{position:relative}

/* Senza JavaScript le diapositive restano tutte visibili, in colonna:
   il contenuto non sparisce mai, né per l'utente né per i crawler.
   La classe viene aggiunta da app.js e attiva il comportamento a una
   sola immagine per volta. */
.opera-ss-slide{margin:0}
.opera-ss-slide img{width:100%;max-height:72vh;object-fit:contain;display:block;
  background:var(--ink,#1C1916);cursor:zoom-in}
.opera-ss-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;
  background:linear-gradient(0deg,rgba(16,13,11,.72),transparent);
  color:var(--cream,#F7F3EE);font-size:1.15rem}

.opera-ss.js-attiva .opera-ss-slide{display:none}
.opera-ss.js-attiva .opera-ss-slide.is-current{display:block}

.opera-ss-prev,.opera-ss-next{position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(247,243,238,.86);color:var(--ink,#1C1916);
  font-size:1.6rem;line-height:1;display:none;align-items:center;justify-content:center}
.opera-ss.js-attiva .opera-ss-prev,
.opera-ss.js-attiva .opera-ss-next{display:flex}
.opera-ss-prev{left:1rem}
.opera-ss-next{right:1rem}
.opera-ss-count{position:absolute;top:.8rem;right:1rem;display:none;
  background:rgba(16,13,11,.6);color:var(--cream,#F7F3EE);
  font-size:1.05rem;padding:.25rem .6rem;border-radius:20px}
.opera-ss.js-attiva .opera-ss-count{display:block}

/* ── Lente ─────────────────────────────────────────────── */
.as35-lente{position:fixed;inset:0;z-index:400;display:none;
  background:rgba(16,13,11,.94);align-items:center;justify-content:center}
.as35-lente.aperta{display:flex}
.as35-lente img{max-width:92vw;max-height:88vh;object-fit:contain;display:block}
.as35-lente figcaption{position:absolute;left:0;right:0;bottom:1.2rem;text-align:center;
  color:rgba(247,243,238,.8);font-size:1.15rem;padding:0 2rem}
.as35-lente button{position:absolute;border:0;border-radius:50%;cursor:pointer;
  background:rgba(247,243,238,.12);color:var(--cream,#F7F3EE);
  display:flex;align-items:center;justify-content:center}
.as35-lente .lente-chiudi{top:1.2rem;right:1.2rem;width:44px;height:44px;font-size:1.6rem}
.as35-lente .lente-prev,
.as35-lente .lente-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem}
.as35-lente .lente-prev{left:1.2rem}
.as35-lente .lente-next{right:1.2rem}

@media(max-width:700px){
  .opera-ss-prev,.opera-ss-next{width:34px;height:34px;font-size:1.2rem}
  .as35-lente .lente-prev,.as35-lente .lente-next{width:40px;height:40px;font-size:1.5rem}
}