/* Case study cards on the Save Now Pay Later page (case-study-snpl.php).
   Colours follow the case study pages: navy text, teal accents, light blue panels.
   Breakpoints: 1600 (large), 1199 (one card per row), 767 (small tablet), 600 (phone). */

.snpl-csx {
  /* Colours */
  --csx-heading: #0332b9;
  --csx-navy: #0b1b33;
  --csx-text: #3a4a60;
  --csx-body: #303030;
  --csx-muted: #6b7a90;
  --csx-white: #fff;
  --csx-teal: #0f9f97;
  --csx-teal-dark: #0b827b;
  --csx-teal-text: #07706a;
  --csx-teal-soft: #e3f5f3;
  --csx-teal-line: #cfe9e6;
  --csx-teal-hover: #8fd3cc;
  --csx-sky: #eef7fc;
  --csx-sky-2: #e6f3fb;
  --csx-sky-3: #cfe6f6;
  --csx-line: #e2e9f2;

  /* Type */
  --csx-font: "Manrope", Arial, sans-serif;
  --csx-fs-title: clamp(26px, 1.4vw + 16px, 36px);
  --csx-fs-sub: clamp(15px, 0.35vw + 12px, 19px);
  --csx-fs-name: clamp(17px, 0.4vw + 13px, 21px);
  --csx-fs-excerpt: clamp(14px, 0.2vw + 12px, 15.5px);

  /* Layout and shape */
  --csx-wrap: min(1360px, 88vw);
  --csx-pad: clamp(32px, 4vw, 56px);
  --csx-gap: clamp(16px, 2vw, 24px);
  --csx-thumb-min: 250px;
  --csx-radius: 16px;
  --csx-radius-sm: 10px;
  --csx-radius-pill: 999px;
  --csx-shadow: 0 8px 24px rgba(15, 40, 80, 0.07);
  --csx-shadow-hover: 0 16px 34px rgba(15, 40, 80, 0.12);
  --csx-shadow-badge: 0 6px 16px rgba(15, 40, 80, 0.14);
  --csx-ease: 0.2s ease;

  /* Carousel */
  --csx-per-view: 2;                 /* cards visible at once */
  --csx-arrow-size: 48px;
  --csx-arrow-offset: -24px;          /* half outside the cards */
  --csx-arrow-top: calc(50% - 4px);  /* middle of the cards: the track has 8px more padding below than above */
  --csx-thumb-art-bg: #e9f7fd;       /* edge colour of the Figma card artwork */
  --csx-thumb-art-pad: 8px 8px 64px; /* keeps the artwork clear of the badge */
  --csx-dot: 10px;
  --csx-dot-active: 28px;
  --csx-focus: #ffbf00;

  padding: var(--csx-pad) 0 calc(var(--csx-pad) + 8px);
  background: linear-gradient(180deg, var(--csx-white) 0%, var(--csx-sky) 100%);
  font-family: var(--csx-font);
}

.snpl-csx *,
.snpl-csx *::before,
.snpl-csx *::after {
  box-sizing: border-box;
}

.snpl-csx__wrap {
  width: var(--csx-wrap);
  margin: 0 auto;
}

/* Heading on the left, carousel buttons on the right */
.snpl-csx__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.snpl-csx__head {
  max-width: 760px;
}

.snpl-csx__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 14px;
  border: 1px solid var(--csx-teal-line);
  border-radius: var(--csx-radius-pill);
  background: var(--csx-white);
  color: var(--csx-teal-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.snpl-csx__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--csx-teal);
}

