/* RC88 · Aspetto del blocco «Fonti e crediti».

   Il blocco compare in fondo alle schede di sezioni diverse, alcune chiare
   (territorio, santi) e alcune scure (arte, storie, tesori). Per questo non
   usa un colore fisso: prende il colore del testo che trova e ne ricava
   bordi e sfondo con color-mix, così resta leggibile in entrambi i casi.
   Dove color-mix non è disponibile restano i valori di ripiego. */

.fonti-credits {
  --fonti-ink: var(--rc88-ink, #3d2f22);
  --fonti-line: rgba(90, 68, 42, .22);
  display: grid;
  gap: 8px;
  margin: 30px 0 6px;
  padding: 18px 18px 16px;
  border: 1px solid var(--fonti-line);
  border-radius: 14px;
  background: rgba(255, 252, 245, .55);
  color: var(--fonti-ink);
  font-family: var(--rc88-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: .86rem;
  line-height: 1.55;
  text-align: left;
}

@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
  .fonti-credits {
    --fonti-line: color-mix(in srgb, currentColor 22%, transparent);
    background: color-mix(in srgb, currentColor 5%, transparent);
  }
}

.fonti-credits-eyebrow {
  margin: 0;
  color: inherit;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}

.fonti-credits-title {
  margin: 0 0 2px;
  color: inherit;
  font-family: var(--rc88-display, Georgia, "Times New Roman", serif);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
}

.fonti-credits-label {
  margin: 4px 0 0;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .68;
}

.fonti-credits-list {
  display: grid;
  gap: 4px;
  margin: 2px 0 4px;
  padding: 0 0 0 18px;
  list-style: disc;
}

.fonti-credits-list li {
  margin: 0;
  padding-left: 2px;
}

.fonti-credits-list a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.fonti-credits-list a:hover {
  opacity: .78;
}

.fonti-credits-note {
  margin: 0;
  opacity: .9;
}

.fonti-credits-note strong {
  font-weight: 850;
  letter-spacing: .02em;
}

.fonti-credits-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: .78rem;
  opacity: .8;
}

.fonti-credits-foot a {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.fonti-credits-foot a:focus-visible,
.fonti-credits-list a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Nelle schede compatte (santi, opere) il blocco non deve rubare la scena. */
.fonti-credits.is-compact {
  margin-top: 20px;
  padding: 14px 14px 12px;
  font-size: .8rem;
}

.fonti-credits.is-compact .fonti-credits-title {
  font-size: .94rem;
}

/* Nei fogli scuri il fondo chiaro diventerebbe un rettangolo bianco. */
.opera-sheet-card .fonti-credits,
.canale-storie .fonti-credits,
.racconti-reader .fonti-credits {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

@media (max-width: 640px) {
  .fonti-credits {
    margin: 22px 0 4px;
    padding: 15px 14px 13px;
    font-size: .82rem;
  }
}