/* ==========================================================================
   Core Journey Slider
   BEM: .core-journey-slider (block), .core-journey-slider__* (elements).

   Coverflow effect via CSS classes toggled by module.js: each .cjs-slide
   gets one of is-prev2/is-prev/is-current/is-next/is-next2 and is positioned
   with a physical translate3d() offset. Falls back to a plain in-flow list
   without JS (.core-journey-slider:not(.is-enhanced)).

   RTL/LTR: logical properties (inset-inline-*, margin-inline-*, text-align:
   end) are used throughout, so layout mirrors automatically. The one
   exception is the coverflow's translate3d() offsets, which — like any
   physical transform — never mirror on their own; they're explicitly
   flipped under [dir="rtl"] below.

   CSS variables: every rule below that depends on a HubSpot style field
   consumes it via var(--cjs-x, fallback) rather than reading the field
   directly — the --cjs-* custom properties themselves are defined once,
   unconditionally, on `.` (this module's per-instance scoping
   class, since it predates {% scope_css %} in this theme) in module.html's
   <style> block. Because custom properties cascade down the DOM from
   wherever they're defined, a rule here can safely use the plain
   .core-journey-slider selector and still resolve the correct per-instance
   value — only rules whose very EXISTENCE is instance-specific (which
   background type is active) have to stay in module.html.
   ========================================================================== */

/* ---- Max-width container (class applied conditionally in module.html;
   the rule itself has no conditional logic, so it lives here) ---- */
.core-journey-slider .page-width {
  width: 100%;
  max-width: var(--cjs-max-width, 1200px);
  margin: 0 auto;
  padding: 0 var(--cjs-padding-lr, 20px);
}

/* ---- Content / layout ---- */
.img-with-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.img-with-grid > div {
  flex: 1;
}
.card-content {
  padding: 120px 80px 48px 80px;
  border-radius: 15px;
}
.core-journey-slider__box {
  height: 56px;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 56px;
  font-size: 32px;
  font-weight: 400;
  position: absolute;
  inset-inline-end: 32px;
  top: 32px;
}
.core-journey-slider__content-inner > *:last-child,
.core-journey-slider__bottom-content > *:last-child {
  margin-bottom: 0;
}
.core-journey-slider__bottom-content {
  margin-top: 30px;
}
.core-journey-slider__right-img > img {
  width: 100%;
  height: auto;
}
.core-journey-slider__img-repeater {
  display: flex;
  flex-wrap: wrap;
  margin: 40px -8px 28px;
  padding: 0;
  list-style: none;
}
.core-journey-slider__img-item {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 5px 20px 0;
  flex: 0 0 calc(100% / 4 - 16px);
  border-radius: 4px;
  margin: 0 8px 16px;
}
.core-journey-slider__card-image > img {
  width: 100%;
  display: block;
  object-fit: contain;
  object-position: bottom;
  max-height: 80px;
}

.core-journey-slider__btn-edit {
  text-align: end;
  margin-top: 35px;
}
.core-journey-slider__btn-edit .button {
  display: inline-block;
  padding: 14px 50px;
  text-decoration: none;
}

/* ---- Active-card border gradient + blur (always-on rules; only the
   values are instance-specific, via CSS variables) ---- */
.core-journey-slider.is-enhanced .cjs-slide.is-next,
.core-journey-slider.is-enhanced .cjs-slide.is-next2,
.core-journey-slider.is-enhanced .cjs-slide.is-prev,
.core-journey-slider.is-enhanced .cjs-slide.is-prev2 {
  filter: blur(var(--cjs-blur, 10px));
}
.core-journey-slider.is-enhanced .cjs-slide.is-current::before {
  background: var(--cjs-border-gradient, none);
}

/* ---- Arrows ----
   Each SVG path's fill reads its own Arrow Style variable directly
   (--cjs-arrow-icon-color for the main shaft path, --cjs-arrow-icon-accent-
   color for the smaller arrowhead-tip path), preserving the icon's two-tone
   design while keeping both tones independently editable. On hover/focus,
   both custom properties are redefined to the single hover color, so the
   two-tone icon converges to one color as interactive feedback. ---- */
