/* ==========================================================================
   Paradise Home — alleggerimento del corpo pagina

   Foglio di `inc/contenuto.php`. Due componenti:

     .elenco-griglia   gli elenchi puntati disegnati a griglia di card
     .corpo-fasce      le sezioni h2 del corpo che alternano contenitore

   È l'unica parte del tema che si discosta volutamente dall'originale, su
   richiesta esplicita del cliente: «serve che il testo sia meno mattone e che
   sia alternato da blocchi differenti usando il medesimo testo».

   Nota sulla SPECIFICITÀ. `trattamento.css` azzera i margini degli elenchi del
   corpo per far tornare l'altezza della pagina con quella dell'originale
   (`.trattamento__corpo .entry-content ul{margin-block:0}` — 0,2,1). Le regole
   di questo foglio usano `.entry-content .elenco-griglia[data-voci]` (0,3,0),
   che vince su quelle senza dipendere dall'ordine di caricamento dei fogli.
   `data-voci` c'è sempre: lo scrive il filtro insieme alla classe.
   ========================================================================== */

:root {
  /* Fondo delle fasce tinte. Non è un colore nuovo: è il fondo con cui la home
     dell'originale stacca le proprie sezioni alterne (post-1064.css, elemento
     1eb52ef, `background-color:#F6F6FF`). Il verde al 5% e il rosa sono già
     impegnati dai due riquadri in alto e dai blocchi in fondo alle pagine. */
  --ph-tint-lilac: #f6f6ff;

  /* Distanza fra le card della griglia e fra una fascia e l'altra. */
  --ph-elenco-gap: 14px;
  --ph-fascia-gap: 34px;
}


/* ==========================================================================
   1. ELENCHI IN GRIGLIA

   Il numero di colonne arriva dal filtro in cinque variabili scritte
   sull'elemento: --ph-el-lg / -md / -sm / -xs per i quattro gradini di
   larghezza, e --ph-el-nr per i contenitori a colonna stretta. La tabella che
   le riempie sta in `inc/contenuto.php`, in un punto solo. Qui il CSS si limita
   a scegliere quale delle cinque leggere: cambiare la ripartizione non richiede
   di toccare questo file.
   ========================================================================== */

.entry-content .elenco-griglia[data-voci] {
  display: grid;
  grid-template-columns: repeat(var(--ph-el-lg, 4), minmax(0, 1fr));
  gap: var(--ph-elenco-gap);
  margin-block: 20px 26px;
  padding-left: 0;
  list-style: none;
}

/* L'elenco resta un elenco: `<ul>/<li>` non sono stati toccati, e il pallino
   sparisce solo perché la card lo sostituisce. */
.entry-content .elenco-griglia[data-voci] > li {
  margin: 0;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.71);
  border: 1px solid var(--ph-border-card);
  border-radius: var(--ph-radius-lg);
  line-height: 1.55;
  /* Card da 238px a cinque colonne: una parola lunga non deve sfondarla. */
  overflow-wrap: break-word;
}

.entry-content .elenco-griglia[data-voci] > li::marker {
  content: none;
}

/* --- mai una riga con una sola card --------------------------------------
   La tabella di ripartizione evita già la riga spaiata scegliendo un numero di
   colonne diverso, ma il tetto di leggibilità di un gradino può non lasciarle
   scampo: 7 voci con un tetto di 3 fanno 3+3+1, 3 voci lunghe con un tetto di 2
   fanno 2+1. In quei casi l'ultima card occupa tutta la riga invece di restare
   larga un terzo con un buco accanto — la stessa forma che una griglia di una
   card sola ha già. Il numero lo calcola `ph_griglia_span()` in
   inc/contenuto.php e arriva qui insieme alle colonne, contesto per contesto:
   il CSS sceglie quale variabile leggere, non calcola niente. */
.entry-content .elenco-griglia[data-voci] > li:last-child {
  grid-column: span var(--ph-el-lg-span, 1);
}

/* --- il grassetto diventa il titolo della card ----------------------------
   Solo dove TUTTE le voci hanno la forma «Termine: spiegazione» (28 elenchi su
   133): a metà l'elenco sembrerebbe sbagliato invece che alternato. I due punti
   restano nel DOM — il filtro li sposta in uno span invece di cancellarli,
   perché il testo non si cambia — e qui si nascondono. */
