/* Guide xdroni: colori e font del tema. */
.xdg { --g-mag: var(--magenta); --g-ink: var(--ink); --g-ink-2: var(--ink-2); --g-line: var(--line); --g-paper: var(--paper); --g-paper-2: var(--paper-2); --g-chart: var(--chart); padding-bottom: 90px; }
.xdg-articolo { max-width: 760px; margin: 0 auto; }
.xdg-briciole { font-size: .9rem; color: var(--g-ink-2); margin: 0 0 22px; }
.xdg-briciole a { color: var(--g-mag); font-weight: 700; text-decoration: none; }
.xdg-kicker { font: 700 .82rem/1.2 var(--display); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--g-mag); margin: 0 0 12px; }
.xdg-h1 { font: 900 clamp(2rem, 1.2rem + 3.4vw, 3.4rem)/1.04 var(--display); font-stretch: 118%; letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; }
.xdg-h1 em { font-style: normal; color: var(--g-mag); }
.xdg-lead { font-size: 1.18rem; color: var(--g-ink-2); margin: 0 0 14px; max-width: 62ch; }
.xdg-meta { font-size: .9rem; color: var(--g-ink-2); margin: 0 0 34px; padding-bottom: 22px; border-bottom: 1px solid var(--g-line); }

.xdg-testo { font-size: 1.08rem; line-height: 1.7; }
.xdg-testo > * + * { margin-top: 1.1em; }
.xdg-testo h2 { font: 820 clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem)/1.15 var(--display); font-stretch: 112%; letter-spacing: -.015em; margin: 2.2em 0 .5em; scroll-margin-top: 90px; }
.xdg-testo h3 { font: 800 1.2rem/1.25 var(--display); margin: 1.6em 0 .4em; }
.xdg-testo a { color: var(--g-mag); font-weight: 700; }
.xdg-testo ul, .xdg-testo ol { padding-left: 1.3em; }
.xdg-testo li + li { margin-top: .4em; }
.xdg-breve { background: var(--g-ink); color: var(--g-paper); border-radius: 20px; padding: 22px 24px; }
.xdg-breve p { margin: 0; }
.xdg-breve b:first-child { display: block; font: 800 .82rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dusk, oklch(77% 0.15 62)); margin-bottom: 8px; }
.xdg-indice { background: var(--g-paper-2); border-radius: 16px; padding: 16px 20px; font-size: .98rem; }
.xdg-indice p { margin: 0 0 6px; font-weight: 800; }
.xdg-indice ol { margin: 0; }
.xdg-figura { margin: 1.6em 0; background: var(--g-paper); border: 1px solid var(--g-line); border-radius: 20px; padding: 16px; }
.xdg-figura svg { display: block; width: 100%; height: auto; }
.xdg-figura figcaption { font-size: .92rem; color: var(--g-ink-2); margin-top: 10px; line-height: 1.5; }
.xdg-nota { border-left: 4px solid var(--g-mag); padding: 4px 0 4px 16px; color: var(--g-ink-2); }
.xdg-tabella { width: 100%; border-collapse: collapse; font-size: .98rem; }
.xdg-tabella th, .xdg-tabella td { text-align: left; padding: 10px; border-bottom: 1px solid var(--g-line); vertical-align: top; }
.xdg-tabella th { font: 800 .8rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--g-ink-2); }
.xdg-quiz { border: 2px solid var(--g-ink); border-radius: 20px; padding: 8px 22px 18px; }
.xdg-quiz details { border-top: 1px solid var(--g-line); padding: 12px 0; }
.xdg-quiz details:first-of-type { border-top: 0; }
.xdg-quiz summary { cursor: pointer; font-weight: 700; }
.xdg-quiz details p { margin: 8px 0 0; color: var(--g-ink-2); }
.xdg-fonti { font-size: .95rem; }
.xdg-fonti li { overflow-wrap: anywhere; }

.xdg-cta { margin: 48px 0 18px; background: var(--g-mag); color: var(--g-paper); border-radius: 24px; padding: 28px; }
.xdg-cta p { margin: 0 0 14px; }
.xdg-cta__t { font: 850 1.5rem/1.15 var(--display); font-stretch: 112%; }
.xdg-cta .xd-btn { background: var(--g-paper); color: var(--g-ink); }
.xdg-avviso { font-size: .9rem; color: var(--g-ink-2); }
.xdg-avviso a { color: var(--g-mag); font-weight: 700; }
.xdg-altre { margin-top: 56px; }
.xdg-altre h2 { font: 820 1.6rem/1.2 var(--display); margin: 0 0 18px; }

