/* ==========================================================
   CSS MOBILE-ONLY — Ottimizzazione senza cambiare lo stile
   ========================================================== */

@media(max-width:768px){

    /* ------------------------------
       Layout generale più fluido
    ------------------------------ */
    body{
        padding: 0 10px;
    }

    /* Slider più morbido */
    #featured img{
        border-radius: 10px;
    }

    /* ------------------------------
       Box laterali: Novità + Servizi
    ------------------------------ */
    .hero-overlay-left,
    .section-right{
        position: static;
        max-width: 260px;
        padding: 18px 16px;
        margin: 20px auto;
        text-align: center;
        box-shadow: 0 6px 18px rgba(0,0,0,.18);
    }

    .hero-overlay-left::before,
    .section-right::before{
        inset: 4px;
    }

    /* Nasconde coccarda su mobile */
    .section-right::after,
    .badge-img{
        display: none;
    }

    /* Testi più compatti */
    .section-right .content{
        text-align: center;
        align-items: center;
    }

    .section-right .content p,
    .section-right .content a{
        font-size: 0.9rem;
        line-height: 1.25;
    }

    /* Spaziatura interna */
    .section-right .content > *{
        margin-bottom: 6px;
    }

	@media(max-width:768px){

    .legal-page {
        max-width: 100%;
        margin: 40px auto;
        padding: 0 14px;
        text-align: left;
    }

    .legal-page h1,
    .legal-page h2 {
        text-align: center;
    }
}


    /* CTA più cliccabili */
    .section-right p a{
        padding: 10px 14px;
        border-radius: 8px;
    }

	@media(max-width:768px){
    .hero-overlay-left h2 {
        margin-bottom: 14px;
    }
}

    /* ------------------------------
       Titolo sotto il logo
    ------------------------------ */
    .site-title{
        margin-top: -10px;
        margin-bottom: 24px;
    }

    /* ------------------------------
       PDF Buttons più touch-friendly
    ------------------------------ */
    .pdf-buttons a{
        padding: 14px 22px;
        font-size: 0.95rem;
    }

    /* ------------------------------
       Galleria (Novità)
    ------------------------------ */
    .gallery-item img{
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(0,0,0,.12);
    }

    .gallery-desc{
        font-size: 0.9rem;
        margin-top: 6px;
    }

    .gallery-grid{
        padding: 1rem;
        gap: 1rem;
    }

    .hero-gallery h1{
        font-size: 2.4rem;
    }

    /* ------------------------------
       Animazioni più leggere
    ------------------------------ */
    .fade-up{
        transform: translateY(18px);
    }

    /* ------------------------------
       Contact Page
    ------------------------------ */
    .contact-wrapper{
        flex-direction: column;
    }

    .contact-section{
        padding: 20px 10px;
    }

    .contact-form,
    .contact-info{
        min-width: 100%;
    }

    /* ------------------------------
       Footer più semplice
    ------------------------------ */
    .footer-3col-center .footer-inner{
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px){
    address a,
    .footer-legal a {
        color: inherit;
        text-decoration: none;
    }
}

@media(max-width:768px){

    .about-section {
        flex-direction: column;
        margin: 40px auto;
        padding: 0 14px;
        gap: 24px;
    }

    .about-image img {
        max-width: 100%;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(0,0,0,.15);
    }

    .about-text {
        text-align: left;
        padding-top: 0;
    }
}

@media(max-width:768px){

    .timeline-section {
        margin: 50px auto;
        padding: 0 14px;
    }

    .timeline {
        padding-left: 30px;
        gap: 30px;
    }

    .timeline-year {
        font-size: 1.2rem;
    }

    .timeline-content {
        padding: 1.2rem;
    }
}

@media(max-width:768px){

    /* Sposta la linea più a sinistra */
    .timeline {
        padding-left: 50px; /* prima era 30px */
    }

    .timeline::before {
        left: 22px; /* prima era 20px */
    }

    /* Sposta il pallino più a sinistra */
    .timeline-item::before {
        left: 14px; /* prima era 12px */
    }

    /* Aumenta lo spazio della data */
    .timeline-year {
        min-width: 120px; /* prima era 90-110px */
        font-size: 1.25rem;
    }

    /* Migliora l’allineamento del contenuto */
    .timeline-item {
        gap: 16px;
    }
}