/* STAGING — Unifikasi mekanik carousel (6 Okt 2026)
   TERKINI bertukar dari dek bertindan (JS swipe) kepada SHELF seragam
   supaya ketiga-tiga seksyen guna satu mekanik: scroll-snap + anak panah.
   Card tetap guna gaya visual sedia ada. */

.articles .stacked-carousel {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.articles .stacked-carousel::-webkit-scrollbar {
  display: none;
}

.articles .stacked-carousel .stacked-card,
.articles .stacked-carousel .stacked-card.active,
.articles .stacked-carousel .stacked-card.behind-1,
.articles .stacked-carousel .stacked-card.behind-2,
.articles .stacked-carousel .stacked-card.behind-3,
.articles .stacked-carousel .stacked-card.swipe-out {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 min(330px, 82vw);
  width: auto;
  height: 400px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  cursor: pointer;
  scroll-snap-align: start;
  z-index: auto;
}

.articles .stacked-carousel .card-bg img {
  transform: none;
}

/* Anak panah sama gaya & tingkah laku seperti seksyen lain (lihat articles.css) */
.articles .carousel-arrow:disabled {
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 700px) {
  .articles .stacked-carousel .stacked-card,
  .articles .stacked-carousel .stacked-card.active,
  .articles .stacked-carousel .stacked-card.behind-1,
  .articles .stacked-carousel .stacked-card.behind-2,
  .articles .stacked-carousel .stacked-card.behind-3,
  .articles .stacked-carousel .stacked-card.swipe-out {
    height: 360px;
  }
}