/* ── Milena Elia — stile articolo/blog ──────────────────────────────────── */

/* Prosa */
.me-article { max-width: 720px; }
.me-article p { font-size: 1.1875rem; line-height: 1.75; color: var(--text-body); margin: 0 0 18px; }
.me-article .lead { font-size: 1.3125rem; color: var(--gray-700); font-weight: 500; }
.me-article h2 { font-size: var(--fs-h2); font-weight: 800; margin: 40px 0 14px; scroll-margin-top: 90px; }
/* Non il token --fs-h3: il suo minimo e' 20px, e il testo dell'articolo e' a
   19px — su una finestra sotto i 1280 un sottotitolo era piu' grande del testo
   di UN pixel, cioe' invisibile come titolo. Qui il minimo e' 22px. */
.me-article h3 { font-size: clamp(1.375rem, 1.9vw, 1.5rem); font-weight: 700; margin: 28px 0 10px; }
.me-article ul, .me-article ol { margin: 0 0 18px; padding-left: 22px; }
.me-article li { font-size: 1.1875rem; line-height: 1.7; color: var(--text-body); margin-bottom: 10px; }
.me-article a { color: var(--magenta-600); text-decoration: underline; }
.me-article img { max-width: 100%; border-radius: var(--radius-md); margin: 20px 0; }

/* Blocco "In sintesi" (key takeaway → citato dalle AI) */
.me-takeaway { background: var(--surface-alt); border-radius: var(--radius-lg); padding: var(--space-6); margin: 36px 0; border-left: 4px solid var(--magenta-600); }
.me-takeaway .lab { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta-600); margin-bottom: 12px; }
.me-takeaway ul { margin: 0; padding-left: 20px; }
.me-takeaway li { margin-bottom: 8px; }

/* Blocco FAQ */
.me-faq { margin: 32px 0; }
.me-faq-item { border-bottom: 1px solid var(--border-subtle); padding: 18px 0; }
.me-faq-item .q { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--text-heading); margin: 0 0 8px; }
.me-faq-item .a { color: var(--text-muted); line-height: 1.6; margin: 0; }

/* CTA WhatsApp inline */
.me-cta-inline { background: var(--gradient-brand-soft); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 36px 0; }
.me-cta-inline .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.me-cta-inline .txt { flex: 1; min-width: 220px; }
.me-cta-inline strong { display: block; font-size: 17px; color: var(--ink); }
.me-cta-inline span { font-size: 15px; color: var(--viola-700); }
.me-cta-btn { background: var(--whatsapp-600); color: #fff; border-radius: var(--radius-pill); padding: 11px 22px; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* TOC */
.me-toc .toc-head { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); }
.me-toc ul { list-style: none; margin: 14px 0 0; padding: 0; border-left: 2px solid var(--border-subtle); }
.me-toc a { display: block; padding: 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; color: var(--gray-700); text-decoration: none; line-height: 1.35; }
.me-toc a:hover { color: var(--magenta-600); border-left-color: var(--magenta-600); }

/* ── Prosa completa ───────────────────────────────────────────────────────
   Prima qui c'era il minimo indispensabile: paragrafi, h2, h3, liste, link.
   Tutto il resto che un articolo vero contiene — sotto-sottotitoli, testo
   evidenziato, righe di separazione, immagini con didascalia, tabelle — non
   aveva uno stile, quindi il browser ci metteva il suo. E' l'altra metà del
   motivo per cui gli articoli non somigliavano al resto del sito. */

.me-article h4 { font-size: 1.25rem; font-weight: 700; margin: 24px 0 8px; color: var(--text-heading); scroll-margin-top: 90px; }
.me-article h3 { scroll-margin-top: 90px; }
.me-article strong { font-weight: 700; color: var(--text-heading); }
.me-article em { font-style: italic; }
.me-article s { color: var(--gray-500); }
.me-article a:hover { color: var(--magenta-700); }

.me-article blockquote {
  margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--magenta-600);
  font-size: 1.3125rem; line-height: 1.6; color: var(--gray-700); font-style: italic;
}
.me-article blockquote p { font-size: inherit; font-style: inherit; margin: 0; }

.me-article hr { border: none; border-top: 1px solid var(--border-subtle); margin: 44px auto; width: 100%; }

.me-article figure { margin: 32px 0; }
.me-article figure img { margin: 0; width: 100%; }
.me-article figcaption { font-size: 14px; color: var(--text-muted); text-align: center; margin-top: 10px; line-height: 1.5; }

.me-article code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .9em;
  background: var(--gray-100); border-radius: 5px; padding: 2px 6px; }
.me-article pre { background: var(--ink); color: #f4f4f4; border-radius: var(--radius-md);
  padding: 18px 20px; overflow-x: auto; margin: 28px 0; line-height: 1.55; }
.me-article pre code { background: none; padding: 0; color: inherit; }

/* Le tabelle devono poter scorrere per conto loro: su un telefono una tabella
   larga trascina in orizzontale tutta la pagina. */
.me-article table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 1rem; display: block; overflow-x: auto; }
.me-article th, .me-article td { border: 1px solid var(--border-subtle); padding: 10px 14px; text-align: left; }
.me-article th { background: var(--gray-50); font-weight: 700; color: var(--text-heading); }

