/* MotifyMe mobile-overflow fixes — site-wide */
/* Apply at narrow viewports so content stacks vertically and never overflows horizontally. */

@media (max-width: 720px) {
    /* Force any multi-column inline-styled grid to single column at mobile */
    .steps-grid,
    .asset-grid,
    .faq-grid,
    .vehicle-grid,
    .finance-panels,
    .faq-bento,
    .features-grid,
    .stats-grid,
    .stations-grid,
    .partner-grid,
    .partners-grid,
    .pricing-grid,
    .plans-grid,
    .guides-grid,
    .news-grid,
    .press-grid,
    .legal-grid,
    .contact-grid,
    .affiliate-grid,
    .business-grid,
    .hiw-grid,
    .testimonial-grid,
    .index-grid,
    .index-cards,
    .home-grid,
    [class*="-grid"],
    [class*="grid-"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    /* Two-column variants that look fine at 2-wide */
    .testimonial-bento,
    .logo-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Prevent any element from overflowing horizontally */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Common container patterns - constrain to viewport */
    .wrap, .container, .section, .panel-body, .hero, .panel {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Cap images and iframes */
    img, iframe, video, embed, object {
        max-width: 100% !important;
        height: auto;
    }

    /* Tables convert to block scroll on mobile */
    table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    /* Prevent text from breaking layout */
    h1, h2, h3, h4, p, span, a, li {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Touch targets minimum 44px */
    button, .btn, a.button, input[type="submit"], input[type="button"] {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    /* Even narrower fallback — collapse the 2-wide testimonial variants too */
    .testimonial-bento,
    .logo-row {
        grid-template-columns: 1fr !important;
    }

    /* Reduce padding on very narrow screens */
    .wrap, .container, .section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Stop large headings overflowing */
    h1 {
        font-size: clamp(1.6rem, 8vw, 2.4rem) !important;
        line-height: 1.15 !important;
    }
    h2 {
        font-size: clamp(1.3rem, 6vw, 2rem) !important;
        line-height: 1.2 !important;
    }
}