/* ============================================================
   Eastcliff CAROUSEL — Testimonials & Image Carousel

   Satu keluarga dengan halaman produk dan keranjang: kartu bergaris 1px
   bersudut 8px, panah bulat putih seperti galeri produk.

   Geser = scroll-snap CSS. Lebar slide dihitung dari tiga variabel yang
   ditimpa kontrol Elementor ({{WRAPPER}} .ecw-car, 0-2-0):
     --ecw-car-per   jumlah slide per layar (tanpa satuan)
     --ecw-car-gap   jarak antarslide
     --ecw-car-peek  potongan slide berikutnya yang terlihat
   Bawaan per widget ditulis satu kelas (.ecw-tst / .ecw-imc, 0-1-0)
   supaya kontrol selalu menang.

   Spesifisitas elemen: dua kelas. Kit Elementor menata tag lewat
   `.elementor-kit-N tag` (0-1-1).
   ============================================================ */

.ecw-car {
  --ecw-car-per: 1;
  --ecw-car-gap: var(--ecw-sp-md);
  --ecw-car-peek: 0px;
  --ecw-car-arrow-bg: var(--ecw-surface);
  --ecw-car-arrow-fg: var(--ecw-ink);
  --ecw-car-arrow: var(--ecw-trigger-h);
  --ecw-car-dot: var(--ecw-line-strong);
  --ecw-car-dot-active: var(--ecw-ink);
  --ecw-car-dots-h: 0px;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--ecw-font);
}

.ecw-car *,
.ecw-car *::before,
.ecw-car *::after {
  box-sizing: border-box;
}

/* -------- Trek -------- */

.ecw-car .ecw-car__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--ecw-car-gap);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ecw-car .ecw-car__track::-webkit-scrollbar {
  display: none;
}

.ecw-car .ecw-car__track:focus-visible {
  outline: var(--ecw-sp-3xs) solid var(--ecw-ink);
  outline-offset: var(--ecw-sp-3xs);
}

.ecw-car .ecw-car__slide {
  display: flex;
  flex: 0 0 calc((100% - var(--ecw-car-peek) - (var(--ecw-car-per) - 1) * var(--ecw-car-gap)) / var(--ecw-car-per));
  min-width: 0;
  scroll-snap-align: start;
}

.ecw-car .ecw-car__slide > * {
  flex: 1 1 auto;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ecw-car .ecw-car__track {
    scroll-behavior: auto;
  }
}

/* -------- Panah -------- */

.ecw-car .ecw-car__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ecw-car-arrow);
  height: var(--ecw-car-arrow);
  margin: 0;
  padding: 0;
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-car-arrow-bg);
  box-shadow: 0 0 0 var(--ecw-border) var(--ecw-line);
  color: var(--ecw-car-arrow-fg);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--ecw-t-base) var(--ecw-ease),
    color var(--ecw-t-base) var(--ecw-ease);
}

.ecw-car .ecw-car__arrow:hover {
  background: var(--ecw-car-arrow-fg);
  color: var(--ecw-car-arrow-bg);
}

.ecw-car .ecw-car__arrow:focus-visible {
  outline: var(--ecw-sp-3xs) solid var(--ecw-ink);
  outline-offset: var(--ecw-sp-3xs);
}

.ecw-car .ecw-car__arrow .ecw-icon {
  width: var(--ecw-icon);
  height: var(--ecw-icon);
}

/* Di samping slide: kolom panah | trek | panah. */
.ecw-car.ecw-car--nav-sides {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--ecw-sp-sm);
}

.ecw-car--nav-sides .ecw-car__track {
  grid-column: 2;
  grid-row: 1;
}

.ecw-car--nav-sides .ecw-car__arrow--prev {
  grid-column: 1;
  grid-row: 1;
}

.ecw-car--nav-sides .ecw-car__arrow--next {
  grid-column: 3;
  grid-row: 1;
}

