/* §1 "Visible results backed by our clinical study" — Figma 1186:4744 (desktop) / 1379:4438 (mobile).
   Two-up before/after imagery on the right, the study stat + carousel controls on the left. */

.cs-grid {
  display: flex;
  gap: 80px;
  align-items: stretch;
}
.cs-copy {
  flex: none;
  width: 500px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cs-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.cs-head .rd-h2 {
  line-height: 57.5px;
}

/* Figure, caption, meter and note match the live shop page's computed styles
   (qureskincare.com/pages/microinfusion, measured 2026-10-04). */
.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-meter__label .cs-stat__figure {
  margin: 0 0 5px; /* scoped: a page-level p rule otherwise wins with 16px */
  font-family: var(--heading-font-family), Georgia, serif;
  font-weight: 300;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: normal;
  color: rgb(33 36 40);
}
.cs-meter__label .cs-stat__caption {
  margin: 0;
  font-family: var(--base-font-family), system-ui, sans-serif;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: normal;
  color: #000;
}
.clinical-study .rd-note {
  font-size: 14px;
  line-height: 17.5px;
}
.clinical-study .cs-head .rd-chip {
  padding: 4px 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

/* The bar is the meter's ::after; the label box is --cs-pct wide, its right border is
   the marker, and its own ::after is the fill — so bar, marker, fill and the wrap
   width of the caption all come from the one custom property the carousel sets. */
.cs-meter {
  position: relative;
}
.cs-meter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  border-radius: 12px;
  background: var(--rd-track);
}
.cs-meter__label {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: var(--cs-pct, 70%);
  padding-bottom: 50px;
  border-right: 1px solid var(--rd-ink-2);
}
.cs-meter__label::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  border-radius: 12px 0 0 12px;
  background: var(--rd-mint);
}

.cs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px; /* + the 12px stat gap = the shop page's 24px under the note */
}
.cs-nav__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--base-font-family), system-ui, sans-serif;
  font-size: var(--rd-fs-nav);
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--rd-ink-2);
  cursor: pointer;
}
.cs-nav__btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.cs-nav__btn svg {
  width: 24px;
  height: 24px;
}
.cs-nav__count {
  font-family: var(--base-font-family), system-ui, sans-serif;
  font-size: var(--rd-fs-note);
  line-height: 1.25;
  letter-spacing: -0.13px;
  color: var(--rd-muted-2);
}

/* Imagery */
/* Desktop keeps the one-pair-at-a-time behaviour of the frame, so the rail wrapper is
   transparent and the slides remain flex children of .cs-grid. Mobile turns it into a
   real swipe rail — see the media query. */
.cs-rail {
  display: contents;
}

/* The carousel hides inactive slides with the `hidden` attribute. An author-level
   `display: flex` beats the UA stylesheet's `[hidden] { display: none }`, so without
   this every slide paints at once — four pairs squeezed into one row. */
.cs-media[hidden] {
  display: none;
}
/* One before/after composite per slide, as the live shop page draws it — the reticle
   and the Before/After labels are part of the image. Sized by its own aspect ratio
   rather than stretched to the copy column: stretched, the two portrait halves ran
   ~500px tall on desktop and ~460px each stacked on a phone, which is what Matt
   flagged as "too big" (2026-10-03). */
.cs-media {
  flex: 1 1 0;
  min-width: 0;
  align-self: center;
  display: flex;
}
.cs-shot {
  flex: 0 0 auto;
  width: 97%; /* 3% under the column (Marko, 2026-10-04); right edge stays on the grid */
  min-width: 0;
  margin: 0 0 0 auto;
  aspect-ratio: 1080 / 814;
  border-radius: var(--rd-radius-card);
  overflow: hidden;
}
.cs-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023px) {
  /* Heading, then the image, then the concern chip and the stat — the live shop page's
     order. The copy wrappers dissolve so their children can sit either side of the rail. */
  .cs-grid {
    flex-direction: column;
    gap: 24px;
  }
  .cs-copy,
  .cs-head {
    display: contents;
  }
  .cs-head .rd-h2 {
    order: 0;
  }
  .cs-head .rd-chip {
    order: 2;
    align-self: flex-start;
  }
  .cs-stat {
    order: 3;
  }
  /* A real swipe rail on mobile: every slide is laid out side by side and the finger
     drives it, with the buttons scrolling the same rail. Tapping a control was the only
     way through it before, which is not how anyone reads a before/after on a phone. */
  .cs-rail {
    display: flex;
    order: 1;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rd-gutter);
    margin-inline: calc(var(--rd-gutter) * -1);
    padding-inline: var(--rd-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .cs-rail::-webkit-scrollbar {
    display: none;
  }
  .cs-media {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  /* the rail shows every slide; nothing is hidden on mobile */
  .cs-media[hidden] {
    display: flex;
  }
  .cs-head .rd-h2 {
    line-height: 1.18;
  }
  .cs-stat {
    gap: 24px;
  }
  .cs-shot {
    margin: 0;
  }
  .cs-nav {
    padding-top: 0;
  }
}