/**
 * Leggibilità mobile — Da zero a Perfex (index2)
 * Caricato solo con media (max-width: 768px): più spazio orizzontale utile,
 * tipografia e interlinea ottimizzate, padding dei riquadri alleggeriti.
 */

@media (max-width: 768px) {
    html {
        scroll-padding-top: 4.25rem;
    }

    body {
        font-size: 1.0625rem;
        line-height: 1.82;
        letter-spacing: 0.01em;
    }

    /* Più larghezza utile rispetto al clamp desktop */
    .container {
        padding-left: max(0.95rem, env(safe-area-inset-left));
        padding-right: max(0.95rem, env(safe-area-inset-right));
    }

    .section {
        padding-top: clamp(2.35rem, 9vw, 3.5rem);
        padding-bottom: clamp(2.35rem, 9vw, 3.5rem);
    }

    h2 {
        font-size: clamp(1.6rem, 6.5vw, 2.2rem);
        line-height: 1.2;
        margin-bottom: 1.1rem;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    h3 {
        font-size: clamp(1.15rem, 4.2vw, 1.45rem);
        line-height: 1.32;
        hyphens: auto;
    }

    h4 {
        font-size: 1.0625rem;
        line-height: 1.38;
    }

    p {
        margin-bottom: 1.1rem;
    }

    /* Hero */
    .hero {
        padding-top: 1rem;
        padding-bottom: 1.75rem;
    }

    .hero h1 {
        font-size: clamp(1.7rem, 6.2vw, 2.45rem);
        line-height: 1.16;
        letter-spacing: -0.02em;
        margin-bottom: 1rem;
    }

    .hero-visual {
        margin-top: 1.25rem;
    }

    /* Value intro: togli limite stretto della colonna su mobile */
    .value-intro .container {
        max-width: none;
    }

    .value-intro-modules,
    .value-intro-body {
        line-height: 1.78;
    }

    .value-intro-footnote {
        font-size: 0.9375rem;
        line-height: 1.72;
    }

    /* Problema / testi su dark */
    #problema .grid-2 p,
    #problema .problem-list li {
        line-height: 1.78;
    }

    /* Soluzione */
    #soluzione .soluzione-inner {
        max-width: none;
    }

    #soluzione .soluzione-lead {
        font-size: 1.125rem;
        line-height: 1.74;
        margin-bottom: 1.75rem;
    }

    #soluzione .solution-list .soluzione-item-desc {
        line-height: 1.68;
    }

    /* Narrow container: su mobile usa tutta la larghezza utile come le altre sezioni */
    #integrazioni .container.container-narrow {
        max-width: none;
    }

    /* Feature rows */
    .feature-row {
        gap: 2rem;
        margin-bottom: clamp(2.6rem, 7vw, 3.75rem);
    }

    .feature-text h3 {
        font-size: clamp(1.35rem, 4.2vw, 1.75rem);
        line-height: 1.22;
    }

    .feature-text p,
    .feature-text li {
        line-height: 1.78;
        font-size: 1.0625rem;
    }

    .feature-fe-spotlight-inner {
        padding: 1.3rem 0.95rem;
        border-radius: 14px;
    }

    #fatturazione-elettronica .fe-spotlight-head h3 {
        font-size: clamp(1.45rem, 5vw, 1.95rem);
    }

    #fatturazione-elettronica .fe-spotlight-copy p,
    #fatturazione-elettronica .fe-spotlight-copy li {
        line-height: 1.76;
    }

    /* Timeline */
    .timeline {
        margin-top: 2.5rem;
        max-width: none;
    }

    .timeline-step {
        margin-bottom: 1.65rem;
        padding-bottom: 1.65rem;
    }

    .step-num {
        margin-right: 1.15rem;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .timeline-step:not(:last-child)::after {
        left: 17px;
    }

    .step-content p {
        line-height: 1.78;
    }

    /* Target & case study */
    .target-card {
        padding: 1.35rem 1rem;
    }

    .case-study-box {
        padding: 1.35rem 1.1rem;
        margin-top: 1.25rem;
    }

    /* Pannello IA: “sblocca” la larghezza rispetto al padding del .container */
    #intelligenza-artificiale .intelligenza-panel.case-study-box {
        margin-left: calc(-1 * max(0.95rem, env(safe-area-inset-left)));
        margin-right: calc(-1 * max(0.95rem, env(safe-area-inset-right)));
        padding-left: max(1.1rem, env(safe-area-inset-left));
        padding-right: max(1.1rem, env(safe-area-inset-right));
        border-radius: 0;
    }

    .intelligenza-lead {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        line-height: 1.78;
    }

    #intelligenza-artificiale .ia-cap-desc {
        line-height: 1.74;
        font-size: 1.0625rem;
    }

    /* Galleria flip */
    .flip-face {
        padding: 1.15rem 0.95rem;
    }

    .flip-front h4 {
        font-size: 1.02rem;
    }

    .flip-front p,
    .flip-back p {
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    .gallery-grid {
        gap: 0.9rem;
    }

    /* FAQ */
    #faq .faq-lead {
        max-width: none;
        line-height: 1.78;
        margin-left: 0;
        margin-right: 0;
    }

    .faq-container {
        margin-top: 2rem;
    }

    #faq summary {
        padding: 1.05rem 1rem;
        font-size: 1rem;
        line-height: 1.42;
    }

    #faq details p {
        padding: 0 1rem 1.15rem;
        line-height: 1.78;
    }

    /* Audit + iframe */
    #audit .container > h2 + p,
    #audit .audit-form-lead {
        max-width: none;
        line-height: 1.74;
    }

    #audit .audit-form-wrap iframe {
        height: 780px;
        border-radius: 10px;
    }

    /* Footer: compatto, testo molto piccolo */
    footer {
        padding: 1.25rem 0 1.5rem;
        font-size: 0.6875rem;
        line-height: 1.5;
        letter-spacing: 0.03em;
    }

    .footer-logo {
        height: 22px !important;
        width: auto;
        margin: 0 auto 0.65rem;
        opacity: 0.88;
    }

    .footer-legal {
        padding-top: 0.75rem;
        margin: 0 auto;
        max-width: 100%;
    }

    .footer-copy {
        font-size: 0.6875rem !important;
        line-height: 1.5 !important;
        letter-spacing: 0.025em;
    }

    .footer-legal .footer-copy a {
        font-size: inherit;
    }

    /* Integrazioni: lista a colonna singola già a 768 nell’inline; garantiamo interlinea */
    #integrazioni p,
    #integrazioni .solution-list li {
        line-height: 1.78;
    }

    /* Modale demo */
    .demo-modal-panel {
        padding: 1.5rem 1.15rem 1.35rem;
        max-height: min(90vh, 640px);
        overflow-y: auto;
    }

    .demo-modal-panel h2 {
        font-size: 1.35rem;
    }
}