.snpl-csx__title {
  margin: 0 0 10px;
  color: var(--csx-heading);
  font-size: var(--csx-fs-title);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.snpl-csx__sub {
  margin: 0;
  color: var(--csx-body);
  font-size: var(--csx-fs-sub);
  line-height: 1.5;
}

/* ---------- Carousel ---------- */

.snpl-csx__dots[hidden] {
  display: none;
}

.snpl-csx__dot:focus-visible,
.snpl-csx__track:focus-visible {
  outline: 3px solid var(--csx-focus);
  outline-offset: 3px;
}

.snpl-csx__carousel {
  margin-top: clamp(24px, 2.5vw, 32px);
}

/* Holds the track and the side arrows; the arrows sit on the vertical middle of the cards */
.snpl-csx__viewport {
  position: relative;
}

.snpl-csx__arrow {
  position: absolute;
  top: var(--csx-arrow-top);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--csx-arrow-size);
  height: var(--csx-arrow-size);
  padding: 0;
  border: 1px solid var(--csx-teal-line);
  border-radius: 50%;
  background: var(--csx-white);
  color: var(--csx-navy);
  box-shadow: var(--csx-shadow-hover);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.85);
  transition: opacity var(--csx-ease), transform var(--csx-ease), background-color var(--csx-ease), color var(--csx-ease), border-color var(--csx-ease);
}

.snpl-csx__arrow[hidden] {
  display: none;
}

.snpl-csx__arrow--prev {
  left: var(--csx-arrow-offset);
}

.snpl-csx__arrow--next {
  right: var(--csx-arrow-offset);
}

.snpl-csx__arrow--prev svg {
  transform: rotate(180deg);
}

/* Visible while the pointer is over the cards or an arrow has keyboard focus */
.snpl-csx__viewport:hover .snpl-csx__arrow,
.snpl-csx__arrow:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.snpl-csx__arrow:hover {
  border-color: var(--csx-teal);
  background: var(--csx-teal);
  color: var(--csx-white);
}

.snpl-csx__arrow:active {
  transform: translateY(-50%) scale(0.92);
}

.snpl-csx__arrow:focus-visible {
  outline: 3px solid var(--csx-focus);
  outline-offset: 3px;
}

/* No hover on touch screens: keep the arrows visible */
@media (hover: none) {
  .snpl-csx__arrow {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }
}

/* The track scrolls sideways; padding leaves room for the card shadow and hover lift */
.snpl-csx__track {
  display: flex;
  gap: var(--csx-gap);
  margin: -8px -6px -16px;
  padding: 8px 6px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  scroll-padding-inline: 6px;        /* match the side padding so cards snap flush */
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.snpl-csx__track::-webkit-scrollbar {
  display: none;
}

.snpl-csx.is-scrollable .snpl-csx__track {
  cursor: grab;
}

.snpl-csx__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  -webkit-user-select: none;
  user-select: none;
}

.snpl-csx__slide {
  display: flex;
  flex: 0 0 calc((100% - (var(--csx-per-view) - 1) * var(--csx-gap)) / var(--csx-per-view));
  min-width: 0;
  scroll-snap-align: start;
}

.snpl-csx__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 18px;
}

/* 24px touch target around a small dot */
.snpl-csx__dot {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.snpl-csx__dot::before {
  content: "";
  width: var(--csx-dot);
  height: var(--csx-dot);
  border-radius: var(--csx-radius-pill);
  background: var(--csx-line);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.snpl-csx__dot:hover::before {
  background: var(--csx-teal-hover);
}

.snpl-csx__dot.is-active::before {
  width: var(--csx-dot-active);
  background: var(--csx-teal);
}

/* Card: thumbnail on the left, text on the right */
.snpl-csx__card {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius);
  background: var(--csx-white);
  box-shadow: var(--csx-shadow);
  color: inherit;
  text-decoration: none;
  transition: transform var(--csx-ease), box-shadow var(--csx-ease), border-color var(--csx-ease);
}

.snpl-csx__card:hover {
  border-color: var(--csx-teal-hover);
  box-shadow: var(--csx-shadow-hover);
  transform: translateY(-3px);
}

.snpl-csx__card:focus-visible {
  outline: 3px solid var(--csx-teal);
  outline-offset: 3px;
}

.snpl-csx__thumb {
  position: relative;
  min-height: var(--csx-thumb-min);
  overflow: hidden;
  background: var(--csx-sky-2);
}

.snpl-csx__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the artwork sits in the right half of the banner */
  object-position: 76% center;
  transition: transform 0.4s ease;
}

.snpl-csx__card:hover .snpl-csx__thumb img {
  transform: scale(1.04);
}

/* Figma card artwork: shown whole on its own light blue */
.snpl-csx__thumb--image {
  background: var(--csx-thumb-art-bg);
}