.core-journey-slider .cjs-arrow {
  cursor: pointer;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: 0;
  line-height: 0;
  transition: color 0.2s;
}
.core-journey-slider .cjs-arrow:hover,
.core-journey-slider .cjs-arrow:focus-visible {
  --cjs-arrow-icon-color: var(--cjs-arrow-icon-hover-color, #8b56e7);
}
.core-journey-slider .cjs-arrow:focus-visible {
  outline: 2px solid var(--cjs-arrow-icon-hover-color, #8b56e7);
  outline-offset: 4px;
  border-radius: 4px;
}
.core-journey-slider__arrow {
  display: flex;
  gap: 12px;
}

/* ---- Viewport ---- */
.core-journey-slider__viewport {
  position: relative;
}
.core-journey-slider .cor_card_slider {
  position: relative;
}

/* ---- Visually-hidden live region (slide announcements for screen readers) ---- */
.cjs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Pagination dots ----
   Resting and active colors (including their own opacity) come from the
   Pagination Style fields, so the :hover bump layers a relative opacity
   increase on top of whichever color is configured. ---- */
.cjs-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.cjs-dot {
  cursor: pointer;
  padding: 0;
  border: 0;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--cjs-dot-color, rgba(70, 68, 62, 35%));
  transition:
    background-color 0.2s,
    transform 0.2s;
}
.cjs-dot:hover {
  opacity: 0.8;
}
.cjs-dot.is-active {
  background-color: var(--cjs-dot-active-color, rgba(139, 86, 231, 100%));
  transform: scale(1.3);
}
.cjs-dot:focus-visible {
  outline: 2px solid var(--cjs-dot-active-color, rgba(139, 86, 231, 100%));
  outline-offset: 3px;
}

/* ============================================================
ACTIVE CARD — static gradient border with a white flash sweep
Two stacked rings built with the mask "exclude" technique so only
the border itself is painted (the fill stays transparent):
  ::before -> static colour gradient (the border)
  ::after  -> a soft white streak that sweeps across that gradient
Falls back to a plain border on browsers without mask-composite.
============================================================ */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .core-journey-slider.is-enhanced .cjs-slide.is-current::before,
  .core-journey-slider.is-enhanced .cjs-slide.is-current::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .core-journey-slider.is-enhanced .cjs-slide.is-current::before {
    z-index: 3;
  }
  .core-journey-slider.is-enhanced .cjs-slide.is-current::after {
    z-index: 4;
    background: linear-gradient(
      115deg,
      transparent 35%,
      rgba(255, 255, 255, 0.85) 50%,
      transparent 65%
    );
    background-size: 240% 240%;
    background-position: -120% -120%;
    animation: cjs-border-sweep 3.2s ease-in-out infinite;
  }
  @keyframes cjs-border-sweep {
    to {
      background-position: 120% 120%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .core-journey-slider.is-enhanced .cjs-slide.is-current::after {
      animation: none;
    }
  }
}

/* ============================================================
NO-JS / NOT-ENHANCED FALLBACK
Without the script, every slide is simply shown in flow.
============================================================ */
.core-journey-slider:not(.is-enhanced) .core-journey-slider__items {
  margin-bottom: 24px;
}
.core-journey-slider:not(.is-enhanced) .core-journey-slider__arrow {
  display: none;
}

/* ============================================================
ENHANCED COVERFLOW  (desktop / tablet, >= 768px)
============================================================ */
@media (min-width: 768px) {
  .core-journey-slider__card {
    /* Inline-start reserves room for the arrow column when it's shown (see
       --cjs-card-padding-start in module.html); matches the arrow's own
       inset-inline-start positioning so both sides stay in sync in RTL. */
    padding-block: 20px;
    padding-inline-end: 6%;
    padding-inline-start: var(--cjs-card-padding-start, 10%);
    position: relative;
  }
  .core-journey-slider.is-enhanced .cor_card_slider {
    perspective: var(--cjs-perspective, 1000px);
    padding: 20px 5% 20px 5%;
  }
  /* base: hidden, absolutely stacked */
  .core-journey-slider.is-enhanced .cjs-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition:
      transform 1s,
      opacity 1s,
      filter 1s;
  }
  /* current sits in normal flow so it sets the section height */
  .core-journey-slider.is-enhanced .cjs-slide.is-current {
    position: relative;
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
  }
  .core-journey-slider.is-enhanced .cjs-slide.is-next,
  .core-journey-slider.is-enhanced .cjs-slide.is-next2,
  .core-journey-slider.is-enhanced .cjs-slide.is-prev,
  .core-journey-slider.is-enhanced .cjs-slide.is-prev2 {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1;
  }
  .core-journey-slider.is-enhanced .cjs-slide.is-next {
    transform: translate3d(4%, 0, -10px);
  }
  .core-journey-slider.is-enhanced .cjs-slide.is-next2 {
    transform: translate3d(0, 0, -20px);
    z-index: 0;
  }
  .core-journey-slider.is-enhanced .cjs-slide.is-prev {
    transform: translate3d(-4%, 0, -10px);
  }
  .core-journey-slider.is-enhanced .cjs-slide.is-prev2 {
    transform: translate3d(-10%, 0, -20px);
    z-index: 0;
  }

  /* RTL: translate3d() is always physical and never mirrors on its own.
     Swapping the sign here swaps is-next/is-prev's visual positions, so
     "next" still reads toward the way Arabic content advances (forward =
     left) instead of physically matching the LTR offsets. */
  [dir="rtl"] .core-journey-slider.is-enhanced .cjs-slide.is-next {
    transform: translate3d(-4%, 0, -10px);
  }
  [dir="rtl"] .core-journey-slider.is-enhanced .cjs-slide.is-next2 {
    transform: translate3d(0, 0, -20px);
  }
  [dir="rtl"] .core-journey-slider.is-enhanced .cjs-slide.is-prev {
    transform: translate3d(4%, 0, -10px);
  }
  [dir="rtl"] .core-journey-slider.is-enhanced .cjs-slide.is-prev2 {
    transform: translate3d(10%, 0, -20px);
  }

  .core-journey-slider.is-enhanced .core-journey-slider__arrow {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    flex-direction: column;
  }
}
@media (max-width: 1180px) {
  .core-journey-slider.is-enhanced .cjs-slide.is-prev2,
  .core-journey-slider.is-enhanced .cjs-slide.is-next2 {
    transform: translate3d(0, 0, -20px);
  }
  [dir="rtl"] .core-journey-slider.is-enhanced .cjs-slide.is-prev2,
  [dir="rtl"] .core-journey-slider.is-enhanced .cjs-slide.is-next2 {
    transform: translate3d(0, 0, -20px);
  }
  .img-with-grid > div {
    flex: 0 0 100%;
  }
  .card-content {
    padding: 120px 40px 48px 40px;
  }
}

