/*
 * Shared demo card + carousel styles.
 * Loaded on all three solution pages via <link rel="stylesheet">.
 */

/* Badge: prevent tag pill from overflowing card boundaries */
.sc-demo-badge      { max-width: 100%; overflow: hidden; }
.sc-demo-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Content panel fills card height */
.sc-demo-content { flex: 1; }

/* ── CAROUSEL STRUCTURE ── */
.sc-demo-carousel { overflow: hidden; width: 100%; }
.sc-demo-carousel-track {
  display: flex; gap: 32px; align-items: stretch;
  transition: transform 0.35s ease;
  will-change: transform;
}

/* Card sizing inside carousel.
 * Specificity 0,2,0 (.sc-demo-carousel .sc-demo-card) overrides the
 * page-level .sc-demo-card { flex: 1 } (0,1,0) regardless of load order. */
.sc-demo-carousel .sc-demo-card { flex: 0 0 calc((100% - 64px) / 3); min-width: 0; }

@media (max-width: 1024px) {
  .sc-demo-carousel .sc-demo-card { flex: 0 0 calc((100% - 32px) / 2); }
}
@media (max-width: 767px) {
  .sc-demo-carousel .sc-demo-card { flex: 0 0 100%; min-height: 300px; }
}

/* ── ARROWS ── */
.sc-demo-arrow:hover:not(:disabled) { border-color: var(--border); color: var(--text-primary); }
.sc-demo-arrow:disabled             { opacity: 0.35; cursor: not-allowed; }