.card-audio-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin-top: 8px;
  padding: 0 11px;
  border: 1px solid rgba(165, 106, 24, .32);
  border-radius: 999px;
  background: #fff8e9;
  color: #6b4515;
  font: 800 .7rem/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.card-audio-button:hover,
.card-audio-button:focus-visible,
.card-audio-button.is-playing {
  border-color: #a56a18;
  background: #f6bf4d;
  color: #3f270c;
  transform: translateY(-1px);
}
.card-audio-button:focus-visible {
  outline: 3px solid rgba(194, 120, 36, .3);
  outline-offset: 2px;
}
.card-audio-button span:first-child { font-size: .65rem; }

/* Area Admin «Audio delle schede» aperta dentro la Home: la stessa pagina,
   senza saltare all'indirizzo /mao che su molti hosting statici non esiste e
   rispondeva «Object not found». */
.card-audio-admin-page {
  display: grid;
  gap: 16px;
  width: min(1100px, calc(100% - 24px));
  margin: 18px auto 60px;
  padding: 22px;
  border: 1px solid #d8b070;
  border-radius: 22px;
  background: #fffaf0;
  color: #322a22;
  box-shadow: 0 18px 48px rgba(51, 35, 17, .1);
}

.card-audio-admin-page[hidden] { display: none; }

.card-audio-admin-page .mao-button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(83, 61, 32, .2);
  border-radius: 11px;
  background: #fffaf0;
  color: #5c4326;
  font: 850 .86rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.card-audio-admin-page .mao-button:hover { background: #fff; }

.card-audio-admin-page .mao-button:focus-visible {
  outline: 3px solid rgba(194, 120, 36, .3);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .card-audio-admin-page {
    width: calc(100% - 16px);
    padding: 16px;
    border-radius: 18px;
  }
}

/* Ingresso ad «Audio delle schede» dentro RC88 Spiega: deve vedersi subito,
   anche se il tema della pagina non definisce il pulsante principale. */
#spiegaAudioButton,
[data-spiega-audio] {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #a56a18;
  border-radius: 11px;
  background: linear-gradient(135deg, #fff0bd, #f6bf4d 58%, #d88422);
  color: #3f270c;
  font: 900 .86rem/1 system-ui, sans-serif;
  cursor: pointer;
}

#spiegaAudioButton:hover,
[data-spiega-audio]:hover { filter: brightness(1.06) saturate(1.08); }

#spiegaAudioButton:focus-visible,
[data-spiega-audio]:focus-visible {
  outline: 3px solid rgba(165, 106, 24, .42);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  #spiegaAudioButton,
  [data-spiega-audio] { width: 100%; }
}

/* Audioguida generale: in cima alla scheda, subito sotto il nome del luogo o
   del monumento. Pulsante dorato sul banner verde, ben visibile. */
.card-audio-guide {
  margin: 10px 0 2px;
}

.card-audio-guide-button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: auto;
  max-width: 100%;
  min-height: 42px;
  padding: 5px 14px 5px 6px;
  border: 1px solid rgba(246, 217, 154, .55);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff0bd 0%, #f2cf82 45%, #c39a44 100%);
  color: #10382a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(4, 24, 17, .24);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.card-audio-guide-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04) saturate(1.06);
  box-shadow: 0 10px 24px rgba(4, 24, 17, .28);
}

.card-audio-guide-button:focus-visible {
  outline: 3px solid rgba(255, 236, 186, .85);
  outline-offset: 3px;
}

.card-audio-guide-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #10382a;
  color: #f6d99a;
}

.card-audio-guide-icon svg {
  width: 15px;
  height: 15px;
}

.card-audio-icon-pause { display: none; }
.card-audio-guide-button.is-playing .card-audio-icon-play { display: none; }
.card-audio-guide-button.is-playing .card-audio-icon-pause { display: block; }

.card-audio-guide-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.card-audio-guide-eyebrow {
  font: 800 .5rem/1 system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
}

.card-audio-guide-label {
  font: 900 clamp(.76rem, 2.9vw, .88rem)/1.15 Georgia, serif;
  letter-spacing: .035em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.card-audio-guide-wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: none;
  height: 16px;
  margin-left: auto;
}

.card-audio-guide-wave i {
  display: block;
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: rgba(16, 56, 42, .4);
}

.card-audio-guide-wave i:nth-child(2) { height: 11px; }
.card-audio-guide-wave i:nth-child(3) { height: 9px; }
.card-audio-guide-wave i:nth-child(4) { height: 13px; }

