/*
 * mobile.css — Phase 2 Mobile Fixes
 * Surrender School Child Theme
 *
 * Scoped to .entry-content to avoid affecting theme chrome.
 * Uses !important where necessary to override inline styles in page content.
 *
 * Fix 1: Multi-column table layouts reflow below 768px
 * Font-size caps previously here (Fix 2 & 3) moved to typography.css
 */

@media (max-width: 767px) {

    /* ── Fix 1: Reflow multi-column table layouts ───────────────────────────
     * Homepage tables use inline width: 50% / 33.3% on <td> elements.
     * Forcing block display stacks columns vertically at mobile width.
     * box-sizing ensures padding doesn't overflow the 100% width. */
    .entry-content table,
    .entry-content tbody,
    .entry-content tr,
    .entry-content td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

}