/* ============================================================
   Blog: l'elenco e l'articolo

   Misure prese dal sito a 1512px.

   ELENCO (/blog/)
     riga elenco   contenitore 1470; categorie 270 a x=51, griglia 1080 a
                   x=381, quindi 60 di distacco
     griglia       3 colonne da 346,664 con 35 di riga e 20 di colonna
     card          bordo 1px; foto a tutta larghezza; corpo con 30 di lato
     meta          12px/400 interlinea 15,6, colore #adadad, 15 30 di respiro
     titolo        21px/600 interlinea 25,41, 25 sotto
     estratto      16px/400 interlinea 27,2, 25 sotto
     «leggi»       12px/700 interlinea 20,568, 20 sotto

   ARTICOLO
     contenitore   1260 (1200 di contenuto)
     testata       colonna 840 centrata, testo al centro
     titolo        32px/600 interlinea 38,72, 15 sotto
     immagine      1200x500
     contenuto     colonna 840, 40 di stacco, paragrafi con margine 26
   ============================================================ */

/* ============================================================
   L'elenco
   ============================================================ */
.of-elenco__griglia{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:60px;
  align-items:start;
}

/* La colonna delle categorie: il widget di WordPress come lo disegna il
   sito — titolo 18px/600 con 12,6 sopra e sotto, elenco puntato (pieno,
   e cerchio vuoto per le sottocategorie), voci 16px senza stacco, nome
   scuro e conteggio grigio. */
.of-elenco__lato .wp-block-heading{
  margin:12.6px 0;
  font-size:18px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:normal;
  color:var(--wp--preset--color--dark);
}
.of-elenco__lato ul{margin:16px 0;padding:0 0 24px 20.8px;list-style:disc}
.of-elenco__lato ul ul,
.of-elenco__lato .children{margin:0;padding:0 0 0 24px;list-style:circle}
.of-elenco__lato li{margin:0;font-size:16px;line-height:27.424px;color:var(--wp--preset--color--text)}
.of-elenco__lato a{
  color:var(--wp--preset--color--dark);
  text-decoration:none;
}
.of-elenco__lato a:hover{color:var(--wp--preset--color--primary)}

/* La paginazione: una riga di testo al centro, «« Precedente 1 2 3
   Successivo »», 5px fra le voci; il numero corrente e la voce spenta in
   grigio testo, i collegamenti scuri. */
.of-elenco .wp-block-query-pagination{margin:0;gap:0;font-size:16px;line-height:27.424px}
/* Sul sito l'elenco del blog ha altri 90 sotto, oltre ai 90 di ogni pagina. */
.of-elenco{margin-block-end:90px}
.of-elenco .wp-block-query-pagination > *,
.of-elenco .wp-block-query-pagination-numbers > *{margin:0 5px}
.of-elenco .wp-block-query-pagination a{color:var(--wp--preset--color--dark);text-decoration:none}
.of-elenco .wp-block-query-pagination a:hover{color:var(--wp--preset--color--primary)}
.of-elenco .wp-block-query-pagination .current,
.of-elenco .wp-block-query-pagination .of-spento{color:var(--wp--preset--color--text)}

/* Il blocco della query non aggiunge margini: sul sito la prima riga di
   card parte alla stessa altezza del titolo «Categorie». */
.of-elenco__articoli,
.of-elenco__articoli > *{margin-block:0}

/*
 * La griglia degli articoli. Il blocco «Ciclo di query» di WordPress porta
 * la sua impaginazione, ma qui la decidiamo noi: tre colonne da 346,664 con
 * 20 di distacco fanno 1080 esatti.
 */
.of-elenco .wp-block-post-template{
  display:grid;
  grid-template-columns:repeat(var(--of-blog-colonne,3),1fr);
  gap:35px 20px;
  /* Card alte quanto il loro contenuto: sul sito non sono stirate, e la
     muratura (app.js) le fa salire sotto quella della stessa colonna. */
  align-items:start;
  margin:0;
  padding:0;
  list-style:none;
}
/* Il riquadro: misurato sul sito (`.elementor-post__card`) — colonna flex,
   bordo 1px #eaeaea, raggio 10, fondo bianco, ritaglio. La colonna serve a
   tenere data e commenti in fondo, qualunque sia la lunghezza del testo. */
