/* Step 5 — Responsive layout hardening */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

img {
  height: auto;
}

table {
  max-width: 100%;
}

pre, code {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 1023px) {
  body {
    min-width: 0;
  }

  main, header, footer, section, article, aside, nav {
    min-width: 0;
  }

  /* Keep long content inside the viewport on smaller screens. */
  .mx-auto {
    max-width: 100%;
  }

  /* Prevent decorative/absolute elements from creating horizontal overflow. */
  [class*="absolute"] {
    max-width: 100%;
  }

  /* Mobile menu panels and dropdowns should never exceed the viewport. */
  [role="menu"],
  [data-mobile-menu],
  .mobile-menu {
    max-width: 100vw;
  }
}

@media (max-width: 767px) {
  /* Comfortable page gutters on phones without changing the desktop design. */
  main section > .mx-auto,
  main section > div > .mx-auto {
    width: 100%;
    max-width: 100%;
  }

  /* Avoid large fixed-height media blocks on very narrow screens. */
  .h-\[31rem\] {
    height: min(31rem, 78vh);
    min-height: 24rem;
  }

  /* Long labels/URLs should wrap instead of widening the page. */
  p, h1, h2, h3, h4, h5, h6, a, button, li {
    overflow-wrap: anywhere;
  }

  /* Preserve intentional horizontal scrolling for data/code containers. */
  .overflow-x-auto {
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: keep content comfortably inside the viewport. */
  .px-8 {
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
  }
}

/* Never let a full-width media/card child force its parent wider. */
.w-full, .max-w-full {
  min-width: 0;
}