/* ============================================================================
   guida.css  --  guida rapida per le associazioni (guida-associazioni.php)
   Schermo: passi con testo e immagine affiancati (uno sotto l'altro sul
   telefono). Stampa / PDF: niente menu, footer e banner, intestazione con
   logo e QR della versione online, testo compatto (circa 4 pagine).
   ============================================================================ */

/* ---------------------------------------------------------------- schermo */
.guida-pagina { max-width: 1040px; margin: 0 auto; }
.guida-testa-stampa { display: none; }

.guida-intro { margin-bottom: 2.5rem; }
.guida-lead { font-size: 1.2rem; line-height: 1.7; color: var(--asi-dark); font-weight: 500; }
.guida-serve { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; background: var(--asi-gray); border-left: 4px solid var(--asi-blue); padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: .95rem; }
.guida-serve .label-caps { margin: 0; color: var(--asi-blue); }
.guida-serve i { color: var(--asi-blue); margin-right: .3rem; }
.guida-azioni { display: flex; flex-wrap: wrap; gap: .6rem; }

.guida-passo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; align-items: start; padding: 2.2rem 0; border-top: 1px solid var(--asi-border); scroll-margin-top: 90px; }
.guida-passo-segue { border-top: 0; padding-top: 0; }
.guida-passo-largo, .guida-passo-solo-testo { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.guida-passo h2 { display: flex; align-items: center; gap: .7rem; font-size: 1.6rem; margin: 0 0 1rem; }
.guida-passo h2 span { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; background: var(--asi-blue); color: #fff; font-size: 1.1rem; }
.guida-passo h3 { font-size: 1.15rem; margin: 0 0 .8rem; }
.guida-passo-testo { font-size: 1rem; line-height: 1.6; color: #27272a; }
.guida-piccolo { font-size: .9rem; color: #52525b; margin-top: .8rem; }

.guida-numeri { list-style: none; counter-reset: num; padding: 0; margin: 0; }
.guida-numeri li { counter-increment: num; position: relative; padding-left: 2.3rem; margin-bottom: .55rem; min-height: 1.6rem; }
.guida-numeri li::before { content: counter(num); position: absolute; left: 0; top: .05rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #dc2626; color: #fff; font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }

.guida-fig { margin: 0; }
.guida-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--asi-border); box-shadow: 0 8px 24px rgba(24, 24, 27, .08); cursor: zoom-in; }
.guida-fig-stretta img { max-width: 380px; }

.guida-aiuto { margin-top: 1rem; padding: 1.6rem 1.8rem; border: 1px solid var(--asi-border); border-top: 4px solid var(--asi-blue); scroll-margin-top: 90px; }
.guida-aiuto h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.guida-aiuto h2 i { color: var(--asi-blue); }
.guida-aiuto dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .5rem 1.5rem; margin: 0; }
.guida-aiuto dt { font-weight: 800; color: var(--asi-dark); }
.guida-aiuto dd { margin: 0; }
.guida-contatti { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--asi-border); font-size: .92rem; }

.guida-presto { margin-top: 1.8rem; padding: 1rem 1.2rem; background: #eff6ff; border: 1px dashed var(--asi-blue); font-size: .95rem; }
.guida-presto-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--asi-blue); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; margin-right: .5rem; }
.guida-agg { margin-top: 1rem; font-size: .82rem; color: #71717a; }

@media (max-width: 767.98px) {
    .guida-passo { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
    .guida-aiuto dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .guida-aiuto dd { margin-bottom: .7rem; }
    .guida-fig-stretta img { max-width: 100%; }
}

/* ---------------------------------------------------------------- stampa */
@media print {
    @page { size: A4; margin: 14mm 14mm 16mm; }
    @page { @bottom-center { content: "ASI Pistoia \00B7 Guida rapida per le associazioni \00B7 " counter(page); font-family: Arial, sans-serif; font-size: 8pt; color: #71717a; } }

    html, body { background: #fff !important; overflow: visible !important; }
    body.guida { font-size: 10pt; color: #000; }
    body.guida > nav, .navbar, .champ-hero, footer, .sponsor-band, .fab-container, #cc--main, #cc_div, .modal, .lightbox, .guida-azioni { display: none !important; }
    .container { max-width: none !important; padding: 0 !important; }
    .content-section { padding: 0 !important; }
    .guida-pagina { max-width: none; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .guida-testa-stampa { display: flex; align-items: center; gap: 6mm; padding-bottom: 4mm; margin-bottom: 4mm; border-bottom: 2px solid #1D4ED8; }
    .guida-testa-stampa > img { width: 42mm; height: auto; }
    .guida-testa-stampa h1 { font-size: 17pt; margin: 0 0 1mm; }
    .guida-testa-stampa p { margin: 0; font-size: 9.5pt; color: #3f3f46; }
    .guida-testa-qr { margin-left: auto; text-align: center; font-size: 7pt; color: #52525b; }
    .guida-testa-qr img, .guida-testa-qr canvas { width: 20mm !important; height: 20mm !important; display: block; margin: 0 auto 1mm; }

    .guida-intro { margin-bottom: 2mm; }
    .guida-lead { font-size: 11pt; margin-bottom: 2mm; }
    .guida-serve { margin: 2mm 0; padding: 2.5mm 4mm; font-size: 9.5pt; }

    /* in stampa testo e immagine sempre affiancati (la pagina A4 vale come "stretta") */
    .guida-passo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; gap: 6mm; padding: 4mm 0; break-inside: avoid; page-break-inside: avoid; }
    .guida-passo-largo, .guida-passo-solo-testo { grid-template-columns: minmax(0, 1fr) !important; gap: 3mm; }
    .guida-aiuto dl { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important; }
    .guida-aiuto dd { margin-bottom: 0 !important; }
    .guida-passo-segue { padding-top: 0; }
    .guida-passo h2 { font-size: 14pt; margin-bottom: 2.5mm; }
    .guida-passo h2 span { width: 8mm; height: 8mm; font-size: 11pt; }
    .guida-passo h3 { font-size: 11.5pt; margin-bottom: 2mm; }
    .guida-passo-testo { font-size: 9.8pt; line-height: 1.45; }
    .guida-passo-testo p { margin-bottom: 2mm; }
    .guida-numeri li { margin-bottom: 1.5mm; padding-left: 7mm; }
    .guida-numeri li::before { width: 5mm; height: 5mm; font-size: 7.5pt; }
    .guida-piccolo { font-size: 8.8pt; margin-top: 2mm; }
    .guida-fig img { box-shadow: none; max-height: 95mm; width: auto; max-width: 100%; }
    .guida-fig-stretta img { max-height: 70mm; }

    .guida-aiuto { break-inside: avoid; page-break-inside: avoid; padding: 4mm 5mm; margin-top: 2mm; }
    .guida-aiuto h2 { font-size: 13pt; margin-bottom: 2.5mm; }
    .guida-aiuto dl { font-size: 9.5pt; gap: 1.5mm 6mm; }
    .guida-contatti { font-size: 9pt; margin-top: 3mm; padding-top: 2.5mm; }
    .guida-presto { break-inside: avoid; page-break-inside: avoid; font-size: 9.5pt; margin-top: 4mm; padding: 3mm 4mm; }
    .guida-agg { font-size: 8pt; }
    .guida-passo-testo a, .guida-aiuto a { color: #000; text-decoration: none; }
}