@use "00-base/configure" as *;

.ma__services {

  @include ma-truncated-body-text;

  .page-content--intro {

    @include page-width-full;

    @include clearfix;

    margin-bottom: 30px;

    @media ($bp-large-min) {

      & > .ma__image:first-child {
        display: none;
      }
    }

    & .ma__video {

      max-width: 600px;

      @media ($bp-small-min) {
        width: 80%;
      }

      @media ($bp-large-extended-min) {
        width: 70%;
      }

    }

    .ma__video--right + .ma__teaser-text {

      @media ($bp-page-width-min) {
        display: inline-block;
        float: none;
        margin-left: calc(50vw - (#{$max-width} / 2));
        padding-right: 0;
        width:  $max-width - 500px;
      }
    }

    & > .ma__image:first-child {
      margin-left: 20px;
      margin-right: 20px;

      @media ($bp-medium-min) {
        margin-left: 30px;
        margin-right: 30px;
      }
    }

    & > .ma__rich-text > p:last-child {
      margin-bottom: 1.5rem !important;
    }
  }

  .more-info-header {

    @include ma-container;

    @include ma-component-spacing;

    @include clearfix;

    .ma__comp-heading {
      margin-bottom: 0;
    }
  }

  &.ma__services-flexible-link-groups {

    .ma__action-finder h3.ma__action-finder__category {
      margin-bottom: .4em;
    }

    .ma__stacked-row__section {

      .ma__split-columns {
        margin-top: 15px;
      }
    }

    .ma__link-list {
      max-width: inherit;
      width: 100%;

      @media ($bp-large-min) {
        max-width: $l-max-content-width;
      }
    }

    .ma__link-list__item {
      line-height: 1.3;
      padding: 6px 0;
    }


  }

  .ma__stacked-row__section {

    .ma__split-columns {

      .ma__comp-heading,
      .ma__sidebar-heading {

        @include ma-h3;
        border: 0;
        margin-bottom: 0 !important;
        text-transform: none;
        letter-spacing: normal;
      }

    }
  }

  .ma__stacked-row__section .main-content .page-content {

    .ma__action-finder,
    .ma__mapped-locations,
    .ma__event-listing,
    .ma__image-credit {

      @include ma-component-spacing;
    }
  }

  .service-section .main-content .page-content .layout--onecol-mass-service-section .layout__region--content .ma__callout {
    max-inline-size: 1240px;
    margin-inline: 20px;

    @media ($bp-medium-min) {
      margin-inline: 30px;
    }

    @media ($bp-large-min) {
      margin-inline: 40px;
    }

    @media ($bp-x-large-min) {
      margin-inline: auto;
    }

    @media (min-width: 1201px) and (max-width: 1320px) {
      margin-inline: 40px;
    }
  }

  .service-section .main-content .page-content {

    .ma__rich-text {

      .ma__callout-stats {
        inline-size: auto;
        max-inline-size: 45%;
      }

      .ma__callout-stats ~ *:not(.ma__callout-stats) {

        display: flex;
        flex-flow: row wrap;
        gap: 30px;
      }

      .ma__callout-stats ~ .ma__callout-stats {
        inline-size: auto;
      }

      .ma__callout-message__container:has(~ *) {
        margin-block-end: 20px;
      }

      .ma__callout-message__container {
        clear: both;
      }
    }

  }

  // Two column split

  .ma__service-heading-content {
    display: flex;
    flex-flow: column;

    @media ($bp-large-min) {

      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      margin-block-end: 32px;
    }

    .ma__service-subtitle {
      font-weight: $fonts-bold;
    }

    .ma__decorative-link a {

      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: $fonts-bolder;
    }
  }

  .service-section--enhanced {

    .ma__service-heading-content {

      @include ma-container;
    }
  }

  .service-section--simple,
  .service-section--simple-two-column,
  .service-section--enhanced-two-column {

    .ma__stacked-row__section {
      max-inline-size: $max-width;
      margin-inline: auto;
    }
  }

  .service-section--simple-two-column,
  .service-section--enhanced-two-column {

    .ma__action-finder--no-background {
      background-image: none;
    }

    .ma__mapped-locations,
    .ma__collapsible-content {

      @media ($bp-x-large-min) {
        padding-inline-start: 0 !important;
      }
    }

    .main-content {
      flex: 1;
      inline-size: 100%;
    }

    .ma__stacked-row__section > .ma__stacked-row__container {

      margin-inline: 0;

      @media ($bp-x-large-min) {

        max-inline-size: 384px;
        min-inline-size: 336px;
        inline-size: 50%;
      }
    }

    .ma__stacked-row__section {
      display: flex;
      flex-flow: column;
      gap: 30px;

      @media ($bp-x-large-min) {
        gap: 0;
        flex-flow: row;
        justify-content: space-between;
        align-items: flex-start;
      }

      .ma__stacked-row__section {
        display: block;
      }
    }

    .ma__service-heading-content {
      flex-flow: column;
      align-items: flex-start;

      .ma__service-subtitle {
        margin-block-end: 10px;

        @media ($bp-x-large-min) {
          margin-block-end: 20px;
        }
      }
    }

    .ma__decorative-link {

        display: inline;

        a {
          display: inline;
        }
    }

    // Adjusts for Paragraph types within a more narrow Service section

    .main-content .page-content .layout--onecol-mass-service-section .layout__region--content,
    .main-content .page-content .layout--onecol-mass-service-section .layout__region--content .js-lpb-component {

      > .ma__social-links-bar {
        padding-inline-end: 0;
      }

      > .ma__contact-list {

        @media ($bp-x-large-min) {
          padding-inline-start: 0;
        }
      }

      > .ma__video--new {
        padding-inline-end: 0;
      }

      > .ma__rich-text .ma__rich-text {
        clear: both;
      }

      > .ma__callout-message__container .ma__callout-message {
        inline-size: 100%;
      }

      > .ma__callout {
        clear: both;
        margin-inline-start: 40px;
      }

      .ma__section-links__content {

        .ma__section-links__title .ma__decorative-link {
          display: none;

          @media ($bp-x-small-min) {
            display: inline;

            a {
              display: inline;
            }
          }
        }
      }
    }
  }

  .service-section--enhanced-two-column {
    background: var(--mf-c-platinum-gray);
    padding-block: 20px;

    @media ($bp-large-min) {
      padding-block: 80px;
    }

    .ma__mapped-locations__aside,
    .ma__mapped-locations__map {
      background-color: var(--mf-c-white);
    }
  }
}