.xdg-elenco .xdg-lead { margin-bottom: 40px; }
.xdg-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.xdg-scheda { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 22px; border: 1px solid var(--g-line); background: var(--g-paper); color: var(--g-ink); text-decoration: none; transition: transform .35s var(--ease), border-color .35s; }
.xdg-scheda:hover { transform: translateY(-3px); border-color: var(--g-ink); }
.xdg-scheda__k { font: 700 .78rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--g-mag); }
.xdg-scheda__t { font: 820 1.3rem/1.2 var(--display); font-stretch: 110%; }
.xdg-scheda__d { color: var(--g-ink-2); font-size: .97rem; }
.xdg-scheda__go { font-weight: 800; color: var(--g-mag); }
.xdg-vuoto { padding: 30px; border: 1.5px dashed var(--g-line); border-radius: 20px; text-align: center; color: var(--g-ink-2); }
@media (max-width: 640px) {
	.xdg-tabella { display: block; overflow-x: auto; font-size: .9rem; }
	.xdg-tabella th, .xdg-tabella td { padding: 8px 6px; min-width: 90px; }
}
/* Foto delle guide */
.xdg-foto { margin: 0 0 34px; }
.xdg-foto__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; }
.xdg-foto figcaption { font-size: .82rem; color: var(--g-ink-2); margin-top: 8px; }
.xdg-foto figcaption a { color: inherit; }
.xdg-scheda { padding: 0 0 22px; overflow: hidden; }
.xdg-scheda > :not(img) { margin: 0 24px; }
.xdg-scheda__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 8px; }
.xdg-scheda:not(:has(img)) { padding-top: 24px; }
/* Pagina crediti */
.xdg-crediti { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; margin: 30px 0; }
.xdg-credito { margin: 0; background: var(--g-paper); border: 1px solid var(--g-line); border-radius: 18px; overflow: hidden; scroll-margin-top: 100px; }
.xdg-credito:target { outline: 3px solid var(--g-mag); }
.xdg-credito img { display: block; width: 100%; height: 170px; object-fit: cover; }
.xdg-credito figcaption { display: grid; gap: 4px; padding: 12px 14px 14px; font-size: .92rem; }
.xdg-credito a { color: var(--g-mag); font-weight: 700; }
.xdg-credito__dove { color: var(--g-ink-2); font-size: .85rem; }
.xdg-crediti-pagina .xdg-lead a { color: var(--g-mag); font-weight: 700; }
/* Percorso, CTA corso, guide collegate */
.xdg-cta__k { font: 800 .78rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin: 0 0 6px !important; }
.xdg-cta__link { color: var(--g-paper); font-weight: 800; margin-left: 12px; }
.xdg-tutte { margin: 14px 0 0; } .xdg-tutte a { color: var(--g-mag); font-weight: 800; }
.xdg-percorso { background: var(--g-paper); border: 1px solid var(--g-line); border-radius: 22px; padding: 22px 26px; margin: 0 0 40px; }
.xdg-percorso h2, .xdg-tutte-h { font: 820 1.5rem/1.2 var(--display); font-stretch: 110%; margin: 0 0 8px; }
.xdg-percorso > p { color: var(--g-ink-2); margin: 0 0 14px; }
.xdg-percorso ol { margin: 0; padding-left: 1.5em; display: grid; gap: 8px; font-size: 1.02rem; }
.xdg-percorso li::marker { font-weight: 800; color: var(--g-mag); }
.xdg-percorso a { color: var(--g-ink); font-weight: 700; text-decoration-color: var(--g-line); }
.xdg-percorso a:hover { color: var(--g-mag); }
.xdg-percorso__fine a { color: var(--g-mag); }
.xdg-tutte-h { margin-bottom: 16px; }
/* Riquadro simulazione d'esame dopo il quiz (0.4.0) */
.xdg-sim { margin: 26px 0 34px; padding: 24px 26px; border-radius: 22px; background: var(--g-ink); color: var(--g-paper); }
.xdg-sim p { margin: 0 0 14px; }
.xdg-sim__t { font: 850 1.3rem/1.2 var(--display); font-stretch: 108%; }
.xdg-sim .xd-btn, .xdg-sim .xd-btn:hover { color: var(--g-paper); text-decoration: none; }