/**
 * Contenuti collegati — la sezione in coda alle pagine.
 *
 * Richiesta del cliente, testuale: «la parte formatori ed eventi correlati la voglio fatta
 * nuova e dinamica con lo stesso stile della prima parte della pagina». La prima parte
 * della pagina, sulle otto pagine di trattamento, sono i due riquadri dal fondo tinto: e
 * da lì viene ogni misura di questo foglio, letta in
 * research/assets/uploads__elementor__css__post-1301.css (elementi d480aaf e a5df99a).
 *
 *   riquadro   --border-radius: 20px   --padding: 20px
 *   fondi      #00BF630D (verde al 5%) e #FFEAF7 (rosa), alternati fra i gruppi
 *   titolo     Poppins 500 30px / 1.2em  #242068   (25px sotto i 1024px)
 *   nota       Montserrat 500 15px  #777777, con -14px di margine superiore
 *   bottone    gradiente 90deg #692A98 → #B195E3, raggio 4px, padding 11px 10px,
 *              Poppins 400 15px bianco; in hover il gradiente ruota a 180deg
 *
 * Le card degli articoli riprendono invece la griglia del blog dell'originale
 * (post-62.css, widget 8dc0942): immagine con raggio 20px e velatura viola in basso,
 * titolo #692A98 che in hover passa a #AA95DC, estratto #777777, data #949494.
 *
 * Il gradiente dei bottoni e le tinte stanno già come token in main.css: qui si usano
 * quelli, così un cambio di marchio si fa in un posto solo.
 */

/* ==========================================================================
   Contenitore
   ========================================================================== */

.collegati {
  margin: 50px 0 100px;
}

/*
 * Il gruppo dei formatori stampato subito sotto il testo (ph_collegati_persone_stampa)
 * non sta in coda alla pagina: è una sezione fra le altre, e prende il loro ritmo. I
 * 100px sotto sono il respiro che il blocco in coda tiene prima del footer; dentro il
 * flusso si sommavano al padding della sezione seguente, e fra il riquadro e il testo
 * successivo restavano 200px di vuoto sulle pagine di trattamento (misurato a 1440 su
 * /trattamenti/rei-ki/ e /allineamento-spirituale/) e 120px sui corsi. Con il passo
 * delle sezioni del tema (--ph-section-gap, 50px) diventano 100–150 e 70: il riquadro
 * resta staccato dal testo ma smette di aprire un buco.
 */
.collegati--in-pagina {
  margin-block: var(--ph-section-gap, 50px);
}

.collegati__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*
 * L'intestazione della sezione non è un heading: i gruppi sono le sezioni vere, e un
 * titolo in più li spingerebbe tutti un livello sotto ogni altra card del sito.
 */
.collegati__testa {
  display: flex;
  flex-direction: column;
}

.collegati__etichetta {
  /* 20px è la spaziatura fra widget del kit originale: il -14px della riga
     sotto la riduce a 6px, che è il distacco vero. Senza di essa quel margine
     negativo scavalcherebbe il titolo. */
  margin: 0 0 var(--ph-widget-gap, 20px);
  font-family: var(--ph-font-heading, "Poppins"), sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--ph-heading-section, #242068);
}

.collegati__nota {
  /* Come nell'originale la riga sotto il titolo risale di 14px. */
  margin: -14px 0 0;
  font-family: var(--ph-font-body, "Montserrat"), sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ph-text, #777777);
}

/* ==========================================================================
   I gruppi: un riquadro ciascuno, tinta alternata
   ========================================================================== */

