/*
 * Responsive fixes layered over the Divi export.
 * Linked last in <head> on every page so these win over the exported styles.
 */

/* Service flip-box cards are capped at 300px but left-aligned in their
   column once the grid collapses; centre them on tablet and phone. */
@media only screen and (max-width: 980px) {
  .dsm_flipbox {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Home hero: Divi positions the text row with left:-186px plus a
   translateX that pushes it off the left edge on tablets. Reset it so the
   copy lines up with the rest of the page and stays clear of the heart. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .home .et_pb_section_0 > .et_pb_row_0.et_pb_row {
    left: 0 !important;
    transform: none !important;
    padding-left: 0 !important;
  }
  .home .et_pb_section_0 > .et_pb_row_0 > .et_pb_column {
    max-width: 60%;
  }
}

/* Small laptops / landscape tablets: the hero copy runs over the heart
   photo. Fade the left of the image so the text stays readable. */
@media only screen and (min-width: 981px) and (max-width: 1279px) {
  body.home div.et_pb_section.et_pb_section_0 {
    background-image:
      linear-gradient(90deg, rgba(232, 226, 220, 0.92) 0%, rgba(232, 226, 220, 0.75) 45%, rgba(232, 226, 220, 0) 75%),
      url(../images/slider2.jpg) !important;
  }
  .home .et_pb_section_0 > .et_pb_row_0 > .et_pb_column {
    max-width: 540px;
  }
}

/* Contact page: 50px card padding leaves ~240px for the form on phones and
   breaks the email address mid-word. */
@media only screen and (max-width: 767px) {
  .page-id-38 .et_pb_row_1.et_pb_row {
    padding: 30px 20px !important;
  }
}

/* Patient feedback page: a page-level `img { width:400px; padding:50px 0 }`
   rule (meant for the thumbs icons) also hits the header and footer logos,
   doubling the header height. Keep it off the site chrome, and let the
   icons shrink on small screens. */
.page-id-596 .et-l--header img,
.page-id-596 .et-l--footer img {
  width: auto;
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  /* "experience!" is wider than a 320px screen at the exported size. */
  .page-id-596 .et_pb_heading_0 .et_pb_heading_container h1 {
    font-size: clamp(32px, 11vw, 48px) !important;
  }
  .page-id-596 #main-content img {
    max-width: 70%;
    height: auto;
    padding: 30px 0;
  }
}