.ecw-car--nav-sides .ecw-car__dots {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Di atas slide. Titik di bawah menambah tinggi, jadi titik tengah
   panah dikurangi setengah tinggi baris titik. */
.ecw-car.ecw-car--nav-overlay .ecw-car__arrow {
  position: absolute;
  top: calc(50% - var(--ecw-car-dots-h) / 2);
  z-index: 2;
  transform: translateY(-50%);
}

.ecw-car.ecw-car--nav-overlay .ecw-car__arrow--prev {
  left: var(--ecw-sp-sm);
}

.ecw-car.ecw-car--nav-overlay .ecw-car__arrow--next {
  right: var(--ecw-sp-sm);
}

@media (max-width: 767px) {
  .ecw-car {
    --ecw-car-arrow: calc(var(--ecw-sp-xl) - var(--ecw-sp-2xs));
  }

  .ecw-car.ecw-car--nav-sides {
    column-gap: var(--ecw-sp-2xs);
  }

  /* Di ponsel panah samping tanpa lingkaran: 28px kolom, bukan 40px +
     garis, supaya kartu tidak menyempit. */
  .ecw-car.ecw-car--nav-sides .ecw-car__arrow {
    width: var(--ecw-sp-lg);
    background: transparent;
    box-shadow: none;
  }

  .ecw-car.ecw-car--nav-sides .ecw-car__arrow:hover {
    background: transparent;
    color: var(--ecw-car-arrow-fg);
  }
}

/* -------- Titik -------- */

.ecw-car .ecw-car__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ecw-sp-xs);
  height: var(--ecw-sp-xs);
  margin-top: var(--ecw-sp-md);
}

.ecw-car.ecw-car--dots-below {
  --ecw-car-dots-h: var(--ecw-sp-lg);
}

.ecw-car .ecw-car__dot {
  flex: none;
  width: var(--ecw-sp-xs);
  height: var(--ecw-sp-xs);
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-car-dot);
  cursor: pointer;
  transition:
    width var(--ecw-t-slow) var(--ecw-ease-out),
    background-color var(--ecw-t-base) var(--ecw-ease);
}

.ecw-car .ecw-car__dot.is-active {
  width: var(--ecw-icon);
  background: var(--ecw-car-dot-active);
}

.ecw-car .ecw-car__dot[hidden] {
  display: none;
}

.ecw-car.ecw-car--dots-inside {
  --ecw-car-dot: color-mix(in srgb, var(--ecw-surface) 55%, transparent);
  --ecw-car-dot-active: var(--ecw-surface);
}

.ecw-car.ecw-car--dots-inside .ecw-car__dots {
  position: absolute;
  right: 0;
  bottom: var(--ecw-sp-md);
  left: 0;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

.ecw-car.ecw-car--dots-inside .ecw-car__dot {
  pointer-events: auto;
}

/* Semua slide sudah terlihat: tidak ada yang bisa digeser. */
.ecw-car.is-static .ecw-car__arrow,
.ecw-car.is-static .ecw-car__dots {
  display: none;
}

.ecw-car.ecw-car--nav-sides.is-static {
  column-gap: 0;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.ecw-tst {
  --ecw-car-per: 1;
  --ecw-tst-bg: var(--ecw-surface);
  --ecw-tst-line: var(--ecw-line);
  --ecw-tst-radius: var(--ecw-r-lg);
  --ecw-tst-pad: var(--ecw-sp-lg);
  --ecw-tst-star: var(--ecw-rating);

  color: var(--ecw-ink);
}

@media (min-width: 768px) {
  .ecw-tst {
    --ecw-car-per: 2;
  }
}

@media (min-width: 1025px) {
  .ecw-tst {
    --ecw-car-per: 3;
  }
}

@media (max-width: 767px) {
  .ecw-tst {
    --ecw-tst-pad: var(--ecw-sp-md);
  }
}

.ecw-tst .ecw-tst__card {
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-md);
  height: 100%;
  margin: 0;
  padding: var(--ecw-tst-pad);
  border: var(--ecw-border) solid var(--ecw-tst-line);
  border-radius: var(--ecw-tst-radius);
  background: var(--ecw-tst-bg);
}

.ecw-tst .ecw-tst__stars {
  display: flex;
  gap: var(--ecw-sp-3xs);
  color: var(--ecw-tst-star);
}

.ecw-tst .ecw-tst__star {
  width: var(--ecw-icon-sm);
  height: var(--ecw-icon-sm);
  fill: currentColor;
}

.ecw-tst .ecw-tst__star.is-off {
  color: var(--ecw-line-strong);
}

.ecw-tst .ecw-tst__text {
  flex: 1 1 auto;
  color: var(--ecw-ink-2);
  font-size: var(--ecw-text-base);
  line-height: var(--ecw-lh-base);
}

.ecw-tst .ecw-tst__text p {
  margin: 0;
  color: inherit;
  font: inherit;
}

.ecw-tst .ecw-tst__author {
  display: flex;
  align-items: center;
  gap: var(--ecw-sp-sm);
  min-width: 0;
}

.ecw-tst .ecw-tst__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ecw-trigger-h);
  height: var(--ecw-trigger-h);
  overflow: hidden;
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-surface-2);
  color: var(--ecw-muted);
  font-size: var(--ecw-text-caption);
  font-weight: var(--ecw-w-semibold);
  line-height: 1;
}

