/* Manual QA fixes - tablet-vertical breakpoint (768-980px), the range Divi's own generated
   CSS calls "Tablet" and never gave these modules a width override for. Desktop and phone are
   untouched: phone has its own, later, more specific rule that still wins below 768px. */
@media only screen and (min-width:768px) and (max-width:980px) {

  /* home.html: the about-section photo (home-about.jpeg) stays at its fixed intrinsic pixel
     width on tablet instead of filling its column. */
  body.page-id-8 .et_pb_image_1 .et_pb_image_wrap img {
    width: 100% !important;
    height: auto !important;
  }

  /* index.html (the actual home page): the hero fills 100vh regardless of how short its
     text content is, leaving a wall of empty space above/below it on tablet. */
  body.page-id-442 .hero-section {
    height: 60vh !important;
  }

  /* index.html: same about-section photo as home.html, but its own Divi module (et_pb_image_0,
     not _1) - fixed intrinsic width instead of filling its column. Scoped to this page since
     et_pb_image_0 is a generic, auto-numbered class Divi reuses with unrelated images on other
     pages (about-dr-amaambo, patient-feedback). */
  body.page-id-442 .et_pb_image_0 .et_pb_image_wrap img {
    width: 100vw !important;
  }

  /* Service pages (shared Theme Builder body template: endoscopy, laparoscopy,
     surgical-oncology, surgical-emergencies, trauma-surgery) - two text blurbs pinned to 73%
     width regardless of viewport. */
  .et_pb_blurb_3_tb_body.et_pb_blurb,
  .et_pb_blurb_5_tb_body.et_pb_blurb {
    width: 100% !important;
  }

  /* Same shared service-page template - the title image, same fixed-width-on-tablet issue. */
  .et_pb_image_0_tb_body .et_pb_image_wrap img {
    width: 100% !important;
    height: auto !important;
  }
}