/* ============================================================
   GLOBAL IMAGE OPTIMISATION RULES
   Apply to all pages via <link rel="stylesheet" href="assets/images.css">
   ============================================================ */

/* 1 — Block display: prevents the 4px inline gap under images */
img { display: block; max-width: 100%; }

/* 2 — Preserve intrinsic ratio: browser uses width/height attrs
   to reserve exact space before the file arrives → zero CLS */
img[width][height] { height: auto; }

/* 2a — Fill-container override: images inside sized wrappers must fill them.
   Undoes height:auto for absolutely-positioned fill patterns.
   [class$="__img"] matches .deep__img, .op-card__img, etc.
   [class$="__imgwrap"] matches .solution-card__imgwrap, etc. */
.img-wrap img[width][height],
.strip img[width][height],
[class$="__img"] img[width][height],
[class$="__imgwrap"] img[width][height],
[class$="__photo"] img[width][height],
[class$="__panel"] img[width][height],
img[class$="__photo"][width][height],
img[class$="__img"][width][height] { height: 100%; }

/* 3 — Lazy placeholder + blur-up effect:
   starts blurred/transparent, sharpens on load via .img--loaded
   (added by assets/blur-up.js when the load event fires) */
img[loading="lazy"] {
  background: #f4f4f4;
  color: transparent;
  filter: blur(10px);
  transform: scale(1.03);
  opacity: 0.6;
  transition: filter 0.5s ease, transform 0.5s ease, opacity 0.4s ease;
  will-change: filter, transform, opacity;
}
img[loading="lazy"].img--loaded {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

/* 4 — Hero / priority images: no placeholder needed */
img[loading="eager"],
img[fetchpriority="high"] {
  background: none;
}

/* ============================================================
   ASPECT-RATIO CONTAINERS
   Wrap any <picture> or <img> to lock the space before load.
   Use one of these on the parent element when height is fluid.
   ============================================================ */

/* Generic wrapper — add aspect-ratio inline or via modifier */
.img-wrap {
  position: relative;
  overflow: hidden;
  background: #f4f4f4;
}
.img-wrap img,
.img-wrap picture,
.img-wrap source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Named ratios used across the portfolio */
.img-wrap--hero   { aspect-ratio: 820 / 446; }   /* case study hero image */
.img-wrap--deep   { aspect-ratio: 616 / 380; }   /* deep-dive section images */
.img-wrap--card   { aspect-ratio: 393 / 220; }   /* solution / short-story cards */
.img-wrap--strip  { aspect-ratio: 1440 / 280; }  /* full-width strip banners */
.img-wrap--wide   { aspect-ratio: 16 / 9; }

/* ============================================================
   PICTURE ELEMENT
   <picture> is inline by default — make it behave like a block
   so it fills its parent correctly.
   ============================================================ */
picture { display: contents; }