/* Racconti Invisibili - pagine interne: una storia ("la sala"), la collezione, l'esposizione.
   Richiede css/base.css caricato prima. */

/* ---------- testata delle pagine di elenco ---------- */
.testata {
  padding-top: clamp(7.5rem, 18vh, 11rem);
  padding-bottom: clamp(1rem, 3vh, 2rem);
}
.testata h1 {
  margin: .6rem 0 0;
  font-family: var(--serif-display); font-weight: 380;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.04;
  letter-spacing: -.01em; text-wrap: balance;
}
.testata .sub {
  max-width: 38em; margin: 1.4rem 0 0;
  font-size: clamp(1.0625rem, 1.3vw, 1.2rem); color: var(--smoke);
}

/* ---------- la sala: il quadro sotto la luce, poi la targa ---------- */
.sala {
  position: relative;
  padding: clamp(6.5rem, 14vh, 9rem) clamp(1.25rem, 5vw, 3rem) 0;
  background: radial-gradient(ellipse 55% 45% at 50% 38%, rgba(201, 163, 86, .10), transparent 70%);
}
.sala-wrap { max-width: 1140px; margin-inline: auto; }
.ritorno {
  display: inline-block; margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
  font-family: var(--sans); font-size: .6875rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--smoke); text-decoration: none; transition: color .2s;
}
.ritorno:hover { color: var(--panna); }
.quadro-grande { margin: 0; display: flex; justify-content: center; }
.quadro-grande .cornice {
  display: inline-block; max-width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.quadro-grande img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: min(76vh, 860px);
}
.targa { max-width: 44rem; margin: clamp(2.4rem, 6vh, 4rem) auto 0; text-align: center; }
.targa h1 {
  margin: .7rem 0 0;
  font-family: var(--serif-display); font-weight: 380; font-style: italic;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.06;
  letter-spacing: -.01em; text-wrap: balance;
}
.targhetta {
  margin: 1.1rem 0 0;
  font-family: var(--sans); font-size: .8125rem; letter-spacing: .08em; color: var(--smoke);
}

/* ---------- il racconto: una colonna da leggere ---------- */
.racconto {
  max-width: 40rem; margin: clamp(3rem, 7vh, 5rem) auto 0;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem); line-height: 1.78;
}
.racconto p { margin: 0 0 1.45em; }
.racconto > p:first-child::first-letter {
  float: left;
  font-family: var(--serif-display); font-weight: 400;
  font-size: 3.9em; line-height: .82;
  padding: .1em .14em 0 0;
  color: var(--oro);
}
.citazione {
  margin: clamp(2.6rem, 6vh, 3.8rem) 0; padding: 0; text-align: center;
}
.citazione::before, .citazione::after {
  content: ""; display: block; width: 44px; height: 1px;
  background: var(--oro-dim); margin: 0 auto;
}
.citazione p {
  margin: 1.6rem 0;
  font-family: var(--serif-display); font-style: italic; font-weight: 350;
  font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.35;
  text-wrap: balance; color: var(--panna);
}
.citazione p::before { content: "«"; color: var(--oro); }
.citazione p::after { content: "»"; color: var(--oro); }

/* ---------- gli altri quadri della storia ---------- */
.dittico {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(2.5rem, 6vh, 4rem); align-items: start;
}
.dittico.uno { grid-template-columns: minmax(0, 640px); justify-content: center; }
.dittico figure { margin: 0; }
.dittico figure:nth-child(2) { margin-top: clamp(1.2rem, 3vh, 2.4rem); }
.dittico .cornice img {
  display: block; width: 100%; height: auto;
  filter: saturate(.9) brightness(.93);
  transition: filter .5s ease;
}
.dittico .cornice:hover img { filter: none; }
@media (max-width: 640px) {
  .dittico { grid-template-columns: 1fr; }
  .dittico figure:nth-child(2) { margin-top: 0; }
}
.nota {
  max-width: 40rem; margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.nota p {
  margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: .75rem; line-height: 1.6;
  letter-spacing: .03em; color: var(--smoke);
}

/* ---------- le storie accanto (due cornici pari) ---------- */
.altre { padding-bottom: 0; }
.parete-due .quadro:not(.quadro-tutte) { grid-column: span 6; margin-top: 0; }
.parete-due .quadro:not(.quadro-tutte) .tela { aspect-ratio: 4 / 3; }
@media (max-width: 880px) {
  .parete-due .quadro:not(.quadro-tutte) { grid-column: auto; }
}

/* ---------- la collezione: l'ultimo quadro, se resta solo, sta al centro ---------- */
.galleria { padding-top: clamp(2.5rem, 6vh, 4rem); }
.parete-tutte .quadro:not(.quadro-tutte):nth-child(4n+3):last-child { grid-column: 4 / span 6; margin-top: 0; }
.parete-tutte .quadro:not(.quadro-tutte):nth-child(4n+1):last-child { grid-column: 3 / span 8; }
@media (max-width: 880px) {
  .parete-tutte .quadro:not(.quadro-tutte):nth-child(4n+3):last-child,
  .parete-tutte .quadro:not(.quadro-tutte):nth-child(4n+1):last-child { grid-column: auto; }
}
.parete-note a { color: var(--oro); text-decoration: none; border-bottom: 1px solid var(--oro-dim); }

/* ---------- esposizione ---------- */
.avviso { padding-block: clamp(2rem, 5vh, 3.5rem) 0; }
.avviso .cornice .leggi { text-decoration: none; white-space: nowrap; }
.modi .steps { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .modi .steps { grid-template-columns: 1fr; } }
.step p + p { margin-top: .8rem; }
.step .leggi { display: inline-block; margin-top: 1.1rem; text-decoration: none; }
.stato {
  display: inline-block; margin-left: .7rem; padding: .18rem .55rem;
  vertical-align: middle;
  font-family: var(--sans); font-style: normal; font-size: .625rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--smoke); border: 1px solid var(--line);
}