/* ====================================
   MOBILE RESPONSIVE OVERRIDES - 2 COLUMN LAYOUT
   ==================================== */

/* Ensure burger menu shows on mobile and desktop (since user wants vertical menu everywhere) */
/* We removed the display:none for desktop that was here previously */

@media (max-width: 768px) {
    .burger-menu-toggle {
        display: flex !important;
    }

    /* Fix for tabs not visible on mobile: Override legacy style.css that hides .nav-menu */
    .nav-menu {
        display: flex !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100% !important;
        flex-direction: column !important;
    }

    /* Reduce burger menu panel padding on tablets and phones */
    .burger-menu-panel {
        padding: 80px 20px 20px !important;
    }

    /* Ensure nav links fit properly */
    .nav-link {
        font-size: 16px !important;
        padding: 10px 0 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Adjust new badge for better fit */
    .new-badge {
        font-size: 9px !important;
        padding: 3px 6px !important;
        white-space: nowrap;
    }

    /* Ensure nav-link-new doesn't overflow */
    .nav-link-new {
        gap: 8px;
    }

    /* Ensure load more button is centered on tablets too */
    .load-more-container {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .load-more-btn {
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-block !important;
    }
}

/* Override gallery to use 2 columns on small mobile devices */
@media (max-width: 480px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* Wide panels should be 1 column on small phones for better readability */
    .service-cards {
        grid-template-columns: 1fr !important;
    }

    .pricing-grid,
    .pricing-grid-3 {
        grid-template-columns: 1fr !important;
    }

    /* Further reduce burger menu panel padding on small phones */
    .burger-menu-panel {
        padding: 70px 15px 15px !important;
        max-width: 90vw !important;
    }

    /* Smaller font for nav links on small phones */
    .nav-link {
        font-size: 15px !important;
        padding: 8px 0 !important;
    }

    /* Smaller new badge on small phones */
    .new-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
    }

    /* Reduce contact info font size */
    .nav-contact-item {
        font-size: 13px !important;
    }

    .nav-contact-item svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Ensure load more button is centered */
    .load-more-container {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .load-more-btn {
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-block !important;
    }

    /* Center "Dlaczego my?" section on mobile */
    .benefits-section .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .benefits-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .benefit-item {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .benefit-icon {
        margin: 0 auto !important;
    }

    /* Center contact items on mobile */
    .contact-page-section .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .contact-info-box {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-items {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-item-large {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .contact-icon {
        margin: 0 auto !important;
    }
}