.snpl-csx__thumb--image img {
  padding: var(--csx-thumb-art-pad);
  object-fit: contain;
  object-position: center;
}

.snpl-csx__thumb--plain {
  background: linear-gradient(135deg, var(--csx-sky-2) 0%, var(--csx-sky-3) 100%);
}

/* Case studies without a banner image show their flow diagram (inline SVG) instead */
.snpl-csx__thumb--art {
  background: linear-gradient(135deg, var(--csx-sky) 0%, var(--csx-sky-2) 55%, var(--csx-sky-3) 100%);
}

.snpl-csx__thumb--art .scs-flow {
  position: absolute;
  inset: 6% 4% 22%;
  width: 92%;
  height: 72%;
  transition: transform 0.4s ease;
}

.snpl-csx__card:hover .snpl-csx__thumb--art .scs-flow {
  transform: scale(1.04);
}

.snpl-csx__badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: var(--csx-radius-sm);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--csx-shadow-badge);
}

.snpl-csx__badge strong {
  color: var(--csx-teal-dark);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.snpl-csx__badge span {
  color: var(--csx-text);
  font-size: 11.5px;
  font-weight: 600;
}

.snpl-csx__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(18px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px) clamp(16px, 1.4vw, 20px);
}

.snpl-csx__pill {
  padding: 4px 10px;
  border-radius: var(--csx-radius-pill);
  background: var(--csx-teal-soft);
  color: var(--csx-teal-text);
  font-size: 11.5px;
  font-weight: 700;
}

.snpl-csx__name {
  margin: 10px 0 8px;
  color: var(--csx-navy);
  font-size: var(--csx-fs-name);
  font-weight: 800;
  line-height: 1.3;
}

.snpl-csx__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--csx-text);
  font-size: var(--csx-fs-excerpt);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.snpl-csx__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 16px 0 0;
  padding: 12px 0;
  border-top: 1px solid var(--csx-line);
  border-bottom: 1px solid var(--csx-line);
}

.snpl-csx__stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 10px;
  border-left: 1px solid var(--csx-line);
}

.snpl-csx__stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.snpl-csx__stat dd {
  margin: 0;
  color: var(--csx-navy);
  font-size: clamp(15px, 0.3vw + 12px, 17px);
  font-weight: 800;
  line-height: 1.2;
}

.snpl-csx__stat dt {
  margin-top: 2px;
  color: var(--csx-muted);
  font-size: clamp(11px, 0.15vw + 9.5px, 12px);
  font-weight: 600;
  line-height: 1.3;
}

.snpl-csx__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--csx-teal-text);
  font-size: 15px;
  font-weight: 800;
}

.snpl-csx__cta svg {
  transition: transform var(--csx-ease);
}

.snpl-csx__card:hover .snpl-csx__cta svg {
  transform: translateX(4px);
}

/* One card at a time: wide enough to keep the image beside the text */
@media (max-width: 1199px) {
  .snpl-csx {
    --csx-per-view: 1;
  }
}

@media (max-width: 767px) {
  .snpl-csx {
    --csx-wrap: calc(100% - 32px);
    --csx-arrow-size: 40px;
    --csx-arrow-offset: 8px;           /* little room beside the cards: sit inside them */
  }

  .snpl-csx__top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Phones: image on top */
@media (max-width: 600px) {
  .snpl-csx__card {
    grid-template-columns: 1fr;
  }

  .snpl-csx__thumb {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .snpl-csx__thumb img {
    object-position: 78% center;
  }

  /* Image on top of the card: arrows sit on the middle of the image, clear of the text
     (8px track padding + half of a 16:9 image as wide as the card) */
  .snpl-csx {
    --csx-arrow-top: calc(8px + (100vw - 32px) * 9 / 32);
  }

  .snpl-csx__thumb--image {
    --csx-thumb-art-pad: 8px 8px 60px;
  }

  .snpl-csx__stat {
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snpl-csx__card,
  .snpl-csx__thumb img,
  .snpl-csx__cta svg,
  .snpl-csx__arrow,
  .snpl-csx__dot::before {
    transition: none;
  }

  .snpl-csx__card:hover,
  .snpl-csx__card:hover .snpl-csx__thumb img {
    transform: none;
  }
}