/*
 * Citydent: homepage services section
 * Priority: 60
 *
 * Kept separate from _child-main.scss so editor changes there stay untouched.
 */

body.home .citydent-services {
  position: relative;
  z-index: 0;
  /*
   * The preceding user-edited feature cards currently render 12px taller than
   * the Figma component. Keep those edits intact and align this section to the
   * Figma section start with the remaining 132px of white space.
   */
  margin-top: 132px !important;
  padding-top: 96px;
  padding-bottom: 120px;
  background: #eeeff3;
  box-shadow: 0 0 0 100vmax #eeeff3;
  clip-path: inset(0 -100vmax);
}

body.home .citydent-services__grid {
  gap: 24px;
  align-items: stretch;
}

body.home .citydent-services__grid > .vc_column_container {
  display: flex;
  min-width: 0;
}

body.home .citydent-service-card {
  --cardIndentTop: 24px;
  --cardIndentRight: 24px;
  --cardIndentBottom: 0;
  --cardIndentLeft: 24px;

  height: 100%;
  min-height: 0;
  background: #fff;
  border: 0;
}

body.home .citydent-service-card > .tag-group-container {
  gap: 8px !important;
  margin-top: 28px;
  padding-bottom: 32px;
}

body.home .citydent-service-card .tag-item {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 28px;
  min-height: 28px;
  padding: 0 8px !important;
  color: var(--mainColor);
  line-height: 20px;
  background: rgba(0, 0, 15, 0.04);
  border: 0;
  border-radius: 4px;
}

body.home .citydent-service-card > .citydent-service-card__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: auto;
  aspect-ratio: 440 / 248;
  object-fit: cover;
}

@media (max-width: 991px) {
  body.home .citydent-services {
    margin-top: 96px !important;
    padding-top: 48px;
    padding-bottom: 60px;
  }

  body.home .citydent-services__grid {
    gap: 16px;
  }

  body.home .citydent-services__grid > .vc_column_container {
    grid-column: span 12 !important;
  }

  body.home .citydent-service-card {
    --cardIndentTop: 20px;
    --cardIndentRight: 20px;
    --cardIndentBottom: 0;
    --cardIndentLeft: 20px;

    border-radius: var(--roundedM);
  }

  body.home .citydent-service-card::after {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #0059b7;
    font-size: 20px;
    line-height: 1;
    content: "›";
    background: rgba(234, 243, 255, 0.92);
    border-radius: 50%;
  }

  body.home .citydent-service-card > .tag-group-container {
    margin-top: 23px;
    padding-bottom: 24px;
  }

  body.home .citydent-service-card .tag-item {
    padding-right: 10px !important;
    padding-left: 10px !important;
    line-height: 16px;
  }

  body.home
    .citydent-services__grid
    > .vc_column_container:nth-child(9)
    .tag-group-container {
    padding-bottom: 22px;
  }

  body.home .citydent-service-card > .citydent-service-card__image {
    aspect-ratio: 361 / 203;
  }

  body.home
    .citydent-services
    > .vc_column_container
    > .vc_empty_space {
    height: 34px !important;
  }
}