/* =====================================================================
   Responsive fixes for A Square Diagnostics
   Loaded after laboix.css so these rules win on equal specificity.
   Purpose: remove horizontal overflow on phones, make media/tables
   fluid, and tidy small-screen spacing without altering the design.
   ===================================================================== */

/* ---- 1. Prevent accidental horizontal scrolling on small screens ---- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---- 2. Fluid media: images, video, iframes never overflow ---- */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

img {
  height: auto;
}

/* Keep absolutely-positioned decorative shapes/images from causing overflow */
[class*="shape"] img,
.item1 .img {
  max-width: 100%;
}

/* ---- 3. Service category grid (home page) ---- */
.category {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr));
}

/* ---- 4. Data tables ---- */
/* Between the card breakpoint (500px) and tablets, let wide tables scroll
   horizontally instead of breaking the page layout. */
@media (min-width: 501px) and (max-width: 991px) {
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* On very small phones tighten the stacked-card padding a touch */
@media (max-width: 500px) {
  .table td {
    padding: 10px 10px 10px 42%;
    font-size: 14px;
  }
}

/* ---- 5. General small-screen spacing / typography polish ---- */
@media (max-width: 575px) {
  .item1 .title {
    font-size: 20px;
    line-height: 26px;
  }

  /* Stop long unbroken strings (emails, URLs) from overflowing */
  p,
  a,
  li,
  td,
  th,
  span {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ---- 6. Make embedded Google Maps / iframes responsive ---- */
iframe[src*="google.com/maps"],
iframe[src*="youtube"] {
  width: 100%;
}