/* ==========================================================================
   1. GLOBAL RESPONSIVE FIXES (Math Formulas, Code, & Images)
   ========================================================================== */

/* Automatically scale down mathematical diagrams on mobile phone screens */
.entry-content img, 
.wp-block-image img,
.post-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Allow horizontal finger-swiping inside programming snippets */
.entry-content pre, 
.entry-content code,
.wp-block-code pre,
.wp-block-preformatted pre {
    white-space: pre !important;
    overflow-x: auto !important;
    word-wrap: normal !important;
}

/* Prevent mathematical equations from breaking past mobile viewports */
.mjx-chtml, 
.katex-display, 
.mathjax,
.math-block {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 12px 0 !important;
    display: block !important;
    width: 100% !important;
}


/* ==========================================================================
   2. FINAL UNFILTERED TABLE TO MOBILE CARD CONVERSION
   ========================================================================== */

@media screen and (max-width: 768px) {
    
    /* Force the grid system to stack vertically as a clean list */
    .entry-content table, 
    .entry-content tbody, 
    .entry-content tr,
    .entry-content td,
    .wp-block-table table,
    .wp-block-table tbody,
    .wp-block-table tr,
    .wp-block-table td { 
        display: block !important; 
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Completely hide the horizontal desktop table header row */
    .entry-content thead,
    .wp-block-table thead,
    table tr:first-child { 
        display: none !important;
    }
    
    /* Format every row as a standalone visual card */
    .entry-content tr,
    .wp-block-table tr { 
        border: 1px solid #e2e8f0 !important;
        margin-bottom: 25px !important;
        padding: 14px 16px !important;
        background-color: #f8fafc !important; /* Soft premium slate backdrop */
        border-radius: 8px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    }
    
    /* Indent the right side text to clear space for our bold left side labels */
    .entry-content td,
    .wp-block-table td { 
        border: none !important;
        border-bottom: 1px dashed #e2e8f0 !important;
        position: relative !important;
        padding: 12px 10px 12px 52% !important; 
        text-align: left !important; 
        font-size: 14px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        height: auto !important;
        min-height: 40px !important;
    }
    
    /* Remove the bottom dashed border on the card's very last item */
    .entry-content td:last-child,
    .wp-block-table td:last-child {
        border-bottom: none !important;
    }

    /* Shared style rules for the injected column headers */
    .entry-content td::before,
    .wp-block-table td::before { 
        position: absolute;
        left: 12px;
        top: 12px;
        width: 46%; 
        font-weight: bold !important;
        color: #475569 !important; 
        text-transform: uppercase;
        font-size: 9.5px; 
        letter-spacing: 0.5px;
        white-space: normal !important; 
        line-height: 1.3 !important;
    }

    /* ==========================================================================
       3. DIRECT MATRIX COLUMN LABEL INJECTIONS
       ========================================================================== */
    /* Since this is now the only table on the page, these will map flawlessly 
       without any conflict! */
    
    .wp-block-table td:nth-of-type(1)::before, .entry-content td:nth-of-type(1)::before { content: "Problem type/Algorithm:"; }
    .wp-block-table td:nth-of-type(2)::before, .entry-content td:nth-of-type(2)::before { content: "Distance/Similarity measure:"; }
}