/* CLS Fix - Prevent Cumulative Layout Shift from images loading */

/* === HERO BANNER === */
/* Desktop banner (1920x307) - visible on lg/xl/md */
.mgz-element-single_image.superbanner.mgz-hidden-sm.mgz-hidden-xs .mgz-single-image-wrapper {
  aspect-ratio: 1920 / 307;
  width: 100%;
  overflow: hidden;
}
.mgz-element-single_image.superbanner.mgz-hidden-sm.mgz-hidden-xs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile banner (1920x605) - visible on xs/sm */
.mgz-element-single_image.superbanner.mgz-hidden-xl.mgz-hidden-lg.mgz-hidden-md .mgz-single-image-wrapper {
  aspect-ratio: 1920 / 605;
  width: 100%;
  overflow: hidden;
}
.mgz-element-single_image.superbanner.mgz-hidden-xl.mgz-hidden-lg.mgz-hidden-md img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === CATEGORY CARD IMAGES (1350x500) === */
/* These are the main content images in mgz-element-single_image blocks (not the superbanner) */
.mgz-element-single_image:not(.superbanner) .mgz-single-image-wrapper {
  aspect-ratio: 27 / 10;
  width: 100%;
  overflow: hidden;
}
.mgz-element-single_image:not(.superbanner) .mgz-single-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === LOGO === */
.logo img {
  width: 200px;
  height: 37px;
}

/* === GENERAL: Prevent image-content overlay from causing shifts === */
.mgz-single-image-inner {
  position: relative;
  line-height: 0;
}
.mgz-single-image-inner .image-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

/* === HEADER === */
/* Reserve header height to prevent shift when nav/fonts load */
.header-container.page-header {
  min-height: 120px;
}
@media (max-width: 767px) {
  .header-container.page-header {
    min-height: 100px;
  }
}