/* ========================================================================== */
/* MEDIA QUERIES                                                              */
/* ========================================================================== */

/* Tablet (landscape) e schermi desktop più piccoli */
@media (max-width: 1024px) {
    header nav ul li {
        margin: 0 20px; /* Riduci il margine tra gli elementi del menu */
    }

    header nav ul li a {
        font-size: 0.75em; /* Riduci leggermente la dimensione del font del menu */
    }

    .hero-section {
        height: 600px; /* Riduci l'altezza della sezione hero */
    }

    .hero-text-large {
        font-size: 120px; /* Riduci la dimensione del font principale */
    }

    .hero-text-small,
    .hero-text-macelleria {
        font-size: 25px; /* Riduci i font secondari */
    }

    .storia-content,
    .staff-content,
    .gallery-full-content {
        padding: 20px; /* Aumenta il padding sui lati per il contenuto principale */
    }

    .storia-section h2,
    .column-title,
    .staff-section h2,
    .gallery-full-section h2 {
        font-size: 35px; /* Riduci la dimensione dei titoli di sezione */
    }

    .main-content-section .column {
        flex: 0 0 45%; /* Fai in modo che le colonne occupino meno spazio per rimanere su una riga */
        margin: 15px; /* Riduci il margine tra le colonne */
        max-width: 450px; /* Limite massimo per le colonne */
    }

    .razze-gallery .gallery-image {
        height: 250px; /* Adatta l'altezza delle immagini della galleria Razze */
    }

    .member-photo {
        width: 150px; /* Riduci la dimensione delle foto dello staff */
        height: 150px;
    }

    .team-members {
        gap: 30px; /* Riduci lo spazio tra i membri del team */
    }

    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Riduci la dimensione minima delle colonne della griglia galleria */
        padding: 15px;
    }

    .grid-item {
        height: 150px; /* Riduci l'altezza delle immagini della griglia principale */
    }
}

/* Tablet (portrait) e smartphone più grandi */
@media (max-width: 768px) {
    header {
        height: auto; /* Altezza automatica per l'header */
        padding: 10px 0;
        flex-direction: column; /* Impila il logo (se presente) e la nav */
    }

    header nav ul {
        flex-direction: column; /* Impila gli elementi del menu */
        align-items: center; /* Centra gli elementi impilati */
        margin-top: 10px;
    }

    header nav ul li {
        margin: 5px 0; /* Riduci il margine verticale tra gli elementi del menu */
    }

    header nav ul li a {
        font-size: 1em; /* Aumenta leggermente il font per la leggibilità mobile */
        padding: 5px 0;
    }

    .info-bar {
        height: auto; /* Altezza automatica */
        padding: 10px 15px; /* Più padding per il testo */
    }

    .info-bar p {
        font-size: 0.8em; /* Riduci la dimensione del font per la info bar */
    }

    .hero-section {
        height: 450px; /* Riduci ulteriormente l'altezza della hero */
        background-attachment: scroll !important; /* <--- FORZA LO SCORRIMENTO NORMALE SU MOBILE */
        background-position: center center;      /* <--- CENTRA PERFETTAMENTE LA FOTO */        
    }

    .hero-text-large {
        font-size: 80px; /* Dimensione del font per Aprzzzi */
        white-space: normal; /* Permetti al testo di andare a capo */
    }

    .hero-text-small,
    .hero-text-macelleria {
        font-size: 20px; /* Riduci ancora i font secondari */
        top: 0;
        left: 0;
    }

    .storia-content,
    .staff-content,
    .gallery-full-content {
        padding: 15px; /* Riduci il padding generale per le sezioni */
    }

    .storia-section h2,
    .column-title,
    .staff-section h2,
    .gallery-full-section h2 {
        font-size: 30px; /* Riduci i titoli a 30px */
    }

    .storia-section p,
    .gallery-description, .fixed-description,
    .staff-section p,
    .gallery-full-section p {
        font-size: 14px; /* Riduci la dimensione del testo dei paragrafi */
        text-align: left; /* Su mobile, justified può creare spazi brutti, left è spesso meglio */
    }
    
    .column {
        flex: 0 0 90%; /* Le colonne occupano quasi tutta la larghezza su mobile (singola colonna) */
        max-width: 90%;
        margin: 15px auto; /* Centra le colonne e metti margine verticale */
        padding: 20px; /* Adatta il padding interno */
    }

    .razze-gallery .gallery-image {
        height: 200px; /* Adatta l'altezza delle immagini della galleria Razze per mobile */
    }

    .gallery-wrapper .prev-slide,
    .gallery-wrapper .next-slide {
        padding: 5px 8px; /* Riduci il padding dei pulsanti delle gallerie interne */
        font-size: 14px;
    }

    .gallery-wrapper[data-gallery-id="razze"] .prev-slide,
    .gallery-wrapper[data-gallery-id="razze"] .next-slide,
    .gallery-wrapper[data-gallery-id="tradizioni"] .prev-slide,
    .gallery-wrapper[data-gallery-id="tradizioni"] .next-slide {
        top: 90px; /* Adatta la posizione verticale delle frecce per le gallerie interne */
    }

    .team-members {
        /*flex-direction: column; /* Impila le foto dello staff */
        align-items: center; /* Centra le foto */
        gap: 20px; /* Riduci lo spazio tra le foto */
    }

    .member-photo {
        width: 120px; /* Riduci ulteriormente le dimensioni delle foto staff */
        height: 120px;
    }

    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Ancora più piccole le immagini della galleria principale */
        padding: 10px;
        gap: 10px;
    }

    .grid-item {
        height: 120px; /* Riduci l'altezza delle immagini della griglia principale */
    }

    .fullscreen-overlay img {
        max-width: 95%; /* Lascia più spazio all'immagine nell'overlay */
        max-height: 85%;
    }

    .close-btn {
        font-size: 30px;
        top: 10px;
        right: 15px;
    }

    .overlay-nav-btn {
        font-size: 20px;
        padding: 10px;
    }

    #backToTopBtn {
        bottom: 20px; /* Sposta il pulsante più in alto dal bordo inferiore */
        right: 20px; /* Sposta il pulsante più a sinistra dal bordo destro */
        font-size: 20px;
        padding: 8px 12px;
    }

    footer p {
        font-size: 0.8em;
    }
}