.ecw-tst .ecw-tst__avatar .ecw-tst__avatar-img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.ecw-tst .ecw-tst__meta {
  min-width: 0;
}

.ecw-tst .ecw-tst__name {
  display: block;
  overflow: hidden;
  color: var(--ecw-ink);
  font-size: var(--ecw-text-base);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecw-tst .ecw-tst__role {
  display: block;
  margin-top: var(--ecw-sp-3xs);
  color: var(--ecw-muted);
  font-size: var(--ecw-text-caption);
  line-height: var(--ecw-lh-snug);
}

/* ============================================================
   IMAGE CAROUSEL
   ============================================================ */

.ecw-imc {
  --ecw-car-per: 2;
  --ecw-imc-ratio: 4 / 5;
  --ecw-imc-radius: var(--ecw-r-lg);
  --ecw-imc-pad: var(--ecw-sp-md);
  --ecw-imc-gap: var(--ecw-sp-md);
  --ecw-imc-cols: 3;
  --ecw-imc-cap-fg: var(--ecw-on-ink);
  --ecw-imc-shade: color-mix(in srgb, var(--ecw-ink) 60%, transparent);

  box-sizing: border-box;
  width: 100%;
  font-family: var(--ecw-font);
}

@media (min-width: 1025px) {
  .ecw-imc {
    --ecw-car-per: 3;
  }
}

@media (max-width: 767px) {
  .ecw-imc {
    --ecw-imc-pad: var(--ecw-sp-sm);
    --ecw-imc-gap: var(--ecw-sp-xs);
    --ecw-car-gap: var(--ecw-sp-xs);
  }
}

.ecw-imc .ecw-imc__item {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--ecw-imc-ratio);
  border-radius: var(--ecw-imc-radius);
  background: var(--ecw-surface-2);
  color: var(--ecw-imc-cap-fg);
  text-decoration: none;
  isolation: isolate;
}

.ecw-imc .ecw-imc__item:focus-visible {
  outline: var(--ecw-sp-3xs) solid var(--ecw-ink);
  outline-offset: var(--ecw-sp-3xs);
}

.ecw-imc .ecw-imc__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  transition: transform var(--ecw-t-panel) var(--ecw-ease-out);
}

.ecw-imc a.ecw-imc__item:hover .ecw-imc__img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .ecw-imc a.ecw-imc__item:hover .ecw-imc__img {
    transform: none;
  }
}

/* -------- Keterangan -------- */

.ecw-imc .ecw-imc__caption {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-3xs);
  padding: var(--ecw-imc-pad);
  color: var(--ecw-imc-cap-fg);
  pointer-events: none;
}

.ecw-imc .ecw-imc__title {
  display: block;
  color: inherit;
  font-size: var(--ecw-text-lg);
  font-weight: var(--ecw-w-bold);
  line-height: var(--ecw-lh-tight);
}

.ecw-imc .ecw-imc__text {
  display: block;
  color: inherit;
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-regular);
  line-height: var(--ecw-lh-snug);
}