.entry-content .elenco-griglia[data-voci] .elenco-griglia__titolo {
  display: block;
  margin-bottom: 5px;
  font-family: var(--ph-font-heading);
  font-size: 15px;
  font-weight: var(--ph-heading-weight);
  line-height: 1.3;
  color: var(--ph-heading-section);
}

.elenco-griglia__due-punti {
  display: none;
}

/* --- elenchi numerati -----------------------------------------------------
   Un `<ol>` è una sequenza, e la sequenza va vista: il numero torna come
   pastiglia col gradiente dei bottoni, e le card si leggono da sinistra a
   destra come si leggevano le righe. Sono 9 elenchi su 133, su due pagine. */
.entry-content .elenco-griglia--numerata[data-voci] {
  counter-reset: ph-voce;
}

.entry-content .elenco-griglia--numerata[data-voci] > li {
  counter-increment: ph-voce;
}

/* La pastiglia sta NEL FLUSSO, non in posizione assoluta: così non serve
   riservarle imbottitura in cima alla card, e nessuna regola di un punto di
   rottura può finire per scriverle il testo addosso. */
.entry-content .elenco-griglia--numerata[data-voci] > li::before {
  content: counter(ph-voce);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--ph-primary) 0%, var(--ph-gradient-end) 100%);
  color: var(--ph-white);
  font-family: var(--ph-font-heading);
  font-size: 12px;
  font-weight: var(--ph-heading-weight);
  line-height: 1;
}

/* --- discesa delle colonne ai punti di rottura del tema -------------------
   1366 / 1024 / 767 sono i tre punti che usa tutto il resto del tema. Una riga
   da 5 su schermo largo va bene, su tablet no: il filtro ha già calcolato il
   valore di ciascun gradino, qui si cambia solo quale variabile si legge. */
@media (max-width: 1366px) {
  .entry-content .elenco-griglia[data-voci] {
    grid-template-columns: repeat(var(--ph-el-md, 3), minmax(0, 1fr));
  }

  .entry-content .elenco-griglia[data-voci] > li:last-child {
    grid-column: span var(--ph-el-md-span, 1);
  }
}

@media (max-width: 1024px) {
  .entry-content .elenco-griglia[data-voci] {
    grid-template-columns: repeat(var(--ph-el-sm, 2), minmax(0, 1fr));
  }

  .entry-content .elenco-griglia[data-voci] > li:last-child {
    grid-column: span var(--ph-el-sm-span, 1);
  }
}

@media (max-width: 767px) {
  .entry-content .elenco-griglia[data-voci] {
    grid-template-columns: repeat(var(--ph-el-xs, 1), minmax(0, 1fr));
    gap: 10px;
    margin-block: 16px 20px;
  }

  .entry-content .elenco-griglia[data-voci] > li:last-child {
    grid-column: span var(--ph-el-xs-span, 1);
  }

  .entry-content .elenco-griglia[data-voci] > li {
    padding: 13px 15px;
  }

  /* Voci brevissime («Durata: 3 Giorni», «Quota: €600,00»): a due per riga
     anche a 390px, dove una card per riga farebbe soltanto altezza. */
  .entry-content .elenco-griglia--corta[data-voci] > li {
    padding: 11px 13px;
  }

  .entry-content .elenco-griglia--corta[data-voci] .elenco-griglia__titolo {
    font-size: 14px;
  }
}

/* --- griglie dentro una colonna stretta ----------------------------------
   La tabella è calcolata sul corpo a piena larghezza: 1310px di testo a 1440.
   Due contenitori non hanno quella larghezza, e le stesse colonne dentro di
   loro diventano illeggibili. Misurato a 1440:

     colonna del testo nel blog   ≈ 790px  (1350 − 40 − 320 di barra − 48 di gap)
     colonna di destra del «duo»  ≈ 858px  (1310 − 380 di titolo − 44 − 28)

   Per entrambi la tabella dichiara una ripartizione sua, `--ph-el-nr`, invece di
   riciclare il gradino di un altro punto di rottura: 5 voci fanno 3+2 e non
   2+2+1, 4 fanno 2+2 e non 3+1.

   Il taglio sotto il quale si scende al gradino del tablet piccolo è la
   larghezza alla quale le tre colonne di `--ph-el-nr` arrivano a 236px, cioè la
   stessa card di riferimento delle cinque colonne su 1440. Le due colonne
   strette hanno larghezze diverse (a 1200 il blog ha 792px, il «duo» 708),
   quindi il taglio è diverso: 1150 per il blog, 1250 per il «duo», dove a 1250
   la colonna del testo è 758px e le tre card 243. Sotto i 1025 la barra laterale
   scende sotto il testo e il «duo» torna in colonna sola: da lì in giù vale la
   regola generale. */
