/* ==========================================================================
   Articolo singolo del blog (layout post.njk)
   Valori dal template Elementor "single-post" (post-2202.css) e dal kit globale.
   ========================================================================== */

.post, .related { --c-title: #1c244b; }

/* --- Titolo + data -------------------------------------------------------- */
.post__header {
  width: min(970px, 84%);
  margin-inline: auto;
  /* margin-top 9% dell'originale, mai meno dell'altezza dell'header sovrapposto */
  padding-top: max(9vw, calc(var(--header-h) + 25px));
  text-align: center;
}
.post__title {
  margin: 0;
  color: var(--c-title);
  font-size: clamp(28px, 2vw + 18px, 40px); /* era 51px: con i titoli lunghi occupava mezzo schermo */
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4; /* sillaba solo le parole lunghe (titoli lunghi su mobile) */
}
.post__date {
  margin: 25px 0 0;
  color: var(--c-title);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}

/* --- Contenuto ------------------------------------------------------------ */
.post__body {
  width: min(799px, 84%);
  margin: 4vw auto 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.post__content {
  color: var(--c-text);
  text-align: justify;
  overflow-wrap: break-word;
  /* sillabazione italiana (lang="it"): evita i buchi del giustificato sulle righe corte */
  hyphens: auto;
}
.post__content::after { content: ""; display: table; clear: both; }
.post__content > :last-child { margin-bottom: 0; }

/* Titoli dentro l'articolo: due soli livelli, uguali in tutti gli articoli
   (Titolo 1-2 di Google Docs → h2, Titolo 3-6 → h3; vedi scripts/drive-sync.mjs).
   L'aspetto è quello dei titoli h4 di WordPress, i più usati negli articoli originali. */
.post__content :is(h2, h3) {
  margin: 2.25rem 0 .75rem;
  line-height: 1.25;
  font-weight: 500;
  color: inherit;
  text-align: left;
}
/* h2 con più corpo e una lineetta bianca sopra: le sezioni si distinguono a colpo d'occhio */
.post__content h2 {
  margin-top: 3rem;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--c-title);
  text-wrap: balance;
}
.post__content h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: .75rem;
  border-radius: 2px;
  background: var(--c-accent);
}
.post__content h3 { font-size: 1.25rem; font-weight: 700; }
.post__content > :first-child { margin-top: 0; }

/* Copertina in testa all'articolo e immagini nel testo: centrate, mai più larghe del testo */
.post__content :is(.post__cover, .post__figure) { margin: 0 0 1.75rem; }
.post__content .post__figure { margin-top: 1.75rem; }
.post__content :is(.post__cover, .post__figure) img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 23px;
}
.post__content .post__cover img { max-height: 520px; }

/* come il reset Hello Elementor: "bolder" sul testo 300 = 400 */
.post__content strong, .post__content b { font-weight: bolder; }
.post__content ul, .post__content ol { margin: 0 0 1em; padding-left: 40px; }
.post__content li + li { margin-top: .35em; }
.post__content blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.5rem;
  border-left: 3px solid var(--c-accent);
  text-align: left;
}
.post__content blockquote p { margin: 0; }

/* Link nel testo: colore del testo con sottolineatura bianca; al passaggio diventano bianchi */
.post__content a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s;
}
.post__content a:is(:hover, :focus-visible) { color: var(--c-accent); }

/* Immagini nel testo (classi di allineamento WordPress) */
.post__content img { height: auto; }
.post__content .alignleft { float: left; margin: 0 20px 10px 0; }
.post__content .alignright { float: right; margin: 0 0 10px 20px; }
.post__content .aligncenter { margin-inline: auto; }

/* --- Condivisione --------------------------------------------------------- */
.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.post-share__label {
  margin: 0;
  color: var(--c-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-share__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 22px;
}
.post-share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* bottone Elementor: font-size 5px × 4.5em */
  width: 22.5px;
  height: 22.5px;
  color: var(--c-accent);
  transition: color .3s;
}
.post-share__link svg { width: 22px; height: 22px; fill: currentColor; }
.post-share__link:hover, .post-share__link:focus-visible { color: #c8d5dc; }

/* --- Articoli correlati ---------------------------------------------------- */
.related {
  width: min(970px, 84%);
  margin: clamp(60px, 7vw, 110px) auto 0;
  padding-bottom: clamp(60px, 7vw, 100px); /* respiro tra le card e il footer */
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.related__title {
  margin: 0;
  color: var(--c-title);
  font-size: 51px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px 60px;
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 23px;
}
.card__thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / .62;
  margin-bottom: 20px;
  overflow: hidden;
}
.card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* immagine sostitutiva per gli articoli senza immagine in evidenza */
.card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--c-indigo);
}
.card__placeholder img { position: static; width: 60%; height: auto; object-fit: contain; }

.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 9px;
  padding: 0 27px;
}
.card__title {
  margin: 0 0 8px;
  color: var(--c-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover, .card__title a:focus-visible { color: var(--c-violet); }
.card__excerpt {
  flex: 1;
  margin: 0 0 30px;
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.5;
}
.card__more {
  align-self: flex-start;
  margin-bottom: 20px;
  color: var(--c-violet);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.card__more:hover { text-decoration: underline; }

/* --- Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .post__header { width: min(620px, 84%); }
  .post__date { font-size: 14px; }
  .post__body { width: 90%; }
  .post-share__list { gap: 16px; }
  .related { width: 90%; gap: 40px; }
  .related__grid { row-gap: 71px; column-gap: 40px; }
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 767px) {
  .post__header { width: 90%; }
  .post__body { gap: 25px; margin-top: 4vw; }
  .post-share { gap: 15px; margin-top: 5vw; }
  .post-share__link svg { width: 18px; height: 18px; }
  .related { margin-top: 60px; padding-bottom: 50px; gap: 30px; }
  .related__grid { grid-template-columns: 1fr; gap: 30px; }
  .card__thumb { aspect-ratio: 2 / 1; }
  .card__title { margin-bottom: 9px; }
  .post__content .alignleft, .post__content .alignright { float: none; margin: 0 auto 15px; }
  .post__content blockquote { padding-left: 1rem; }
  .post__content .post__cover img { max-height: 360px; }
}