/*
 * transporter.bg - phone width fixes for what still stuck out of the screen at 360 px on 24.10.2026:
 * the cost tables on the route pages, the inline grids on the success stories, the classic car guide
 * layout and the "why us" page. Loaded after style.css from layouts/app_new.blade.php.
 * Author: TEDBG, https://tedbg.com
 */

/* Tables inside their wrapper scroll sideways instead of being cut off. */
.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > table {
    display: table;
    width: 100%;
    min-width: 0;
    max-width: none;
}

@media (max-width: 900px) {
    /* grid tracks must be allowed to shrink below the content width */
    .classic-guide-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .classic-guide-sidebar,
    .classic-guide-main,
    .classic-guide-toc {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    .classic-guide-main img,
    .classic-guide-main iframe,
    .classic-guide-main table {
        max-width: 100%;
        height: auto;
    }

    /* the KPI row ("5 000+ clients", "4.9/5", "80%") wraps instead of pushing out */
    .kpis {
        flex-wrap: wrap !important;
        justify-content: center;
    }

    /* the four story cards on /company/why-us */
    .cms-page-content .stories {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .cms-page-content .stories {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* grids written inline in the page HTML (the success stories): one column on a phone */
    [style*="grid-template-columns: repeat("] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    [style*="grid-template-columns"] > * {
        min-width: 0;
        max-width: 100%;
    }
}