/*
 * Site-specific responsive fixes, loaded after mbr-additional.css on every page.
 * mbr-additional.css is generated by Mobirise, so fixes live here instead of in it.
 * Each rule targets an element that made a page scroll sideways on phones or tablets.
 */

/* Images carry width/height attributes so the browser reserves their space before they
   load (no layout shift). Those attributes must not fix the rendered height: where CSS
   or a parent narrows an image, its height follows the aspect ratio. :where() gives this
   rule zero specificity, so any existing sizing rule still wins over it. */
:where(img[width][height]) {
  height: auto;
}

/* Home page parallax hero: WebP version of cleanlake-800x576.png (266 KB -> 176 KB).
   jarallax reads the computed background-image, so overriding it here is enough. */
.cid-qTkA127IK8 {
  background-image: url("../images/cleanlake-800x576.webp");
}

/* AboutCleanPondsRiversandLake: the CSRL logo slide forces the image to 320px tall at
   its natural width (~640px), wider than a phone. Fit it to the column instead. */
.cid-ryA4JKLMQd .image_wrapper {
  height: auto;
  max-height: 320px;
}
.cid-ryA4JKLMQd .image_wrapper img {
  max-width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
}
.cid-ryA4JKLMQd .content-slider > div {
  max-width: 100%;
}

/* Aquaritin: the 602px logo in the custom HTML block had no size limit. */
#custom-html-3p img {
  max-width: 100%;
  height: auto;
}

/* ViewOurPastWaterTreatmentJobsChallenges: the text column is a flex item, so it would
   not shrink below its longest word and pushed past the screen edge. */
.aside-content {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Specials: WOW Slider parks the next/previous slides and the caption just off-screen
   to the right; clip them to the slider. */
.mbr-wowslider-container {
  overflow: hidden;
}