.card-audio-guide-button.is-playing .card-audio-guide-wave i {
  background: #10382a;
  animation: card-audio-wave 900ms ease-in-out infinite;
}

.card-audio-guide-button.is-playing .card-audio-guide-wave i:nth-child(2) { animation-delay: 120ms; }
.card-audio-guide-button.is-playing .card-audio-guide-wave i:nth-child(3) { animation-delay: 240ms; }
.card-audio-guide-button.is-playing .card-audio-guide-wave i:nth-child(4) { animation-delay: 360ms; }

@keyframes card-audio-wave {
  0%, 100% { transform: scaleY(.5); }
  50% { transform: scaleY(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .card-audio-guide-button.is-playing .card-audio-guide-wave i { animation: none; }
}

@media (max-width: 420px) {
  .card-audio-guide-button { padding-right: 12px; gap: 8px; }
  .card-audio-guide-wave { display: none; }
}

/* Posizione in alto: il pulsante sta sotto la riga con provincia e regione,
   non più incollato al titolo. Sotto ha lo spazio per non toccare i pulsanti
   della scheda, sopra uno stacco breve dalla riga dei dati. */
#detailDialog .detail-green-hero-copy .card-audio-guide,
#detailDialog .detail-head .card-audio-guide,
.monument-detail-hero-text .card-audio-guide,
.pg-banner .card-audio-guide {
  margin: 10px 0 12px;
  max-width: 340px;
}

/* Nella testata verde la copia è ancorata in basso: il pulsante resta
   l'ultimo elemento, quindi la riga provincia · regione non si sposta. */
#detailDialog .detail-green-hero-copy .card-audio-guide {
  margin: 10px 0 0;
}

.monument-detail-hero-text .card-audio-guide {
  margin: 9px 0 0;
}

/* Pagine guida: sotto la riga di presentazione, prima del corpo del testo. */
.pg-banner .card-audio-guide {
  margin: 12px 0 0;
}

#detailDialog .detail-green-hero-copy .card-audio-guide-button,
.monument-detail-hero-text .card-audio-guide-button {
  border-color: rgba(255, 240, 200, .72);
  box-shadow: 0 10px 24px rgba(3, 22, 14, .38);
}

/* La testata della scheda cresce per ospitare il pulsante senza coprire
   titolo e riga dei dati: solo un margine in più, nessun taglio. */
#detailDialog .detail-head .card-audio-guide {
  margin-top: 11px;
}

@media (min-width: 900px) {
  #detailDialog .detail-green-hero:has(.card-audio-guide) {
    min-height: clamp(250px, 30vw, 330px);
  }
}

/* Con l'audioguida il banner cresce e, su schermo stretto, il titolo si
   adatta: il nome del luogo non viene mai tagliato dal riquadro. */
#detailDialog .detail-green-hero.has-guide-audio,
#detailDialog .detail-green-hero:has(.card-audio-guide) {
  min-height: clamp(250px, 30vw, 330px);
}

@media (max-width: 700px) {
  #detailDialog .detail-green-hero.has-guide-audio,
  #detailDialog .detail-green-hero:has(.card-audio-guide) {
    min-height: 285px;
  }

  #detailDialog .detail-green-hero.has-guide-audio .detail-green-hero-copy h2,
  #detailDialog .detail-green-hero:has(.card-audio-guide) .detail-green-hero-copy h2 {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
    max-width: 14ch;
  }
}

@media (max-width: 700px) {
  #detailDialog .detail-green-hero-copy .card-audio-guide,
  #detailDialog .detail-head .card-audio-guide,
  .monument-detail-hero-text .card-audio-guide,
  .pg-banner .card-audio-guide {
    max-width: none;
  }
}

/* Anteprima dentro l'area Admin: mostra come apparirà il pulsante nella
   scheda del luogo, senza essere un comando attivo. */
.card-audio-guide-preview {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgba(163, 122, 48, .5);
  border-radius: 14px;
  background: rgba(255, 250, 238, .72);
}

.card-audio-guide-preview .card-audio-guide {
  margin: 0;
  max-width: 320px;
}

.card-audio-guide-button.is-sample {
  cursor: default;
}

.card-audio-guide-button.is-sample:hover {
  transform: none;
  filter: none;
}

.card-audio-guide-preview > small {
  display: block;
  margin-top: 8px;
  color: #6b5a3a;
  font: 600 .78rem/1.35 system-ui, sans-serif;
}