/* Mobile-only overrides within .gloro-mobile namespace */
@media only screen and (max-width: 768px) {
    .gloro-mobile {
        /* Typography Scale */
        --h1-mobile: clamp(26px, 5vw, 32px);
        --h2-mobile: 22px;
        --p-mobile: 15.5px;
        
        /* Spacing */
        --container-padding: 16px;
        --section-padding: 56px;
        --header-height: 60px;
        
        /* Component dimensions */
        --btn-min-height: 48px;
    }

    /* Base resets/adjustments for mobile body */
    .gloro-mobile body {
        overflow-x: hidden;
        width: 100%;
    }

    /* 1) Fix header logo proportions - Ensure it doesn't stretch */
    .gloro-mobile header img {
        height: 40px !important; /* Fixed height */
        width: auto !important;  /* Auto width preserves aspect ratio */
        object-fit: contain !important;
        max-width: 150px; /* Prevent it from being too wide */
    }

    /* 2) HAMBURGER MENU: Absolute Far Right Alignment */
    .gloro-mobile header .container {
        /* Remove right padding completely to allow button to touch edge */
        padding-right: 0 !important; 
    }

    .gloro-mobile header .container > .flex {
        justify-content: space-between !important;
        width: 100% !important;
    }
    
    .gloro-mobile header button[aria-label="Apri menu"] {
        margin-left: auto !important; 
        margin-right: 0 !important;
        /* Ensure the button block itself aligns right */
        display: flex !important;
        justify-content: flex-end !important;
        /* Increase width to make touch target easy while keeping icon right */
        width: 60px !important; 
        padding-right: 16px !important; /* Small safe area from bezel, but structure is right-aligned */
    }

    /* Open menu background persistence */
    .gloro-mobile header[data-menu-open="true"] {
        background-color: #2A1E15 !important;
        backdrop-filter: none !important;
        border-color: transparent !important;
    }

    /* Home page title - allow wrapping */
    .gloro-mobile h1 {
        font-size: var(--h1-mobile) !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-wrap: break-word !important;
    }
    
    .gloro-mobile h2 {
        font-size: var(--h2-mobile) !important;
        line-height: 1.3 !important;
    }
    
    .gloro-mobile p, 
    .gloro-mobile li {
        font-size: var(--p-mobile) !important;
        line-height: 1.6 !important;
    }

    /* Layout & Containers */
    .gloro-mobile .container {
        padding-left: var(--container-padding) !important;
        padding-right: var(--container-padding) !important;
        max-width: 100% !important;
    }

    .gloro-mobile section {
        padding-top: var(--section-padding) !important;
        padding-bottom: var(--section-padding) !important;
    }

    /* Header Dimensions */
    .gloro-mobile header {
        height: var(--header-height) !important;
    }
    
    .gloro-mobile header .h-20 {
        height: var(--header-height) !important;
    }

    /* Buttons */
    .gloro-mobile button,
    .gloro-mobile .btn-primary,
    .gloro-mobile .btn-outline,
    .gloro-mobile a[class*="btn-"] {
        min-height: var(--btn-min-height) !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 12px !important; /* Stack vertical spacing */
    }
    
    .gloro-mobile div:not([class*="grid"]) > button:last-child,
    .gloro-mobile div:not([class*="grid"]) > a[class*="btn-"]:last-child {
        margin-bottom: 0 !important;
    }

    /* Hero Subtitle Clamp */
    .gloro-mobile .hero-subtitle,
    .gloro-mobile section:first-of-type p.text-xl {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Services Carousel on mobile (Home Page) */
    .gloro-mobile section:nth-of-type(2) .grid {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-template-columns: repeat(5, 85%) !important;
        grid-template-rows: auto !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        padding-bottom: 24px !important;
        margin-right: -16px !important;
        padding-right: 16px !important;
        justify-content: flex-start !important;
    }

    .gloro-mobile section:nth-of-type(2) .grid > a {
        scroll-snap-align: center !important;
        height: auto !important; 
        min-height: 350px !important;
        width: 100% !important;
    }
    
    .gloro-mobile section:nth-of-type(2) .grid img {
        object-position: center !important;
    }

    /* 3) GOLD SECTION: Perfect Vertical Centering */
    .gloro-mobile section.bg-gold {
        /* 
           Calculation for Balance:
           Grid has 'padding-bottom: 24px' internally to show shadows/scrollbar.
           To visually balance:
           Visual Top Space = Section Padding Top (56px)
           Visual Bottom Space = Section Padding Bottom (32px) + Grid Padding Bottom (24px) = 56px.
        */
        padding-top: 56px !important;
        padding-bottom: 32px !important;
    }

    /* Gold Carousel configuration */
    .gloro-mobile section.bg-gold .grid {
        display: grid !important;
        grid-auto-flow: column !important;
        /* Update to repeat(4, ...) for the 4th "Nessun limite" card */
        grid-template-columns: repeat(4, 85%) !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        padding-bottom: 24px !important; /* Internal spacing */
        margin-right: -16px !important;
        padding-right: 16px !important;
        justify-content: flex-start !important;
        
        /* CRITICAL: Remove the Tailwind 'mb-16' (64px) margin from JSX */
        margin-bottom: 0 !important; 
    }

    .gloro-mobile section.bg-gold .grid > div {
        scroll-snap-align: center !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide the original bottom text in Gold section on mobile */
    .gloro-mobile section.bg-gold > .container > .flex {
        display: none !important;
    }

    /* Services Anchor Pills */
    .gloro-mobile .anchor-nav, 
    .gloro-mobile .sticky-nav {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 12px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .gloro-mobile .anchor-nav::-webkit-scrollbar {
        display: none;
    }

    /* Sidebar Hidden / Accordion Visible */
    .gloro-mobile aside,
    .gloro-mobile .sidebar {
        display: none !important;
    }
    
    .gloro-mobile .accordion-content {
        display: block !important;
    }

    /* FAQ Scrollable */
    .gloro-mobile .faq-container,
    .gloro-mobile [role="region"] {
        max-height: 280px !important;
        overflow-y: auto !important;
    }

    /* Map Dimensions */
    .gloro-mobile iframe[src*="google.com/maps"],
    .gloro-mobile .map-container {
        height: 240px !important;
        min-height: 240px !important;
    }

    /* Scroll Margin for Anchors */
    .gloro-mobile [id] {
        scroll-margin-top: 72px !important;
    }

    /* Utilities */
    .gloro-mobile .mobile-only { display: block !important; }
    .gloro-mobile .desktop-only { display: none !important; }
    
    /* Footer Push Logic */
    .gloro-mobile #root > div {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .gloro-mobile footer {
        margin-top: auto !important;
    }
}

/* Desktop Only Utility */
@media screen and (min-width: 769px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
}