@media (max-width: 991px) {
  .core-journey-slider__img-item {
    flex: 0 0 calc(100% / 3 - 16px);
  }
}

/* ============================================================
MOBILE  (<= 767px) — single slide, no blur, swipeable
============================================================ */
@media (max-width: 767px) {
  .core-journey-slider.is-enhanced .cor_card_slider {
    padding: 0;
  }
  .core-journey-slider.is-enhanced .cjs-slide {
    display: none;
    opacity: 1;
    transform: none;
    filter: none;
    position: relative;
  }
  .core-journey-slider.is-enhanced .cjs-slide.is-current {
    display: block;
  }
  .core-journey-slider__content-inner {
    max-width: 100%;
  }
  .core-journey-slider__right-img {
    margin: 20px 0;
  }
  .card-content {
    padding: 32px;
  }
  .core-journey-slider__box {
    height: 40px;
    width: 40px;
    font-size: 28px;
    position: static;
    margin-inline-start: auto;
    margin-bottom: 5px;
  }
  .core-journey-slider__arrow {
    justify-content: center;
    margin-bottom: 30px;
  }
  .core-journey-slider__btn-edit {
    margin-top: 12px;
  }
}
@media (max-width: 580px) {
  .core-journey-slider__img-item {
    flex: 0 0 100%;
    margin: 0 0 16px 0;
  }
}
/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .core-journey-slider.is-enhanced .cjs-slide {
    transition: none;
  }
}