/* Mobile polish, targeting narrow phones (iPhone SE and similar, ~375px wide) */

@media (max-width: 991px) {

  /* Homepage service icon boxes ("INTERIOR/EXTERIOR" etc. under the
     slider): the theme applies a blanket -20px margin to every
     .vc_row to offset the standard 20px column padding, but this row
     is nested one level deeper, inside a .vc_column-inner that only
     has 15px of padding. Below 991px the row leaves absolute
     positioning and joins normal document flow, and the leftover
     5px of margin pushes it off the left (and right) edge of the
     screen, clipping the icons. Match the margin to what this
     nested row actually sits inside. */
  .icon-box-slider {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }

  /* Homepage's "Timaru's #1 Choice..." section: the theme's own rule
     (.hidden-sm-bg[class*="vc_custom_"]{background-image:none}) was
     meant to hide this row's background photo below 991px, keeping
     the heading readable on a plain background. It silently stopped
     matching when the WPBakery class rename gave this row's
     background a semantic name (bg-portrait) instead of the old
     vc_custom_* one the selector depended on. Restore the original
     intent directly. */
  .hidden-sm-bg.bg-portrait {
    background-image: none !important;
  }

}

@media (max-width: 480px) {

  /* Testimonial photos: the WordPress "align left" float leaves only a
     narrow ribbon of text wrapping alongside a small photo on narrow
     screens. Stack the photo above the text instead. */
  .wp-caption.alignleft,
  .wp-caption.alignright {
    float: none;
    width: auto !important;
    margin-left: 0;
    margin-right: 0;
  }

}