/* Services Carousel — [services_carousel]. Native-scroll carousel of brand-colored category panels
   (swipeable; arrows scroll by one card). Heading/intro are editable Divi text modules above the
   shortcode; the host row supplies the 10% left spacing. Panel bg = inline; tone via --on-dark/--on-light. */

.services-carousel {
  --sc-card: 30%;       /* card width => ~3.3 visible, right card cut off */
  width: 100%;
}

/* Viewport: native horizontal scroll (swipeable, with momentum); rounded left edge; scrollbar hidden. */
.services-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                   /* Firefox */
  border-radius: 0.6875rem 0 0 0.6875rem;
  scroll-snap-type: x mandatory;           /* rests flush on a card — swipes + arrows never stop part-way */
}
.services-carousel__viewport::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

/* Track: flex row; panels don't shrink, so it overflows the viewport → scrolls. */
.services-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}

/* ── Panel ── */
.services-carousel__panel {
  flex: 0 0 var(--sc-card);
  min-height: 26rem;
  padding: 1.75rem;           /* half the original 3.5rem — more room for content + a button */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;   /* each card is a snap point (its left edge aligns to the viewport) */
}
.services-carousel__panel--on-dark  { color: var(--cream); }
.services-carousel__panel--on-light { color: var(--olive); }

/* title at top, with a minimum 2rem gap before the bullets */
.services-carousel__panel-title {
  color: inherit;
  margin: 0 0 2rem;
  display: block;
}
a.services-carousel__panel-title { color: inherit; text-decoration: none; }
a.services-carousel__panel-title:hover { text-decoration: underline; }

/* Bullet list: kill the native bullet, keep one custom bullet. */
.services-carousel__list {
  list-style: none !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.services-carousel__list .services-carousel__item {
  list-style: none !important;
  color: inherit;
  position: relative;
  padding-left: 1.1rem;
  margin: 0;
  line-height: 1.2;            /* tightened (was ~1.375) to fit more per card */
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.services-carousel__item::marker { content: ""; }
.services-carousel__item::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.85;
}
.services-carousel__item-text { flex: 1 1 auto; }
.services-carousel__item-link {
  flex: 0 0 auto;
  color: inherit;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin-top: 0.15rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.services-carousel__item-link:hover { opacity: 0.7; transform: translateX(2px); }
.services-carousel__item-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Nav arrows (44×44 SVG; the circle IS the border). */
.services-carousel__nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}
.services-carousel__arrow {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--olive);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.services-carousel__arrow svg { width: 2.75rem; height: 2.75rem; display: block; }
.services-carousel__arrow--prev svg { transform: scaleX(-1); }
.services-carousel__arrow svg circle,
.services-carousel__arrow svg path { transition: fill 0.2s ease; }
.services-carousel__arrow:hover svg circle { fill: var(--olive); }
.services-carousel__arrow:hover svg path { fill: var(--cream); }
.services-carousel__arrow:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 50%; }

/* Desktop: use proximity snap instead of mandatory — mandatory can re-force alignment on a layout/
   scrollbar shift and read as a load-time "vibration"; the arrows already scroll to exact card
   boundaries in JS, so alignment is unaffected. Mobile/tablet keep mandatory (1-card touch feel).
   Desktop also keeps the original roomier 3.5rem card padding (the 1.75rem is a mobile-only tighten). */
@media (min-width: 981px) {
  .services-carousel__viewport { scroll-snap-type: x proximity; }
  .services-carousel__panel { padding: 3.5rem; }
}

/* Responsive card widths. */
@media (max-width: 1100px) { .services-carousel { --sc-card: 38%; } }
/* Tablet + mobile: one full-width card at a time; center the prev/next nav.
   scroll-snap-stop: always → one swipe advances exactly one card (can't skip past).
   One card per view, so round the RIGHT corners too (desktop keeps left-only, cards run off-edge). */
@media (max-width: 980px)  {
  .services-carousel { --sc-card: 100%; }
  .services-carousel__nav { justify-content: center; }
  .services-carousel__panel { scroll-snap-stop: always; }
  .services-carousel__viewport { border-radius: 0.6875rem; }
}
@media (max-width: 640px)  { .services-carousel { --sc-card: 100%; } }