/* ---------------------------------------------------------------
   L'arrivederci — la home fra un'edizione e l'altra
   (modello arrivederci.html.j2)

   Stesso muro della home dell'edizione (`.hero--muro`, in style.css), con
   sopra un foglio solo appeso con due strisce di nastro: la ricetta del
   nastro e' quella di `.flyer__tape`. Tutti i colori e i caratteri vengono dai
   token di style.css; qui c'e' soltanto la forma di questa pagina.
   --------------------------------------------------------------- */

.saluto { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 4rem); }

.saluto__foglio {
  position: relative;
  max-width: 50rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3.5rem) clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  background: var(--piazza-notte-deep);
  border-radius: 3px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45);
  transform: rotate(-0.6deg);
}

.saluto__nastro {
  position: absolute;
  top: -0.7rem;
  width: clamp(5.5rem, 16vw, 8.5rem);
  height: 1.7rem;
  background:
    repeating-linear-gradient(90deg,
      rgba(241, 233, 210, 0.045) 0 3px,
      rgba(241, 233, 210, 0.085) 3px 6px),
    rgba(241, 233, 210, 0.12);
  border-left: 2px solid rgba(241, 233, 210, 0.05);
  border-right: 2px solid rgba(241, 233, 210, 0.05);
}
.saluto__nastro--l { left: 1.75rem; transform: rotate(-6deg); }
.saluto__nastro--r { right: 1.75rem; transform: rotate(5deg); }

.saluto__marchio {
  width: clamp(3.75rem, 10vw, 4.75rem);
  height: auto;
  margin: 0 auto 1.1rem;
}

/* Il nome sotto il marchio, come nel piede del sito ma piu' grande: e' la
   firma del foglio, non il titolo — quello resta «Arrivederci». */
.saluto__nome {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
}
.saluto__sottonome {
  margin: 0.45rem 0 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grigio-cemento);
}

.saluto__titolo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 1.6rem + 4.6vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin-block: 0.25rem 1.25rem;
}
.saluto__titolo-resto {
  display: block;
  margin-top: 0.12em;
  font-size: 0.56em;
  line-height: 1.05;
  color: var(--luce-palco);
}

/* Il pulsante su due righe: la frase, e sotto di quale edizione. Su uno
   schermo molto stretto la prima riga puo' andare a capo da se', ma la
   seconda comincia sempre su una riga sua. */
.saluto__pulsante {
  padding-block: 0.95rem;
  line-height: 1.5;
}
.saluto__pulsante span { display: block; }

.saluto__prossima {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--carta-volantino);
}

.saluto__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.saluto__oppure {
  margin-top: 1rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--grigio-cemento);
}
.saluto__oppure a {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--carta-volantino);
  text-decoration-color: var(--luce-palco);
  text-underline-offset: 0.25em;
}
.saluto__oppure a:hover { color: var(--luce-palco); }

/* Sul telefono il pulsante va a tutta larghezza: stretto andrebbe a capo a
   meta' parola. */
@media (max-width: 30rem) {
  .saluto__azioni .btn { flex: 1 1 100%; text-align: center; }
  .saluto__foglio { transform: none; }
}

/* --- il grazie ------------------------------------------------------- */

/* «Grazie» una volta, grande e in ambra; le voci lo continuano una per riga,
   come un elenco letto ad alta voce. Sullo schermo largo la parola sta a
   sinistra e le voci a destra; sul telefono una sopra le altre. */
.saluto-grazie { padding-block: 1.5rem 3.5rem; }

.saluto-grazie__titolo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--luce-palco);
  margin: 0 0 1rem;
}

.saluto-grazie__voci li {
  padding-block: 0.7rem;
  border-top: 1px solid rgba(241, 233, 210, 0.12);
  border-top: 1px solid color-mix(in srgb, var(--carta-volantino) 12%, transparent);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.4;
  text-wrap: pretty;
}
.saluto-grazie__voci li:first-child { border-top: 0; padding-top: 0.2rem; }

.saluto-grazie__idee {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--luce-palco);
  background: var(--piazza-notte-deep);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
}
.saluto-grazie__idee span { display: block; color: var(--grigio-cemento); }
.saluto-grazie__idee a { color: var(--luce-palco); overflow-wrap: anywhere; }

@media (min-width: 52rem) {
  .saluto-grazie__wrap {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .saluto-grazie__titolo { margin: 0; }
  .saluto-grazie__idee { grid-column: 2; }
}

/* --- la striscia delle fotografie ------------------------------------ */

.saluto-foto { padding-block: 1rem 3rem; }
.saluto-foto .strip a { display: block; border-radius: var(--radius); }
.saluto-foto .strip a:hover img { border-color: var(--luce-palco); }
.saluto-foto__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* --- seguici --------------------------------------------------------- */

.saluto-seguici { padding-block: 1rem 4rem; }
.saluto-seguici .section-lead { margin-bottom: 1.25rem; }
.saluto-seguici__profili {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.saluto-seguici__handle {
  margin-left: 0.4rem;
  text-transform: none;
  opacity: 0.7;
}

/* --- il piede senza la colonna del menu ---------------------------- */

/* La colonna «La festa» qui non c'e' (vedi il modello): con la griglia a tre
   colonne del resto del sito, «Seguici» resterebbe in mezzo con un vuoto a
   destra. */
.site-footer__griglia { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 30rem) {
  .site-footer__griglia { grid-template-columns: 1fr; }
}

/* Il foglio entra come il volantino della home: un solo movimento, breve, e
   solo per chi non ha chiesto di ridurre le animazioni. */
@media (prefers-reduced-motion: no-preference) {
  .saluto__foglio { animation: saluto-appeso 0.7s ease-out both; }
}
@keyframes saluto-appeso {
  from { opacity: 0; transform: translateY(-10px) rotate(-1.4deg); }
  to   { opacity: 1; transform: rotate(-0.6deg); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 30rem) {
  @keyframes saluto-appeso {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
  }
}