/* Opera Duomo Suite — Libro dei documenti artistici ([libro_documenti]). HTML: libro.mustache.
   Impaginato come le liste di opere e foto (lista.css): tutta la larghezza della finestra, a sinistra la colonna
   dell'indice al posto dei filtri (stessa larghezza, riquadro bianco), a destra la carta, grande quasi quanto lo schermo.
   Pulsanti come quelli del sito: contorno oro, testo bruno in maiuscoletto, si riempiono d'oro col mouse. */

.od-ld-spazio { min-height: 94px; }   /* il menu del sito (94 px) sta sopra la pagina, trasparente */

/* ---------- struttura: a tutta larghezza anche dentro il contenitore di Elementor (1200 px) ---------- */
.od-ld {
  --od-oro: #dca54a;
  --od-bordo: rgba(112, 66, 20, .15);
  --od-testo: #3a2a14;
  display: flex; align-items: flex-start; justify-content: center;   /* indice e carta insieme, al centro */
  width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--ast-global-color-4, #FAF5E5);
  font-family: inherit;
}
body:has(.od-ld) { overflow-x: clip; }   /* 100vw comprende la barra di scorrimento: niente scorrimento orizzontale */

/* colonna dell'indice: come la colonna dei filtri delle liste; resta ferma scorrendo e l'elenco scorre dentro */
.od-ld__indice {
  flex: 0 0 clamp(340px, 30%, 460px); width: clamp(340px, 30%, 460px);
  position: sticky; top: 0;
  display: flex; flex-direction: column; height: 100vh;
  padding: 20px 20px 24px; box-sizing: border-box;
}
.od-ld__box {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  margin-top: 16px; background: #fff; border: 1px solid var(--od-bordo); border-radius: 10px; overflow: hidden;
}

