/* ==========================================================================
   Changan Elements – Customer Stories

   Self-contained carousel: no Swiper, no .swiper-* classes. Every selector
   lives under .changan-customer-stories* so it cannot affect (or be affected
   by) Elementor's lightbox or any other slider on the page.
   ========================================================================== */

.changan-customer-stories-wrap {
  max-width: 100%;
}

/* ── Viewport ─────────────────────────────────────────────────────────── */
.changan-customer-stories {
  --ccs-peek: 20px;
  --ccs-card-max-width: 720px;
  --ccs-card-height: 500px;
  --ccs-side-offset: 20px;
  --ccs-active-image-h: 260px;
  --ccs-gap: 20px; /* set from the widget's "Space Between Cards" by the script */

  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* The viewport needs overflow:hidden to hide off-screen cards — but that
     also clips anything that bleeds past this box, including each card's
     box-shadow. This padding is the buffer zone that gives shadows room to
     render instead of getting cut off at the carousel's own edge. */
  padding: 32px 20px;
  overflow: hidden;
  /* Let the page scroll vertically on touch; horizontal drags are ours. */
  touch-action: pan-y;
}

.changan-customer-stories:focus {
  outline: none;
}

.changan-customer-stories:focus-visible {
  outline: 2px solid #0B457F;
  outline-offset: -2px;
}

.changan-customer-stories.is-grab {
  cursor: grab;
}

.changan-customer-stories.is-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.changan-customer-stories.is-dragging a {
  pointer-events: none;
}

/* ── Track (the strip of cards that slides left/right) ────────────────── */
.changan-customer-stories__track {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--ccs-gap);
  width: 100%;
  transition-property: transform;
  transition-timing-function: ease;
  will-change: transform;
}

.changan-customer-stories__slide {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: calc(100% - (var(--ccs-peek) * 2));
  max-width: var(--ccs-card-max-width);
  height: var(--ccs-card-height); /* every card — active or not — is this height, always */
}

/* Desktop (script adds .is-three-up at 1025px+): 3 complete cards side by
   side, no peek cropping. */
.changan-customer-stories.is-three-up .changan-customer-stories__slide {
  width: calc((100% - (var(--ccs-gap) * 2)) / 3);
}

/* ── Card (the whole bordered/shadowed unit — image + content together) ── */
.changan-customer-stories__card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* clips image + content to the border-radius as one shape */
  border-radius: 12px;
}

/* ── Image ────────────────────────────────────────────────────────────── */
/* Inactive/side cards: image fills the card, minus the side offset so the
   active card reads as slightly taller than its neighbors. Height
   transitions together with the content box below (matching duration and
   easing) so the shrink and the text growing in read as one coordinated
   motion rather than two separate things fighting each other. */
.changan-customer-stories__image {
  width: 100%;
  height: calc(var(--ccs-card-height) - var(--ccs-side-offset));
  background-color: #e5e5e5; /* placeholder while lazy-loaded image sets */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.changan-customer-stories__slide.is-active .changan-customer-stories__image {
  height: var(--ccs-active-image-h);
}

/* ── Content (only visible on the active/center slide) ───────────────── */
/* Always display:flex (never display:none — that property can't be
   transitioned at all, which is why it used to just pop in instantly).
   Height + opacity animate instead, giving a proper "grow in" effect. */
.changan-customer-stories__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;

  height: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;

  overflow-y: auto;
  scrollbar-width: none; /* hidden by default, revealed on hover below */
  -ms-overflow-style: none;

  transition:
    height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.35s ease,
    visibility 0s linear 0.5s; /* only actually hide once fully collapsed */
}

.changan-customer-stories__slide.is-active .changan-customer-stories__content {
  height: calc(var(--ccs-card-height) - var(--ccs-active-image-h));
  opacity: 1;
  pointer-events: auto;
  visibility: visible;

  transition:
    height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.4s ease 0.15s, /* fades in partway through the grow, not before it */
    visibility 0s linear; /* become visible immediately so it can grow into view */
}

.changan-customer-stories__content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.changan-customer-stories__content:hover {
  scrollbar-width: thin; /* Firefox */
}

.changan-customer-stories__content:hover::-webkit-scrollbar {
  width: 6px;
}

.changan-customer-stories__content:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}

.changan-customer-stories__content:hover::-webkit-scrollbar-track {
  background: transparent;
}

.changan-customer-stories__social {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.changan-customer-stories__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.changan-customer-stories__icon i {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.changan-customer-stories__username {
  font-weight: 700;
}

.changan-customer-stories__hashtags {
  line-height: 1.5;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.changan-customer-stories__description {
  flex-shrink: 0;
}

.changan-customer-stories__description p {
  margin: 0 0 10px;
  line-height: 1.6;
}

.changan-customer-stories__description p:last-child {
  margin-bottom: 0;
}

/* ── Pagination — a normal block below the carousel ───────────────────── */
/* Colours / size / spacing are driven by the widget's Pagination style
   controls through these custom properties (set on .changan-customer-stories-wrap). */
.changan-customer-stories__pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 6px;
  text-align: center;
}

.changan-customer-stories__bullet {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--ccs-dot-size, 8px);
  height: var(--ccs-dot-size, 8px);
  margin: 0 var(--ccs-dot-gap, 6px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ccs-dot-color, #d5d5d5);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

/* Larger invisible tap target so small dots are easy to hit on mobile. */
.changan-customer-stories__bullet::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.changan-customer-stories__bullet.is-active {
  background: var(--ccs-dot-active-color, #0B457F);
}

.changan-customer-stories__bullet:focus-visible {
  outline: 2px solid #0B457F;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .changan-customer-stories__track,
  .changan-customer-stories__image,
  .changan-customer-stories__content,
  .changan-customer-stories__bullet {
    transition: none !important;
  }
}