/* ==========================================================================
   InfoComuni - audioguida e "Approfondisci" delle schede sintetiche
   (Cosa vedere, Vino & Olio, Sapori, Feste e sagre, Borghi) - 14/09/2026
   ========================================================================== */

.sp-card{ display:flex; flex-direction:column; }

/* --- Approfondisci: disclosure nativa, tocco largo, niente JS custom ---- */
.sp-more{ margin:10px 0 0; }
.sp-more summary{
  display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:6px 2px;
  font-size:13px; font-weight:600; color:#0B5FA5;
  cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent;
}
.sp-more summary::-webkit-details-marker{ display:none; }
.sp-more summary::after{
  content:""; width:8px; height:8px; margin-left:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .15s ease;
}
.sp-more[open] summary::after{ transform:rotate(-135deg); }
.sp-more summary:focus-visible{ outline:2px solid #0B5FA5; outline-offset:2px; border-radius:2px; }
.sp-more p{
  margin:8px 0 0; padding:0; font-size:13.5px; line-height:1.55; color:#33414f;
}

/* --- bottone Ascolta ------------------------------------------------------ */
.sp-audio-host{ margin:10px 0 0; }
.sp-audio-btn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:40px; padding:8px 14px;
  border:1px solid #0B2340; border-radius:3px;
  background:#0B2340; color:#fff; font-size:13px; font-weight:600;
  cursor:pointer; transition:background .15s ease, opacity .15s ease;
}
.sp-audio-btn:hover{ background:#123A63; }
.sp-audio-btn:focus-visible{ outline:2px solid #5BC4FF; outline-offset:2px; }
.sp-audio-btn:disabled{ cursor:default; opacity:.75; }
.sp-audio-btn svg{ width:16px; height:16px; flex:0 0 16px; fill:currentColor; stroke:none; }
.sp-audio-btn[data-state="error"]{ background:#8A1C2B; border-color:#8A1C2B; }

@keyframes spSpin{ to{ transform:rotate(360deg); } }
.sp-audio-spin{
  width:14px; height:14px; flex:0 0 14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spSpin .7s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .sp-audio-spin{ animation-duration:1.4s; } }

/* --- mini-player: comandi da "video", larghi per il tocco ---------------- */
.sp-player{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:6px 10px;
  border:1px solid #cfe0f0; border-radius:3px; background:#F3F7FB;
}
.sp-player__pp{
  flex:0 0 auto; width:36px; height:36px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:#0B2340; color:#fff; cursor:pointer;
}
.sp-player__pp svg{ width:18px; height:18px; fill:currentColor; }
.sp-player__pp:focus-visible{ outline:2px solid #0B5FA5; outline-offset:2px; }
.sp-player__mid{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sp-player__seek{
  -webkit-appearance:none; appearance:none; width:100%; height:28px;
  background:transparent; margin:0; cursor:pointer;
}
.sp-player__seek::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:#cfe0f0; }
.sp-player__seek::-moz-range-track{ height:4px; border-radius:2px; background:#cfe0f0; }
.sp-player__seek::-webkit-slider-thumb{
  -webkit-appearance:none; margin-top:-7px;
  width:18px; height:18px; border-radius:50%; background:#0B2340; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(11,35,64,.4);
}
.sp-player__seek::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#0B2340; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(11,35,64,.4);
}
.sp-player__seek:focus-visible{ outline:2px solid #0B5FA5; outline-offset:2px; }
.sp-player__time{ font-size:11.5px; font-variant-numeric:tabular-nums; color:#5b6b7e; }
.sp-player__x{
  flex:0 0 auto; width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:transparent; color:#5b6b7e; cursor:pointer;
}
.sp-player__x svg{ width:16px; height:16px; }
.sp-player__x:hover{ background:rgba(11,35,64,.08); color:#0B2340; }
.sp-player__x:focus-visible{ outline:2px solid #0B5FA5; outline-offset:2px; }

.sp-card.sp-audio--playing{ box-shadow:0 0 0 2px rgba(91,196,255,.35); }

/* --- mobile: bersagli piu' larghi, player mai piu' stretto del bottone --- */
@media (max-width:600px){
  .sp-audio-btn, .sp-more summary{ min-height:44px; }
  .sp-player{ padding:8px 10px; }
  .sp-player__pp{ width:40px; height:40px; }
}