/* RC88 · I Racconti da Vivere — i luoghi del catalogo.
   Stili del segnaposto che carica da solo gli altri racconti, dei rimandi di
   comune e del riquadro con cui si fa scrivere il racconto completo. Stessa
   carta scura e stesso oro della sezione: nessun colore nuovo. */

/* ------------------------------------------------------- altri racconti -- */

/* Il segnaposto è invisibile: serve solo a capire quando si è arrivati in
   fondo all'elenco. Un'altezza minima lo rende sempre individuabile. */
.racconti-page .racconti-sentinel {
  height: 1px;
  margin: 0;
}

.racconti-page .racconti-sentinel[hidden] {
  display: none !important;
}

/* ------------------------------------------- rimandi dello stesso comune -- */

.racconti-page .racconti-related {
  margin: 30px 0 0;
  padding: 18px 20px;
  border: 1px solid rgba(255, 210, 122, .22);
  border-radius: var(--rc-radius);
  background: rgba(255, 250, 240, .05);
}

.racconti-page .racconti-related-title {
  margin: 0 0 12px;
  color: var(--rc-gold);
  font: 900 .74rem/1.3 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.racconti-page .racconti-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.racconti-page .racconti-related-chip {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(255, 250, 240, .28);
  border-radius: 999px;
  background: rgba(255, 250, 240, .08);
  color: var(--rc-cream);
  font: 800 .84rem/1.1 system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.racconti-page .racconti-related-chip:hover {
  border-color: var(--rc-gold);
  background: rgba(255, 210, 122, .16);
}

.racconti-page .racconti-related-chip:focus-visible {
  outline: 3px solid rgba(255, 210, 122, .45);
  outline-offset: 2px;
}

/* ------------------------------------------------ il racconto completo -- */

.racconti-page .racconti-ai {
  margin: 30px 0 0;
  padding: clamp(16px, 3vw, 22px);
  border: 1px dashed rgba(255, 210, 122, .38);
  border-radius: var(--rc-radius);
  background: rgba(255, 210, 122, .06);
}

.racconti-page .racconti-ai-lead {
  margin: 0 0 8px;
  max-width: 62ch;
  color: var(--rc-muted);
  font-size: .9rem;
  line-height: 1.55;
}

/* La riga sul costo: si legge prima di premere, non dopo. */
.racconti-page .racconti-ai-cost {
  margin: 0 0 14px;
  max-width: 62ch;
  color: rgba(255, 210, 122, .82);
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.5;
}

.racconti-page .racconti-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.racconti-page .racconti-ai-button {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--rc-gold-deep);
  border-radius: var(--rc-radius-sm);
  background: linear-gradient(135deg, #ffe6ab, var(--rc-gold) 60%, #e0a53c);
  color: #3f270c;
  font: 900 .88rem/1.2 system-ui, sans-serif;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}

.racconti-page .racconti-ai-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.racconti-page .racconti-ai-button:disabled {
  cursor: progress;
  opacity: .62;
  transform: none;
}

.racconti-page .racconti-ai-button:focus-visible {
  outline: 3px solid rgba(255, 210, 122, .55);
  outline-offset: 3px;
}

.racconti-page .racconti-ai-button-ghost {
  border-color: rgba(255, 250, 240, .32);
  background: rgba(255, 250, 240, .08);
  color: var(--rc-cream);
}

.racconti-page .racconti-ai-status {
  margin: 12px 0 0;
  min-height: 20px;
  color: var(--rc-gold);
  font-size: .86rem;
  font-weight: 750;
}

.racconti-page .racconti-ai-status[data-stato="errore"] {
  color: #ffb4a2;
}

.racconti-page .racconti-ai-note {
  margin: 16px 0 6px;
  color: var(--rc-gold);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.racconti-page .racconti-ai-text {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 210, 122, .22);
}

.racconti-page .racconti-ai-paragraph {
  margin: 0 0 15px;
  color: var(--rc-cream);
  font: 400 1.02rem/1.75 Georgia, serif;
}

.racconti-page .racconti-ai-paragraph:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------- la fonte del testo documentato -- */

/* Il racconto dei luoghi che hanno soltanto la scheda arriva dalla loro voce
   Wikipedia: la citazione resta in fondo alla lettura, come un rimando, così
   chi legge può controllare da dove viene il testo. */
.racconti-page .racconti-source-link {
  color: var(--rc-gold);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.racconti-page .racconti-source-link:hover {
  color: #ffe6ab;
}

.racconti-page .racconti-source-link:focus-visible {
  outline: 3px solid rgba(255, 210, 122, .5);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 700px) {
  .racconti-page .racconti-ai-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .racconti-page .racconti-ai-button {
    width: 100%;
  }

  .racconti-page .racconti-related,
  .racconti-page .racconti-ai {
    padding: 15px;
  }
}