.me-article ul ul, .me-article ol ol, .me-article ul ol, .me-article ol ul { margin: 8px 0 0; }
.me-article li > p { margin: 0; }

/* Primo elemento senza margine in cima: altrimenti l'articolo comincia con un
   buco che non c'è in nessuna altra pagina del sito. */
.me-article > :first-child { margin-top: 0; }

/* ── Impaginazione dell'articolo e indice laterale ────────────────────────
   La griglia dell'articolo si chiamava `me-blog-grid`, lo stesso nome della
   griglia di schede in /blog/. Due cose diverse con lo stesso nome: sul
   telefono la regola `grid-template-columns:1fr !important` scritta per le
   schede vinceva anche qui — l'`!important` di un foglio di stile batte lo
   stile in linea — e l'indice, che restava `position:sticky`, si incollava in
   cima mentre il testo gli scorreva sotto. E' l'accavallamento segnalato. */
/* La griglia vive SOLO qui. Averla anche nello stile in linea significava
   che il telefono non poteva cambiarla: lo stile in linea batte il foglio,
   e serviva un !important per scavalcarlo — che e' come si era arrivati
   allo scontro fra due regole con lo stesso nome. */
.me-articolo-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.me-toc { position: sticky; top: 88px; }

@media (max-width: 900px) {
  /* Su schermo stretto l'indice non serve e faceva danni: via del tutto.
     Resta su desktop, dove ha lo spazio della sua colonna. */
  .me-articolo-grid { grid-template-columns: 1fr; }
  .me-toc { display: none; }
  .me-article { max-width: 100%; }
}
.me-toc li.liv-3 a { padding-left: 26px; font-size: 13.5px; color: var(--gray-500); }

/* ── Correzioni viste sul sito vero (19 agosto) ───────────────────────────── */

/* Il pulsante WhatsApp dentro un articolo usciva ROSA E SOTTOLINEATO su verde:
   `.me-article a` (0,1,1) vince su `.me-cta-btn` (0,1,0). Non e' una svista di
   colore, e' una regola di specificita' — quindi serve un selettore piu' forte,
   non un colore diverso. */
.me-article a.me-cta-btn { color: #fff; text-decoration: none; }
.me-article a.me-cta-btn:hover { color: #fff; }

/* Quando l'articolo non ha indice, la colonna da 240px restava li' vuota e
   spingeva il testo a destra: il corpo cominciava 114px piu' in la' del titolo
   dello stesso articolo. Senza indice si torna a una colonna sola. */
/* La larghezza sta qui e non nello stile in linea, altrimenti non si puo'
   cambiare per il caso senza indice: con l'indice il contenitore e' largo,
   senza deve stringersi a quello dell'intestazione — o titolo e testo dello
   stesso articolo non stanno sulla stessa verticale. */
.me-articolo-grid { max-width: var(--container-max); margin: 0 auto; }
.me-articolo-grid.senza-indice { grid-template-columns: minmax(0, 1fr); max-width: var(--container-narrow); }
.me-articolo-grid.senza-indice .me-article { max-width: 100%; }

/* Un titolo rimasto senza testo e' un buco verticale nella pagina: c'e' ma non
   si legge. Non si stampa. */
.me-article h2:empty, .me-article h3:empty, .me-article h4:empty,
.me-article p:empty { display: none; }

/* ── Condivisioni in fondo all'articolo ──────────────────────── */
/* Sono link, non widget dei social: nessuno script di terzi entra nella
   pagina, quindi nessun cookie prima del consenso. Vedi
   includes/partials/condivisioni.php. */
.me-share { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
            margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--border-subtle); }
.me-share-t { font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
              text-transform: uppercase; color: var(--gray-400); }
.me-share-b { display: flex; gap: 10px; flex-wrap: wrap; }

/* `.me-article .me-share-l` e non `.me-share-l`: dentro l'articolo vale la
   regola `.me-article a`, che ha specificita' piu' alta e tingeva di magenta i
   cinque link lasciando grigio il copia-link, che e' un `button`. Sei pulsanti
   in fila, uno di un altro colore senza motivo. */
.me-article .me-share-l, .me-share-l {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); background: #fff;
  color: var(--gray-700); text-decoration: none; cursor: pointer;
  padding: 0; position: relative;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.me-share-l svg { width: 19px; height: 19px; display: block; }
.me-article .me-share-l:hover, .me-share-l:hover {
  transform: translateY(-2px); border-color: transparent; color: #fff; text-decoration: none;
}

/* Il colore vero di ciascuno: si riconoscono senza leggere l'etichetta. */
.me-share--linkedin:hover { background: #0A66C2; }
.me-share--facebook:hover { background: #1877F2; }
.me-share--whatsapp:hover { background: var(--whatsapp-600, #25D366); }
.me-share--x:hover        { background: #000; }
.me-share--email:hover    { background: var(--magenta-600); }
.me-share--link:hover     { background: var(--ink); }

/* La conferma di copia: una nuvoletta sopra il pulsante, non un alert che
   ferma la lettura per farsi chiudere. */
.me-share-ok {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 7px; white-space: nowrap; pointer-events: none;
}
.me-share-ok[hidden] { display: none; }

@media (max-width: 520px) {
  .me-share { gap: 12px; }
  .me-share-l { width: 40px; height: 40px; }
}