/*
 * CLS (Cumulative Layout Shift) fixes.
 * Reserves space for images before they load to prevent content pop-in.
 * Uses aspect-ratio as a fallback for images that can't rely solely on
 * width/height HTML attributes (e.g. those with CSS height: 100%).
 */

/* Sticky nav needs an explicit z-index to stay above hero images */
.w-nav {
  z-index: 100;
}

/* Hero sections already have position:relative — give them a stacking
   context so absolutely-positioned children (cover images) can't escape
   and paint over the nav. */
.section.hero {
  z-index: 1;
}

/* Homepage big feature screenshots */
.image-23,
.image-24,
.image-25 {
  width: 100%;
  height: auto;
}

/* Back-office hero dashboard — parent has no explicit height so
   the existing CSS height: 100% resolves to auto; add aspect-ratio
   so the browser reserves vertical space before the image loads. */
.image-cover.negativetop {
  aspect-ratio: 4 / 3;
}

/* Mobile-app bento grid images — flex parents don't give these
   a height basis, so height: 100% collapses pre-load. */
.bento-image-horizontal {
  aspect-ratio: 908 / 834;
}

.bento-image-horizontal.left {
  aspect-ratio: 1284 / 1099;
}

.bento-card-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1284 / 1059;
}

/* Back-office inventory screenshot (no class, inside .certificate) */
.certificate img {
  width: 100%;
  height: auto;
}

/* Back-office card images — parent .card-image already has aspect-ratio
   but the img itself has height:100% which can flash to 0 pre-load */
.card-image > .image-cover-5 {
  aspect-ratio: 3.32 / 2.4;
}