/* Composable Systems Site Kit: enhancements loaded on every page, after the Additional CSS.
   1. "How we work" as one continuous journey (animated by site-kit.js: --cs-progress and .cs-on)
   2. Equal-height case-study cards in the phone slider */

/* ---------- 1. Process journey ---------- */
.cs-process.cs-journey { position: relative; --cs-progress: 0; }
.cs-process.cs-journey::after {           /* the travelled part of the track */
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, #16c8b4, #3d6cf6 60%, #7b5cff);
  transition: transform .2s linear;
}
.cs-journey .cs-step { position: relative; z-index: 1 !important; }
.cs-journey .cs-step-dot { position: relative; z-index: 3 !important; }
.cs-journey .cs-step-dot .elementor-heading-title {
  position: relative; transition: background .5s, color .5s, border-color .5s, box-shadow .5s, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cs-journey .cs-step.cs-on .cs-step-dot .elementor-heading-title {
  background: linear-gradient(135deg, #16c8b4, #3d6cf6) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 8px 24px -8px rgba(61, 108, 246, .55);
}
.cs-journey .cs-step.cs-current .cs-step-dot .elementor-heading-title { transform: scale(1.08); }
.cs-journey .cs-step.cs-current .cs-step-dot .elementor-heading-title::after {   /* pulse on the step being reached */
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(22, 200, 180, .55);
  animation: cs-journey-pulse 1.8s ease-out infinite;
}
@keyframes cs-journey-pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.cs-journey .cs-step-title, .cs-journey .cs-step .elementor-widget-text-editor { transition: opacity .6s; }
.cs-journey.cs-animating .cs-step:not(.cs-on) .cs-step-title,
.cs-journey.cs-animating .cs-step:not(.cs-on) .elementor-widget-text-editor { opacity: .45; }
/* travelling light (added by site-kit.js) */
.cs-journey-runner { position: absolute; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 25%, #16c8b4 45%, rgba(22, 200, 180, 0) 72%); box-shadow: 0 0 18px 6px rgba(22, 200, 180, .45);
  opacity: 0; transition: opacity .4s; }
.cs-journey.cs-animating .cs-journey-runner, .cs-journey.cs-looping .cs-journey-runner { opacity: 1; }

/* Desktop: all steps on one horizontal track */
@media (min-width: 1025px) {
  .cs-process.cs-journey { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .cs-process.cs-journey::before { display: block !important; left: 28px !important; right: 28px !important; }
  .cs-process.cs-journey::after { left: 28px; right: 28px; top: 26px; height: 3px; transform-origin: left center; transform: scaleX(var(--cs-progress)); }
  .cs-journey .cs-journey-runner { top: 27px; }
  .cs-journey .cs-step { padding-right: 28px !important; }
}
/* Tablet and phone: a vertical timeline that fills as you scroll */
@media (max-width: 1024px) {
  .cs-process.cs-journey { grid-template-columns: minmax(0, 1fr) !important; row-gap: 40px !important; }
  /* the track runs from the first step's circle to the last one's (--cs-track is measured by site-kit.js) */
  .cs-process.cs-journey::before { display: block !important; content: ""; position: absolute; left: 27px !important; right: auto !important;
    top: 28px !important; bottom: auto !important; width: 1px; height: var(--cs-track, calc(100% - 56px)) !important; background: #e1e5f2; }
  .cs-process.cs-journey::after { left: 26px; top: 28px; width: 3px; height: var(--cs-track, calc(100% - 56px)); transform-origin: center top; transform: scaleY(var(--cs-progress)); }
  .cs-journey .cs-step { padding: 0 0 0 80px !important; min-height: 56px; }
  .cs-journey .cs-step-dot { position: absolute !important; left: 0; top: 0; }
  .cs-journey .cs-step-dot .elementor-heading-title { margin-bottom: 0 !important; }
  .cs-journey .cs-journey-runner { left: 27px; margin: -7px 0 0 -6px; }
}
/* Arabic: the journey runs right to left */
html[dir="rtl"] .cs-process.cs-journey::after { background: linear-gradient(270deg, #16c8b4, #3d6cf6 60%, #7b5cff); }
@media (min-width: 1025px) { html[dir="rtl"] .cs-process.cs-journey::after { transform-origin: right center; }
  html[dir="rtl"] .cs-journey .cs-step { padding-right: 0 !important; padding-left: 28px !important; } }
@media (max-width: 1024px) {
  html[dir="rtl"] .cs-process.cs-journey::before { left: auto !important; right: 27px !important; }
  html[dir="rtl"] .cs-process.cs-journey::after { left: auto; right: 26px; }
  html[dir="rtl"] .cs-journey .cs-step { padding: 0 80px 0 0 !important; }
  html[dir="rtl"] .cs-journey .cs-step-dot { left: auto; right: 0; }
  html[dir="rtl"] .cs-journey .cs-journey-runner { left: auto; right: 27px; margin: -7px -6px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .cs-journey-runner { display: none; } }

/* ---------- 2. Case-study cards: equal height in the phone slider ---------- */
@media (max-width: 767px) {
  .cs-cards { align-items: stretch !important; }
  .cs-cards > .cs-case { height: auto !important; align-self: stretch; display: flex !important; flex-direction: column; }
  .cs-cards > .cs-case > .cs-case-body { flex: 1 1 auto !important; }
  .cs-cards > .cs-case .cs-link-arrow { margin-top: auto !important; }
}