/* ===== Responsive Images & Media (Mobile-first) ===== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Universal: images never overflow the container */
img, svg, video, canvas { 
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure figures don't add unexpected margins on mobile */
figure { margin: 0; }

/* Containers & paddings that help images breathe on small screens */
.container, .wrap, .section, main, article {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 24px);
}

/* Common hero/banner classes fallback */
.hero img, .banner img, .cover img, .header img {
  width: 100%;
  height: auto;
}

/* If hero images must maintain a cinematic crop on small screens */
@media (max-width: 640px) {
  .hero img, .banner img, .cover img {
    /* keep a nice aspect ratio on phones, without stretching */
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* Prevent layout shift: reserve space if width/height attributes exist */
img[width][height] {
  height: auto;
}

/* Reset inline widths coming from editors/builders that fix pixels */
img[style*="width"], img[style*="height"] {
  height: auto !important;
  max-width: 100% !important;
}

/* Picture element and background helpers */
.picture, .image, .img, .media { display: block; max-width: 100%; }
.bg-cover { background-size: cover; background-position: center; }

/* Tables/iframes can still cause overflow—contain them */
iframe, table { max-width: 100%; }