/* ==========================================================================
   Paradise Home — contenuti collegati

   Il blocco compare in fondo a ogni pagina del sito, quindi deve stare bene sotto
   qualunque cosa: sotto una hero viola, sotto una griglia di card bianche, sotto una FAQ.
   Da qui la fascia a tutta larghezza su --ph-surface, che chiude visivamente il contenuto
   e lo separa dal footer senza aggiungere un colore nuovo alla tavolozza.

   Contiene anche le poche regole di `card--formatore` e `card--evento` che vivono in
   formatore.css: quel foglio non è caricato su una pagina trattamento o su un articolo, e
   qui le card devono funzionare ovunque. Sono confinate sotto `.collegati` per non entrare
   in conflitto dove entrambi i fogli convivono.
   ========================================================================== */

/*
 * Fascia a tutta larghezza, senza margine superiore: si appoggia direttamente alla fine
 * del contenuto, come ogni banda del tema. Il filo sopra serve nel caso la sezione
 * precedente usi anche lei --ph-surface, così le due non si fondono in un blocco unico.
 * Lo stacco verso il footer lo dà il margine che il footer ha già di suo.
 */
.collegati {
  padding-block: var(--ph-section-y);
  background: var(--ph-surface);
  border-top: 1px solid var(--ph-border);
}

.collegati__heading {
  margin-bottom: 48px;
  text-align: center;
}

/*
 * Etichetta della regione, non un heading: il contenitore prende il nome accessibile da
 * qui via aria-labelledby, così i quattro blocchi restano h2 e le card riusate non
 * scavalcano il titolo che le contiene.
 */
.collegati__etichetta {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: var(--ph-h3);
  font-weight: var(--ph-heading-weight);
  line-height: 1.3;
  color: var(--ph-primary);
}

.collegati__sottotitolo {
  max-width: 44em;
  margin: 12px auto 0;
  font-size: 17px;
  color: var(--ph-text-muted);
}

.collegati__blocchi {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.collegati__blocco {
  margin: 0;
}

.collegati__blocco-titolo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  font-size: var(--ph-h4);
  color: var(--ph-heading-alt);
}

.collegati__blocco-icona {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--ph-accent-ink);
}

.collegati__lista {
  gap: 24px;
}

/* I ritratti sono più stretti delle card evento: quattro per riga senza buchi. */
.collegati__lista--persone {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.collegati__tutti {
  margin: 28px 0 0;
}

/* --------------------------------------------------------------------------
   Card su fondo grigio
   -------------------------------------------------------------------------- */

.collegati .card {
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(41, 20, 60, 0.06);
}

.collegati .card:hover {
  box-shadow: var(--ph-shadow-card);
}

/*
 * Regole replicate da formatore.css, che su gran parte delle pagine non è caricato.
 * Confinate sotto .collegati: dove i due fogli convivono vincono queste, identiche.
 */
.collegati .card__media--portrait {
  aspect-ratio: 4 / 5;
  background: var(--ph-primary-pale);
}

.collegati .card__prossimo,
.collegati .card__luogo,
.collegati .card__corso {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ph-text-muted);
}

.collegati .card__meta--data {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ph-accent-ink);
}

.collegati .card__meta-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   Schermi stretti
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .collegati__heading {
    margin-bottom: 36px;
    text-align: left;
  }

  .collegati__sottotitolo {
    margin-inline: 0;
  }

  .collegati__blocchi {
    gap: 48px;
  }

  .collegati__lista--persone {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Stampa: i collegamenti non servono su carta
   -------------------------------------------------------------------------- */

@media print {
  .collegati {
    display: none;
  }
}