@media (min-width: 1150px) {
  .post-single .entry-content .elenco-griglia[data-voci] {
    grid-template-columns: repeat(var(--ph-el-nr, 3), minmax(0, 1fr));
  }

  .post-single .entry-content .elenco-griglia[data-voci] > li:last-child {
    grid-column: span var(--ph-el-nr-span, 1);
  }
}

@media (min-width: 1025px) and (max-width: 1149px) {
  .post-single .entry-content .elenco-griglia[data-voci] {
    grid-template-columns: repeat(var(--ph-el-sm, 2), minmax(0, 1fr));
  }

  .post-single .entry-content .elenco-griglia[data-voci] > li:last-child {
    grid-column: span var(--ph-el-sm-span, 1);
  }
}

@media (min-width: 1250px) {
  .entry-content .corpo-fascia--duo .elenco-griglia[data-voci] {
    grid-template-columns: repeat(var(--ph-el-nr, 3), minmax(0, 1fr));
  }

  .entry-content .corpo-fascia--duo .elenco-griglia[data-voci] > li:last-child {
    grid-column: span var(--ph-el-nr-span, 1);
  }
}

@media (min-width: 1025px) and (max-width: 1249px) {
  .entry-content .corpo-fascia--duo .elenco-griglia[data-voci] {
    grid-template-columns: repeat(var(--ph-el-sm, 2), minmax(0, 1fr));
  }

  .entry-content .corpo-fascia--duo .elenco-griglia[data-voci] > li:last-child {
    grid-column: span var(--ph-el-sm-span, 1);
  }
}


/* ==========================================================================
   2. FASCE DEL CORPO

   Ogni h2 con quello che lo segue fino al successivo è una fascia. Tre forme
   che si alternano — piana, tinta, duo — e si ripetono: un ritmo, non un
   caleidoscopio. Il ritmo è dichiarato in `PH_FASCE_RITMO`.
   ========================================================================== */