/* "Torna al progetto": come "Torna ai corali" (corale.css) */
.od-ld-indietro {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 10px 20px; border: 1px solid var(--od-oro, #dca54a); border-radius: 999px;
  background: #faf5e5; color: #3a2a14 !important; box-shadow: 0 2px 10px rgba(58, 42, 20, .12);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important;
  transition: background .25s, color .25s;
}
.od-ld-indietro:hover { background: #dca54a; color: #fff !important; }

/* ---------- indice ---------- */
.od-ld__indice-apri { display: none; }
.od-ld .od-ld__indice-titolo {
  margin: 0; padding: 16px 20px 12px; border-bottom: 1px solid var(--od-bordo);
  color: var(--od-testo); font-size: 18px; font-weight: 600;
}
.od-ld .od-ld__voci { flex: 1; min-height: 0; margin: 0; padding: 6px 0; list-style: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #dca54a transparent; }
/* una riga per documento: il numero e, accanto, le sue carte */
.od-ld__voce { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 6px 18px 6px 17px; border-left: 3px solid transparent; }
.od-ld__voce.is-attivo { background: #faf5e5; border-left-color: #dca54a; }
/* il tema mette a tutti i pulsanti un'ombra leggera (un rettangolo chiaro attorno a "Documento 1" ecc.): qui niente */
.od-ld button { box-shadow: none; }
.od-ld .od-ld__voce-vai {
  display: block; flex: 0 0 auto; min-width: 118px; padding: 4px 0; border: 0; border-radius: 0; background: none;
  color: var(--od-testo); font: inherit; text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.od-ld .od-ld__voce-vai:hover { background: none; color: #c48f36; }
.od-ld__voce-titolo { font-weight: 700; font-size: 15px; }
.od-ld__carte { display: flex; flex-wrap: wrap; gap: 6px; }
.od-ld .od-ld__carte button {
  min-width: 38px; padding: 3px 9px; border: 1px solid #dca54a; border-radius: 999px; background: #fff;
  color: #7a5310; font: 600 13px/1.4 inherit; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.od-ld .od-ld__carte button:hover, .od-ld .od-ld__carte button.is-attiva { background: #dca54a; color: #fff; }

/* ---------- la carta ---------- */
.od-ld__lettura { flex: 0 1 948px; min-width: 0; padding: 20px 24px 48px; }   /* 900 px di contenuto */
/* il titolo, la carta e i dati del documento stanno in una colonna larga al massimo 900 px, centrata */
.od-ld__lettura > * { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.od-ld .od-ld__titolo { margin: 4px auto 18px; color: var(--od-testo); font-size: 34px; line-height: 1.2; font-style: italic; text-align: center; }
.od-ld__barra { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.od-ld .od-ld__dove { flex: 1; margin: 0; color: var(--od-testo); font-size: 18px; text-align: center; }
.od-ld__n { margin-left: 10px; color: #7a6445; font-size: 13px; white-space: nowrap; }
/* frecce: come gli altri pulsanti del sito */
.od-ld .od-ld__vai {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid #dca54a; border-radius: 999px; background: #faf5e5; color: #3a2a14; cursor: pointer;
  transition: background .25s, color .25s;
}
.od-ld .od-ld__vai:hover { background: #dca54a; color: #fff; }
.od-ld .od-ld__vai:disabled { opacity: .35; cursor: default; background: #faf5e5; color: #3a2a14; }
.od-ld__vai svg { width: 20px; height: 20px; }
.od-ld__vai--succ svg { transform: scaleX(-1); }

/* cornice crema come quella del libro dei corali; la carta occupa buona parte dell'altezza dello schermo */
.od-ld__cornice {
  position: relative; padding: 12px; background: #efe4c8; border-radius: 20px;   /* angoli: cornice 20 px, carta 10 px, come in tutto il sito */
  box-shadow: inset 0 0 0 1px rgba(112, 66, 20, .12);
}
/* la carta lascia vedere sotto, nella stessa schermata, l'inizio del testo del documento: si capisce che c'è altro
   (l'altezza dello schermo meno 500 px; più grande il numero → carta più bassa) */
.od-ld__visore { width: 100%; height: max(340px, calc(100vh - 500px)); background: #e6d8b4; border-radius: 10px; overflow: hidden; }
/* scorrimento tra due carte (libro.js, scorri()): un velo sopra il visore con le due immagini che scivolano */
.od-ld__velo { position: absolute; z-index: 5; overflow: hidden; background: #e6d8b4; border-radius: 10px; pointer-events: none; }
.od-ld__foglio { position: absolute; background: center / 100% 100% no-repeat; }
.od-ld .od-ld__vuota {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  color: #7a6445; font-style: italic;
}
.od-ld .od-ld__vuota[hidden] { display: none; }
.od-ld .od-ld__aiuto { margin: 8px auto 0; color: #7a6445; font-size: 13px; font-style: italic; text-align: center; }

/* i dati del documento */
.od-ld__documento { max-width: 900px; margin-top: 26px; font-size: 16px; line-height: 1.6; }
.od-ld__documento[hidden] { display: none; }
.od-ld .od-ld__documento h4 { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid rgba(220, 165, 74, .4); font-size: 20px; }
.od-ld__documento-data { color: #7a6445; font-weight: 400; }
.od-ld .od-ld__documento p { margin: 0 0 10px; color: var(--od-testo); }

.od-ld-vuoto { margin: 20px; }

/* ---------- tablet e telefono: una colonna, l'indice è una tendina sopra la carta ---------- */
@media (max-width: 1024px) {
  .od-ld-spazio { min-height: 20px; }
  .od-ld { flex-direction: column; align-items: stretch; }
  .od-ld__indice { position: static; flex: none; width: 100%; height: auto; padding: 12px 12px 0; }
  .od-ld .od-ld__indice-apri {
    display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 16px;
    border: 0; background: none; color: #7a6445; font: 600 13px/1.4 inherit; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  }
  .od-ld__indice-apri::after { content: "▾"; font-size: 16px; transition: transform .2s; }
  .od-ld.indice-aperto .od-ld__indice-apri::after { transform: rotate(180deg); }
  .od-ld .od-ld__indice-titolo { display: none; }
  .od-ld__voci { display: none; max-height: 60vh; border-top: 1px solid var(--od-bordo); }
  .od-ld.indice-aperto .od-ld__voci { display: block; }
  .od-ld__lettura { flex: none; padding: 16px 12px 40px; }
  .od-ld .od-ld__titolo { font-size: 26px; }
  .od-ld__visore { height: 45vh; }
  .od-ld .od-ld__dove { font-size: 16px; }
}