/* =========================================================
   DigitalShri – Case Studies (Elementor widget "DS Case Studies")
   Same design as the homepage case-study HTML widget (scroll stack).
   Section background + outer spacing come from the Elementor container.
   ========================================================= */

/* Theme fix: html/body overflow-x:hidden breaks position:sticky.
   "clip" hides horizontal overflow the same way but keeps sticky working.
   Not while the mobile menu is open (it locks page scroll). */
html:has(.ds-cs):not(.ds-menu-open),
html:has(.ds-cs):not(.ds-menu-open) body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.ds-cs {
  /* BRAND COLOR VARIABLES */
  --brand-primary: #851CF2;
  --brand-secondary: #F38218;
  --brand-tertiary: #000000;

  /* Theme adjustments based on brand colors */
  --text-dark: var(--brand-tertiary);
  --text-gray: #6b7280;
  --pill-bg: #f3e8ff;
  --pill-text: var(--brand-primary);
  --badge-bg: #fff7ed;
  --badge-text: #c2410c;
  --brand-font: 'Inter', sans-serif;

  /* Scroll-stack settings (editable in Elementor: Content → Scroll Stack) */
  --stack-top: 110px;     /* distance from top where cards stick (space for the header) */
  --stack-step: 22px;     /* how much each next card sits lower than the previous one */

  font-family: var(--brand-font);
  position: relative;
  padding: 20px 0 60px;
}

.ds-cs *,
.ds-cs *::before,
.ds-cs *::after {
  box-sizing: border-box;
  margin: 0;
}

/* Layout */
.ds-cs .cs-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.ds-cs .cs-track {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 0;
}
.ds-cs .cs-slide {
  padding: 0 20px;
  list-style: none;
}

/* ---------- Scroll stack (desktop) ---------- */
@media (min-width: 993px) and (min-height: 760px) {
  .ds-cs .cs-slide {
    position: sticky;
    top: calc(var(--stack-top) + var(--i, 0) * var(--stack-step));
  }
}

.ds-cs .cs-card {
  --scale: 1;
  --dim: 0;
  position: relative;
  background: white;
  border-radius: 24px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  transform: scale(var(--scale));
  transform-origin: center top;
  will-change: transform;
}
/* darkens a card a little as the next one slides over it */
.ds-cs .cs-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #17181C;
  opacity: var(--dim);
  pointer-events: none;
  border-radius: inherit;
}

/* Left Content */
.ds-cs .cs-content {
  flex: 1;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ds-cs .cs-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-dark);
}
.ds-cs .cs-logo-icon {
  display: block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--text-dark);
  border-radius: 6px;
}
.ds-cs .cs-brand .cs-logo-img {
  display: block;
  width: auto;
  max-width: 140px;
  height: 32px;
  object-fit: contain;
}
.ds-cs .cs-industry {
  color: var(--brand-primary);
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 1rem;
}
.ds-cs .cs-title {
  font-size: 2.2rem;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Pills & Tags */
.ds-cs .cs-pills {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ds-cs .cs-pill {
  background: var(--pill-bg);
  color: var(--pill-text);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}
.ds-cs .cs-desc {
  color: var(--text-gray);
  margin-bottom: 12px;
  line-height: 1.6;
}
.ds-cs .cs-sub {
  font-size: 0.9rem;
  margin-bottom: 30px;
}

/* CTA Button */
.ds-cs .cs-btn {
  display: inline-block;
  background: var(--brand-secondary);
  color: white;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  align-self: flex-start;
  margin-bottom: 30px;
  transition: opacity 0.3s, transform 0.3s;
}
.ds-cs .cs-btn:hover,
.ds-cs .cs-btn:focus-visible { opacity: 0.9; transform: translateY(-2px); color: white; }

/* Trust Badges */
.ds-cs .cs-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-cs .cs-badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  border: 1px solid #fed7aa;
  font-weight: 500;
}

/* Right Image Area */
.ds-cs .cs-image {
  flex: 1;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.ds-cs .cs-image img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 1.2s cubic-bezier(.22,.8,.3,1);
}
.ds-cs .cs-slide.is-in .cs-image img { transform: scale(1); }

/* Content fade-up when a card arrives (only once the script is running,
   so the text never stays hidden if JavaScript fails) */
.ds-cs.is-ready .cs-content > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.ds-cs.is-ready .cs-slide.is-in .cs-content > * { opacity: 1; transform: none; }
.ds-cs .cs-slide.is-in .cs-content > *:nth-child(2) { transition-delay: .06s; }
.ds-cs .cs-slide.is-in .cs-content > *:nth-child(3) { transition-delay: .12s; }
.ds-cs .cs-slide.is-in .cs-content > *:nth-child(4) { transition-delay: .18s; }
.ds-cs .cs-slide.is-in .cs-content > *:nth-child(5) { transition-delay: .24s; }
.ds-cs .cs-slide.is-in .cs-content > *:nth-child(6) { transition-delay: .30s; }
.ds-cs .cs-slide.is-in .cs-content > *:nth-child(7) { transition-delay: .36s; }
.ds-cs .cs-slide.is-in .cs-content > *:nth-child(8) { transition-delay: .42s; }

/* Responsive adjustments */
@media (max-width: 992px) {
  .ds-cs .cs-track { gap: 30px; }
  .ds-cs .cs-card { flex-direction: column; }
  .ds-cs .cs-content { padding: 40px 20px; }
  .ds-cs .cs-title { font-size: 1.8rem; }
  .ds-cs .cs-image { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-cs.is-ready .cs-content > *,
  .ds-cs .cs-image img { opacity: 1; transform: none; transition: none; }
}