/* Card grids on /job-openings/. Live lays the job cards 3-up and the service
   cards 2-up inside the 1400px container. */
.mp-cards { padding-block: 32px; }
.mp-cards__head { text-align: center; margin-bottom: 28px; }
.mp-cards__title { margin: 0 0 10px; font-size: 40px; font-weight: 500; line-height: 1.1; }
.mp-cards__intro { margin: 0 auto; max-width: 656px; font-size: 17px; line-height: 1.6; }
.mp-cards__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mp-cards--icon .mp-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-cards__card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border: 1px solid #e7e9f2; border-radius: 8px; background: #fff;
}
.mp-cards__media img { width: 64px; height: 64px; object-fit: contain; display: block; }
.mp-cards__card-title { margin: 0; font-size: 20px; font-weight: 500; }
.mp-cards__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; font-size: 14px; color: #6b7280; }
.mp-cards__body { margin: 0; font-size: 15px; line-height: 1.6; color: #4b5162; }
.mp-cards__action { margin-top: auto; padding-top: 8px; }
@media (max-width: 1024px) { .mp-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .mp-cards__grid, .mp-cards--icon .mp-cards__grid { grid-template-columns: 1fr; }
  .mp-cards__title { font-size: 30px; }
}

/* ---------------------------------------------------------------------------
   Side layout + kit skin: live's /job-openings/ sections.
   Measured off the live capture at 1440px: the section runs full width with
   10px column padding, so the intro column sits at x=10, 700px wide, and the
   job columns start at x=740, 213px each (three 233px columns with 10px
   padding). Service boxes: a 100px circle, the title beside it at x+100, a
   230px description. Bands sit 20-30px apart. Kit type: eyebrow 14px/24px 700
   uppercase 1px #3146CB, H2 37px/1.2 700 -0.5px #292929, job title 16px/1.4
   700, service title 21px/1.3 700, copy 16px/24px #868686. Buttons #3146CB,
   square, 12px/700 uppercase white, 12px 24px, underlined label.
   --------------------------------------------------------------------------- */
.mp-cards.mp-cards--side { padding-block: 0; }
.mp-cards--side .mp-cards__wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  max-width: none;
  padding-inline: 0;
}
.mp-cards--side .mp-cards__head { margin: 0; padding: 10px; text-align: left; }
.mp-cards--side .mp-cards__grid { gap: 0; padding: 0 10px; }
.mp-cards--side.mp-cards--icon .mp-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-cards--side .mp-cards__card {
  display: block;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: none;
}

