.course-tutor-carousel {
  --course-tutor-carousel-container: 1180px;
  --course-tutor-carousel-gutter: 15px;
  --course-tutor-carousel-card-width: 47.8rem;
  --course-tutor-carousel-card-height: 27.4rem;
  overflow-x: clip;
}

.course-tutor-carousel__title {
  margin: 0 0 1.6rem;
  line-height: 1.2;
  text-align: left;
}

.course-tutor-carousel__intro {
  max-width: 78rem;
  margin: 0 0 4rem;
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: left;
}

.course-tutor-carousel--split-header .course-tutor-carousel__header {
  margin-bottom: 0;
  align-items: flex-start;
}

.course-tutor-carousel__title--split {
  margin: 0;
  max-width: 18ch;
}

.course-tutor-carousel__aside {
  display: flex;
  flex-direction: column;
  max-width: none;
}

.course-tutor-carousel__lead {
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0 0 1.6rem;
}

.course-tutor-carousel__highlight {
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0 0 2.4rem;
}

.course-tutor-carousel__bullets {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding-left: 1.8rem;
  list-style: disc;
}

.course-tutor-carousel__bullets li {
  font-size: 1.6rem;
  line-height: 1.5;
}

.course-tutor-carousel__carousel {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

#course-tutor-carousel .carousel_container,
.course-tutor-carousel__carousel-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: auto !important;
  width: 100%;
  max-width: none;
  margin: 4.2rem 0 0;
  padding: 0;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
}

.course-tutor-carousel__track {
  width: 100%;
  min-width: 0;
  padding-left: max(
    var(--course-tutor-carousel-gutter),
    calc((100% - var(--course-tutor-carousel-container)) / 2 + var(--course-tutor-carousel-gutter))
  );
  padding-right: 0;
}

#course-tutor-carousel .carousel_slider,
.course-tutor-carousel__carousel .carousel_slider {
  margin-top: 0;
}

#course-tutor-carousel .owl-carousel .owl-stage-outer,
.course-tutor-carousel__carousel .owl-carousel .owl-stage-outer {
  overflow: hidden;
}

#course-tutor-carousel .owl-carousel .owl-stage,
.course-tutor-carousel__carousel .owl-carousel .owl-stage {
  display: flex;
  align-items: stretch;
}

#course-tutor-carousel .owl-carousel .owl-item,
.course-tutor-carousel__carousel .owl-carousel .owl-item {
  display: flex;
  width: auto;
  padding: 0;
  background: transparent;
}

#course-tutor-carousel .owl-carousel .owl-item .item,
.course-tutor-carousel__carousel .owl-carousel .owl-item .item {
  display: flex;
  width: var(--course-tutor-carousel-card-width);
  height: auto;
  min-height: var(--course-tutor-carousel-card-height);
  flex: 0 0 var(--course-tutor-carousel-card-width);
}

.course-tutor-carousel__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 1.6rem;
  padding: 2.4rem 2.8rem;
  overflow: hidden;
  background: #fff;
  border-radius: 2.4rem;
  box-shadow: 0 0.8rem 2.4rem rgba(15, 45, 82, 0.08);
}

.course-tutor-carousel__card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.6rem;
  flex-shrink: 0;
}

.course-tutor-carousel__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--neutral-20);
}

.course-tutor-carousel__avatar {
  flex: 0 0 7.2rem;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  overflow: hidden;
  background: #e8eef5;
}

.course-tutor-carousel__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same dual src+data-src pattern as home ecosystem: keep lazy for sandbox,
   but don't hide the already-loaded src while waiting for tools.defer. */
.course-tutor-carousel__avatar-img[src][data-src] {
  opacity: 1;
}

.course-tutor-carousel__bio {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.45;
}

.course-tutor-carousel__nav {
  display: flex;
  justify-content: flex-start;
  gap: 1.6rem;
  margin-top: 3.2rem;
  padding-left: max(
    var(--course-tutor-carousel-gutter),
    calc((100% - var(--course-tutor-carousel-container)) / 2 + var(--course-tutor-carousel-gutter))
  );
}

/* Fewer than 3 cards: no arrows on desktop (cards fit); keep them on small screens (1 slide). */
.course-tutor-carousel--few-items .course-tutor-carousel__nav {
  display: none;
}

#course-tutor-carousel .carousel_nav,
.course-tutor-carousel__carousel .carousel_nav {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--white, #fff);
  box-shadow: 0 0.4rem 1.6rem rgba(0, 84, 157, 0.12);
  transform: none;
  cursor: pointer;
}

#course-tutor-carousel .carousel_nav:hover,
#course-tutor-carousel .carousel_nav:focus,
.course-tutor-carousel__carousel .carousel_nav:hover,
.course-tutor-carousel__carousel .carousel_nav:focus {
  background: var(--primary-90, #e6f3ff);
}

#course-tutor-carousel .carousel_nav .feather,
.course-tutor-carousel__carousel .carousel_nav .feather {
  width: 2.4rem;
  height: 2.4rem;
}

@media all and (max-width: 991px) {
  .course-tutor-carousel {
    --course-tutor-carousel-card-width: min(47.8rem, calc(100vw - 4.8rem));
    --course-tutor-carousel-card-height: 27.4rem;
  }

  .course-tutor-carousel--few-items .course-tutor-carousel__nav {
    display: flex;
  }
}

@media all and (max-width: 767px) {
  .course-tutor-carousel {
    --course-tutor-carousel-card-width: min(47.8rem, calc(100vw - 3.2rem));
    --course-tutor-carousel-card-height: auto;
  }

  .course-tutor-carousel__intro {
    font-size: 1.6rem;
    margin-bottom: 3.2rem;
  }

  .course-tutor-carousel__lead,
  .course-tutor-carousel__highlight,
  .course-tutor-carousel__bullets li {
    font-size: 1.6rem;
  }

  .course-tutor-carousel__title--split {
    max-width: none;
    margin-bottom: 0.8rem;
  }

  #course-tutor-carousel .owl-carousel .owl-item .item,
  .course-tutor-carousel__carousel .owl-carousel .owl-item .item {
    height: auto;
    min-height: 27.4rem;
  }

  .course-tutor-carousel__card {
    padding: 2rem;
    gap: 1.6rem;
  }

  .course-tutor-carousel__name {
    font-size: 1.8rem;
  }

  .course-tutor-carousel__avatar {
    flex-basis: 7.2rem;
    width: 7.2rem;
    height: 7.2rem;
  }

  .course-tutor-carousel__bio {
    font-size: 1.5rem;
  }
}

.course-tutor-carousel__webinar {
  margin-top: 4.8rem;
}

@media all and (max-width: 767px) {
  .course-tutor-carousel__webinar {
    margin-top: 3.2rem;
  }
}