/* ==========================================================================
   Mobile / responsive fixes.
   Kept in a separate file (and version-bumped in index.html) so production
   IIS static-compression caching of app.css doesn't serve stale CSS.
   Loaded AFTER app.css, so rules here intentionally override it.
   ========================================================================== */

/* Prevent any element from causing horizontal scroll on small screens. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Coin description holds raw eBay/Auctiva HTML with fixed-width widgets/tables.
   Keep it scrollable inside its own box and scale media down. */
.coin-description {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: break-word;
    word-break: break-word;
}
.coin-description img,
.coin-description table,
.coin-description iframe,
.coin-description video,
.coin-description embed {
    max-width: 100% !important;
    height: auto;
}

@media (max-width: 600px) {
    /* The hero uses a negative-margin full-bleed (inline style on Home.razor)
       that over-extends past the viewport on phones, causing horizontal scroll.
       Neutralize the side margins here. */
    .hero-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Scale oversized hero heading so it fits narrow widths. */
    .hero-text-block .mud-typography-h3 {
        font-size: 1.9rem !important;
    }
}