/* =========================================================
   Storie — carosello + overlay INLINE (Container + JS, no GB Overlay Panel)
   WPCodeBox: CSS, Frontend Header, External File, priorità 10
   L'overlay vive dentro il loop-item (un Container nascosto) → contenuto
   per-item; apertura/chiusura/stop-audio = es-storie.js.
   La card eredita il LOOK da .es-ycard (classi già esistenti).
   ========================================================= */

/* La card è un trigger, non un link */
.es-story-card{cursor:pointer}

/* ===== Guscio overlay (modale full-screen) ===== */
.es-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:rgba(15,23,42,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.es-overlay.is-open{display:flex}
.es-ov-lock{overflow:hidden}
.es-ov-panel{position:relative;width:min(960px,100%);max-height:90vh;overflow:auto;background:var(--white,#fff);border-radius:var(--radius-1,16px);box-shadow:0 30px 80px rgba(0,0,0,.35);padding:clamp(1.25rem,3vw,2rem)}
.es-ov-close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--stone-100,#f5f5f4);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.es-ov-close::before{content:"\00d7";font-size:26px;line-height:1;color:var(--stone-700,#44403c)}
.es-ov-close:hover{background:var(--stone-200,#e7e5e4)}
.es-ov-close:hover::before{color:var(--stone-900,#1c1917)}

/* ===== Contenuto interno overlay: 2 colonne (media sx / testo dx) ===== */
.es-ov-grid{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(1rem,3vw,2rem);align-items:start}

/* slot media (sinistra) */
.es-media-slot{position:relative;width:100%}
.es-video-slot,.es-gallery-slot{position:relative;width:100%;aspect-ratio:9/16;border-radius:var(--radius-1,16px);overflow:hidden;background:#000}

/* facade = poster cliccabile con pulsante play (è anche il link .es-play) */
.es-facade{position:relative;display:block;width:100%;height:100%;cursor:pointer;text-decoration:none}
.es-facade__img{width:100%;height:100%;object-fit:cover;display:block}
.es-play::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 24px rgba(0,0,0,.3)}
.es-play::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-42%,-50%);width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent var(--sky-700,#0369a1)}

/* iframe Bunny iniettato dal JS al play */
.es-video-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* colonna testo (destra) */
.es-ov-text{display:flex;flex-direction:column;gap:.6rem}
.es-ov-name{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1.1;margin:0;color:var(--stone-900,#1c1917)}
.es-ov-dest{display:inline-flex;align-items:center;gap:.35rem;color:var(--sky-700,#0369a1);font-weight:600}
.es-ov-body{color:var(--stone-700,#44403c);line-height:1.6}
.es-ov-body p{margin:0 0 .75rem}
.es-ov-body p:last-child{margin-bottom:0}

/* chip "Nella valigia: ..." */
.es-chip-valigia{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;margin-top:.25rem;padding:.45rem .85rem;border-radius:999px;background:var(--stone-100,#f5f5f4);color:var(--stone-500,#78716c);font-size:.9rem}
.es-chip-valigia strong{color:var(--stone-900,#1c1917);font-weight:600}

/* slot galleria foto (storie lettera+foto) */
.es-gallery-slot{background:var(--stone-100,#f5f5f4)}
.es-gallery-slot img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Pagina-paese: 4 voci iconate accanto al carosello ===== */
.es-perche__voce{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1.25rem}
.es-perche__ico{flex:0 0 auto;width:34px;height:34px;color:var(--sky-700,#0369a1)}
.es-perche__ico svg{width:100%;height:100%;fill:currentColor}
.es-perche__h{font-weight:700;margin:0 0 .15rem;color:var(--stone-900,#1c1917)}
.es-perche__p{margin:0;color:var(--stone-700,#44403c);line-height:1.55}

@media (max-width:767px){
  .es-ov-grid{grid-template-columns:1fr}
  .es-video-slot,.es-gallery-slot{max-width:300px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .es-facade,.es-play{transition:none}
}