/* 📱 MOBILE RESPONSIVE - ULTRA COMPATTO E ACCESSIBILE */

/* ========================================
   MOBILE FIRST - Ottimizzazione Smartphone
   ======================================== */

@media (max-width: 768px) {
    
    /* 📏 SPACING GENERALE - Ridotto drasticamente */
    section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* 🎯 HEADER - Compatto e fisso */
    header {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    header img {
        height: 1.75rem !important; /* Logo più piccolo */
    }
    
    header h1 {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.1 !important;
    }
    
    header p {
        font-size: 0.75rem !important; /* 12px */
    }
    
    /* 🎨 HERO SECTION - Compatto */
    #home {
        padding-top: 4.5rem !important; /* Spazio per header fisso + margine */
        padding-bottom: 1.5rem !important;
        min-height: auto !important;
    }
    
    #home h2 {
        font-size: 1.75rem !important; /* 28px */
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }
    
    #home p {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    
    #home .flex {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    #home button,
    #home a {
        width: 100% !important;
        padding: 0.625rem 1rem !important; /* 10px 16px */
        font-size: 0.875rem !important;
    }
    
    /* 📝 TITOLI SEZIONI - Ridotti */
    section h2 {
        font-size: 1.5rem !important; /* 24px */
        margin-bottom: 0.75rem !important;
        line-height: 1.2 !important;
    }
    
    section h3 {
        font-size: 1.125rem !important; /* 18px */
        margin-bottom: 0.5rem !important;
    }
    
    section h4 {
        font-size: 1rem !important; /* 16px */
        margin-bottom: 0.5rem !important;
    }
    
    /* 📄 TESTI - Leggibili ma compatti */
    section p,
    section li {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 🎴 CARDS/PACCHETTI - Compatti */
    .bg-white.rounded-2xl,
    .bg-white.rounded-xl {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .grid {
        gap: 0.75rem !important;
        grid-template-columns: 1fr !important; /* Sempre 1 colonna */
    }
    
    /* ⭐ RECENSIONI - Scroll orizzontale compatto */
    #recensioni .overflow-x-auto {
        padding-bottom: 0.5rem !important;
    }
    
    #recensioni .flex-shrink-0 {
        width: 280px !important; /* Larghezza card recensione */
        padding: 0.875rem !important;
    }
    
    #recensioni h4 {
        font-size: 0.875rem !important;
    }
    
    #recensioni p {
        font-size: 0.8125rem !important; /* 13px */
        line-height: 1.4 !important;
    }
    
    /* ❓ FAQ - Ultra compatto */
    #faq details {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.375rem !important;
    }
    
    #faq summary {
        font-size: 0.875rem !important;
        padding: 0.375rem 0 !important;
        line-height: 1.3 !important;
    }
    
    #faq details p {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
        padding-top: 0.375rem !important;
    }
    
    /* 🖼️ GALLERY - Griglia compatta */
    #gallery .grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonne */
        gap: 0.5rem !important;
    }
    
    #gallery img {
        border-radius: 0.5rem !important;
    }
    
    /* 📧 FORM CONTATTI - Compatto */
    #contact-form input,
    #contact-form textarea,
    #contact-form select {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    #contact-form label {
        font-size: 0.8125rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    #contact-form .space-y-5 > * + * {
        margin-top: 0.625rem !important;
    }
    
    #contact-form button[type="submit"] {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem !important;
        width: 100% !important;
    }
    
/* ✅ CHECKBOX PRIVACY - Allineamento Perfetto */
#contact-form .flex.items-start {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

#contact-form input[type="checkbox"] {
    flex-shrink: 0 !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin-top: 0.125rem !important;
}

#contact-form .flex.items-start label {
    flex: 1 !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* 🔗 LOGO MOBILE - Nessuna sottolineatura */
