/* Hero Carousel - Fixed aspect ratio to prevent CLS */
._herocarousel-container {
  aspect-ratio: 16 / 9;
  max-height: 800px;
  overflow: hidden;
}

._herocarousel-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  ._herocarousel-container {
    aspect-ratio: 16 / 10;
  }
}

/* --- GLOBAL RESPONSIVE FIXES --- */

/* 1. Prevent Horizontal Overflow */
/* Applied only to body to prevent full page horizontal scroll */
body {
  overflow-x: hidden;
  width: 100%;
}

/* 2. Media Responsiveness */
/* Ensure images don't overflow their containers, but preserve existing display/layout behaviors */
img, video, iframe, embed, object {
  max-width: 100%;
}

/* 3. Typography Overflow Protection */
/* Break long words to prevent overflow */
p, h1, h2, h3, h4, h5, h6, li, blockquote {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 4. Table Responsiveness */
/* Allow tables to scroll horizontally if needed */
table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}