/*
 * Service Showcase - Modern Responsive Overrides (v8)
 * Note: Mobile column layout is now dynamically controlled via WordPress Admin!
 * Go to: Page Content Setting > Home Settings > Service Showcase > Mobile Items Per Row
 * This file provides fallback styles and additional mobile optimizations.
 */

/* --- MOBILE LAYOUT NOW CONTROLLED BY ADMIN SETTINGS --- */
/* Column layout is dynamically generated based on admin settings */
/* This section only provides container and grid enhancements */

@media (max-width: 768px) {
    /* Ensure the grid container uses flexbox but don't force column widths */
    .service-showcase-section .service-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    
    /* Ensure all grid items have proper flex properties */
    .service-showcase-section .service-grid > div {
        display: block !important;
    }
}

/* --- ITEM STYLE RULES (mobile) --- */
@media (max-width: 768px) {
    /* Grid item spacing */
    .service-showcase-section .service-grid > div {
        padding: 0 8px !important;
        margin-bottom: 25px !important;
    }
    
    .service-item {
        padding: 20px 8px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto !important;
        min-height: 140px;
    }

    .service-item .service-icon-wrapper {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 12px !important;
        flex-shrink: 0;
    }

    .service-item .service-icon {
        font-size: 32px !important;
    }

    .service-item .service-icon-image {
        width: 80% !important;
        height: 80% !important;
        padding: 12px !important;
    }

    .service-item .service-name {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-align: center;
        word-break: break-word;
        color: #ffffff !important;
        margin-bottom: 0 !important;
        display: block;
    }

    /* Hide description on mobile */
    .service-item .service-description {
        display: none !important;
    }
}

/* Adjust for very small screens */
@media (max-width: 399px) {
    .service-item {
        min-height: 120px;
        padding: 16px 6px !important;
    }
    
    .service-item .service-icon-wrapper {
        width: 70px !important;
        height: 70px !important;
    }
    
    .service-item .service-name {
        font-size: 13px !important;
    }
}