/* Stili del blog.
   Solo il contenuto: intestazione, menu, piede e caratteri arrivano da
   sito.css, lo stesso foglio usato da tutte le altre pagine. Prima questo
   file ridefiniva anche body e header, e il blog risultava una pagina
   estranea al resto del sito. */

.bl {
  --verde: #5CA37B;
  --verde-scuro: #2B3A36;
  --inchiostro: #161616;
  --tenue: #5A6560;
  --filo: #E3E5E0;
  padding: 70px 0 90px;
}

.bl-intro { max-width: 640px; margin: 0 0 54px; }
.bl-occhiello {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 14px;
}
.bl h1 {
  font-family: 'Titoli', Georgia, serif;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.12;
  color: var(--inchiostro);
  margin: 0 0 18px;
}
.bl-intro p { font-size: 18px; line-height: 1.65; color: var(--tenue); margin: 0; }

/* Elenco articoli ------------------------------------------------------- */

.bl-elenco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 34px;
}

.bl-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--filo);
  border-radius: 4px 22px 4px 22px;   /* stesso taglio d'angolo delle schede servizi */
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22,22,22,.10); }

.bl-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--verde-scuro); }
.bl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bl-card-testo { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }

.bl-meta {
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 12px;
}
.bl-meta span + span::before { content: '·'; margin: 0 8px; color: #B9C2BC; }

.bl-card h2 {
  font-family: 'Titoli', Georgia, serif;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.bl-card h2 a { color: var(--inchiostro); text-decoration: none; }
.bl-card h2 a:hover { color: var(--verde); }

.bl-card p { font-size: 15.5px; line-height: 1.62; color: var(--tenue); margin: 0 0 20px; }
.bl-card .bl-oltre { margin-top: auto; font-size: 14.5px; font-weight: 500; color: var(--verde); text-decoration: none; }
.bl-card .bl-oltre:hover { text-decoration: underline; }

/* Stato vuoto e caricamento --------------------------------------------- */

.bl-avviso {
  border: 1px dashed var(--filo);
  border-radius: 4px 22px 4px 22px;
  padding: 54px 34px;
  text-align: center;
  color: var(--tenue);
  font-size: 16.5px;
  line-height: 1.6;
}

/* Pagina del singolo articolo ------------------------------------------- */

.bl-articolo { max-width: 760px; margin: 0 auto; }
.bl-articolo .bl-torna { display: inline-block; font-size: 14.5px; color: var(--verde); text-decoration: none; margin-bottom: 26px; }
.bl-articolo .bl-torna:hover { text-decoration: underline; }
.bl-articolo h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 20px; }
.bl-sommario { font-size: 19px; line-height: 1.6; color: var(--tenue); margin: 0 0 30px; }
/* Ritaglio fisso: le copertine arrivano dal portale in formati diversi e
   una immagine quadrata riempirebbe da sola tutto lo schermo. */
.bl-copertina { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 4px 26px 4px 26px; margin: 0 0 44px; display: block; }

/* Corpo dell'articolo: le regole valgono su quello che scrive l'autore nel
   portale, che arriva come HTML gia' formattato e senza classi. */
.contenuto { font-size: 17.5px; line-height: 1.75; color: #2A2F2C; }
.contenuto h2 { font-family: 'Titoli', Georgia, serif; font-size: 28px; line-height: 1.25; margin: 46px 0 16px; color: var(--inchiostro); }
.contenuto h3 { font-family: 'Titoli', Georgia, serif; font-size: 22px; line-height: 1.3; margin: 34px 0 12px; color: var(--inchiostro); }
.contenuto p { margin: 0 0 22px; }
.contenuto ul, .contenuto ol { margin: 0 0 22px; padding-left: 24px; }
.contenuto li { margin-bottom: 10px; }
.contenuto a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
.contenuto strong { font-weight: 600; color: var(--inchiostro); }
.contenuto img { max-width: 100%; height: auto; border-radius: 4px 20px 4px 20px; margin: 12px 0 26px; }
.contenuto blockquote {
  margin: 32px 0; padding: 6px 0 6px 26px;
  border-left: 3px solid var(--verde);
  font-family: 'Titoli', Georgia, serif;
  font-size: 21px; line-height: 1.5; color: var(--verde-scuro);
}
.contenuto code { background: #F1F3F0; padding: 2px 7px; border-radius: 4px; font-size: .9em; }
.contenuto pre { background: #F1F3F0; padding: 20px; border-radius: 8px; overflow-x: auto; margin: 0 0 24px; }
.contenuto table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 16px; }
.contenuto th, .contenuto td { border: 1px solid var(--filo); padding: 11px 14px; text-align: left; }
.contenuto th { background: #F5F7F4; font-weight: 600; }
.contenuto hr { border: 0; border-top: 1px solid var(--filo); margin: 44px 0; }

.bl-firma {
  margin-top: 52px; padding-top: 26px;
  border-top: 1px solid var(--filo);
  font-size: 15px; color: var(--tenue);
}

/* Invito al contatto in coda all'articolo */
.bl-invito {
  margin-top: 46px; padding: 34px 36px;
  background: var(--verde-scuro);
  border-radius: 4px 26px 4px 26px;
  color: #E7E8DB;
}
.bl-invito h3 { font-family: 'Titoli', Georgia, serif; font-size: 24px; margin: 0 0 10px; color: #fff; }
.bl-invito p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: #C9D2CB; }
.bl-invito a {
  display: inline-block; background: var(--verde); color: #fff;
  padding: 13px 28px; border-radius: 4px 14px 4px 14px;
  text-decoration: none; font-size: 15.5px; font-weight: 500;
}
.bl-invito a:hover { background: #4C8E68; }

@media (max-width: 767px) {
  .bl { padding: 46px 0 64px; }
  .bl-elenco { grid-template-columns: 1fr; gap: 26px; }
  .bl-invito { padding: 28px 24px; }
}

/* Larghezza del contenuto.
   Colonna e contenitore di Elementor sono flex: senza una larghezza esplicita
   si stringono su quella del testo, e la pagina finisce a meta' schermo.
   Le altre pagine non hanno il problema perche' l'editor scrive le larghezze
   nel CSS in linea, elemento per elemento; le pagine del blog non passano
   dall'editor. */
.elementor-blog .elementor-column,
.elementor-blog .elementor-widget-wrap,
.elementor-blog .bl { width: 100%; }