/* ============================================================
   CHILE INSIDEOUT — Pillar Page Print CSS
   style-pillar-print.css

   Includere nel head della pagina pillar DOPO style-pillar.css:
   <link rel="stylesheet" href="css/style-pillar-print.css" media="print">

   Struttura brochure stampata:
   Pag. 1  — Copertina blu (hero)
   Pag. 2  — Trustbar + Perché il Cile + Come scegliere
   Pag. 3+ — Cosa vedere, Zona, Quando andare, Logistica
   Penult. — Itinerari consigliati
   Ultima  — Errori da evitare + FAQ + CTA finale
   ============================================================ */

/* ── Elemento solo stampa: nascosto a schermo ── */
.print-logo {
    display: none;
}

/* ============================================================
   @media print
   ============================================================ */
/* ── Elementi solo stampa — nascosti a schermo, visibili in print ── */
@media screen {
    .no-screen {
        display: none !important;
    }
}

/* ── .no-print — nascosto in stampa, visibile a schermo ── */
/* Pagina di chiusura senza margini */
@page closing-page {
    margin: 0;
}

@page hero-page {
    margin: 0;
}

@media print {
    /* Classe utility: aggiungila a qualsiasi elemento per escluderlo dalla stampa */
    .no-print,
    .back-link {
        display: none !important;
    }


    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    @page {
        size: A4;
        margin: 14mm 14mm 12mm;
    }

    @page :first {
        margin: 0;
    }

    html, body {
        font-size: 10pt;
        font-family: 'Montserrat', 'Arial Narrow', Arial, sans-serif;
        background: #fff !important;
        color: #06214a !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ══════════════════════════════════════════════════════
     NASCONDI SUPERFLUO
     ══════════════════════════════════════════════════════ */
    nav,
    .navbar,
    #nav-toggle,
    [class*="wa-"],
    [class*="lightbox"],
    .toc, /* indice laterale */
    .pillar-hero__actions, /* bottoni CTA hero */
    .cta-band, /* bande CTA intermedie */
    .btn-link, /* link "approfondisci" */
    a.btn,
    button,
    footer,
    .site-footer,
    /* "Vuoi saperne ancora" — cta-band dentro #faq */
    #faq .cta-band,
    /* CTA su misura intera section */
    #su-misura,
    /* Cluster link "Approfondisci" — pillar-links.php */
    /* Selettori multipli per coprire qualunque wrapper usato nel PHP include */
    .pillar-links,
    .cluster-links,
    .related-links,
    section:has(> .container > h2[id]),
    /* Ultima section dopo #faq — è sempre pillar-links */
    #faq ~ section {
        display: none !important;
    }


    /* ══════════════════════════════════════════════════════
     LAYOUT GLOBALE
     ══════════════════════════════════════════════════════ */
    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    section {
        padding: 12pt 0 !important;
        margin: 0 !important;
        background: #fff !important;
        border: none !important;
    }

    /* Alterna sfondo sezione — in print tutto bianco */
    .pillar-section--alt {
        background: #fff !important;
    }

    img {
        max-width: 100% !important;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;
    }


    /* ══════════════════════════════════════════════════════
     1. COPERTINA — .pillar-hero
     ══════════════════════════════════════════════════════ */

    /* Copertina gestita via JS (print-cover) — pillar-hero nascosto in stampa */
    .pillar-hero {
        display: none !important;
    }

    /* Cover iniettata dal JS — occupa solo la prima pagina */
    .js-print-cover {
        display: flex !important;
        /* position: static + dimensioni pagina intera — NON fixed */
        position: relative !important;
        width: calc(100% + 28mm) !important;
        height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 -14mm !important;
        page: hero-page !important;
        background: #06214a !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 40pt 14mm !important;
        box-sizing: border-box !important;
        page-break-after: always !important;
        break-after: page !important;
        overflow: hidden !important;
    }

    .js-print-cover__img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: .35 !important;
        z-index: 0 !important;
    }

    .js-print-cover__content {
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .js-print-cover .print-logo {
        display: block !important;
        width: 160pt !important;
        height: auto !important;
        max-height: 52pt !important;
        object-fit: contain !important;
        mix-blend-mode: screen !important;
        margin: 0 auto 28pt !important;
    }

    .js-print-cover__eyebrow {
        display: inline-block !important;
        font-size: 7.5pt !important;
        font-weight: 700 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
        color: #f38f28 !important;
        border: 1pt solid #f38f28 !important;
        border-radius: 20pt !important;
        padding: 3pt 14pt !important;
        margin-bottom: 14pt !important;
        font-family: 'Montserrat', Arial, sans-serif !important;
    }

    .js-print-cover__title {
        font-size: 24pt !important;
        font-weight: 800 !important;
        color: #fff !important;
        line-height: 1.2 !important;
        margin: 0 auto 14pt !important;
        max-width: 420pt !important;
        font-family: 'Montserrat', Arial, sans-serif !important;
    }

    .js-print-cover__lead {
        font-size: 10pt !important;
        color: rgba(255,255,255,.75) !important;
        line-height: 1.65 !important;
        max-width: 380pt !important;
        margin: 0 auto !important;
        font-family: 'Roboto', Arial, sans-serif !important;
    }

    .pillar-hero .container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 40pt 50pt !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .pillar-hero__grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Logo — forzato in cima con order */
    .print-logo {
        display: block !important;
        order: -1 !important;
        width: 160pt !important;
        height: auto !important;
        max-height: 52pt !important;
        object-fit: contain !important;
        mix-blend-mode: screen !important;
        margin: 0 auto 30pt !important;
    }

    /* Immagine hero — in fondo alla copertina */
    .pillar-hero__print-img {
        order: 10 !important;
    }

    .pillar-hero__eyebrow {
        display: inline-block !important;
        font-size: 7.5pt !important;
        font-weight: 700 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
        color: #f38f28 !important;
        border: 1pt solid #f38f28 !important;
        border-radius: 20pt !important;
        padding: 3pt 14pt !important;
        margin-bottom: 14pt !important;
    }

    .pillar-hero h1 {
        font-size: 24pt !important;
        font-weight: 800 !important;
        color: #fff !important;
        line-height: 1.2 !important;
        margin: 0 0 14pt !important;
        max-width: 420pt !important;
    }

    .pillar-hero__lead {
        font-size: 10pt !important;
        color: rgba(255,255,255,.75) !important;
        line-height: 1.65 !important;
        max-width: 380pt !important;
        margin: 0 auto !important;
    }

        .pillar-hero__lead strong {
            color: #fff !important;
        }

    /* Foto hero copertina — posizionata come sfondo assoluto con overlay blu */
    .pillar-hero__print-img {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
        margin: 0 !important;
        opacity: .35 !important;
        z-index: 0 !important;
    }

    /* Tutto il contenuto testuale sopra l'immagine */
    .pillar-hero .container,
    .pillar-hero__grid,
    .pillar-hero__grid > div {
        position: relative !important;
        z-index: 1 !important;
    }


    /* ══════════════════════════════════════════════════════
     2. TRUSTBAR
     ══════════════════════════════════════════════════════ */

    .trustbar {
        padding: 10pt 0 !important;
        border-bottom: 1pt solid #e8ecf2 !important;
        margin-bottom: 6pt !important;
    }

    .trust-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8pt !important;
    }

    .trust-item {
        font-size: 7.5pt !important;
        font-weight: 700 !important;
        color: #06214a !important;
        padding: 4pt 0 !important;
    }

        .trust-item span {
            display: block !important;
            font-weight: 400 !important;
            color: #6b7890 !important;
            font-size: 7pt !important;
            margin-top: 2pt !important;
        }


    /* ══════════════════════════════════════════════════════
     3. SEZIONI TESTO + IMMAGINE (.two-col)
     ══════════════════════════════════════════════════════ */

    /* Layout verticale: immagine 100% sopra, testo sotto */
    .two-col,
    .two-col.reverse {
        display: block !important;
    }

        .two-col .section-image,
        .two-col.reverse .section-image {
            order: 0 !important;
            margin-bottom: 10pt !important;
        }

    .section-image img {
        width: 100% !important;
        height: 180pt !important;
        object-fit: cover !important;
        border-radius: 6pt !important;
        display: block !important;
    }

    .copy-card {
        padding: 0 !important;
    }

    .section-label {
        display: inline-block !important;
        font-size: 7pt !important;
        font-weight: 700 !important;
        letter-spacing: .1em !important;
        text-transform: uppercase !important;
        color: #f38f28 !important;
        margin-bottom: 4pt !important;
    }

    .copy-card h2 {
        font-size: 13pt !important;
        font-weight: 800 !important;
        color: #06214a !important;
        margin: 0 0 6pt !important;
        line-height: 1.25 !important;
    }

    .copy-card p {
        font-size: 8.5pt !important;
        color: #354460 !important;
        line-height: 1.6 !important;
        margin-bottom: 5pt !important;
    }

        .copy-card p strong {
            color: #06214a !important;
        }

    .warning {
        background: #fff8e1 !important;
        border-left: 3pt solid #f38f28 !important;
        padding: 6pt 10pt !important;
        border-radius: 3pt !important;
        font-size: 8pt !important;
        color: #354460 !important;
        margin-top: 6pt !important;
    }


    /* ══════════════════════════════════════════════════════
     4. SECTION HEADERS
     ══════════════════════════════════════════════════════ */

    .section-header {
        margin-bottom: 12pt !important;
    }

        .section-header h2 {
            font-size: 14pt !important;
            font-weight: 800 !important;
            color: #06214a !important;
            margin: 2pt 0 4pt !important;
        }

        .section-header .lead,
        .lead {
            font-size: 8.5pt !important;
            color: #6b7890 !important;
            line-height: 1.55 !important;
            max-width: 100% !important;
            margin: 0 !important;
        }

        .section-header.center {
            text-align: left !important;
        }


    /* ══════════════════════════════════════════════════════
     5. GRIGLIE CARD (.grid-3)
     Destinazioni, Come scegliere, Stile di viaggio
     ══════════════════════════════════════════════════════ */

    .grid-3 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10pt !important;
    }

    .card,
    .destination-card,
    .profile-card {
        border: 1pt solid #e8ecf2 !important;
        border-radius: 6pt !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: none !important;
        break-inside: avoid !important;
    }

        .card img,
        .destination-card img,
        .profile-card img {
            width: 100% !important;
            height: 65pt !important;
            object-fit: cover !important;
            display: block !important;
        }

        .card .card-body,
        .destination-card .card-body,
        .profile-card .card-body {
            padding: 6pt 8pt !important;
        }

            .card .card-body h3,
            .destination-card .card-body h3,
            .profile-card .card-body h3 {
                font-size: 9pt !important;
                font-weight: 700 !important;
                color: #06214a !important;
                margin: 0 0 3pt !important;
                line-height: 1.2 !important;
            }

            .card .card-body p,
            .destination-card .card-body p,
            .profile-card .card-body p {
                font-size: 7.5pt !important;
                color: #354460 !important;
                line-height: 1.45 !important;
                margin: 0 !important;
            }

                .card .card-body p strong,
                .destination-card .card-body p strong {
                    color: #06214a !important;
                }

    /* Tag badge nelle card itinerari */
    .meta-list {
        display: none !important;
    }

    .tag {
        display: inline-block !important;
        font-size: 6.5pt !important;
        font-weight: 600 !important;
        color: #6b7890 !important;
        background: #f4f6fb !important;
        border-radius: 3pt !important;
        padding: 1pt 5pt !important;
        margin-right: 3pt !important;
        margin-top: 3pt !important;
    }


    /* ══════════════════════════════════════════════════════
     6. TABELLA ZONE (.area-table)
     ══════════════════════════════════════════════════════ */

    .area-table {
        border: 1pt solid #e8ecf2 !important;
        border-radius: 6pt !important;
        overflow: hidden !important;
    }

    .area-row {
        display: grid !important;
        grid-template-columns: 60pt 1fr 60pt 70pt 60pt !important;
        gap: 8pt !important;
        align-items: center !important;
        padding: 6pt 8pt !important;
        border-bottom: 1pt solid #e8ecf2 !important;
    }

        .area-row:last-child {
            border-bottom: none !important;
        }

        .area-row.header {
            background: #06214a !important;
            font-size: 7pt !important;
            font-weight: 700 !important;
            color: #fff !important;
            text-transform: uppercase !important;
            letter-spacing: .06em !important;
        }

        .area-row img {
            width: 100% !important;
            height: 38pt !important;
            object-fit: cover !important;
            border-radius: 3pt !important;
            display: block !important;
        }

        .area-row div {
            font-size: 8pt !important;
            color: #354460 !important;
            line-height: 1.4 !important;
        }

            .area-row div strong {
                color: #06214a !important;
                font-size: 8.5pt !important;
            }


    /* ══════════════════════════════════════════════════════
     7. MESI (.month-grid)
     ══════════════════════════════════════════════════════ */

    .month-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8pt !important;
        margin-top: 12pt !important;
    }

    .month-card {
        padding: 8pt !important;
        border: 1pt solid #e8ecf2 !important;
        border-radius: 5pt !important;
        border-top: 3pt solid #f38f28 !important;
        background: #fff !important;
        break-inside: avoid !important;
    }

        .month-card strong {
            display: block !important;
            font-size: 8pt !important;
            font-weight: 700 !important;
            color: #06214a !important;
            margin-bottom: 3pt !important;
        }

        .month-card span {
            font-size: 7.5pt !important;
            color: #6b7890 !important;
            line-height: 1.45 !important;
        }


    /* ══════════════════════════════════════════════════════
     8. ERRORI DA EVITARE (.errors-feature-grid)
     ══════════════════════════════════════════════════════ */

    .errors-feature-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10pt !important;
    }

    .feature-box-item {
        padding: 10pt !important;
        border: 1pt solid #e8ecf2 !important;
        border-radius: 6pt !important;
        background: #fff !important;
        break-inside: avoid !important;
    }

        .feature-box-item svg {
            width: 24pt !important;
            height: 24pt !important;
            margin-bottom: 5pt !important;
            color: #f38f28 !important;
            stroke: #f38f28 !important;
        }

        .feature-box-item h3 {
            font-size: 9.5pt !important;
            font-weight: 700 !important;
            color: #06214a !important;
            margin: 0 0 4pt !important;
        }

        .feature-box-item p {
            font-size: 8pt !important;
            color: #354460 !important;
            line-height: 1.5 !important;
            margin: 0 !important;
        }

            .feature-box-item p strong {
                color: #06214a !important;
            }


    /* ══════════════════════════════════════════════════════
     9. FAQ
     ══════════════════════════════════════════════════════ */

    .faq-list {
        margin-top: 8pt !important;
    }

    .faq-item {
        padding: 8pt 0 !important;
        border-bottom: 1pt solid #e8ecf2 !important;
        break-inside: avoid !important;
    }

        .faq-item:last-child {
            border-bottom: none !important;
        }

        .faq-item summary,
        .faq-item > strong,
        .faq-q {
            font-size: 9.5pt !important;
            font-weight: 700 !important;
            color: #06214a !important;
            display: block !important;
            margin-bottom: 3pt !important;
            list-style: none !important;
        }

    /* FAQ — forza apertura details in stampa */
    /* Chrome non rispetta l'attributo open in print — usiamo overflow e height */
    details {
        display: block !important;
        overflow: visible !important;
    }

        /* Trucco: rimuovi il comportamento di collasso nativo */
        details > * {
            display: block !important;
            visibility: visible !important;
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
            opacity: 1 !important;
        }

        /* Stile domanda FAQ */
        details > summary {
            font-size: 9.5pt !important;
            font-weight: 700 !important;
            color: #06214a !important;
            margin-bottom: 4pt !important;
            list-style: none !important;
            padding: 8pt 0 3pt !important;
            border-top: 1pt solid #e8ecf2 !important;
            cursor: default !important;
        }

            details > summary::marker,
            details > summary::-webkit-details-marker {
                display: none !important;
            }

        /* Stile risposta FAQ */
        details > p {
            font-size: 8.5pt !important;
            color: #354460 !important;
            line-height: 1.6 !important;
            margin: 0 0 8pt 0 !important;
            padding-bottom: 6pt !important;
            border-bottom: 0.5pt solid #f0f0f0 !important;
        }

    .faq-item p,
    .faq-a {
        font-size: 8.5pt !important;
        color: #354460 !important;
        line-height: 1.55 !important;
        margin: 0 !important;
    }


    /* ══════════════════════════════════════════════════════
     ITINERARY BOXES (.itinerary-grid / .itinerary-box)
     ══════════════════════════════════════════════════════ */

    .itinerary-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10pt !important;
    }

    .itinerary-box {
        padding: 10pt 12pt !important;
        border: 1pt solid #e8ecf2 !important;
        border-radius: 6pt !important;
        background: #fff !important;
        box-shadow: none !important;
        break-inside: avoid !important;
    }

    .itinerary-box__days {
        font-size: 22pt !important;
        font-weight: 800 !important;
        color: #f38f28 !important;
        line-height: 1 !important;
        margin-bottom: 1pt !important;
    }

    .itinerary-box__label {
        font-size: 7.5pt !important;
        color: #6b7890 !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
        margin-bottom: 5pt !important;
    }

    .itinerary-box h3 {
        font-size: 10pt !important;
        font-weight: 700 !important;
        color: #06214a !important;
        margin: 0 0 4pt !important;
    }

    .itinerary-box p {
        font-size: 8pt !important;
        color: #354460 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    .itinerary-box a.btn {
        display: none !important;
    }

    /* ══════════════════════════════════════════════════════
     DESTINAZIONI (.dest-grid / .dest-card)
     Layout: immagine sopra 100%, testo sotto
     ══════════════════════════════════════════════════════ */

    .dest-grid {
        display: block !important;
    }

    .dest-card {
        display: grid !important;
        grid-template-columns: 130pt 1fr !important;
        gap: 12pt !important;
        align-items: start !important;
        padding: 10pt 0 !important;
        border: none !important;
        border-bottom: 1pt solid #e8ecf2 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

        .dest-card > img {
            width: 100% !important;
            height: 85pt !important;
            object-fit: cover !important;
            border-radius: 5pt !important;
            display: block !important;
        }

    .dest-card__body {
        padding: 0 !important;
    }

        .dest-card__body h3 {
            font-size: 9.5pt !important;
            font-weight: 700 !important;
            color: #06214a !important;
            margin: 0 0 4pt !important;
            line-height: 1.2 !important;
        }

        .dest-card__body p {
            font-size: 8pt !important;
            color: #354460 !important;
            line-height: 1.5 !important;
            margin: 0 !important;
        }

            .dest-card__body p strong {
                color: #06214a !important;
            }

        .dest-card__body .btn-link {
            display: none !important;
        }

    /* ══════════════════════════════════════════════════════
     10. INTERRUZIONI PAGINA
     ══════════════════════════════════════════════════════ */

    /* Lascia scorrere tutto naturalmente — nessun break forzato intermedio */
    .pillar-section {
        page-break-before: auto !important;
        break-before: auto !important;
    }

    .two-col {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Evita interruzioni dentro card e blocchi */
    .card, .destination-card, .profile-card,
    .feature-box-item, .month-card,
    .area-row, .faq-item {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* ══════════════════════════════════════════════════════
     PAGINA DI CHIUSURA — .print-closing-page
     Elemento PHP dedicato, 100% controllabile in stampa
     ══════════════════════════════════════════════════════ */

    /* Pagina di chiusura — named page con margini zero + 100vh */
    .print-closing-page,
    .no-screen.print-closing-page,
    div.print-closing-page {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: calc(100% + 28mm) !important;
        /* Named page: margini azzerati → 100vh = pagina intera */
        page: closing-page !important;
        min-height: 100vh !important;
        background: #06214a !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 40pt !important;
        /* Margini negativi per compensare i 14mm su entrambi i lati */
        margin: 0 -14mm !important;
        box-sizing: border-box !important;
        page-break-before: always !important;
        break-before: page !important;
    }

        /* Nascondi footer reale e wa-widget */
        .print-closing-page ~ * {
            display: none !important;
        }

    .site-footer,
    .wa-widget {
        display: none !important;
    }

    .print-closing-page .print-logo {
        display: block !important;
        width: 160pt !important;
        height: auto !important;
        max-height: 55pt !important;
        object-fit: contain !important;
        mix-blend-mode: screen !important;
        margin: 0 auto 28pt !important;
    }

    .print-closing-page__tagline {
        font-size: 10pt !important;
        color: rgba(255,255,255,.65) !important;
        line-height: 1.7 !important;
        max-width: 280pt !important;
        margin: 0 auto 28pt !important;
    }

    .print-closing-page__contact {
        border-top: 1pt solid rgba(255,255,255,.2) !important;
        padding-top: 18pt !important;
        max-width: 320pt !important;
        width: 100% !important;
    }

        .print-closing-page__contact p {
            font-size: 9pt !important;
            color: rgba(255,255,255,.65) !important;
            line-height: 1.9 !important;
            margin: 0 !important;
        }

            .print-closing-page__contact p:first-child {
                font-family: 'Montserrat', Arial, sans-serif !important;
                font-weight: 700 !important;
                font-size: 10pt !important;
                color: #fff !important;
                margin-bottom: 6pt !important;
                text-transform: uppercase !important;
                letter-spacing: .08em !important;
            }
}
/* ── FINE @media print ── */