/* Smartphone più piccoli */
@media (max-width: 480px) {
    .hero-section {
        height: 350px; /* Ancora più piccola la hero section */
        background-attachment: scroll !important; /* <--- FORZA LO SCORRIMENTO ANCHE QUI */
        background-position: center center;      /* <--- MANTIENE LA FOTO CENTRATA */        
    }

    .hero-text-large {
        font-size: 60px; /* Riduci ancora la dimensione del font principale */
    }

    .hero-text-small,
    .hero-text-macelleria {
        font-size: 16px; /* Font ancora più piccoli */
    }

    .storia-section h2,
    .column-title,
    .staff-section h2,
    .gallery-full-section h2 {
        font-size: 25px; /* Titoli più piccoli */
    }

    .storia-section p,
    .gallery-description, .fixed-description,
    .staff-section p,
    .gallery-full-section p {
        font-size: 13px; /* Testo dei paragrafi più piccolo */
    }

    .main-content-section .column {
        margin: 10px auto; /* Margine ridotto per le colonne */
        padding: 15px; /* Padding interno ridotto */
    }

    .razze-gallery .gallery-image {
        height: 180px; /* Altezza immagini galleria razze ancora ridotta */
    }

    .gallery-wrapper[data-gallery-id="razze"] .prev-slide,
    .gallery-wrapper[data-gallery-id="razze"] .next-slide,
    .gallery-wrapper[data-gallery-id="tradizioni"] .prev-slide,
    .gallery-wrapper[data-gallery-id="tradizioni"] .next-slide {
        top: 80px; /* Adatta la posizione verticale delle frecce */
    }

    .member-photo {
        width: 100px; /* Ulteriore riduzione per le foto dello staff */
        height: 100px;
    }

    .image-grid {
        grid-template-columns: 1fr; /* Una sola colonna per le immagini della galleria principale */
        padding: 5px;
        gap: 5px;
    }

    .grid-item {
        height: 180px; /* Mantieni un'altezza decente per le singole immagini a colonna intera */
    }
}