.of-elenco .wp-block-post-template > li{
  position:relative;
  display:flex;
  flex-direction:column;
  margin:0;
  border:1px solid #eaeaea;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

/* La foto: tutta la larghezza della card, raggio 10 come sul sito. E' la
   misura «miniatura» di WordPress (300x300 ritagliata): quadrata quando la
   miniatura esiste, con le proporzioni dell'originale quando la foto e' piu'
   piccola di 300 — per questo sul sito la prima card e' piu' alta. */
.of-elenco .wp-block-post-featured-image{margin:0 0 20px}
.of-elenco .wp-block-post-featured-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

/* Il corpo: 30 di lato, come sul sito. Il blocco del testo ha 20 di stacco
   dalla foto (`.elementor-post__text`, margine 20 0 0). */
.of-elenco .of-elenco__testo,
.of-elenco .of-elenco__piede{padding-inline:30px}
.of-elenco .of-elenco__testo{margin:20px 0 0}

/* Data e commenti, in fondo alla card: sul sito stanno sotto tutto, e ci
   restano perche' la card e' una colonna flex. */
.of-elenco .of-elenco__piede{
  /* Blocco con i figli in linea, come sul sito: in flex i due elementi
     diventano blocchi e la riga viene 45,6 invece di 46,6. */
  display:block;
  margin-top:auto;
  padding-block:15px;
  /* Il filo sopra c'e' anche sul sito: 1px #eaeaea. E' lui a fare i 46,6
     di altezza con 15,6 di riga — prima mancava, e l'interlinea era stata
     portata a 16,6 per far tornare il conto. */
  border-top:1px solid #eaeaea;
  font-size:12px;
  line-height:15.6px;
  color:#adadad;
}
.of-elenco .of-elenco__piede > *{display:inline;margin:0}
/* Fra data e commenti un «•» con 5px per parte, come sul sito. */
.of-elenco .of-elenco__piede > * + *::before{content:"\2022";margin:0 5px}
.of-elenco .of-elenco__piede a{color:inherit;text-decoration:none}
.of-elenco .of-elenco__piede a:hover{color:var(--wp--preset--color--dark)}

/* L'etichetta della categoria sulla foto, come `.elementor-post__badge`:
   in alto a destra a 20px, 12px/700 maiuscolo bianco su #69727d, raggio 6.
   Solo la prima categoria, e solo se la foto c'e' — sul sito l'etichetta
   sta dentro la foto e senza foto non compare. */
.of-elenco .wp-block-post-terms{
  position:absolute;
  inset-block-start:20px;
  inset-inline-end:20px;
  z-index:1;
  margin:0;
  padding:7.2px 14.4px;
  border-radius:6px;
  background:#69727d;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:#fff;
  text-transform:uppercase;
  pointer-events:none;
}
.of-elenco .wp-block-post-terms a{color:inherit;text-decoration:none}
.of-elenco .wp-block-post-terms a ~ a,
.of-elenco .wp-block-post-terms .wp-block-post-terms__separator{display:none}
.of-elenco .wp-block-post-template > li:not(:has(.wp-block-post-featured-image)) .wp-block-post-terms{display:none}

.of-elenco .wp-block-post-title{
  margin:0 0 25px;
  font-size:21px;
  font-weight:600;
  line-height:1.21;         /* 25,41 / 21 */
  letter-spacing:normal;
  color:var(--wp--preset--color--dark);
}
.of-elenco .wp-block-post-title a{color:inherit;text-decoration:none}
.of-elenco .wp-block-post-title a:hover{color:var(--wp--preset--color--primary)}

.of-elenco .wp-block-post-excerpt{
  margin:0 0 25px;
  color:var(--wp--preset--color--text);
}
/* Il paragrafo dentro l'estratto: sul sito e' 14px con interlinea 21 e
   nessun margine — non 16/27,2 come il testo del contenitore. */
.of-elenco .wp-block-post-excerpt p{
  margin:0;
  font-size:14px;
  line-height:1.5;          /* 21 / 14 */
  color:#777;
}
.of-elenco .wp-block-post-excerpt__more-text{margin:0}

.of-elenco .wp-block-read-more{
  display:inline-block;
  margin:0 0 20px;
  font-size:12px;
  font-weight:700;
  line-height:1.714;        /* 20,568 / 12 */
  letter-spacing:normal;
  /* Maiuscoletto come sul sito: e' il motivo per cui li' il link e' largo
     88,7 e qui veniva 73,5. */
  text-transform:uppercase;
  color:var(--wp--preset--color--dark);
  text-decoration:none;
}
.of-elenco .wp-block-read-more:hover{color:var(--wp--preset--color--primary)}

/* Il divisore fra testata ed elenco: sul sito una barra da 10px #f2f2f2
   (con 2 di respiro, 14 in tutto), 54 sotto la testata e 60 sopra l'elenco. */
.of-divisore{padding-block:2px;margin-block:54px 60px}
.of-divisore hr,
.of-divisore .wp-block-separator{
  margin:0;
  border:0;
  border-top:10px solid #f2f2f2;
  opacity:1;
}

/* SPAZIATURA DEI TITOLI — la regola non e' «tutti i titoli».
   Sul sito il restringimento (-0,034em) arriva dalla classe
   `heading-letter-spacing` di glozin, che sta solo sui titoli di SEZIONE:
   il titolo della pagina, quello dell'articolo, «Scelti per te», «Lascia un
   Commento», i nomi nelle schede correlate e nelle schede d'archivio.
   I titoli delle schede dell'elenco blog (21px), la voce «Categorie» della
   barra laterale e «leggi tutto» NON ce l'hanno: li' `normal` e' giusto.
   Misurato uno per uno, non dedotto. */

/* ============================================================
   Gli archivi: categoria, tag, autore, data
   Misure lette dal vivo su /category/corsi/ a 1512px.
   ============================================================ */
.of-archivio__testata{padding-block:80px 10px}
.of-archivio__testata .of-briciole{justify-content:center}
.of-archivio__titolo{
  margin:8px 0 0;
  font-size:32px;
  font-weight:600;
  line-height:38.72px;
  letter-spacing:-0.034em;   /* titolo archivio 32px → -1,088 */
  text-align:center;
  color:var(--wp--preset--color--dark);
}
.of-archivio__descrizione{
  margin:10px auto 0;
  max-width:760px;
  text-align:center;
  color:var(--wp--preset--color--text);
}

/* Due colonne da 690: 690 + 30 + 690 = i 1410 del contenitore. */
.of-archivio__griglia{
  display:grid;
  grid-template-columns:repeat(var(--of-blog-colonne,2),1fr);
  column-gap:30px;
  row-gap:40px;
  margin-block-start:40px;
}
.of-scheda-blog{display:flex;flex-direction:column;gap:30px}
.of-scheda-blog__foto{display:block;overflow:hidden;border-radius:var(--of-radius-articolo,5px)}
.of-scheda-blog__foto img{
  display:block;
  width:100%;
  aspect-ratio:690 / 394.2;
  object-fit:cover;
  border-radius:var(--of-radius-articolo,5px);
  transition:transform .4s ease;
}
.of-scheda-blog__foto:hover img{transform:scale(1.04)}

.of-scheda-blog__testo{display:flex;flex-direction:column;align-items:center;text-align:center}

/* La pastiglia: come quella dell'articolo, ma di peso 500. */
.of-scheda-blog__categoria{display:flex;margin:0 0 15px}
.of-scheda-blog__categoria a{
  display:flex;
  padding:8px 20px;
  border:1px solid var(--wp--preset--color--border,#ebebeb);
  border-radius:30px;
  font-size:13px;
  font-weight:500;
  line-height:16px;
  color:#111;
  text-decoration:none;
}
.of-scheda-blog__categoria a:hover{border-color:#111}

.of-scheda-blog__titolo{
  margin:0 0 10px;
  font-size:20px;
  font-weight:600;
  line-height:24.2px;
  letter-spacing:-0.034em;   /* titolo scheda archivio 20px → -0,68 */
}
.of-scheda-blog__titolo a{color:var(--wp--preset--color--dark);text-decoration:none}
.of-scheda-blog__titolo a:hover{color:var(--wp--preset--color--primary)}

.of-scheda-blog__estratto{
  margin-block-end:20px;   /* sul sito e' il margine del <p> dentro l'estratto */
  font-size:16px;
  line-height:27.424px;
  color:var(--wp--preset--color--text);
}
.of-scheda-blog__meta{
  margin:0;
  font-size:16px;
  line-height:19.5px;
  color:var(--wp--preset--color--text);
}

.of-archivio__pagine{margin-block-start:50px;text-align:center;font-size:15px}
.of-archivio__pagine .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:30px;
  color:var(--wp--preset--color--dark);
  text-decoration:none;
}
.of-archivio__pagine .page-numbers.current,
.of-archivio__pagine a.page-numbers:hover{background:#111;color:#fff}

/* ============================================================
   L'articolo
   Misure lette dal vivo su /origami-di-violette/ a 1512px.
   ============================================================ */
/* 30 fra la testata del sito e le briciole: su /un-giardino-da-mangiare/
   le briciole partono a 145 (testata fino a 112, riga da 24). */
.of-articolo-pagina{padding-block-start:30px}
.of-articolo-pagina .of-briciole{margin-block-end:15px}

/* L'immagine sta PRIMA della testata: 1200 di larghezza, 500 di altezza. */
.of-articolo__immagine{margin:30px 0 0}
.of-articolo__immagine img{
  display:block;
  width:100%;
  height:500px;
  object-fit:cover;
  border-radius:var(--of-radius-articolo-foto,var(--of-radius-md));
}

.of-articolo{max-width:840px;margin-inline:auto}
.of-articolo__testata{padding-block-start:40px;text-align:center}   /* pastiglia 40 sotto la foto */

/* La categoria e' una pastiglia: bordo sottile, dentro trasparente. */
.of-articolo__categoria{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0 0 15px;
}
.of-articolo__categoria a{
  display:flex;
  padding:8px 20px;
  border:1px solid var(--wp--preset--color--border,#ebebeb);
  border-radius:30px;
  font-size:13px;
  font-weight:400;
  line-height:16px;          /* 8+8 di padding + 2 di bordo + 16 = 34 */
  color:#111;
  text-decoration:none;
}
.of-articolo__categoria a:hover{border-color:#111}

.of-articolo__titolo{
  margin:0 0 15px;
  font-size:32px;
  font-weight:600;
  line-height:1.21;          /* 38,72 / 32 */
  letter-spacing:-0.034em;   /* titolo articolo 32px → -1,088 */
  color:var(--wp--preset--color--dark);
}

/* La meta: data e commenti, separati da un punto. L'autore il sito lo
   nasconde — resta nel codice per chi legge con lo schermo. */
.of-articolo__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin:0;
  font-size:16px;
  line-height:19.5px;
  color:var(--wp--preset--color--text);
}
.of-articolo__autore{display:none}
/* La data e' un contenitore flex: cosi' il pallino misura esattamente
   4 + 20 di margini. Da testo in riga il browser ci aggiunge dello spazio
   e la meta esce larga 3 in piu'. */
.of-articolo__data{display:inline-flex;align-items:center}
.of-articolo__data:not(:last-child)::after{
  content:"";
  width:4px;
  height:4px;
  margin:0 10px;             /* 4 del pallino + 20 = i 24 del sito */
  border-radius:50%;
  background:#cbcbcb;
}
.of-articolo__meta a{color:inherit;text-decoration:none}
.of-articolo__meta a:hover{color:var(--wp--preset--color--dark)}

/* Il testo: 40 di stacco. La regola in base.css lo terrebbe a 760 (la
   misura di lettura generale): qui vale quella del sito. */
.of-articolo .of-articolo__contenuto{max-width:840px;margin:40px auto 0}
/* Il margine dell'ultimo paragrafo NON si fonde coi 40 della condivisione:
   sul sito dall'ultimo paragrafo ai bottoni ci sono 26 + 40 = 66. In cima
   invece restano 40 e basta. */
.of-articolo__contenuto{display:flow-root}
.of-articolo__contenuto > :first-child{margin-block-start:0}
.of-articolo__contenuto p{margin:26px 0}
.of-articolo__contenuto h2{
  margin:40px 0 15px;
  font-size:24px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:normal;
  color:var(--wp--preset--color--dark);
}
.of-articolo__contenuto img{border-radius:var(--of-radius-md)}

/* Il pie': «Condividi su:» e i cinque canali, a sinistra. */
.of-articolo__pie{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:15px;
  margin:40px 0;
}
.of-articolo__pie-etichetta{font-size:16px;font-weight:600;line-height:27.424px;color:#111}
.of-articolo__canali{
  display:flex;
  flex-wrap:wrap;
  gap:10px;                  /* bottoni da 40 ogni 50, come sul sito */
  margin:0;
  padding:0;
  list-style:none;
}
.of-articolo__canale{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--wp--preset--color--border,#ebebeb);
  border-radius:30px;
  color:#111;
  text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.of-articolo__canale svg{width:13px;height:13px}
.of-articolo__canale:hover{border-color:#111;background:#111;color:#fff}

/* Precedente e successivo: due colonne uguali da 412,5 con 15 di stacco. */
.of-articolo__giro{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  justify-content:space-between;
  max-width:840px;
  margin:50px auto 0;
  padding:30px 0;
  border-top:1px solid var(--wp--preset--color--border,#ebebeb);
}
.of-articolo__giro-voce{
  display:flex;
  flex:1;
  flex-direction:column;
  min-width:0;
  color:var(--wp--preset--color--dark);
  text-decoration:none;
}
.of-articolo__giro-riga{
  display:flex;
  align-items:center;
  gap:10px;
  height:13px;
}
.of-articolo__giro-freccia{flex:none;width:9px;height:9px;color:var(--wp--preset--color--text)}
.of-articolo__giro-etichetta{
  font-size:13px;
  font-weight:600;
  line-height:13px;
  text-transform:uppercase;
  color:var(--wp--preset--color--text);
}
.of-articolo__giro-titolo{
  margin-block-start:15px;
  font-size:16px;
  font-weight:600;
  line-height:19.36px;
  color:var(--wp--preset--color--dark);
}
/* Il successivo si legge da destra: freccia e testo si invertono. */
.of-articolo__giro-voce--dopo{text-align:end}
.of-articolo__giro-voce--dopo .of-articolo__giro-riga{flex-direction:row-reverse}
.of-articolo__giro-voce:hover .of-articolo__giro-titolo{color:var(--wp--preset--color--primary)}

/* ============================================================
   «Scelti per te»
   Cinque schede da 260 con 30 di stacco: tre entrano negli 840,
   le altre si raggiungono trascinando. Il sito usa una giostra.
   ============================================================ */
.of-correlati{
  max-width:840px;
  margin:0 auto;
  padding-block-start:55px;
  border-top:1px solid var(--wp--preset--color--border,#ebebeb);
}
.of-correlati__titolo{
  margin:0 0 33px;
  font-size:35.4849px;
  font-weight:600;
  line-height:42.9367px;
  letter-spacing:-0.034em;   /* titolo «Scelti per te» 35,4849px → -1,20649 */
  text-align:center;
  color:var(--wp--preset--color--dark);
}
.of-correlati__elenco{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:260px;
  gap:30px;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
.of-correlati__voce{scroll-snap-align:start}
.of-correlati__foto{display:block;margin-block-end:30px}   /* glozin: entry-header mb-30 */
.of-correlati__foto img{
  display:block;
  width:100%;
  aspect-ratio:260 / 148.5;
  object-fit:cover;
  border-radius:var(--of-radius-articolo,5px);
}
.of-correlati__nome{
  margin:0 0 10px;
  font-size:16px;
  font-weight:600;
  line-height:19.36px;
  letter-spacing:-0.034em;   /* nome scheda correlata 16px → -0,544 */
}
.of-correlati__nome a{color:var(--wp--preset--color--dark);text-decoration:none}
.of-correlati__nome a:hover{color:var(--wp--preset--color--primary)}
.of-correlati__data{display:block;font-size:16px;line-height:normal;color:var(--wp--preset--color--text)}

/* ============================================================
   I commenti
   ============================================================ */
.of-articolo__discussione{
  max-width:840px;
  margin:60px auto 0;
  padding-block-start:55px;
  border-top:1px solid var(--wp--preset--color--border,#ebebeb);
}
.of-articolo__discussione .comment-reply-title,
.of-articolo__discussione .comments-title{
  margin:0 0 24.8394px;
  font-size:35.4849px;
  font-weight:600;
  line-height:42.9367px;
  letter-spacing:-0.034em;   /* titolo commenti 35,4849px → -1,20649 */
  text-align:center;
  color:var(--wp--preset--color--dark);
}
/* «Annulla risposta» sta dentro il titolo: 16px come in glozin, altrimenti
   il suo 80% di serie allarga la riga di 2px anche quando e' nascosto. */
.of-articolo__discussione .comment-reply-title small{margin-inline-start:10px;font-size:16px;line-height:16px;letter-spacing:-0.024em}
/* «Connesso come …»: una riga di testo normale, link dello stesso colore. */
.of-articolo__discussione .logged-in-as,
.of-articolo__discussione .comment-notes{
  margin:0 0 20px;
  font-size:16px;
  line-height:27.424px;
  color:var(--wp--preset--color--text);
}
.of-articolo__discussione .logged-in-as a{color:inherit;text-decoration:none}
.of-articolo__discussione .logged-in-as a:hover{color:var(--wp--preset--color--dark)}
.of-articolo__discussione .comment-form .required{color:inherit}

/* ---- l'elenco dei commenti ---- */
.of-commenti__titolo{margin:0 0 30px}
.of-commenti__elenco{margin:0 0 50px;padding:0;list-style:none}
.of-commenti__elenco .children{margin:0;padding-inline-start:40px;list-style:none}
.of-commento{list-style:none}
.of-commento__corpo{
  padding:25px 0;
  border-top:1px solid var(--wp--preset--color--border,#ebebeb);
}
.of-commenti__elenco > .of-commento:first-child > .of-commento__corpo{border-top:0;padding-top:0}
.of-commento__testa{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.of-commento__faccia{border-radius:50%;flex:none}
.of-commento__chi{display:flex;flex-direction:column;gap:2px}
.of-commento__nome{font-size:15px;font-weight:600;line-height:1.3;color:var(--wp--preset--color--dark)}
.of-commento__data{font-size:13px;color:#8a8a8a}
.of-commento__attesa{margin:0 0 10px;font-size:13px;color:var(--wp--preset--color--primary)}
.of-commento__testo{font-size:15px;line-height:1.7}
.of-commento__testo p{margin:0 0 10px}
.of-commento__testo p:last-child{margin-bottom:0}
.of-commento__pie{margin-block-start:10px}
.of-commento__rispondi a{
  font-size:13px;
  font-weight:600;
  color:var(--wp--preset--color--dark);
  text-decoration:none;
}
.of-commento__rispondi a:hover{color:var(--wp--preset--color--primary)}
.of-commenti__pagine{margin:0 0 40px;font-size:14px}
.of-commenti__chiusi{margin:0 0 30px;font-size:14px;color:#8a8a8a;text-align:center}

/* Il modulo, misurato ricostruendo quello di glozin dentro la pagina del
   sito: campo 840x150, padding 20, bordo 1px #ebebeb, angoli vivi, 14px;
   20 sotto il campo e 30 sopra il pulsante; pulsante al centro, 220x50,
   16,5 55 di respiro, 15px/600, raggio 30. */
.of-articolo__discussione .comment-form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:20px;
}
.of-articolo__discussione .comment-form > p{margin:0 0 20px}
.of-articolo__discussione .logged-in-as,
.of-articolo__discussione .comment-notes,
.of-articolo__discussione .comment-form-comment,
.of-articolo__discussione .comment-form-cookies-consent,
.of-articolo__discussione .form-submit{grid-column:1 / -1}
.of-articolo__discussione .comment-form input[type=text],
.of-articolo__discussione .comment-form input[type=email],
.of-articolo__discussione .comment-form input[type=url],
.of-articolo__discussione .comment-form textarea{
  display:block;
  width:100%;
  padding:20px;
  border:1px solid #ebebeb;
  border-radius:0;
  background:#fff;
  font-family:inherit;
  font-size:14px;
  line-height:normal;
  color:var(--wp--preset--color--text);
  transition:all .4s;
}
.of-articolo__discussione .comment-form textarea{height:150px;min-height:110px;resize:vertical}
.of-articolo__discussione .comment-form :is(input,textarea)::placeholder{color:rgba(17,17,17,.6)}
.of-articolo__discussione .comment-form :is(input,textarea):focus{
  outline:none;
  border-color:#111;
}
.of-articolo__discussione .comment-form > .form-submit{margin:12px 0 0;text-align:center}
.of-articolo__discussione #respond .of-commenti__invia{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:16.5px 55px;
  border:1px solid #111;
  border-radius:var(--of-radius-bottone,30px);
  background:#111;
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:15px;
  letter-spacing:-0.024em;
  text-transform:none;
  cursor:pointer;
  transition:all .25s;
}
.of-articolo__discussione #respond .of-commenti__invia:hover{
  background:var(--wp--preset--color--primary);
  border-color:var(--wp--preset--color--primary);
}
.of-articolo__discussione .comment-list{margin:0 0 40px;padding:0;list-style:none}
.of-articolo__discussione .comment-list ol.children{list-style:none;padding-inline-start:40px}
.of-articolo__discussione .comment-body{
  padding:20px 0;
  border-bottom:1px solid var(--wp--preset--color--border,#ebebeb);
}

/* ============================================================
   Schermo stretto
   ============================================================ */
@media(max-width:1024px){
  .of-elenco__griglia{grid-template-columns:1fr;gap:40px}
  .of-archivio__testata{padding-block:50px 10px}
  .of-elenco .wp-block-post-template{grid-template-columns:repeat(2,1fr)}
  .of-articolo__immagine img{height:320px}
  .of-correlati__titolo,
  .of-articolo__discussione .comment-reply-title,
  .of-articolo__discussione .comments-title{font-size:28px;line-height:1.21}
}
@media(max-width:600px){
  .of-elenco .wp-block-post-template{grid-template-columns:1fr}
  .of-archivio__griglia{grid-template-columns:1fr;row-gap:40px}
  .of-archivio__titolo{font-size:26px;line-height:1.21}
  .of-articolo__titolo{font-size:26px}
  .of-articolo__immagine img{height:220px}
  .of-articolo__giro-voce{flex:0 0 100%}
  .of-correlati__elenco{grid-auto-columns:230px}
  .of-articolo__discussione .comment-form{grid-template-columns:1fr}
}

/* ============================================================
   Le varianti del pannello Blog → Pagina del blog
   (inc/blog.php, ortofiorito_blog_impaginazione)
   ============================================================ */

/* Colonna laterale: nessuna, a destra, a sinistra. */
.of-elenco.of-blog--senza-lato .of-elenco__griglia{grid-template-columns:1fr}
.of-elenco.of-blog--senza-lato .of-elenco__lato{display:none}
.of-elenco.of-blog--lato-destra .of-elenco__griglia{grid-template-columns:1fr 270px}
.of-elenco.of-blog--lato-destra .of-elenco__lato{order:2}

.of-blog__griglia-lato{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:60px;
  align-items:start;
  margin-block-start:40px;
}
.of-blog__griglia-lato .of-archivio__griglia{margin-block-start:0}
.of-blog--lato-destra .of-blog__griglia-lato{grid-template-columns:minmax(0,1fr) 270px}
.of-blog--lato-destra .of-blog__lato{order:2}

/* Elenco invece di griglia: foto a sinistra, testo a destra. */
.of-blog--elenco .wp-block-post-template,
.of-blog--elenco .of-archivio__griglia{grid-template-columns:1fr}
@media(min-width:1200px){
  .of-blog--elenco .wp-block-post-template > li,
  .of-blog--elenco .of-scheda-blog{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:30px;
  }
  .of-blog--elenco .wp-block-post-template > li > *{grid-column:2}
  .of-blog--elenco .wp-block-post-template > li > .wp-block-post-featured-image{grid-column:1;grid-row:1 / span 4;margin:0}
}

/* La colonna laterale dell'articolo (Blog → Articolo → Colonna laterale). */
.of-articolo-pagina__griglia{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:60px;
  align-items:start;
}
.of-articolo-pagina--content-sidebar .of-articolo-pagina__griglia{grid-template-columns:minmax(0,1fr) 270px}
.of-articolo-pagina--content-sidebar .of-articolo-pagina__lato{order:2}

/* Lo stacco fra gli articoli correlati (Blog → Articolo). */
.of-correlati__elenco{gap:var(--of-correlati-stacco,30px)}

/* «Carica altri»: centrato sotto l'elenco, come glozin (50 sopra). */
.of-carica-altri{display:flex;margin:50px auto 0;min-width:200px}
.of-carica-altri[aria-busy="true"]{opacity:.6;cursor:progress}
.of-carica-altri--auto{visibility:hidden}

@media(max-width:1024px){
  .of-elenco.of-blog--lato-destra .of-elenco__griglia,
  .of-blog__griglia-lato,
  .of-blog--lato-destra .of-blog__griglia-lato,
  .of-articolo-pagina__griglia,
  .of-articolo-pagina--content-sidebar .of-articolo-pagina__griglia{grid-template-columns:1fr;gap:40px}
  .of-archivio__griglia{grid-template-columns:repeat(min(var(--of-blog-colonne,2),2),1fr)}
}

@media(max-width:600px){
  .of-archivio__griglia{grid-template-columns:1fr}
}

/* Sotto la testata di glozin gli archivi partono 54 piu' giu' e finiscono con
   90, come le pagine (sul sito la prima scheda di /category/consigli/ e' a
   y=327, cioe' 272,7 + 54). */
.of-testata-pagina--centrata + .of-archivio{padding-block:54px 0}
.of-testata-pagina--centrata + .of-archivio .of-archivio__griglia,
.of-testata-pagina--centrata + .of-archivio .of-blog__griglia-lato{margin-block-start:0}
@media(max-width:767px){
  .of-testata-pagina--centrata + .of-archivio{padding-block:30px 0}
}

/* Il blog sul telefono, come il sito a 375: niente colonna delle categorie,
   la banda grigia 62 sotto il titolo e 42 sopra la prima scheda. */
@media(max-width:767px){
  .of-elenco__lato{display:none}
  .of-elenco__griglia{gap:0}
  .of-divisore{margin-block:10px 40px}
  .of-elenco{margin-block-end:50px}
}

/* L'articolo sul telefono, misurato a 375: foto quadrata 345 con raggio 5,
   titolo a 32 come sul computer, testo 30 sotto la meta con paragrafi a 20;
   in fondo stacchi piu' stretti — giro 35, correlati 35 (una scheda da 345
   per volta, 15 fra l'una e l'altra), commenti 40 + 35 — e titoli a 30. */
@media(max-width:767px){
  .of-articolo__immagine img{height:auto;aspect-ratio:1/1;border-radius:5px}
  .of-articolo__titolo{font-size:32px}
  .of-articolo .of-articolo__contenuto{margin-block-start:30px}
  .of-articolo__contenuto p{margin:20px 0}
  .of-articolo__giro{margin-block-start:35px}
  .of-correlati{padding-block-start:35px}
  .of-correlati__elenco{grid-auto-columns:345px;gap:15px}
  .of-correlati__titolo,
  .of-articolo__discussione .comment-reply-title,
  .of-articolo__discussione .comments-title{font-size:30px;line-height:36.3px}
  .of-articolo__discussione{margin-block-start:40px;padding-block-start:35px}
  .of-articolo__discussione .comment-reply-title{margin-block-end:21px}
}