/* ===================================================================
   La pagina dell'articolo nel layout editoriale (Configurazione → Blog →
   «Pagina dell'articolo», dalla 1.2.535): blog/_articolo_editoriale.twig.
   Si appoggia a blog-editoriale.css (.ke-blog, colori, schede dei correlati).
   I titoli hanno il colore scritto qui: app.css dà a ogni h1-h6 il colore
   del testo del tema.
   =================================================================== */

.ke-art { padding-top: 18px; }

/* ── Percorso ── */
.ke-art-percorso ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 22px; padding: 0; color: #6b7280; font-size: .88rem; list-style: none; }
.ke-art-percorso li + li::before { content: '›'; margin-right: 10px; color: #9ca3af; }
.ke-art-percorso a { color: #4b5563; text-decoration: none; }
.ke-art-percorso a:hover { color: var(--ke-blog-colore); text-decoration: underline; }

/* ── Testata ── */
.ke-art-testa { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px 44px; align-items: center; margin-bottom: 32px; padding-bottom: 30px; border-bottom: 1px solid #e5e7eb; }
.ke-art-testa.is-senza-foto { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.ke-art-testa h1 { margin: 6px 0 14px; color: #111827; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.ke-art-sotto { margin: 0 0 18px; color: #4b5563; font-size: 1.2rem; line-height: 1.5; }
.ke-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; color: #6b7280; font-size: .92rem; }
.ke-art-meta a { color: inherit; text-decoration: none; }
.ke-art-meta a:hover { color: var(--ke-blog-colore); text-decoration: underline; }
.ke-art-meta-sep { color: #9ca3af; }
.ke-art-azioni { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ke-art-azione { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; color: #111827; font-size: .98rem; cursor: pointer; }
.ke-art-azione:hover { color: var(--ke-blog-colore); }
.ke-art-azione:focus-visible { outline: 2px solid var(--ke-blog-colore); outline-offset: 3px; border-radius: 4px; }
.ke-art-foto { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 18px; background: #f3f4f6; }
.ke-art-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Corpo: testo e colonna di destra ── */
.ke-art-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 880px; }
.ke-art-griglia.con-lato { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; max-width: none; }
/* La colonna è alta quanto il testo; il suo contenuto resta fermo in alto.
   Se è più alto dello schermo, dalla 1.2.540 niente barra di scorrimento:
   scorre con la pagina finché se ne vede il fondo, poi resta ferma
   (blog-articolo.js mette --lato-top negativo) */
.ke-art-lato { align-self: stretch; min-width: 0; }
.ke-art-lato-dentro { position: sticky; top: var(--lato-top, 110px); display: grid; gap: 20px; }
.ke-art-autore p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; }

/* ── Il testo ── */
.ke-art-testo { color: #1f2937; font-size: 1.06rem; line-height: 1.75; overflow-wrap: break-word; }
.ke-art-testo p { margin: 0 0 1.1em; }
.ke-art-testo h2 { margin: 1.9em 0 .6em; padding-top: 1.3em; border-top: 1px solid #e5e7eb; color: #111827; font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.2; scroll-margin-top: 120px; }
.ke-art-testo > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ke-art-testo h3 { margin: 1.6em 0 .5em; color: #111827; font-size: 1.25rem; font-weight: 700; line-height: 1.3; scroll-margin-top: 120px; }
.ke-art-testo h4 { margin: 1.4em 0 .4em; color: #111827; font-size: 1.08rem; font-weight: 700; }
.ke-art-testo img { max-width: 100%; height: auto; border-radius: 12px; }
.ke-art-testo figure { margin: 1.4em 0; }
.ke-art-testo figcaption { margin-top: 6px; color: #6b7280; font-size: .86rem; line-height: 1.4; }
.ke-art-testo blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--ke-blog-colore); color: #374151; font-style: italic; }
.ke-art-testo table { width: 100%; margin: 1.4em 0; border-collapse: collapse; font-size: .95rem; }
.ke-art-testo th, .ke-art-testo td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
.ke-art-intro { margin-bottom: 1.4em; color: #374151; font-size: 1.15rem; }

/* ── Domande frequenti, tag ── */
.ke-art-faq { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e5e7eb; }
.ke-art-faq h2 { margin: 0 0 18px; color: #111827; font-size: 1.6rem; font-weight: 800; }
.ke-art-faq .faq-accordion-item { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.ke-art-faq .faq-accordion-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border: 0; background: #fff; color: #111827; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; }
.ke-art-faq .faq-accordion-toggle:hover { background: #f9fafb; }
.ke-art-faq .faq-chevron { flex: none; color: #6b7280; transition: transform .3s; }
.ke-art-faq-risposta { padding: 0 20px 18px; color: #4b5563; font-size: .96rem; line-height: 1.65; }
.ke-art-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #e5e7eb; }
.ke-art-tag > span { margin-right: 4px; color: #111827; font-weight: 700; }
.ke-art-tag a { padding: 6px 12px; border: 1px solid #e5e7eb; border-radius: 999px; color: #4b5563; font-size: .88rem; text-decoration: none; }
.ke-art-tag a:hover { border-color: var(--ke-blog-colore); color: var(--ke-blog-colore); }
.ke-art-correlati { margin-top: 52px; }

/* ── «In sintesi» (dalla 1.2.537) ── */
.ke-art-sintesi { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(0, 3fr); align-items: start; gap: 16px 22px; margin-bottom: 32px; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--ke-blog-colore) 22%, #fff); border-radius: 16px; background: color-mix(in srgb, var(--ke-blog-colore) 6%, #fff); }
.ke-art-sintesi-testa { display: flex; align-items: center; gap: 12px; }
.ke-art-sintesi-icona { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ke-blog-colore); }
.ke-art-sintesi-icona .ke-icona { width: 24px; height: 24px; }
.ke-art-sintesi-testa h2 { margin: 0; color: #111827; font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.ke-art-sintesi-testa p { margin: 2px 0 0; color: #6b7280; font-size: .8rem; line-height: 1.35; }
.ke-art-sintesi ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 0; margin: 0; padding: 0; list-style: none; }
.ke-art-sintesi--2 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ke-art-sintesi--1 ul { grid-template-columns: minmax(0, 1fr); }
.ke-art-sintesi li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 0 16px; border-left: 1px solid color-mix(in srgb, var(--ke-blog-colore) 22%, #fff); }
.ke-art-sintesi li .ke-icona { flex: none; width: 26px; height: 26px; color: var(--ke-blog-colore); }
.ke-art-sintesi li strong { display: block; color: #111827; font-size: .92rem; line-height: 1.3; }
.ke-art-sintesi li small { display: block; margin-top: 4px; color: #4b5563; font-size: .82rem; line-height: 1.45; }
@media (max-width: 1279px) {
    .ke-art-sintesi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ke-art-sintesi { padding: 16px; }
    .ke-art-sintesi ul, .ke-art-sintesi--2 ul { grid-template-columns: minmax(0, 1fr); }
    .ke-art-sintesi li { padding: 0; border-left: 0; }
}

/* ── L'autore nella colonna (dalla 1.2.539) ── */
.ke-art-autore { padding: 22px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.ke-art-autore h2 { margin: 0 0 14px; color: #111827; font-size: 1.15rem; font-weight: 800; }
.ke-art-autore-testa { display: flex; align-items: center; gap: 14px; }
.ke-art-autore-testa img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.ke-art-autore-testa strong { display: block; color: #111827; font-size: 1rem; }
.ke-art-autore-testa small { display: block; margin-top: 2px; color: #6b7280; font-size: .82rem; line-height: 1.35; }
.ke-art-autore p { margin: 14px 0 0; color: #4b5563; font-size: .88rem; line-height: 1.55; }
.ke-art-autore-link { display: inline-block; margin-top: 12px; color: var(--ke-blog-colore); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Riquadro d'azione nella colonna (dalla 1.2.538) ── */
.ke-art-azione-box { padding: 22px; border: 1px solid color-mix(in srgb, var(--ke-blog-colore) 22%, #fff); border-radius: 16px; background: color-mix(in srgb, var(--ke-blog-colore) 6%, #fff); }
.ke-art-azione-testa { display: flex; align-items: center; gap: 14px; }
.ke-art-azione-icona { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--ke-blog-colore); }
.ke-art-azione-icona .ke-icona { width: 30px; height: 30px; }
.ke-art-azione-occhiello { margin: 0 0 2px; color: #4b5563; font-size: .85rem; }
.ke-art-azione-box h2 { margin: 0; color: #111827; font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.ke-art-azione-testo { margin: 14px 0 0; color: #4b5563; font-size: .92rem; line-height: 1.5; }
.ke-art-azione-pulsante { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 13px 16px; border: 2px solid var(--ke-blog-colore); border-radius: 12px; background: #fff; color: var(--ke-blog-colore); font-weight: 700; text-decoration: none; }
.ke-art-azione-pulsante:hover { background: var(--ke-blog-colore); color: #fff; }
.ke-art-azione-pulsante .ke-icona { width: 20px; height: 20px; }

/* ── «In questa guida» (dalla 1.2.536) ── */
.ke-art-indice { padding: 22px 22px 14px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.ke-art-indice-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ke-art-indice-testa h2 { margin: 0; color: #111827; font-size: 1.15rem; font-weight: 800; }
.ke-art-indice-testa span { color: #6b7280; font-size: .78rem; font-variant-numeric: tabular-nums; }
.ke-art-indice-barra { height: 4px; margin: 12px 0 10px; overflow: hidden; border-radius: 4px; background: #e5e7eb; }
.ke-art-indice-barra span { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--ke-blog-colore); transition: width .15s linear; }
.ke-art-indice-voci { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ke-art-indice-voci a { display: flex; align-items: flex-start; gap: 12px; padding: 8px 6px; border-radius: 10px; color: #374151; font-size: .92rem; line-height: 1.35; text-decoration: none; }
.ke-art-indice-voci a:hover { background: #f9fafb; color: #111827; }
.ke-art-indice-n { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--ke-blog-colore) 12%, #fff); color: color-mix(in srgb, var(--ke-blog-colore) 85%, #000); font-size: .8rem; font-weight: 700; }
.ke-art-indice-voci a.is-attiva { color: #111827; font-weight: 600; }
.ke-art-indice-voci a.is-attiva .ke-art-indice-n { background: var(--ke-blog-colore); color: #fff; }
.ke-art-indice-telefono { display: none; margin-bottom: 24px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; }
.ke-art-indice-telefono > summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; color: #111827; font-weight: 700; list-style: none; cursor: pointer; }
.ke-art-indice-telefono > summary::-webkit-details-marker { display: none; }
.ke-art-indice-telefono > summary small { color: #6b7280; font-weight: 400; }
.ke-art-indice-telefono > summary::after { content: ''; width: 8px; height: 8px; margin: 0 4px 4px auto; border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280; transform: rotate(45deg); }
.ke-art-indice-telefono[open] > summary::after { margin-bottom: -2px; transform: rotate(-135deg); }
.ke-art-indice-telefono .ke-art-indice-voci { padding: 0 10px 12px; }

@media (max-width: 1023px) {
    .ke-art-indice { display: none; }
    .ke-art-indice-telefono { display: block; }
    .ke-art-testa { grid-template-columns: minmax(0, 1fr); }
    .ke-art-griglia.con-lato { grid-template-columns: minmax(0, 1fr); }
    .ke-art-lato-dentro { position: static; }
}
@media (max-width: 640px) {
    .ke-art-sotto { font-size: 1.05rem; }
    .ke-art-testo { font-size: 1rem; }
    .ke-art-foto { border-radius: 12px; }
}