/* ==========================================================
   SKP ENTRY-CONTENT TABLE RESPONSIVE
   Sitewide fix for mobile horizontal overflow caused by wide
   <table> elements inside post/page body copy. Affects 3
   confirmed pages flagged in audits:
     - /pvc-tarpaulin-thickness-guide-finding-the-perfect-match/  (1150)
     - /pvc-vs-pe-tarpaulin/                                       (2074)
     - /industrial-curtain-track-systems/                          (2177)
   …plus any other .entry-content table that exceeds the
   viewport. Below 769px, the table becomes a horizontal-scroll
   container so the rest of the page no longer overflows.
   Desktop (>=769px) renders unchanged.
   ========================================================== */

@media (max-width: 768px) {
    .entry-content table,
    .post-content table,
    .single .entry-content table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        margin-left: 0;
        margin-right: 0;
    }
    /* Ensure cells don't try to wrap and collapse the layout —
       keep table's natural width but allow horizontal scroll
       within the table container. */
    .entry-content table thead,
    .entry-content table tbody {
        display: table;
        width: max-content;
        min-width: 100%;
        table-layout: auto;
    }
    .entry-content table tr {
        display: table-row;
    }
    .entry-content table th,
    .entry-content table td {
        display: table-cell;
        white-space: normal;
        word-break: normal;
    }
    /* Subtle visual cue that the table can scroll */
    .entry-content table {
        position: relative;
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%) right center,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) right center;
        background-repeat: no-repeat;
        background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* Resource page tables are already handled by skp-resource-pages.css
   (label/value stack at <=768px). Don't double-treat. */
@media (max-width: 768px) {
    .skp-resource-page .entry-content table,
    .skp-resource-page table {
        display: block; /* let resource page CSS take over */
        background: none;
    }
}