.entry-content .corpo-fasce {
  display: grid;
  /* `minmax(0, 1fr)` e non il `1fr` implicito: un item di griglia ha `min-width:auto`,
     e una parola più larga della colonna — «Riprogrammazione» in Poppins 30px a
     390px — allargherebbe la traccia a tutte le fasce, tagliando il testo a destra
     su tutto il corpo. Visto sulla pagina delle Carte a 390px. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ph-fascia-gap);
}

/* Le fasce portano il loro respiro: dentro `.trattamento__corpo` i titoli hanno
   `margin-top:8px` per far tornare l'altezza con l'originale, e il primo titolo
   di una fascia non ne ha bisogno perché lo stacco è già il gap della griglia. */
.entry-content .corpo-fascia > h2:first-child,
.entry-content .corpo-fascia__titolo > h2 {
  margin-top: 0;
}

.entry-content .corpo-fascia > *:last-child {
  margin-bottom: 0;
}

/* --- forma «tinta»: la sezione dentro un riquadro ------------------------- */
.entry-content .corpo-fascia--tinta {
  padding: 32px 36px;
  background: var(--ph-tint-lilac);
  border-radius: var(--ph-radius-lg);
}

/* --- forma «duo» ----------------------------------------------------------
   La terza forma deve restare riconoscibile a ogni larghezza, altrimenti su
   mobile e nel blog il ritmo si riduce a due tempi. Quindi ha due stati:

     impilata → titolo sopra il testo, con un filo verticale che corre lungo
                tutta la fascia. È lo stato di base: mobile, tablet, e la
                colonna del blog, che a 1440 è larga 790px e non ne ha per due.
     affiancata → titolo nella colonna di sinistra, testo in quella di destra,
                col filo che passa a fare da separazione fra le due.

   In entrambi i casi il titolo resta lo stesso h2, dentro la stessa
   `<section>`, nello stesso ordine di lettura: cambia solo dove è disegnato. */
.entry-content .corpo-fascia--duo {
  padding-left: 20px;
  border-left: 3px solid var(--ph-primary-mid);
}

.entry-content .corpo-fascia--duo .corpo-fascia__titolo {
  margin-bottom: 10px;
}

/* 380px per il titolo, e non di meno: l'h2 del corpo è Poppins 600 a 38px, e la
   colonna deve contenere per intero la parola più larga che compare nei titoli
   del sito. Misurate nel browser con i font del tema: «Riprogrammazione» 375px,
   «Personalizzazione» 344, «Controindicazioni» 343, «dell'Allineamento» 342. A
   300px «Riprogrammazione» sporgeva sopra il filo divisorio (visto sulla pagina
   delle Carte a 1440). Ci stanno comunque due o tre parole per riga, che è come
   l'originale incolonna i titoli di sezione affiancati al testo. La rete per una
   parola futura ancora più lunga è `overflow-wrap`, non la sillabazione: vedi la
   nota sul titolo qui sotto. */
@media (min-width: 1025px) {
  .entry-content .corpo-fascia--duo {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 24px 44px;
    align-items: start;
    padding-left: 0;
    border-left: 0;
  }

  .entry-content .corpo-fascia--duo .corpo-fascia__titolo {
    margin-bottom: 0;
  }

  /* NIENTE `hyphens: auto` QUI — né in nessun altro titolo del tema.

     La sillabazione automatica non aspetta che una parola sfori: spezza anche
     quando ci starebbe tutta, pur di riempire meglio la riga. In questa colonna
     da 380px tagliava con il trattino «Guarigione», «Spirituale», «Crescita»,
     «Metamorfica», «Riprogrammazione» a QUALSIASI larghezza da 1025px in su —
     misurati 14 titoli spezzati su 5 pagine a 1300px, con la colonna larga il
     doppio della parola.

     `overflow-wrap: break-word` è la rete che serve davvero: interviene SOLO
     quando la parola da sola non entra nella riga, e senza trattino. */
  .entry-content .corpo-fascia--duo .corpo-fascia__titolo h2 {
    overflow-wrap: break-word;
  }

  .entry-content .corpo-fascia--duo .corpo-fascia__testo {
    padding-left: 28px;
    border-left: 1px solid var(--ph-divider);
  }

  /* Il blog resta impilato a ogni larghezza: la barra laterale si porta via
     530px dei 1350, e un titolo da 380px lascerebbe al testo 340px. */
  .post-single .entry-content .corpo-fascia--duo {
    display: block;
    padding-left: 20px;
    border-left: 3px solid var(--ph-primary-mid);
  }

  .post-single .entry-content .corpo-fascia--duo .corpo-fascia__titolo {
    margin-bottom: 10px;
  }

  .post-single .entry-content .corpo-fascia--duo .corpo-fascia__testo {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 1024px) {
  .entry-content .corpo-fasce {
    gap: 26px;
  }

  .entry-content .corpo-fascia--tinta {
    padding: 26px 24px;
  }
}

@media (max-width: 767px) {
  .entry-content .corpo-fasce {
    gap: 22px;
  }

  /* A 390px il riquadro tinto non può rientrare di 36px per lato: perderebbe un
     quinto della colonna di lettura. Resta il fondo, con l'imbottitura minima
     che serve a non far toccare il testo al bordo. */
  .entry-content .corpo-fascia--tinta {
    padding: 20px 16px;
  }
}

/* Sotto i 480px un titolo di sezione a 30px Poppins non regge una parola come
   «Riprogrammazione» (Carte, «Creazione delle Carte di Riprogrammazione»): senza
   questa regola sporge dal riquadro tinto. Basta `overflow-wrap`, che spezza solo
   la parola che non entra. La sillabazione qui c'era e faceva danno: a 390px
   tagliava con il trattino 88 titoli su 15 pagine — «l'Allinea-mento»,
   «Metamor-fica» — parole che sulla riga ci stavano per intero. */
@media (max-width: 479px) {
  .entry-content .corpo-fascia h2 {
    overflow-wrap: break-word;
  }
}