/* Card Carousel — [card_carousel] scroll-snap track (content: WP Admin → Services → Card Carousels). */

.card-carousel {
  --cc-gap     : 1.5rem;         /* space between cards */
  --cc-card-bg : var(--mist);    /* card fill */
}

/* Track — native scroll with snap; external buttons scroll it (js/card-carousel.js) */
.card-carousel__track {
  display: flex;
  gap: var(--cc-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;         /* hide the scrollbar; buttons + swipe drive it */
}
.card-carousel__track::-webkit-scrollbar { display: none; }

/* Card — 3-up on desktop, 2-up on tablet, 1-up on phone */
.card-carousel__card {
  flex: 0 0 calc((100% - 2 * var(--cc-gap)) / 3);
  scroll-snap-align: start;
  background: var(--cc-card-bg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card-carousel__image img { display: block; width: 100%; height: auto; }
.card-carousel__heading { margin: 2rem 0 0; color: var(--dark-grey); }
.card-carousel__heading a { text-decoration: underline; color: inherit; }
.card-carousel__body { margin: 1.5rem 0 0; color: var(--dark-grey); }
.card-carousel__body p { margin: 0 0 1em; }
.card-carousel__body p:last-child { margin-bottom: 0; }
.card-carousel__body a { text-decoration: underline; color: inherit; }

@media (max-width: 980px) {
  .card-carousel__card { flex-basis: calc((100% - var(--cc-gap)) / 2); padding: 1.5rem; }
  .card-carousel__heading { margin-top: 1.5rem; }
  .card-carousel__body { margin-top: 1.25rem; }
}
@media (max-width: 767px) {
  .card-carousel__card { flex-basis: 100%; }
}