/* ═══════════ Services Carousel ([services_carousel]) ═════════
   Cards: title .heading-sm + lines .body-xl, all --dark-navy.
   Content (.services-carousel__body) padded 3rem desktop → 2.5rem mobile.
   Title→body 1.5rem (divider centered); 1.25rem between lines.
   Prev/next live in a separate Code module (.carousel-nav) — see typography.css.
   ──────────────────────────────────────────────────────────── */
.services-carousel {
  width: 100%;
}

/* Section header row: "Our Services" title (heading-lg) + nav, side by side */
.services-section__title {
  color: var(--dark-navy);
  margin: 0;
}

.services-carousel__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 4px;
}
.services-carousel__track::-webkit-scrollbar {
  display: none;
} /* WebKit */

.services-carousel__card {
  flex: 0 0 calc((100% - 2 * 1.5rem) / 3); /* 3 across on desktop */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--background-medium-beige);
  border-radius: 2.5rem; /* all four corners (clips the image via overflow:hidden) */
  overflow: hidden;
}

.services-carousel__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* shorter still (was 3/2) — trims more card height */
  object-fit: cover;
}

/* Padded content block (text + divider) */
.services-carousel__body {
  padding: clamp(1.5rem, 1.361rem + 0.591vw, 2rem);
} /* 1.5rem → 2rem (was 2.5→3) — shorter card */

.services-carousel__title {
  color: var(--dark-navy);
  margin: 0 0 1.25rem;
} /* above the divider */
.services-carousel__divider {
  border: 0;
  border-top: 1px solid var(--dark-navy);
  margin: 0; /* 1.5rem above + below via title/list margins */
}
.services-carousel__list {
  list-style: none !important; /* no bullets (override Divi's content ul styling) */
  margin: 1.25rem 0 0; /* below the divider */
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* between each line */
}
.services-carousel__list li {
  color: var(--dark-navy);
  margin: 0;
  list-style: none !important;
}
.services-carousel__list li::marker {
  content: "";
}
.services-carousel__list li::before {
  content: none !important;
}

/* Optional links on title / lines — underlined in the same (inherited) color */
.services-carousel__title a,
.services-carousel__list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tablet: 2 across */
@media (max-width: 980px) {
  .services-carousel__card {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}
/* Phone: 1 across */
@media (max-width: 767px) {
  .services-carousel__card {
    flex-basis: 100%;
  }
}