/* ============================================================
   InfoComuni - Patrimonio culturale MiC (schede comune, tab Esplora)
   Design editoriale: hairline, oro istituzionale, foto 4:3.
   Fonte dati: MiC ICCD ArCo / Cultural-ON via Cruscotto Italia (AgID)
   ============================================================ */

.icb { margin: 0 0 36px; }

.icb__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 2px solid #C8A046; padding-bottom: 12px; margin-bottom: 6px; }
.icb__title { margin: 0; font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -.015em; color: var(--ic-blue-dark, #0b2340); }
.icb__title .icb__mic { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #8a6d1f; margin-top: 3px; }
.icb__kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.icb__kpi { background: #F4F7FB; border: 1px solid rgba(20,33,46,.1); border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px; color: #3c4a58; }
.icb__kpi strong { color: #0D47A1; font-size: 15px; }

.icb__filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.icb__chip { border: 1.5px solid #C9D6E2; background: #fff; color: #2c3a48; border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px;
  transition: all .18s ease; }
.icb__chip:hover { border-color: #0D47A1; color: #0D47A1; }
.icb__chip[aria-pressed="true"] { background: #0D47A1; border-color: #0D47A1; color: #fff; }
.icb__chip:focus-visible { outline: 3px solid #0D47A1; outline-offset: 2px; }

.icb__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 18px; }

.icb__card { background: #fff; border: .5px solid rgba(20,33,46,.12); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(9,34,58,.05), 0 6px 20px rgba(9,34,58,.06);
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.32,.72,0,1), box-shadow .3s; }
.icb__card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(9,34,58,.08), 0 16px 36px rgba(9,34,58,.12); }

.icb__media { position: relative; aspect-ratio: 4/3; background: linear-gradient(150deg, #10325c, #0b2340); overflow: hidden; }
.icb__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icb__media .icb__glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 44px; color: rgba(244,214,78,.5); }
.icb__cat { position: absolute; top: 10px; left: 10px; background: rgba(11,35,64,.82); color: #F4D64E;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 11px; backdrop-filter: blur(6px); }
.icb__visit { position: absolute; top: 10px; right: 10px; background: rgba(21,128,61,.92); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; border-radius: 999px; padding: 5px 11px; }

.icb__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.icb__name { margin: 0; font-size: 16.5px; line-height: 1.3; letter-spacing: -.01em; color: #14212E;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.icb__addr { margin: 0; font-size: 13.5px; color: #51606F; }

.icb__desc { font-size: 14px; color: #2c3a48; }
.icb__desc summary { cursor: pointer; color: #0D47A1; font-weight: 600; font-size: 13.5px;
  min-height: 36px; display: flex; align-items: center; list-style: none; }
.icb__desc summary::before { content: "+"; font-weight: 800; margin-right: 6px; transition: transform .2s; }
.icb__desc[open] summary::before { transform: rotate(45deg); }
.icb__desc p { margin: 6px 0 0; line-height: 1.55; max-height: 180px; overflow: auto; }

.icb__actions { margin-top: auto; display: flex; gap: 8px; padding-top: 8px; }
.icb__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none;
  border: 1.5px solid #C9D6E2; color: #0D47A1; background: #fff; transition: all .18s; }
.icb__btn:hover { background: #0D47A1; color: #fff; border-color: #0D47A1; }
.icb__btn:focus-visible { outline: 3px solid #0D47A1; outline-offset: 2px; }

.icb__more { display: block; margin: 22px auto 0; border: 0; background: linear-gradient(135deg, #0D47A1, #1565C0);
  color: #fff; font-size: 15.5px; font-weight: 800; border-radius: 999px; padding: 14px 34px; cursor: pointer;
  transition: transform .3s cubic-bezier(.32,.72,0,1); }
.icb__more:active { transform: scale(.96); }
.icb__more:focus-visible { outline: 3px solid #0D47A1; outline-offset: 3px; }

.icb__fonte { margin: 20px 0 0; font-size: 12.5px; color: #6b7a88; line-height: 1.6;
  border-top: 1px solid rgba(20,33,46,.1); padding-top: 10px; }
.icb__fonte a { color: #0D47A1; }

@media (max-width: 560px) {
  .icb__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .icb__name { font-size: 15px; }
  .icb__media { aspect-ratio: 1/1; }
}
@media (prefers-reduced-motion: reduce) {
  .icb__card, .icb__card:hover { transition: none; transform: none; }
}

/* ============================================================
   Dark mode: leggibilità accessibile (WCAG AA).
   I colori sopra sono chiari hardcoded: in modalità scura (force-dark,
   theme-dark o prefers-color-scheme dark senza force-light) il testo
   diventerebbe scuro-su-scuro. Qui ridiamo contrasto a testi e chip.
   ============================================================ */
html.force-dark .icb__title, body.theme-dark .icb__title { color:#eaf3ff; }
html.force-dark .icb__title .icb__mic, body.theme-dark .icb__title .icb__mic { color:#e6c879; }
html.force-dark .icb__kpi, body.theme-dark .icb__kpi { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); color:#e6eefb; }
html.force-dark .icb__kpi strong, body.theme-dark .icb__kpi strong { color:#8fc8ff; }
html.force-dark .icb__chip, body.theme-dark .icb__chip { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.38); color:#f1f6fc; }
html.force-dark .icb__chip:hover, body.theme-dark .icb__chip:hover { border-color:#5BC4FF; color:#cfeaff; }
html.force-dark .icb__chip[aria-pressed="true"], body.theme-dark .icb__chip[aria-pressed="true"] { background:#1565C0; border-color:#3a8bee; color:#fff; }
html.force-dark .icb__card, body.theme-dark .icb__card { background:#102c49; border-color:rgba(255,255,255,.14); }
html.force-dark .icb__name, body.theme-dark .icb__name { color:#f3f8ff; }
html.force-dark .icb__addr, body.theme-dark .icb__addr { color:#bcc9dc; }
html.force-dark .icb__desc, body.theme-dark .icb__desc { color:#d3dded; }
html.force-dark .icb__desc summary, body.theme-dark .icb__desc summary { color:#8fc8ff; }
html.force-dark .icb__btn, body.theme-dark .icb__btn { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.32); color:#cfeaff; }
html.force-dark .icb__btn:hover, body.theme-dark .icb__btn:hover { background:#1565C0; border-color:#3a8bee; color:#fff; }
html.force-dark .icb__fonte, body.theme-dark .icb__fonte { color:#b3c0d2; border-top-color:rgba(255,255,255,.14); }
html.force-dark .icb__fonte a, body.theme-dark .icb__fonte a { color:#9ec7ff; }
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) .icb__title { color:#eaf3ff; }
  :root:not(.force-light) .icb__title .icb__mic { color:#e6c879; }
  :root:not(.force-light) .icb__kpi { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); color:#e6eefb; }
  :root:not(.force-light) .icb__kpi strong { color:#8fc8ff; }
  :root:not(.force-light) .icb__chip { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.38); color:#f1f6fc; }
  :root:not(.force-light) .icb__chip[aria-pressed="true"] { background:#1565C0; border-color:#3a8bee; color:#fff; }
  :root:not(.force-light) .icb__card { background:#102c49; border-color:rgba(255,255,255,.14); }
  :root:not(.force-light) .icb__name { color:#f3f8ff; }
  :root:not(.force-light) .icb__addr { color:#bcc9dc; }
  :root:not(.force-light) .icb__desc { color:#d3dded; }
  :root:not(.force-light) .icb__desc summary { color:#8fc8ff; }
  :root:not(.force-light) .icb__btn { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.32); color:#cfeaff; }
  :root:not(.force-light) .icb__fonte { color:#b3c0d2; border-top-color:rgba(255,255,255,.14); }
  :root:not(.force-light) .icb__fonte a { color:#9ec7ff; }
}

/* ============================================================================
   BENI CULTURALI — refactor card + audioguida (11/09/2026)
   Obiettivi: via l'aspetto "bolla" (raggi 16px e pulsante a pillola a piena
   larghezza), altezze uniformi senza vuoti, barra azioni compatta in basso,
   gerarchia tipografica netta. La chiave ElevenLabs non sta nel client: il
   pulsante audio chiama /puglia/api/tts.php, che tiene la chiave sul server.
   ========================================================================== */

/* --- contenitore: celle di pari altezza, niente vuoti artificiali --------- */
html body .icb__grid{
  grid-template-columns:repeat(auto-fill, minmax(236px,1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
}
html body .icb__card{
  border-radius:4px !important;
  display:flex !important; flex-direction:column !important;
  justify-content:space-between !important;
  height:100% !important;
  overflow:hidden !important;
  border:1px solid #DDE4EC !important;
  box-shadow:0 1px 2px rgba(9,34,58,.05) !important;
  transition:box-shadow .2s ease, border-color .2s ease !important;
}
html body .icb__card:hover{
  transform:none !important;
  border-color:#BFE3FF !important;
  box-shadow:0 6px 20px rgba(9,34,58,.10) !important;
}

/* --- media: proporzione unica, cosi' i titoli partono alla stessa quota --- */
html body .icb__media{
  aspect-ratio:16/10 !important;
  border-radius:0 !important;
  flex:0 0 auto !important;
}
html body .icb__cat{
  border-radius:2px !important;
  padding:3px 8px !important;
  font:700 9.5px/1 var(--cr-mono, ui-monospace, monospace) !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  background:rgba(11,35,64,.86) !important; color:#fff !important;
  backdrop-filter:none !important;
}

/* --- corpo: spaziature bilanciate, gerarchia netta ----------------------- */
html body .icb__body{ padding:13px 14px 13px !important; gap:6px !important; }
html body .icb__name{
  margin:0 !important;
  font-family:var(--cr-display, inherit) !important; font-weight:600 !important;
  font-size:15.5px !important; line-height:1.25 !important; letter-spacing:-.008em !important;
  color:#0B2340 !important;
  min-height:2.5em;                      /* due righe: allineamento tra le card */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
html body .icb__addr{
  margin:0 !important; font-size:13px !important; line-height:1.4 !important;
  color:#5A6B7C !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
html body .icb__desc{ font-size:13.5px !important; color:#3A4652 !important; }
html body .icb__desc summary{
  cursor:pointer; list-style:none;
  font:600 12px/1.3 var(--cr-mono, ui-monospace, monospace) !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  color:#004C9C !important; padding:2px 0 !important;
}
html body .icb__desc summary::-webkit-details-marker{ display:none; }
html body .icb__desc p{
  margin:7px 0 0 !important; line-height:1.55 !important;
  max-height:168px !important; overflow:auto !important; font-size:13.5px !important;
}

/* --- barra azioni compatta, ancorata in basso ---------------------------- */
html body .icb__actions{
  margin-top:auto !important; display:flex !important; gap:8px !important;
  padding-top:11px !important; flex-wrap:wrap !important; align-items:center !important;
}
html body .icb__btn{
  border-radius:3px !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  padding:8px 11px !important; min-height:36px !important; width:auto !important;
  flex:0 0 auto !important;
  font:700 12.5px/1 inherit !important;
  border:1px solid #DDE4EC !important; background:#fff !important; color:#0B2340 !important;
  text-decoration:none !important; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
html body .icb__btn:hover{ background:#0B2340 !important; border-color:#0B2340 !important; color:#fff !important; }
html body .icb__btn:focus-visible{ outline:3px solid #5BC4FF !important; outline-offset:2px !important; }
html body .icb__btn svg{ width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* pulsante audioguida: pieno, e' l'azione principale della scheda */
html body .icb__btn--audio{
  background:#0B2340 !important; border-color:#0B2340 !important; color:#fff !important;
}
html body .icb__btn--audio:hover{ background:#123A63 !important; border-color:#123A63 !important; }
html body .icb__btn--audio[data-state="playing"]{ background:#0F7A52 !important; border-color:#0F7A52 !important; }
html body .icb__btn--audio[data-state="error"]{ background:#8A1C2B !important; border-color:#8A1C2B !important; }
html body .icb__btn--audio[data-state="loading"]{ background:#3A4652 !important; border-color:#3A4652 !important; cursor:progress; }

/* barre dell'onda: animate durante la riproduzione */
html body .icb__bar{ fill:currentColor; stroke:none; transform-box:fill-box; transform-origin:center; }
html body .icb__btn--audio[data-state="playing"] .icb__bar{ animation:icbWave .9s ease-in-out infinite; }
html body .icb__btn--audio[data-state="playing"] .icb__bar:nth-child(2){ animation-delay:.15s; }
html body .icb__btn--audio[data-state="playing"] .icb__bar:nth-child(3){ animation-delay:.3s; }
html body .icb__btn--audio[data-state="playing"] .icb__bar:nth-child(4){ animation-delay:.45s; }
@keyframes icbWave{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }

/* rotellina di attesa mentre l'audio viene generato */
html body .icb__spin{
  width:14px; height:14px; flex:0 0 14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:icbSpin .8s linear infinite;
}
@keyframes icbSpin{ to{ transform:rotate(360deg); } }

/* stop e avanzamento: controlli in linea, senza player ingombrante */
html body .icb__stop{
  border-radius:3px !important; border:1px solid #DDE4EC !important; background:#fff !important;
  width:36px !important; min-width:36px !important; height:36px !important; padding:0 !important;
  display:none !important; align-items:center !important; justify-content:center !important; cursor:pointer;
}
html body .icb__actions[data-playing="1"] .icb__stop{ display:inline-flex !important; }
html body .icb__stop svg{ width:13px; height:13px; fill:none; stroke:#0B2340; stroke-width:2.2; stroke-linecap:round; }
html body .icb__prog{
  flex:1 1 100%; height:3px; background:#E6ECF3; border-radius:2px; overflow:hidden;
  display:none; margin-top:2px;
}
html body .icb__actions[data-playing="1"] .icb__prog,
html body .icb__actions[data-loading="1"] .icb__prog{ display:block; }
html body .icb__prog i{ display:block; height:100%; width:0; background:#0F7A52; transition:width .2s linear; }
html body .icb__msg{
  flex:1 1 100%; margin:2px 0 0 !important; font-size:12px !important; line-height:1.35 !important;
  color:#8A1C2B !important; display:none;
}
html body .icb__actions[data-error="1"] .icb__msg{ display:block; }

@media (prefers-reduced-motion: reduce){
  html body .icb__btn--audio[data-state="playing"] .icb__bar,
  html body .icb__spin{ animation:none !important; }
}