/* ---------------------------------------------------------------------------
   Button row — one to three buttons.

   The buttons themselves are the shared .mp-btn component in base.css; this
   file only lays them out. Live's about-us pair was DM Serif Display 21/22px
   with 30px 60px padding (post-103326.css #6fee065 / #dab8719), which is the
   oversized variant reproduced by .mp-btnrow__btn below.
   --------------------------------------------------------------------------- */

.mp-btnrow { padding-block: 50px; }

.mp-btnrow--white { background: #fff; }
.mp-btnrow--blue  { background: var(--mp-surface-blue); color: var(--mp-ink); }
.mp-btnrow--pink  { background: var(--mp-surface-pink); color: var(--mp-ink); }

.mp-btnrow__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-gap-lg);
}

.mp-btnrow--left   .mp-btnrow__inner { justify-content: flex-start; }
.mp-btnrow--center .mp-btnrow__inner { justify-content: center; }
.mp-btnrow--right  .mp-btnrow__inner { justify-content: flex-end; }

.mp-btnrow__btn {
  padding: 22px 48px;
  font-family: var(--mp-font-display);
  font-size: 21px;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 767px) {
  .mp-btnrow { padding-block: 36px; }
  .mp-btnrow__inner { gap: var(--mp-gap); }
  .mp-btnrow__btn { width: 100%; justify-content: center; padding: 18px 28px; font-size: 20px; }
}

/* about-us 579d638: a two-column grid pulled up -180px into the Our Approach
   split (desktop and tablet; 0 on mobile), one button centred in each half with
   its 30px widget margin, over the split rather than on a white strip. */
.mp-btnrow--halves { position: relative; z-index: 2; padding-block: 10px; background: transparent; }
.mp-btnrow--halves .mp-btnrow__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  gap: 0;
  max-width: 1600px;
  padding-inline: 10px;
}
.mp-btnrow--halves .mp-btn { margin: 30px; }
@media (min-width: 768px) {
  .mp-btnrow--halves { margin-top: var(--mp-btnrow-pull, 0px); }
}
@media (max-width: 767px) {
  .mp-btnrow--halves .mp-btnrow__inner { grid-template-columns: 1fr; }
}