.mp-cards--kit { font-family: var(--mp-font-kit); }
.mp-cards--kit .mp-cards__eyebrow {
  margin: 0 0 20px;
  font-size: 14px; font-weight: 700; line-height: 24px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--e-global-color-d49ac81, #3146CB);
}
.mp-cards--kit .mp-cards__title {
  margin: 0 0 20px;
  font-family: var(--mp-font-kit);
  font-size: 37px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px;
  color: var(--e-global-color-secondary, #292929);
}
.mp-cards--kit .mp-cards__intro {
  max-width: none; margin: 0;
  font-size: 16px; line-height: 24px;
  color: var(--e-global-color-primary, #767676);
}
.mp-cards--kit .mp-cards__intro p { margin: 0 0 14.4px; }
.mp-cards--kit .mp-cards__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mp-cards--kit .mp-cards__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 24px;
  border-radius: 0;
  background: var(--e-global-color-d49ac81, #3146CB);
  color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase;
  text-decoration: underline;
}
.mp-cards--kit .mp-cards__btn:hover,
.mp-cards--kit .mp-cards__btn:focus-visible { background: var(--e-global-color-332724a, #3AA9EA); color: #fff; }
.mp-cards--kit .mp-cards__btn svg { width: 12px; height: 12px; fill: currentColor; }

/* job columns: logo left of the title, meta row, centred button */
.mp-cards--kit.mp-cards--job .mp-cards__head-row { display: flex; align-items: center; }
/* the logo column must not shrink: squeezed by a long title it rendered 102px */
.mp-cards--kit.mp-cards--job .mp-cards__media { flex: 0 0 125px; }
.mp-cards--kit.mp-cards--job .mp-cards__media img { width: 125px; height: 125px; max-width: none; object-fit: contain; }
.mp-cards--kit.mp-cards--job .mp-cards__card-title {
  margin: 0;
  font-family: var(--mp-font-kit);
  font-size: 16px; font-weight: 700; line-height: 1.4;
  color: var(--e-global-color-secondary, #292929);
}
.mp-cards--kit .mp-cards__meta {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: 10px 0 0; padding: 0;
  font-size: 16px; line-height: 24px;
  color: var(--e-global-color-primary, #767676);
}
.mp-cards--kit .mp-cards__meta li { display: inline-flex; align-items: center; gap: 6px; }
.mp-cards--kit .mp-cards__meta-icon svg { width: 14px; height: 14px; fill: var(--e-global-color-secondary, #292929); }
.mp-cards--kit.mp-cards--job .mp-cards__action { margin-top: 10px; padding-top: 0; text-align: center; }

/* service boxes: 100px circle, title + copy beside it */
.mp-cards--kit.mp-cards--icon .mp-cards__card { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start; }
.mp-cards--kit .mp-cards__icon {
  display: grid; place-items: center;
  width: 100px; height: 100px; border-radius: 50%;
  background: #5d6270; color: #fff;
}
.mp-cards--kit .mp-cards__icon svg { width: 48px; height: 48px; fill: currentColor; }
.mp-cards--kit.mp-cards--icon .mp-cards__card-title {
  margin: 0;
  font-family: var(--mp-font-kit);
  font-size: 21px; font-weight: 700; line-height: 1.3;
  color: var(--e-global-color-secondary, #292929);
}
.mp-cards--kit.mp-cards--icon .mp-cards__body {
  max-width: 230px; margin: 6px 0 0;
  font-size: 16px; line-height: 24px;
  color: var(--e-global-color-primary, #767676);
}

@media (max-width: 767px) {
  .mp-cards--side .mp-cards__wrap { grid-template-columns: 1fr; }   /* live keeps the columns side by side on tablets */
}
@media (max-width: 767px) {
  .mp-cards--side .mp-cards__grid,
  .mp-cards--side.mp-cards--icon .mp-cards__grid { grid-template-columns: 1fr; }
  .mp-cards--kit .mp-cards__title { font-size: 24px; }
}

/* Vertical rhythm measured off the live tile: the eyebrow's 24px line box sits
   flush on the H2, the copy starts ~6px under the H2, the button ~16px under
   the copy; in a job column the meta row sits ~4px under the title/logo row and
   the button directly under the meta. Elementor's default widget gap does not
   apply inside these columns on live. */
.mp-cards--kit .mp-cards__eyebrow { margin: 0; }
.mp-cards--kit .mp-cards__title { margin: 0 0 6px; }
.mp-cards--kit .mp-cards__actions { margin-top: 16px; }
.mp-cards--kit .mp-cards__meta { margin-top: 4px; }
.mp-cards--kit.mp-cards--job .mp-cards__action { margin-top: 4px; }
.mp-cards--kit.mp-cards--icon .mp-cards__card-title { margin-top: 10px; }

/* Kit cards on mobile: Elementor's image-box and icon-box stack their parts and
   centre them below 768px (live: job titles centred, service copy 350px wide). */
@media (max-width: 767px) {
  .mp-cards--kit .mp-cards__intro { font-size: 14px; line-height: 21px; }
  .mp-cards--kit.mp-cards--job .mp-cards__card { text-align: center; }
  .mp-cards--kit.mp-cards--job .mp-cards__head-row { flex-direction: column; justify-content: center; }
  .mp-cards--kit .mp-cards__meta { justify-content: center; font-size: 14px; }
  .mp-cards--kit.mp-cards--icon .mp-cards__card { display: block; text-align: center; }
  .mp-cards--kit .mp-cards__icon { margin: 0 auto 10px; }
  .mp-cards--kit.mp-cards--icon .mp-cards__body { max-width: none; font-size: 14px; line-height: 21px; }
}

/* service box titles take the kit h4 below 1025px: 16px (live 'Recruitment') */
@media (max-width: 1024px) {
  .mp-cards--kit.mp-cards--icon .mp-cards__card-title { font-size: 16px; }
}

/* the eyebrow is an h6 as on live: keep the kit face, not the base heading's */
.mp-cards--kit .mp-cards__eyebrow { font-family: var(--mp-font-kit); }

/* Phones, measured on live mobile job-openings: the column logo at 300px, 30px
   under the button above and 14px over the title; titles are the kit h5 (14px);
   the location/type line runs from the left, 25px under the title, with the
   button tucked 12px under it; a card without the logo keeps 29px above its
   title. The section buttons (view all, View More) centre. */
@media (max-width: 767px) {
  .mp-cards--kit .mp-cards__actions { justify-content: center; }
  .mp-cards--kit .mp-cards__eyebrow { font-size: 12px; line-height: 21px; }   /* kit h6 on phones */
  .mp-cards--kit.mp-cards--job .mp-cards__media { flex: 0 0 auto; margin: 10px 0 0; }
  .mp-cards--kit.mp-cards--job .mp-cards__media img { width: 300px; height: 300px; max-width: 100%; }
  .mp-cards--kit.mp-cards--job .mp-cards__card-title { margin-top: 14px; font-size: 14px; }
  .mp-cards--kit.mp-cards--job .mp-cards__card:not(:has(.mp-cards__media)) .mp-cards__card-title { margin-top: 29px; }
  .mp-cards--kit.mp-cards--job .mp-cards__meta { justify-content: flex-start; margin-top: 25px; }
  .mp-cards--kit.mp-cards--job .mp-cards__action { margin-top: -12px; }
}

/* Tablets (768-1024px), as live: the job grid stays three across and each
   logo shrinks beside its title; the kit's tablet type scale (H2 24px, h6
   13px, h5 15px, body 15px). */
@media (min-width: 768px) and (max-width: 1024px) {
  .mp-cards--side.mp-cards--job .mp-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-cards--kit.mp-cards--job .mp-cards__media { flex: 0 1 125px; min-width: 0; }
  .mp-cards--kit.mp-cards--job .mp-cards__media img { width: 100%; height: auto; max-width: 125px; }
  .mp-cards--kit .mp-cards__title { font-size: 24px; }
  .mp-cards--kit .mp-cards__eyebrow { font-size: 13px; }
  .mp-cards--kit.mp-cards--job .mp-cards__card-title { font-size: 15px; }
  .mp-cards--kit .mp-cards__intro,
  .mp-cards--kit .mp-cards__meta,
  .mp-cards--kit.mp-cards--icon .mp-cards__body { font-size: 15px; line-height: 22.5px; }
}