/* ========================================
   CRITICAL MOBILE FIX - Force Mobile Responsiveness
   This file MUST load last to override all other styles
   ======================================== */

/* Force mobile detection and apply styles immediately */
@media (max-width: 768px) {
    /* CRITICAL: Override ALL grid systems for mobile */
    .business-directory-container,
    .business-directory-modern,
    .business-directory-grid,
    .business-grid,
    .search-grid,
    .bd-filters-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 0 !important;
        gap: 20px !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    
    /* Force all cards to full width */
    .business-card,
    .bd-filter-group,
    .search-field {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        flex: none !important;
    }
    
    /* Force all inputs to mobile-friendly size */
    .bd-filter-search,
    .bd-filter-select,
    .search-input,
    .search-select,
    .search-button {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Add padding below social media icons */
    .business-social,
    .social-links {
        padding-bottom: 10px !important;
    }
    
    /* Force container to full width */
    .business-directory-container .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 0 !important;
    }
    
    /* Force controls to full width */
    .business-directory-controls {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        display: block !important;
        overflow: visible !important;
    }
    
    /* Force filter actions to stack */
    .bd-filter-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    
    /* Force reset button to full width */
    .bd-reset-filters {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
    }
}

/* Force mobile styles for touch devices */
@media (hover: none) and (pointer: coarse) {
    .business-directory-container,
    .business-directory-modern {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    .business-directory-grid,
    .business-grid,
    .search-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
        padding: 0 16px !important;
    }
    
    .business-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
}

/* Force mobile styles when mobile device class is present */
.bd-mobile-device .business-directory-container,
.bd-mobile-active {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

.bd-mobile-device .business-directory-grid,
.bd-mobile-device .business-grid,
.bd-mobile-device .search-grid,
.bd-mobile-device .bd-filters-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
    padding: 0 16px !important;
    grid-template-columns: none !important;
}

.bd-mobile-device .business-card,
.bd-mobile-device .bd-filter-group {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
}

.bd-mobile-device .bd-filter-search,
.bd-mobile-device .bd-filter-select,
.bd-mobile-device .search-input,
.bd-mobile-device .search-select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
}

.bd-mobile-device .business-social,
.bd-mobile-device .social-links {
    padding-bottom: 10px !important;
}

/* Critical mobile viewport fix */
@media screen and (max-width: 768px) {
    .business-directory-container * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .business-directory-container {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .business-directory-container .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 0 !important;
    }
    
    /* CRITICAL: Mobile Description Fixes - Highest Priority */
    .business-directory-container .business-description,
    .business-directory-container .bd-description,
    .business-description,
    .bd-description {
        /* Typography */
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #4b5563 !important;
        font-weight: 400 !important;
        
        /* Layout */
        display: block !important;
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        
        /* Text handling */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
        white-space: normal !important;
        text-align: left !important;
        
        /* Override line clamping and truncation */
        overflow: visible !important;
        text-overflow: unset !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        max-height: none !important;
        min-height: auto !important;
        position: static !important;
        
        /* Remove any pseudo-elements */
        -webkit-box: unset !important;
        box: unset !important;
    }
    
    /* Remove pseudo-elements that might be adding ellipsis */
    .business-directory-container .business-description::after,
    .business-directory-container .business-description::before,
    .business-description::after,
    .business-description::before,
    .bd-description::after,
    .bd-description::before {
        display: none !important;
        content: none !important;
    }
    
    /* Ensure card content has proper spacing and alignment */
    .business-directory-container .card-content,
    .business-directory-container .card-content-inner {
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }
    
    /* Mobile business card alignment */
    .business-directory-container .business-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
        width: 100% !important;
        margin: 0 auto !important;
        justify-content: flex-start !important;
    }
    
    /* Mobile content alignment */
    .business-directory-container .business-title,
    .business-directory-container .business-tagline,
    .business-directory-container .business-description {
        text-align: left !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Mobile badges alignment */
    .business-directory-container .business-badges-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    /* Mobile contact info alignment */
    .business-directory-container .contact-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    /* Mobile rating alignment */
    .business-directory-container .rating-section {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .business-directory-container .business-description,
    .business-directory-container .bd-description,
    .business-description,
    .bd-description {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 0 12px 0 !important;
        text-align: left !important;
    }
    
    .business-directory-container .card-content,
    .business-directory-container .card-content-inner {
        padding: 12px !important;
        text-align: left !important;
    }
    
    /* Small mobile alignment */
    .business-directory-container .business-title,
    .business-directory-container .business-tagline {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .business-directory-container .business-badges-container {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}

/* Very small mobile devices */
@media (max-width: 374px) {
    .business-directory-container .business-description,
    .business-directory-container .bd-description,
    .business-description,
    .bd-description {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin: 0 0 10px 0 !important;
        text-align: left !important;
    }
    
    .business-directory-container .card-content,
    .business-directory-container .card-content-inner {
        padding: 10px !important;
        text-align: left !important;
    }
    
    /* Extra small mobile alignment */
    .business-directory-container .business-title,
    .business-directory-container .business-tagline {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .business-directory-container .business-badges-container {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .business-directory-container .contact-item,
    .business-directory-container .rating-section {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}