/* Mobile Optimizations CSS */
/* Questo file contiene ottimizzazioni specifiche per dispositivi mobili */

/* Ottimizzazioni generali mobile */
@media (max-width: 768px) {
    /* Hero Section Mobile Optimization */
    .hero {
        min-height: auto !important;
        height: auto !important;
        /* Maggior spazio in alto per distanziare la hero dalla navbar su mobile */
        padding: calc(80px + 1rem) 0 2rem 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden;
    }
    
    .hero-container {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
        padding: 2rem 0 !important;
        min-height: auto !important;
        grid-template-columns: none !important;
    }
    
    .hero-text {
        order: 1 !important;
        text-align: center !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        padding-bottom: 1.5rem !important;
        /* Spazio aggiuntivo in alto per distanziare il contenuto dalla navbar */
        padding-top: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important;
    }
    
    /* Aggiunge elementi decorativi mobili per maggiore dinamismo */
    .hero-text::before {
        content: '';
        position: absolute;
        /* Sposta la piccola lampadina leggermente verso il basso per aumentare la distanza dalla navbar */
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 4px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(251, 191, 36, 0.6) 20%, 
            rgba(251, 191, 36, 1) 50%, 
            rgba(251, 191, 36, 0.6) 80%, 
            transparent 100%);
        border-radius: 2px;
        filter: blur(0.5px);
        animation: decorativeLine 3s ease-in-out infinite;
    }
    
    .hero-visual {
        order: 2 !important;
        /* Spazio ottimizzato per una transizione visiva più fluida */
        padding: 1.5rem 0 0 0 !important;
        height: auto !important;
    }
    
    .hero-cta {
        margin-top: 2rem !important;
        padding-top: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        align-items: center !important;
        max-width: 350px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Typography mobile - Testo più grande e spazioso */
    .hero-title {
        /* Aumentato per migliore leggibilità su schermi mobili */
        font-size: clamp(2.75rem, 9.5vw, 4rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 2rem !important;
        letter-spacing: -0.025em !important;
        font-weight: 700 !important;
        text-align: center !important;
        padding: 0 1rem !important;
    }
    
    .title-highlight {
        font-size: 1.2em !important;
        margin-bottom: 0.75rem !important;
        display: block !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        letter-spacing: -0.02em !important;
    }
    
    .title-main {
        font-size: 0.85em !important;
        line-height: 1.25 !important;
        margin-top: 0.75rem !important;
        font-weight: 500 !important;
        opacity: 0.9 !important;
        text-align: center !important;
        letter-spacing: -0.01em !important;
    }
    
    .hero-description {
        font-size: 1.2rem !important;
        line-height: 1.6 !important;
        margin: 1.5rem auto 1.75rem auto !important;
        max-width: 36rem !important;
        opacity: 0.9 !important;
        font-weight: 500 !important;
        letter-spacing: 0.005em !important;
        text-align: center !important;
        padding: 0 1rem !important;
    }
    
    .hero-subdescription {
        font-size: 1.1rem !important;
        line-height: 1.55 !important;
        margin: 1rem auto 2.5rem auto !important;
        max-width: 34rem !important;
        opacity: 0.85 !important;
        font-weight: 400 !important;
        letter-spacing: 0.002em !important;
        text-align: center !important;
        padding: 0 1rem !important;
    }
    
    /* Image mobile optimization - Immagine a larghezza piena schermo */
    .main-visual-container {
        position: static !important;
        width: calc(100vw) !important;
        height: 280px !important;
        margin: 0 -1rem !important; /* Estende oltre i margini del container */
        padding: 0 !important;
        border-radius: 0 !important; /* Rimuove il bordo arrotondato per occupare tutto lo schermo */
        overflow: hidden !important;
        max-width: none !important;
    }
    
    .hero-photo {
        width: 100% !important;
        height: 280px !important;
        object-fit: cover !important; /* Cambiato da contain a cover per riempire tutto */
        object-position: center center !important;
        border-radius: 0 !important; /* Rimuove il bordo arrotondato */
        transform: none !important;
        filter: none !important;
        background-color: #f3f4f6;
    }
    
    /* Button mobile optimization - Unified sizing for both CTAs */
    .hero-cta .hero-btn,
    .hero-cta .btn-pulse,
    .hero-cta .btn-pulse-secondary {
        width: 100% !important;
        max-width: 340px !important;
        min-width: 280px !important;
        padding: 1.2rem 1.5rem !important;
        font-size: 1rem !important;
        justify-content: center !important;
        margin: 0 auto 0.5rem auto !important;
        min-height: 64px !important;
        max-height: 64px !important;
        touch-action: manipulation !important;
        border-radius: 0.75rem !important;
        display: flex !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    
    .hero-cta .btn-pulse {
        box-shadow: 
            0 8px 20px rgba(251, 191, 36, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .hero-cta .btn-pulse-secondary {
        box-shadow: 
            0 8px 20px rgba(59, 130, 246, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .hero-cta .btn-content {
        align-items: center !important;
        text-align: center !important;
        gap: 0.25rem !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .hero-cta .btn-main {
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    
    .hero-cta .btn-sub {
        font-size: 0.85rem !important;
        opacity: 0.85 !important;
        font-weight: 400 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }
    
    /* Hide decorative elements on mobile */
    .floating-elements,
    .floating-icon,
    .golden-glow-left,
    .golden-glow-right {
        display: none !important;
    }
    
    /* Intro Section - Mobile optimization for Chi Siamo and Mercato Tutelato pages */
    .intro-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .intro-text {
        order: 1;
    }
    
    .intro-visual {
        order: 2;
        height: 400px !important;
        min-height: 400px !important;
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 2rem 0 !important;
    }
    
    /* Comparison Overview - Mobile optimization for confronto page */
    .overview-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .overview-text {
        order: 1;
    }
    
    .overview-stats {
        order: 2;
    }
    
    /* Navigation mobile fixes */
    .navbar {
        height: 60px !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    .nav-container {
        height: 60px !important;
        padding: 0 1rem !important;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100% !important;
    }
    
    /* Improve touch targets */
    .nav-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Miglioramenti generali per leggibilità mobile */
    .hero-text * {
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Evita problemi di zoom automatico iOS */
    .hero-text {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* Smaller mobile devices - Ulteriormente ottimizzato */
@media (max-width: 480px) {
    .hero {
        /* Aumentato anche sui dispositivi molto piccoli */
        padding: calc(80px + 1rem) 0 1.75rem 0 !important;
    }
    
    .hero-container {
        padding: 0 1rem !important;
    }
    
    .hero-content {
        gap: 1.25rem !important;
        padding: 1rem 0 !important;
    }
    
    .hero-title {
        /* Aumentato per schermi molto piccoli */
        font-size: clamp(2rem, 6.5vw, 2.8rem) !important;
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
    }
    .hero-text {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* Leggero padding-top anche sui dispositivi più piccoli */
        padding-top: 0.75rem !important;
    }
    
    .title-highlight {
        font-size: 1.15em !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.1 !important;
    }
    
    .title-main {
        font-size: 0.8em !important;
        line-height: 1.3 !important;
        margin-top: 0.5rem !important;
    }
    .title-main {
        text-align: center !important;
    }
    
    .hero-description {
        font-size: 1.05rem !important;
        margin-bottom: 0.875rem !important;
        line-height: 1.6 !important;
    }
    .hero-description {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 34rem !important;
    }
    
    .hero-subdescription {
        font-size: 0.95rem !important;
        margin-bottom: 1.25rem !important;
        line-height: 1.55 !important;
        opacity: 0.85 !important;
    }
    .hero-subdescription {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 34rem !important;
    }
    
    .hero-cta {
        /* leggermente più vicina all'immagine */
        margin-top: 1rem !important;
        padding-top: 0.5rem !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .main-visual-container {
        height: 240px !important;
        /* Avvicina l'immagine alla CTA */
        margin-top: 0.25rem !important;
    }
    
    .hero-photo {
        height: 240px !important;
        object-fit: contain !important;
        object-position: center center !important;
        background-color: #f3f4f6 !important;
    }

    /* Leggera regolazione della decorazione sopra il titolo sui piccoli schermi */
    .hero-text::before {
        top: 0.25rem !important;
    }
    
    .btn-pulse {
        padding: 0.9rem 1.1rem !important;
        font-size: 0.95rem !important;
        max-width: 100% !important;
        min-height: 48px !important;
    }
    
    .btn-main {
        font-size: 1.05rem !important;
    }
    
    .btn-sub {
        font-size: 0.85rem !important;
    }
}

/* Tablet e dispositivi medi - ottimizzazioni intermedie */
@media (max-width: 768px) and (min-width: 481px) {
    .hero-title {
        font-size: clamp(2rem, 5.8vw, 2.6rem) !important;
        line-height: 1.22 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .title-highlight {
        font-size: 1.08em !important;
        margin-bottom: 0.6rem !important;
    }
    
    .hero-description {
        font-size: 1.15rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1.1rem !important;
    }
    
    .hero-subdescription {
        font-size: 1.05rem !important;
        line-height: 1.65 !important;
        margin-bottom: 1.8rem !important;
    }
    
    .hero-cta .hero-btn,
    .hero-cta .btn-pulse,
    .hero-cta .btn-pulse-secondary {
        max-width: 250px !important;
        min-width: 250px !important;
        padding: 1.15rem 1rem !important;
        min-height: 58px !important;
        max-height: 58px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    
    .hero-cta .btn-main {
        font-size: 1rem !important;
        white-space: nowrap !important;
    }
    
    .hero-cta .btn-sub {
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
    
    /* Tablet: show buttons side by side with equal dimensions */
    .hero-cta {
        flex-direction: row !important;
        gap: 1rem !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .hero-cta .hero-btn,
    .hero-cta .btn-pulse,
    .hero-cta .btn-pulse-secondary {
        flex: none !important;
        width: 200px !important;
        max-width: 200px !important;
        min-width: 200px !important;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .hero-container {
        padding: 0 0.5rem !important;
    }
    
    .hero-title {
        font-size: clamp(1.35rem, 4.3vw, 1.95rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 0.5rem !important;
    }

    .hero-text {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-description {
        font-size: 1.02rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
    }
    .hero-description {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 30rem !important;
    }

    .hero-subdescription {
        font-size: 0.98rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    .hero-subdescription {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 30rem !important;
    }
    
    .main-visual-container {
        height: 220px !important;
        margin-top: 0.25rem !important;
    }
    
    .hero-photo {
        height: 220px !important;
        object-fit: contain !important;
        object-position: center center !important;
        background-color: #f3f4f6 !important;
    }
    
    .btn-pulse {
        padding: 0.6rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
    .btn-pulse {
        animation: none !important;
    }
    
    .floating-icon {
        animation: none !important;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Fix for specific mobile browsers */
@supports (-webkit-touch-callout: none) {
    .hero {
        min-height: -webkit-fill-available !important;
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: calc(60px + 0.5rem) 0 1rem 0 !important;
    }
    
    .hero-content {
        gap: 1rem !important;
    }
    
    .main-visual-container {
        height: 180px !important;
    }
    
    .hero-photo {
        height: 180px !important;
    }
}

/* Ottimizzazioni specifiche per navbar mobile */
@media (max-width: 768px) {
    /* Migliore supporto per Safari mobile e dispositivi con barra di navigazione */
    .nav-menu {
        /* Padding extra in basso per evitare sovrapposizione con la barra di navigazione del browser */
        padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 60px)) !important;
        /* Altezza minima che considera la safe area */
        min-height: calc(100vh - 60px - env(safe-area-inset-bottom, 0px)) !important;
        /* Migliore scorrimento su iOS */
        -webkit-overflow-scrolling: touch !important;
        /* Previeni il bounce su iOS quando si raggiunge la fine dello scroll */
        overscroll-behavior: contain !important;
    }
    
    /* Assicura che il pulsante Contattaci sia sempre visibile */
    .nav-cta {
        margin-bottom: env(safe-area-inset-bottom, 20px) !important;
        /* Aggiungi un po' di spazio extra per sicurezza */
        margin-top: var(--space-6) !important;
        /* Rendi il pulsante più prominente */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        transform: none !important;
    }
    
    /* Fix per dispositivi con tacca o barra home */
    .nav-menu:after {
        content: '';
        display: block;
        height: env(safe-area-inset-bottom, 40px);
        width: 100%;
        flex-shrink: 0;
    }
}

/* Ottimizzazioni specifiche per dispositivi molto piccoli */
@media (max-width: 360px) {
    .nav-menu {
        gap: var(--space-4) !important;
        padding-top: var(--space-6) !important;
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 80px)) !important;
    }
    
    .nav-link {
        font-size: 1rem !important;
        padding: var(--space-2) 0 !important;
    }
}

/* Ottimizzazioni sezione "I nostri valori" per mobile */
@media (max-width: 768px) {
    /* Sezione timeline detailed - I nostri valori */
    .timeline-section-detailed {
        padding: var(--space-16) 0 !important;
    }
    
    .timeline-container {
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Riorganizza il layout su mobile per dare più spazio al contenuto */
    .timeline-item-detailed {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-4) !important;
        grid-template-columns: none !important;
        position: relative !important;
        padding-left: 0 !important;
        margin-bottom: var(--space-8) !important;
    }
    
    /* Sposta il marker a sinistra e lo rende più compatto */
    .timeline-marker-detailed {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--white) !important;
        font-size: var(--font-size-lg) !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 2 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Adatta il contenuto per lasciare spazio al marker compatto */
    .timeline-content-detailed {
        margin-left: 65px !important;
        background: var(--light-color) !important;
        border-radius: var(--radius-lg) !important;
        padding: var(--space-6) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        border-left: 3px solid var(--primary-color) !important;
    }
    
    /* Linea di connessione tra i valori spostata a sinistra */
    .timeline-item-detailed:not(:last-child)::after {
        content: '' !important;
        position: absolute !important;
        left: 25px !important;
        top: 60px !important;
        bottom: -32px !important;
        width: 2px !important;
        background: linear-gradient(180deg, var(--primary-color), var(--secondary-color)) !important;
        z-index: 1 !important;
    }
    
    /* Header del contenuto */
    .timeline-header-detailed h3 {
        font-size: var(--font-size-xl) !important;
        font-weight: 700 !important;
        color: var(--dark-color) !important;
        margin-bottom: var(--space-3) !important;
        line-height: 1.3 !important;
    }
    
    /* Descrizione del valore */
    .timeline-description-detailed p {
        color: var(--neutral-color) !important;
        line-height: 1.6 !important;
        margin-bottom: var(--space-4) !important;
        font-size: var(--font-size-base) !important;
    }
    
    .timeline-description-detailed p:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Evidenzia il testo in grassetto */
    .timeline-description-detailed p strong {
        color: var(--dark-color) !important;
        font-weight: 600 !important;
    }
    
    /* Effetto hover ottimizzato per mobile */
    .timeline-content-detailed:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    }
}

/* Ottimizzazioni aggiuntive per schermi molto piccoli */
@media (max-width: 480px) {
    .timeline-container {
        padding: 0 0.75rem !important;
    }
    
    .timeline-marker-detailed {
        width: 45px !important;
        height: 45px !important;
        font-size: var(--font-size-base) !important;
    }
    
    .timeline-content-detailed {
        margin-left: 60px !important;
        padding: var(--space-5) !important;
    }
    
    .timeline-item-detailed:not(:last-child)::after {
        left: 22px !important;
        top: 55px !important;
    }
    
    .timeline-header-detailed h3 {
        font-size: var(--font-size-lg) !important;
    }
    
    .timeline-description-detailed p {
        font-size: var(--font-size-sm) !important;
    }
}

/* Animazione per l'elemento decorativo */
@keyframes decorativeLine {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-50%) scaleX(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1.1);
    }
}