/* Perf P4/P6 — responsive <picture> images with intrinsic width/height.
 *
 * The <img> tags rendered through app/common/ResponsiveImage.js now carry the
 * intrinsic width/height of the full-size image so the browser can reserve the
 * box before the bytes arrive (CLS). The global `img { max-width: 100% }` rule
 * would otherwise squash the width while honouring the height attribute, so
 * these rules keep every such image fluid: width from the layout, height from
 * the aspect ratio. Fixed-height, object-fit: cover slots keep their height.
 *
 * Must be linked from public/index.html AFTER style-new.css / responsive-new.css.
 */

.SAweb_updateUi img.saImgFluid {
  height: auto;
}

/* City-page hero: an 85vh box filled with object-fit: cover — keep the height. */
.SAweb_updateUi .singleBannerSA img.saImgFluid {
  height: 100%;
}

/* Homepage slots whose stylesheet only set width: 100%. */
.SAweb_updateUi .SAweb_expDrive .box .image img,
.SAweb_updateUi .SAweb_makeBest .boxTails .item img,
.SAweb_updateUi .SAweb_featureProperty .imageBox .item img {
  height: auto;
}

/* iPhone mockup in "Stay connected": replaces the old width="90%" attribute. */
.SAweb_updateUi img.saImgMockup {
  width: 90%;
  height: auto;
}

/* The government-housing city grid: 3 columns of fixed-height, cover-fitted
   tiles; the width attribute must not size the tile. */
.SAweb_updateUi .SAweb_ghousingLocations .tailsBox .pic img {
  width: 100%;
}

/* ---- a11y follow-ups (P10/P11, 2026-09-14) -------------------------------- */
/* The side-quote/menu close controls were <a onClick> (not crawlable, no name);
   they are <button class="dismissBtn"> now — keep the anchor's look. */
.SAweb_updateUi #dismiss .dismissBtn,
#dismiss .dismissBtn {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
/* react-slick's dots container is now a <ul> (list semantics); reset the UA list styling
   and let the "Other cities" link sit in its own <li> like the dots. */
.SAweb_updateUi ul.slick-dots.custom-dots-wrapper,
ul.custom-dots-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}
.SAweb_updateUi .slick-dots li.custom-dots-cta {
  width: auto;
  height: auto;
}
/* statBox headings were h5 (skipped from h3); now h4 with the same look */
.SAweb_chInfo .statBox h3.statTitle {
  font-size: 1.34rem;
  font-weight: 800;
  color: var(--blackColor);
}