/* mobile-x-v1 (2026-11-11): stop the blog (/news/) sliding sideways on phones.
 * Linked from includes/navbar.php for /news/ pages only. Kept outside /assets/ because files added there are reset by the deploy.
 * Root causes: wide tables and long unbroken words/URLs in article bodies pushed the page past the viewport,
 * and body{overflow-x:hidden} alone does not stop iOS Safari panning sideways.
 * clip (not hidden) on html+body: no scroll container is created, so the sticky navbar keeps working. */
html, body { max-width: 100%; overflow-x: clip; }
.article-outer, .blog-grid { min-width: 0; }
.article-col, .blog-card, .blog-card-body, .article-body > * { min-width: 0; max-width: 100%; }
.article-body, .article-title, .article-breadcrumb, .blog-card h3 { overflow-wrap: break-word; }
.article-body a { overflow-wrap: anywhere; }
.article-body img, .article-body video, .article-body iframe, .article-body figure { max-width: 100%; }
.article-body [data-grid] > * { min-width: 0; }
@media (max-width: 900px) {
  .article-outer { grid-template-columns: minmax(0, 1fr); }
  .article-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-body th, .article-body td { white-space: nowrap; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-enquiry-form .form-field { min-width: 0; }
}