/* =====================================================================
   BX3 CAROUSEL — teks kiri, kartu bergeser kanan, garis progres di bawah kartu
   (seperti "Tentang Teh CHAGEE"). Geser dengan drag mouse / sentuh / trackpad.
   ===================================================================== */

.bx3.bx3-rail{display:grid;grid-template-columns:31.7% 68.3%;grid-template-rows:auto auto;align-items:center;padding:var(--bx3-sec-y) 0;background:var(--bx3-white)}
.bx3.bx3-rail--cream{background:var(--bx3-cream)}
.bx3 .bx3-rail__intro{grid-column:1;grid-row:1;padding:0 clamp(20px,2.4vw,44px) 0 var(--bx3-pad-x);min-width:0}
.bx3 .bx3-rail__intro .bx3-text{max-width:22em}

.bx3 .bx3-rail__track{grid-column:2;grid-row:1;display:flex;align-items:flex-start;gap:clamp(14px,1.95vw,38px);min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-right:var(--bx3-pad-x);cursor:grab}
.bx3 .bx3-rail__track::-webkit-scrollbar{display:none}
.bx3 .bx3-rail__track.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.bx3 .bx3-rail__track:focus-visible{outline-offset:-2px}

.bx3 .bx3-rail__bar{grid-column:2;grid-row:2;position:relative;width:70%;height:3px;margin-top:clamp(24px,2.6vw,50px);background:var(--bx3-track);border-radius:3px;overflow:hidden}
.bx3 .bx3-rail__bar i{position:absolute;top:0;bottom:0;left:calc((100% - var(--bx3-w,30%)) * var(--bx3-p,0));width:var(--bx3-w,30%);background:var(--bx3-choc);border-radius:3px}
.bx3 .bx3-rail__bar[hidden]{display:none}

/* ---------- Kartu ---------- */
.bx3 .bx3-card{flex:0 0 clamp(220px,20.8vw,420px);scroll-snap-align:start;min-width:0}
.bx3 .bx3-card--11{flex-basis:clamp(240px,22vw,440px)}
.bx3 .bx3-card--32{flex-basis:clamp(300px,28vw,560px)}
.bx3 .bx3-card__link{display:block;color:inherit}
.bx3 .bx3-card__img{aspect-ratio:3/4;border-radius:var(--bx3-r)}
.bx3 .bx3-card--11 .bx3-card__img{aspect-ratio:1/1}
.bx3 .bx3-card--32 .bx3-card__img{aspect-ratio:3/2}
.bx3 .bx3-card__img>img{transition:transform .5s var(--bx3-ease)}
.bx3 a.bx3-card__link[href]:is(:hover,:focus-visible) .bx3-card__img>img{transform:scale(1.04)}
.bx3 .bx3-card__img.is-empty{background:var(--bx3-sand)}

/* Produk: PNG transparan utuh di atas latar warna, tidak pernah terpotong */
.bx3 .bx3-card__img--product{background:var(--bx3-cream)}
.bx3.bx3-rail--prod-sand .bx3-card__img--product{background:var(--bx3-sand)}
.bx3.bx3-rail--prod-white .bx3-card__img--product{background:var(--bx3-white);box-shadow:inset 0 0 0 1px var(--bx3-line)}
.bx3.bx3-rail--prod-pattern .bx3-card__img--product{background:var(--bx3-cream) url(../img/bg-pattern.jpg) 50% 50%/cover no-repeat}
.bx3 .bx3-card__img--product>img,.bx3 .bx3-card__img--product>picture>img{inset:7% 9%;width:82%;height:86%;object-fit:contain;object-position:50% 60%;filter:drop-shadow(0 18px 22px rgba(100,59,34,.14))}

.bx3 .bx3-card__name{margin-top:16px;font-size:var(--bx3-fs-sm);line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--bx3-ink)}
.bx3 .bx3-card__meta{margin-top:16px;font-size:var(--bx3-fs-xs);line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--bx3-ink-soft)}
.bx3 .bx3-card__meta--after{margin-top:6px}
.bx3 .bx3-card__title{margin-top:6px;font-size:var(--bx3-fs-body);font-weight:700;line-height:1.5;color:var(--bx3-ink);transition:color var(--bx3-t) var(--bx3-ease)}
.bx3 a.bx3-card__link[href]:is(:hover,:focus-visible) .bx3-card__title{color:var(--bx3-orange)}

/* Kutipan: ukuran sama dengan kartu foto, teks saja (krem = pelanggan, pasir = mitra) */
.bx3 .bx3-quote{aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(24px,2.1vw,40px);border-radius:var(--bx3-r);background:var(--bx3-cream);line-height:1.4}
.bx3.bx3-rail--cream .bx3-quote{background:var(--bx3-white)}
.bx3 .bx3-quote--partner,.bx3.bx3-rail--cream .bx3-quote--partner{background:var(--bx3-sand)}
.bx3 .bx3-card--11.bx3-quote{aspect-ratio:1/1}
.bx3 .bx3-quote__role{font-size:var(--bx3-fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--bx3-ink-soft)}
.bx3 .bx3-quote__text{font-size:var(--bx3-fs-body);line-height:1.8;color:var(--bx3-ink)}
.bx3 .bx3-quote__by{display:flex;flex-direction:column;font-size:var(--bx3-fs-sm);line-height:1.6;color:var(--bx3-ink-soft)}
.bx3 .bx3-quote__by strong{font-weight:700;color:var(--bx3-ink)}

/* ---------- Tablet & HP: teks di atas, kartu selebar layar ---------- */
@media (max-width:900px){
  .bx3.bx3-rail{grid-template-columns:100%;grid-template-rows:auto auto auto}
  .bx3 .bx3-rail__intro{grid-row:1;padding:0 var(--bx3-pad-x) 40px}
  .bx3 .bx3-rail__track{grid-column:1;grid-row:2;padding-left:var(--bx3-pad-x);scroll-padding-left:var(--bx3-pad-x)}
  .bx3 .bx3-rail__bar{grid-column:1;grid-row:3;width:auto;margin-left:var(--bx3-pad-x);margin-right:var(--bx3-pad-x)}
  .bx3 .bx3-card{flex-basis:min(66vw,340px)}
  .bx3 .bx3-card--11{flex-basis:min(72vw,360px)}
  .bx3 .bx3-card--32{flex-basis:min(82vw,440px)}
}
@media (prefers-reduced-motion:reduce){
  .bx3 .bx3-card__img>img{transition:none}
}