/* ---------------------------------------------------------------------------
   Split — 50/50 image + text row.

   Not a port; the numbers are measured off the live Elementor CSS
   (post-103326.css #fc38bf9/#5c17e44/#3df2c36, post-103481.css #8d64d76).
   `image_side` swaps the order with `flex-direction: row-reverse`, so the DOM
   order is always image-then-text and the reading order stays sane.
   --------------------------------------------------------------------------- */

.mp-split {
  background: #fff;
  color: var(--mp-ink-heading);
}

.mp-split__inner {
  min-height: var(--mp-split-minh, 0px);   /* only where live pins one */
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--mp-wide);
  /* (a second `min-height: 80vh` here overrode --mp-split-minh, forcing
     about-us "Customer Satisfaction" (min_height 50vh) to 80vh) */
  margin-inline: auto;
  padding-inline: var(--mp-gutter);
}

.mp-split--image-right .mp-split__inner { flex-direction: row-reverse; }

.mp-split__media,
.mp-split__body { flex: 1 1 50%; min-width: 0; padding: 40px 30px; }

.mp-split__img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.mp-split__title {
  margin: 0 0 18px;
  font-family: var(--mp-font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--mp-ink-heading);
}

.mp-split__text {
  font-family: var(--mp-font-ui);
  font-size: 17px;
  line-height: var(--mp-lh-body);
  color: var(--mp-ink-heading);
}
.mp-split__text a { color: var(--mp-blue-ui); text-decoration: underline; text-underline-offset: 3px; }

.mp-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-gap);
  margin-top: 28px;
}

@media (max-width: 1024px) {
  .mp-split__title { font-size: 50px; }
}

@media (max-width: 767px) {
  .mp-split__inner,
  .mp-split--image-right .mp-split__inner { flex-direction: column; min-height: 0; }
  .mp-split__inner { padding-block: var(--mp-section-y); }
  .mp-split__media,
  .mp-split__body { flex: 1 1 auto; width: 100%; padding: 10px 0; text-align: center; }
  .mp-split__title { font-size: 30px; line-height: 1.2; }
  .mp-split__text { font-size: 16px; }
  .mp-split__actions { justify-content: center; }
}

/* Portrait images are side rails on live, not full-width pictures: measured
   250x518 on /job-openings/. Cap by height so the aspect ratio decides the
   width, exactly as a fixed-height Elementor column does. */
.mp-split__media--portrait { display: flex; justify-content: center; }
.mp-split__media--portrait img {
  width: auto;
  max-width: 100%;
  max-height: 518px;
  object-fit: contain;
}

/* Split geometry from live: a 1600px boxed container with 10px padding and 10px
   column padding, so each half is 690-710px at x 10-20 / 720-730 (staging was
   640px at x 50 / 750), and the copy is #000. */
@media (min-width: 768px) {
  .mp-split__inner { max-width: 1600px; padding-inline: 10px; }
  .mp-split__media,
  .mp-split__body { padding: 10px; }
}
.mp-split__title,
.mp-split__text { color: #000; }

/* Split heading->copy rhythm: live headings have _margin 0 and the text-editor
   copy takes the kit's 24px line box with Hello's .9rem paragraph gap, so the
   gap under a heading is the leading <p>&nbsp;</p> alone (38.4px, not 60). */
.mp-split__title { margin-bottom: 0; }
.mp-split__text { line-height: 24px; }
.mp-split__text p { margin: 0 0 14.4px; }
@media (max-width: 1024px) { .mp-split__text { line-height: 22.5px; } }
@media (max-width: 767px) { .mp-split__text { line-height: 21px; } }

/* live text-editors pulled up under their heading by a negative top margin */
.mp-split__text { margin-top: var(--mp-split-bodymt, 0px); }

/* Phones, as on live: the columns stack in their Elementor order, so a split
   with the image on the right shows its copy first; 10px container gutters;
   the heading centred, the copy left-aligned. */
@media (max-width: 767px) {
  .mp-split--image-right .mp-split__inner { flex-direction: column-reverse; }
  .mp-split__inner { padding: 10px; }   /* the container's own 10px, not the theme's 58px section rhythm */
  .mp-split__media { padding: 10px 0; }
  .mp-split__body { padding: 10px; text-align: left; }
  .mp-split__title { text-align: center; }
}

/* a mobile-only image in the copy column (about-us 'Our Approach') sits above
   the heading on phones */
@media (max-width: 767px) {
  .mp-split--image-right.mp-split--img-first-m .mp-split__inner { flex-direction: column; }
}