/* Esperienze (20/9/2026): due fotografie che si alternano con dissolvenza accanto al testo del capitolo 2
   («Il percorso e il laboratorio»). Regole scoperte alla sola classe mm-experience-slides; nessun'altra classe
   della pagina ridefinita. Destinazione: /cinema-v7/experience-slides.css, richiamato da esperienze/ e
   en/experiences/. La griglia mm-chapter__grid--split diventa a due colonne da 1024px (cinema.css 217-244):
   sopra quella soglia la figura occupa la colonna 1 e il testo scende da solo in colonna 2; sotto, la foto segue
   il testo in colonna singola. */
.mm-experience-slides { position: relative; margin: 0; min-width: 0; }
.mm-experience-slides__stage { position: relative; aspect-ratio: 3 / 4; max-height: min(72svh, 640px); overflow: hidden; border-radius: clamp(38px, 6vw, 76px) 16px clamp(46px, 7vw, 92px) 20px; background: #e9e4d8; }
.mm-experience-slides__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.mm-experience-slides__slide.is-current { opacity: 1; }
.mm-experience-slides__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Comandi piccoli e discreti: due frecce, pausa, contatore. Nascono `hidden` e compaiono solo con JavaScript. */
.mm-experience-slides__controls { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mm-experience-slides__controls[hidden] { display: none; }
.mm-experience-slides__controls button { -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0 9px; border: 1px solid rgba(85, 69, 54, .28); border-radius: 999px; background: transparent; color: #554536; font: 600 .8rem/1 var(--sans, system-ui, sans-serif); cursor: pointer; }
.mm-experience-slides__controls button svg { display: block; width: 16px; height: 16px; pointer-events: none; }
.mm-experience-slides__controls button:hover { background: rgba(85, 69, 54, .06); }
.mm-experience-slides__controls button:focus-visible { outline: 2px solid #704500; outline-offset: 3px; }
.mm-experience-slides__count { margin-left: auto; font-size: .78rem; letter-spacing: .06em; color: var(--muted, #61625b); }
@media (min-width: 1024px) {
  .mm-chapter__grid--split > .mm-experience-slides { grid-column: 1; grid-row: 1; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-experience-slides__slide { transition: none; }
}