header a,
header a:hover,
header a:active,
header a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
    
    /* 🦶 FOOTER - Compatto */
    footer {
        padding-top: 1.5rem !important;
        padding-bottom: 1rem !important;
    }
    
    footer h4 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    footer p,
    footer a,
    footer li {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
    }
    
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* 🔘 BOTTONI - Touch friendly */
    button,
    a.button,
    .btn {
        min-height: 44px !important; /* Accessibilità touch */
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* 🎯 ICONE - Dimensioni ottimali */
    .fa,
    .fas,
    .far {
        font-size: 1rem !important;
    }
    
    /* 📊 STATISTICHE/NUMERI */
    .text-4xl,
    .text-5xl {
        font-size: 2rem !important; /* 32px */
    }
    
    .text-3xl {
        font-size: 1.5rem !important; /* 24px */
    }
    
    .text-2xl {
        font-size: 1.25rem !important; /* 20px */
    }
    
    .text-xl {
        font-size: 1.125rem !important; /* 18px */
    }
    
    /* 🎨 MARGINI GLOBALI - Ridotti */
    .mb-4 { margin-bottom: 0.5rem !important; }
    .mb-6 { margin-bottom: 0.75rem !important; }
    .mb-8 { margin-bottom: 1rem !important; }
    .mb-10,
    .mb-12 { margin-bottom: 1rem !important; }
    
    .mt-4 { margin-top: 0.5rem !important; }
    .mt-6 { margin-top: 0.75rem !important; }
    .mt-8 { margin-top: 1rem !important; }
    .mt-10,
    .mt-12 { margin-top: 1rem !important; }
    
    .py-6 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-10,
    .py-12 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    
    /* 📏 SPACING TRA ELEMENTI */
    .space-y-8 > * + * { margin-top: 1rem !important; }
    .space-y-6 > * + * { margin-top: 0.75rem !important; }
    .space-y-4 > * + * { margin-top: 0.5rem !important; }
    .space-y-3 > * + * { margin-top: 0.375rem !important; }
    
    .gap-6 { gap: 0.75rem !important; }
    .gap-4 { gap: 0.5rem !important; }
    .gap-3 { gap: 0.375rem !important; }
    
    /* 🎯 ACCESSIBILITÀ - Contrasto e leggibilità */
    a {
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
    }
    
    button:focus,
    a:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid #ec4899 !important;
        outline-offset: 2px !important;
    }
    
    /* 📱 MENU MOBILE - Compatto */
    #mobile-menu {
        padding: 0.5rem !important;
    }
    
    #mobile-menu a {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* 🎨 LINEE DECORATIVE */
    .w-24.h-1,
    .w-20.h-1 {
        width: 2rem !important;
        height: 2px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 🖼️ IMMAGINI - Responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 📹 VIDEO/IFRAME - Responsive */
    iframe,
    video {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 🎯 CHI SIAMO - Compatto */
    #chi-siamo .space-y-6 > * + * {
        margin-top: 0.75rem !important;
    }
    
    #chi-siamo img {
        margin-bottom: 0.75rem !important;
    }
    
    /* 📞 WHATSAPP BUTTON - Più grande e accessibile */
    .whatsapp-float {
        width: 56px !important;
        height: 56px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 28px !important;
    }
    
    /* 🎵 PACCHETTI SERVIZI - Layout verticale */
    #pacchetti .grid {
        grid-template-columns: 1fr !important;
    }
    
    #pacchetti .bg-gradient-to-br {
        padding: 1rem !important;
    }
    
    #pacchetti ul li {
        font-size: 0.8125rem !important;
        padding: 0.25rem 0 !important;
    }
    
    /* 🎯 PREZZI - Leggibili */
    .text-5xl.font-bold {
        font-size: 2.25rem !important; /* 36px */
    }
}

/* ========================================
   EXTRA SMALL DEVICES (< 375px)
   ======================================== */

@media (max-width: 375px) {
    #home h2 {
        font-size: 1.5rem !important; /* 24px */
    }
    
    section h2 {
        font-size: 1.375rem !important; /* 22px */
    }
    
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    #recensioni .flex-shrink-0 {
        width: 260px !important;
    }
}

/* ========================================
   EXTRA SMALL DEVICES (< 375px)
   ======================================== */

@media (max-width: 375px) {
    #home h2 {
        font-size: 1.5rem !important; /* 24px */
    }
    
    section h2 {
        font-size: 1.375rem !important; /* 22px */
    }
    
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    #recensioni .flex-shrink-0 {
        width: 260px !important;
    }
}