/* ===================================
   MOBILE FIX FOR SEARCH CARDS
   FORCE FULL WIDTH ON MOBILE
   ================================ */

/* Target mobile devices specifically */
@media only screen and (max-width: 640px) {
    
    /* Remove all padding from search section */
    #searchSection,
    #searchSection.section,
    #searchSection.content-section {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Search results grid - FORCE SINGLE COLUMN */
    #searchResults,
    .matches-scroll,
    .matches-grid,
    .search-results-area {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Cards - full width SINGLE COLUMN */
    .modern-match-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 500px !important;
        margin: 0 !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
        grid-column: 1 / -1 !important;
    }
    
    /* Card content adjustments */
    .modern-match-content {
        padding: 20px !important;
        gap: 10px !important;
    }
    
    .modern-match-name {
        font-size: 1.4rem !important;
    }
    
    .modern-match-occupation {
        font-size: 0.9rem !important;
    }
    
    .modern-match-stats {
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    
    .modern-match-stat {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }
    
    .modern-connect-btn {
        padding: 14px 24px !important;
        font-size: 1rem !important;
        width: 100% !important;
    }
}

/* Extra small devices - EVEN MORE SPECIFIC */
@media only screen and (max-width: 480px) {
    #searchResults,
    .matches-scroll,
    .matches-grid {
        padding: 10px !important;
        gap: 16px !important;
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    
    .modern-match-card {
        height: 480px !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* Force override any minmax or auto-fill */
@media only screen and (max-width: 768px) {
    #searchResults {
        grid-template-columns: 1fr !important;
    }
}