/* ==========================================================================
   responsive-fixes.css — Fix audit visivo 2026-04-25
   ==========================================================================
   Caricato in base.html dopo topbar-v2.css. Override + responsive helpers
   aggiunti dopo l'audit visuale full-page su iPhone 14, iPad Air e Desktop.
   ========================================================================== */


/* --- iOS form input zoom prevention --------------------------------------
   Safari iOS forza zoom al focus se l'input ha font-size < 16px.
   Su mobile, eleviamo TUTTI gli input/textarea/select a 16px.
   Sopra 768px (desktop/tablet largo) lasciamo invariato. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
}


/* --- Sidebar nav touch targets --------------------------------------------
   Apple HIG: minimo 44×44px per elementi touch.
   I link della sidebar erano 31-36px alti. */
.sidebar a,
.sidebar button {
    min-height: 44px;
    box-sizing: border-box;
}


/* --- /abbonati pricing grid -----------------------------------------------
   3 card affiancate su desktop, stack vertical su mobile.
   Prima causavano overflow orizzontale 105px su iPhone 390. */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}


/* --- /demo card grid ------------------------------------------------------
   9 card formula demo: 3 colonne desktop, 2 tablet, 1 mobile.
   Prima il container era stretto a ~50% viewport su mobile. */
.demo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}
@media (max-width: 900px) {
    .demo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 540px) {
    .demo-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* --- /form-list (consulta lista formule) row touch UX ---------------------
   .formula-row era ~36px alto su mobile. Min 56px lascia respiro per tap. */
.formula-row {
    min-height: 56px;
}


/* --- detail-grid: stack su tablet portrait --------------------------------
   .detail-grid è 1fr 280px su desktop, ma su iPad portrait (820px) lascia
   solo ~300px per la colonna principale (specie /ricerca con ricerca unificata
   che andava in overflow di 49px). Forziamo stack sotto 900px. */
@media (max-width: 900px) {
    .detail-grid {
        grid-template-columns: 1fr !important;
    }
}