/* Mobile images and layout safety fixes (scoped) */

/* Do not alter desktop */
@media (max-width: 768px) {
  /* Universal box-sizing to avoid width math overflow */
  *, *::before, *::after { box-sizing: border-box; }

  /* Prevent horizontal scroll by default on mobile */
  html, body { overflow-x: hidden; }

  /* Make media responsive */
  img, video, svg, canvas { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }

  /* Links and buttons should wrap instead of overflowing */
  a, button { white-space: normal; }

  /* Containers should not exceed viewport */
  .container { max-width: 100% !important; }

  /* Safety for elements that commonly overflow */
  .section-title,
  .card-title,
  .card-description,
  .password-notice { word-wrap: break-word; overflow-wrap: anywhere; }

  /* Ensure carousels/clipped areas don't leak width */
  .carousel-wrapper, .avatars-carousel { overflow: hidden; }

  /* Avoid 100vw pitfalls on mobile (scrollbar compensation) */
  .full-bleed, .fullwidth, [data-fullwidth="true"] { width: 100%; max-width: 100%; }

  /* Header safety spacing so fixed items don’t clash */
  body { padding-top: env(safe-area-inset-top, 0); }
}