.ecw-imc--cap-bottom .ecw-imc__caption {
  bottom: 0;
  padding-top: var(--ecw-sp-2xl);
}

.ecw-imc--cap-top .ecw-imc__caption {
  top: 0;
  padding-bottom: var(--ecw-sp-2xl);
}

.ecw-imc--cap-center .ecw-imc__caption {
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Putih di atas bayangan gelap (foto gelap) atau hitam tanpa bayangan
   (foto terang berlatar studio). */
.ecw-imc.ecw-imc--cap-light.ecw-imc--cap-bottom .ecw-imc__caption {
  background: linear-gradient(to top, var(--ecw-imc-shade), transparent);
}

.ecw-imc.ecw-imc--cap-light.ecw-imc--cap-top .ecw-imc__caption {
  background: linear-gradient(to bottom, var(--ecw-imc-shade), transparent);
}

.ecw-imc.ecw-imc--cap-light.ecw-imc--cap-center .ecw-imc__caption {
  background: color-mix(in srgb, var(--ecw-ink) 30%, transparent);
}

.ecw-imc.ecw-imc--cap-dark {
  --ecw-imc-cap-fg: var(--ecw-ink);
}

/* Titik di dalam foto, panah di atas foto. */
.ecw-imc.ecw-car--nav-overlay .ecw-car__arrow {
  box-shadow: none;
}

/* -------- Mosaik & grid -------- */

.ecw-imc .ecw-imc__grid {
  display: grid;
  grid-template-columns: repeat(var(--ecw-imc-cols), minmax(0, 1fr));
  gap: var(--ecw-imc-gap);
}

/* Pola lima: dua lebar (3 dari 6 kolom) lalu tiga tegak (2 dari 6).
   Rasio 1:1 dan 2:3 membuat tinggi kedua baris sama. */
.ecw-imc.ecw-imc--mosaic .ecw-imc__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ecw-imc.ecw-imc--mosaic .ecw-imc__cell {
  grid-column: span 2;
}

.ecw-imc.ecw-imc--mosaic .ecw-imc__cell .ecw-imc__item {
  aspect-ratio: 2 / 3;
}

.ecw-imc.ecw-imc--mosaic .ecw-imc__cell:nth-child(5n + 1),
.ecw-imc.ecw-imc--mosaic .ecw-imc__cell:nth-child(5n + 2) {
  grid-column: span 3;
}

.ecw-imc.ecw-imc--mosaic .ecw-imc__cell:nth-child(5n + 1) .ecw-imc__item,
.ecw-imc.ecw-imc--mosaic .ecw-imc__cell:nth-child(5n + 2) .ecw-imc__item {
  aspect-ratio: 1 / 1;
}

/* Layar lebar: 1:1 membuat foto lebar setinggi 600px. 4:3 dan 8:9
   tetap menjaga dua baris sama tinggi. */
@media (min-width: 768px) {
  .ecw-imc.ecw-imc--mosaic .ecw-imc__cell .ecw-imc__item {
    aspect-ratio: 8 / 9;
  }

  .ecw-imc.ecw-imc--mosaic .ecw-imc__cell:nth-child(5n + 1) .ecw-imc__item,
  .ecw-imc.ecw-imc--mosaic .ecw-imc__cell:nth-child(5n + 2) .ecw-imc__item {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767px) {
  .ecw-imc.ecw-imc--mosaic .ecw-imc__title {
    font-size: var(--ecw-text-sm);
  }

  .ecw-imc.ecw-imc--mosaic .ecw-imc__text {
    font-size: var(--ecw-text-micro);
  }

  .ecw-imc.ecw-imc--mosaic .ecw-imc__cell:nth-child(5n + 3) .ecw-imc__caption,
  .ecw-imc.ecw-imc--mosaic .ecw-imc__cell:nth-child(5n + 4) .ecw-imc__caption,
  .ecw-imc.ecw-imc--mosaic .ecw-imc__cell:nth-child(5n + 5) .ecw-imc__caption {
    padding: var(--ecw-sp-xs);
    padding-top: var(--ecw-sp-xl);
  }
}