.collegati__gruppi {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.collegati-gruppo {
  padding: 20px;
  border-radius: 20px;
  /* Verde al 5%: è il fondo del primo riquadro dell'originale. */
  background-color: var(--ph-tint-green, rgba(0, 191, 99, 0.05));
}

/* Rosa sui gruppi in posizione pari, come l'alternanza dei due riquadri in alto. */
.collegati-gruppo:nth-child(even) {
  background-color: var(--ph-tint-pink, #ffeaf7);
}

.collegati-gruppo__corpo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.collegati-gruppo__testa {
  display: flex;
  flex-direction: column;
}

.collegati-gruppo__titolo {
  /* 20px è la spaziatura fra widget del kit originale: il -14px della riga
     sotto la riduce a 6px, che è il distacco vero. Senza di essa quel margine
     negativo scavalcherebbe il titolo. */
  margin: 0 0 var(--ph-widget-gap, 20px);
  font-family: var(--ph-font-heading, "Poppins"), sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--ph-heading-section, #242068);
}

.collegati-gruppo__nota {
  margin: -14px 0 0;
  font-family: var(--ph-font-body, "Montserrat"), sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ph-text, #777777);
}

.collegati-gruppo__azione {
  margin: 0;
}

/* ==========================================================================
   Griglie
   ========================================================================== */

.collegati-griglia {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collegati-griglia__voce {
  display: flex;
  min-width: 0;
}

.collegati-griglia__voce > * {
  width: 100%;
}

/*
 * Le colonne le decide il numero di card, non una misura fissa.
 *
 * Prima erano tre dichiarate a mano — scelta giusta contro `auto-fill`, che con tre
 * persone faceva una riga da quattro — ma cieca al conteggio: quattro formatori
 * uscivano 3+1 con una persona sola in fondo, e una pagina collegata sola restava larga
 * un terzo con due terzi di riquadro vuoto accanto. Adesso il conteggio arriva
 * `data-card` e le colonne di ogni gradino in `--ph-cg-*`, calcolate da
 * `ph_griglia_ripartizione()` con la stessa regola degli elenchi del corpo: mai una riga
 * con una sola card, a parità di righe meno righe, mai oltre il tetto del gradino. I
 * tetti stanno in `PH_COLLEGATI_TETTI` (inc/collegati.php), qui si sceglie solo quale
 * variabile leggere.
 *
 * Le tre colonne restano il ripiego per un markup senza attributi (un gruppo stampato
 * da un template che non è passato di qui).
 */
.collegati-griglia {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collegati-griglia[data-card] {
  grid-template-columns: repeat(var(--ph-cg-lg, 3), minmax(0, 1fr));
}

/* Dove il tetto non lascia scampo — sei pagine collegate con un tetto di tre farebbero
   3+3, ma sette farebbero 3+3+1 — l'ultima card occupa la riga intera invece di lasciare
   un buco accanto a sé. Vale anche per il caso più frequente, la griglia di una card
   sola: `--ph-cg-*` vale 1 e la card è larga quanto il riquadro. */
.collegati-griglia[data-card] > .collegati-griglia__voce:last-child {
  grid-column: span var(--ph-cg-lg-span, 1);
}

@media (max-width: 1366px) {
  .collegati-griglia[data-card] {
    grid-template-columns: repeat(var(--ph-cg-md, 3), minmax(0, 1fr));
  }

  .collegati-griglia[data-card] > .collegati-griglia__voce:last-child {
    grid-column: span var(--ph-cg-md-span, 1);
  }
}

/* ==========================================================================
   Card persona
   ========================================================================== */

.collegati-persona {
  /*
   * La larghezza del ritratto è dichiarata qui e in un solo posto. La ripete
   * PH_PERSONA_FOTO_PX in template-parts/collegati/card-persona.php, che le serve per
   * l'attributo `sizes` dell'immagine: cambiare questa senza cambiare quella fa servire
   * al browser un file più grande del necessario.
   */
  --ph-persona-foto: 56px;

  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 20px;
  /* Bianco all'71%: è come l'originale stacca le colonne dentro un riquadro tinto. */
  background-color: rgba(255, 255, 255, 0.71);
}

.collegati-persona__foto {
  flex: 0 0 auto;
  display: block;
  width: var(--ph-persona-foto, 56px);
  height: var(--ph-persona-foto, 56px);
  overflow: hidden;
  border-radius: 50%;
  background-color: #f0f0f4;
}

.collegati-persona__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collegati-persona__iniziale {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--ph-font-heading, "Poppins"), sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ph-primary, #692a98);
}

.collegati-persona__testo {
  min-width: 0;
}

.collegati-persona__nome {
  margin: 0;
  font-family: var(--ph-font-heading, "Poppins"), sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.collegati-persona__nome a {
  color: var(--ph-primary, #692a98);
  text-decoration: none;
  transition: color 0.2s;
}

.collegati-persona__nome a:hover,
.collegati-persona__nome a:focus-visible {
  color: var(--ph-accent-ink, #aa95dc);
}

.collegati-persona__ruolo,
.collegati-persona__regione {
  margin: 2px 0 0;
  font-family: var(--ph-font-body, "Montserrat"), sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ph-text, #777777);
}

.collegati-persona__regione {
  display: flex;
  gap: 4px;
  align-items: center;
}

.collegati-persona__icona {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--ph-accent-ink, #aa95dc);
}

/* ==========================================================================
   Card data in calendario
   ========================================================================== */

.collegati-data {
  height: 100%;
}

.collegati-data__link {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  height: 100%;
  padding: 14px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.71);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.3s ease-in-out;
}

.collegati-data__link:hover,
.collegati-data__link:focus-visible {
  box-shadow: 0 4px 14px rgba(105, 42, 152, 0.07);
}

/* Il badge della vista lista del calendario: mese sopra, giorno grande, anno sotto. */
.collegati-data__badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  padding: 8px 4px;
  border-radius: 14px;
  background-image: linear-gradient(180deg, var(--ph-gradient-end, #b195e3) 0%, var(--ph-primary, #692a98) 100%);
  color: #fff;
  line-height: 1;
}

.collegati-data__mese {
  font-family: var(--ph-font-heading, "Poppins"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.collegati-data__giorno {
  margin: 2px 0;
  font-family: var(--ph-font-heading, "Poppins"), sans-serif;
  font-size: 26px;
  font-weight: 600;
}

.collegati-data__anno {
  font-family: var(--ph-font-body, "Montserrat"), sans-serif;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}

.collegati-data__testo {
  min-width: 0;
}

.collegati-data__titolo {
  margin: 0;
  font-family: var(--ph-font-heading, "Poppins"), sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ph-primary, #692a98);
  transition: color 0.2s;
}

.collegati-data__link:hover .collegati-data__titolo,
.collegati-data__link:focus-visible .collegati-data__titolo {
  color: var(--ph-accent-ink, #aa95dc);
}

.collegati-data__quando,
.collegati-data__luogo {
  display: block;
  margin-top: 4px;
  font-family: var(--ph-font-body, "Montserrat"), sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ph-text, #777777);
}

.collegati-data__luogo {
  display: flex;
  gap: 4px;
  align-items: center;
}

.collegati-data__icona {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--ph-accent-ink, #aa95dc);
}

/* ==========================================================================
   Card articolo — la stessa del blog dell'originale
   ========================================================================== */

.collegati-articolo {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.collegati-articolo__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 4 / 3;
}

/* Il tetto della figura sulla card che occupa la riga intera — un solo articolo
   collegato, o l'ultimo di tre quando le colonne non bastano a evitare la riga
   spaiata. In 4/3 una card larga 1250px porterebbe una figura alta 937: una
   parete. Sotto i 768px la griglia è già a una colonna e la card a piena
   larghezza è la norma, quindi là il tetto non si applica e la card resta come
   è sempre stata. Sopra, in colonna normale, la figura non arriva mai a 360px
   (a 1440 la card è 407px e la figura 305, a 1024 455 e 341), quindi il tetto
   si vede solo sulla card larga. L'immagine è `object-fit: cover`: ritaglia,
   non schiaccia. */
@media (min-width: 768px) {
  .collegati-griglia[data-card] > .collegati-griglia__voce:last-child .collegati-articolo__media {
    max-height: 360px;
  }
}

.collegati-articolo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La velatura viola che l'originale mette su ogni immagine della griglia del blog. */
.collegati-articolo__velatura {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #462f70 100%);
  pointer-events: none;
}

.collegati-articolo__testo {
  padding-top: 10px;
}

.collegati-articolo__categoria {
  margin: 0;
  font-family: var(--ph-font-body, "Montserrat"), sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6a6a6a;
}

.collegati-articolo__titolo {
  /* Nell'originale il titolo della card ha 5px sopra e sotto. */
  margin: 5px 0;
  font-family: var(--ph-font-heading, "Poppins"), sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2em;
}

.collegati-articolo__titolo a {
  color: var(--ph-primary, #692a98);
  text-decoration: none;
  transition: color 0.2s;
}

.collegati-articolo__titolo a:hover,
.collegati-articolo__titolo a:focus-visible {
  color: var(--ph-accent-ink, #aa95dc);
}

.collegati-articolo__estratto {
  margin: 5px 0 0;
  font-family: var(--ph-font-body, "Montserrat"), sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ph-text, #777777);
}

.collegati-articolo__data {
  margin: 8px 0 0;
  font-family: var(--ph-font-body, "Montserrat"), sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #949494;
}

/* ==========================================================================
   Card pagina
   ========================================================================== */

.collegati-pagina {
  height: 100%;
}

.collegati-pagina__link {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 16px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.71);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.3s ease-in-out;
}

.collegati-pagina__link:hover,
.collegati-pagina__link:focus-visible {
  box-shadow: 0 4px 14px rgba(105, 42, 152, 0.07);
}

.collegati-pagina__testo {
  min-width: 0;
}

.collegati-pagina__titolo {
  margin: 0;
  font-family: var(--ph-font-heading, "Poppins"), sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ph-primary, #692a98);
  transition: color 0.2s;
}

.collegati-pagina__link:hover .collegati-pagina__titolo,
.collegati-pagina__link:focus-visible .collegati-pagina__titolo {
  color: var(--ph-accent-ink, #aa95dc);
}

.collegati-pagina__nota {
  display: block;
  margin-top: 4px;
  font-family: var(--ph-font-body, "Montserrat"), sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-text, #777777);
}

.collegati-pagina__freccia {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--ph-primary, #692a98);
  transition: transform 0.3s ease-in-out;
}

.collegati-pagina__link:hover .collegati-pagina__freccia {
  transform: translateX(3px);
}

/* ==========================================================================
   Schermi piccoli
   ========================================================================== */

@media (max-width: 1024px) {
  /* Tre colonne sotto i 1024px stringono le card con l'immagine sotto i 200px:
     due per riga, che restano leggibili. È il tetto `sm` di PH_COLLEGATI_TETTI. */
  .collegati-griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collegati-griglia[data-card] {
    grid-template-columns: repeat(var(--ph-cg-sm, 2), minmax(0, 1fr));
  }

  .collegati-griglia[data-card] > .collegati-griglia__voce:last-child {
    grid-column: span var(--ph-cg-sm-span, 1);
  }

  .collegati__etichetta,
  .collegati-gruppo__titolo {
    /* La sola variante responsive che l'originale dichiara per questo taglio. */
    font-size: 25px;
  }
}

@media (max-width: 767px) {
  .collegati {
    margin: 30px 0 60px;
  }

  /* Sotto il testo il riquadro tiene 30px anche sotto, come sopra: a 390px i 60px del
     blocco in coda aprivano 160px di vuoto prima della sezione seguente. */
  .collegati--in-pagina {
    margin-block: 30px;
  }

  .collegati-griglia {
    grid-template-columns: 1fr;
  }

  .collegati-griglia[data-card] {
    grid-template-columns: repeat(var(--ph-cg-xs, 1), minmax(0, 1fr));
  }

  .collegati-griglia[data-card] > .collegati-griglia__voce:last-child {
    grid-column: span var(--ph-cg-xs-span, 1);
  }

  /*
   * Le persone restano a due colonne anche sotto i 767px, dove le altre card scendono a
   * una. Le card con immagine hanno bisogno di tutta la larghezza per la foto in 16:9,
   * la card persona no: il suo ritratto è 56px e il resto è testo. Misurato a 767px la
   * colonna viene 329px e al testo restano 237px, che tengono il nome su una riga e il
   * ruolo su due. Sei card diventano tre righe invece di sei: il gruppo passa da 993px a
   * 495px di altezza, esattamente la metà, sulla fascia dei tablet in verticale e dei
   * telefoni larghi. Vale a qualunque conteggio, perché due colonne fanno sempre meno
   * righe di una: anche con tre card sole la sezione passa da 485px a 385px.
   */
  .collegati-griglia--persone,
  .collegati-griglia--persone[data-card] {
    grid-template-columns: repeat(var(--ph-cg-xs, 2), minmax(0, 1fr));
    /* Card basse e tante: 10px di respiro bastano e accorciano il blocco. */
    gap: 10px;
  }
}

@media (max-width: 600px) {
  /*
   * Qui la seconda colonna smette di convenire. A 601px la card è già scesa a 246px e al
   * testo ne restano 154; a 390px sarebbero 154 di card e 62 di testo, con «Allineatore e
   * Guaritore Spirituale» spezzato su cinque righe. Una card in colonna piena a 390px è
   * larga 290px e alta 90: due colonne di card altissime sono peggio di una colonna di
   * card basse. Quindi una sola colonna. 600px è un taglio che il tema usa già altrove
   * (nove occorrenze nei suoi fogli), non un punto di rottura nuovo.
   */
  .collegati-griglia--persone,
  .collegati-griglia--persone[data-card] {
    grid-template-columns: 1fr;
  }

  /* A una colonna nessuna card resta sola in una riga a metà: lo span torna a 1
     perché la riga è già tutta sua. */
  .collegati-griglia--persone[data-card] > .collegati-griglia__voce:last-child {
    grid-column: auto;
  }
}