/* ============================================================================
   mobile-fixes.css — phone / tablet layout safety net for the whole site.
   Loaded LAST on every page (from includes/footer.php) so it can correct the
   per-page styles. Each block below fixes one measured cause of a real defect;
   nothing here changes the desktop layout (everything sits in a media query,
   except the overflow guard, which only matters when something is too wide).
   ========================================================================== */

/* 1. Never scroll sideways. `clip` (not `hidden`) so position:sticky headers and
      anchored sidebars keep working. Pages that already set hidden are unaffected. */
html, body { max-width: 100%; }
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

/* 2. AOS "slide in from the side" animations start 100px off-screen. Elements
      near the page bottom (e.g. the blog sidebar / table of contents) therefore
      made the whole page 80px wider than the phone until scrolled into view.
      On narrow screens enter from below instead. */
@media (max-width: 991.98px) {
    [data-aos^="fade-left"]:not(.aos-animate),
    [data-aos^="fade-right"]:not(.aos-animate),
    [data-aos^="fade-up-left"]:not(.aos-animate),
    [data-aos^="fade-up-right"]:not(.aos-animate),
    [data-aos^="fade-down-left"]:not(.aos-animate),
    [data-aos^="fade-down-right"]:not(.aos-animate),
    [data-aos^="slide-left"]:not(.aos-animate),
    [data-aos^="slide-right"]:not(.aos-animate),
    [data-aos^="zoom-in-left"]:not(.aos-animate),
    [data-aos^="zoom-in-right"]:not(.aos-animate),
    [data-aos^="zoom-out-left"]:not(.aos-animate),
    [data-aos^="zoom-out-right"]:not(.aos-animate) {
        transform: translate3d(0, 24px, 0) !important;
    }
}

/* 3. Footer: a bare `1fr` grid column cannot shrink below its content, so the
      branding column (social icons + seals) forced the footer wider than a
      320px phone. minmax(0,1fr) lets it shrink; icons wrap instead. */
@media (max-width: 991.98px) {
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .footer-top { grid-template-columns: minmax(0, 1fr); }
    .footer-branding, .footer-column { min-width: 0; }
    .footer-social { flex-wrap: wrap; }
}

/* 4. Bootstrap .g-5 / .gx-5 gutters (3rem) are wider than the 12px container
      padding, so the row hangs 12px outside the screen on phones. */
@media (max-width: 991.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* 5. Card grids declared with a hard 210–320px minimum column overflow phones
      narrower than ~360px. One column on small phones instead. */
@media (max-width: 480px) {
    .sitemap-grid, .services-grid, .industries-grid, .feature-grid,
    .ais-grid, .cap-grid, .analytics-cards, .expertise-grid,
    .rel-services-grid, .elbetron-pillars {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .expertise-card { padding: 26px; }
}

/* 6. Big statistic values: words like "Self-hosted" at 3.2rem were cut off at
      the card edge on phones. Scale with the screen and allow a safe break. */
@media (max-width: 575.98px) {
    .stats-section .stat-number { font-size: clamp(2rem, 9vw, 3.2rem); overflow-wrap: anywhere; }
}

/* 7. Long unbreakable strings (e-mail addresses) pushed contact cards wider. */
a[href^="mailto:"], .js-email-link { overflow-wrap: anywhere; }

/* 8. Media can never be wider than its column. */
img.img-fluid, .post-main img, .post-body img, figure img {
    max-width: 100%;
}
/* Technology logos carry a 15px margin on each side on top of width:100%, so the
   row of logos spilled ~30px past its column. Leave room for the margins. */
img.tech-logo {
    max-width: calc(100% - 30px);
    object-fit: contain;
}