/* ==========================================================================
   Testimonials — sticky story (the Home page's #testimonials)
   Markup + behaviour: assets/js/components/case-scroll.js
   Left (cols 1–2) the sticky testimonial card; right (cols 3–4) case images
   that scroll; on phones, stepped with Previous / Next (below).
   ========================================================================== */

.cs {
  align-items: start;
}

/* ------------------------------------------------------------- left */

.cs-left {
  grid-column: 1 / span 2;
  align-self: stretch;
}

.cs-sticky {
  position: sticky;
  top: var(--header-h);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  padding: 40px var(--col-pad) 72px;
}

.cs-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cs-count__num {
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
  line-height: 1.3;
}

.cs-roll {
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.cs-roll b {
  display: block;
  font-weight: inherit;
}

/* the swapping content */
.cs-body {
  margin-top: auto;
  margin-bottom: auto;
  max-width: 560px;
}

.cs-line {
  transition: transform 0.6s var(--ease-out), opacity 0.45s var(--ease);
}

/* staggered: each line follows the one before */
.cs-line:nth-child(2) { transition-delay: 0.05s; }
.cs-line:nth-child(3) { transition-delay: 0.1s; }
.cs-line:nth-child(4) { transition-delay: 0.15s; }
.cs-line:nth-child(5) { transition-delay: 0.2s; }
.cs-line:nth-child(6) { transition-delay: 0.25s; }

.cs-body.is-out .cs-line {
  opacity: 0;
  transform: translateY(-18px);
  transition-duration: 0.32s, 0.28s;
}

.cs-body.is-pre .cs-line {
  opacity: 0;
  transform: translateY(26px);
  transition: none;
}

.cs-body.is-in .cs-line {
  opacity: 1;
  transform: none;
}

/* the labels above the metric, styled as the Services labels: square,
   outlined (hairline stroke), 34px tall, text centred — on dark */
.cs-tags {
  gap: 8px;
}

.cs-tags .chip {
  justify-content: center;
  height: 34px;
  padding: 0 11px;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
  text-align: center;
}

.cs-metric {
  margin-top: 28px;
  font-size: var(--fs-display-md);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

/* the green rating stars (.t-stars, testimonial-split.css), above the review */
.cs-stars {
  display: flex;
}

/* ------------------------------------------------------------- right */

.cs-right {
  grid-column: 3 / span 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px var(--col-pad) 12vh;
}

.cs-case {
  position: relative;
  display: block;
}

.cs-frame {
  position: relative;                 /* holds the "Explore case" pill */
  overflow: hidden;
  height: 72vh;
  background: var(--c-inverse-container);
  box-shadow: 0 0 0 1px var(--line-on-dark);
}

/* the drift layer: fills the frame and carries the scroll parallax */
.cs-frame .cs-drift {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}

.cs-frame img,
.cs-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the thumbnails' pill (project-card.css: .project-card__cursor) shows the
   same way here: scale 0 → 1 while the image is hovered */
.cs-frame.is-hovered .project-card__cursor {
  transform: translate(-50%, -50%) scale(1);
}

.cs-case__label {
  display: block;
  margin-top: 12px;
  color: var(--c-on-inverse-muted);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}

/* the case in the active position is in full; the others rest a little back */
.cs-case .cs-frame {
  opacity: 0.55;
  transition: opacity 0.6s var(--ease);
}

.cs-case.is-active .cs-frame { opacity: 1; }
.cs-case.is-active .cs-case__label { color: var(--c-on-inverse); }

/* ------------------------------------------------------- the card
   The left side as the testimonial card: labels · result · project line ·
   stars · review · client. Sticky. */

.cs--card .cs-sticky {
  padding: 40px 0 40px;
}

/* room under the last image, so it reaches the active position while the
   card is still pinned */
.cs--card .cs-right {
  padding-bottom: 24vh;
}

.cs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-inverse);
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
}

.cs-card > .corners {
  color: var(--c-on-inverse);
}

/* 01 / 03, top right beside the labels */
.cs-card__count {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 1;
  line-height: 34px;                  /* centred on the 34px labels */
  font-size: var(--fs-mono-sm);
}

.cs--card .cs-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;            /* vertically centred in the card … */
  align-items: flex-start;            /* … text stays left-aligned */
  gap: 22px;
  max-width: none;
  margin: 0;
  padding: 40px;
}

.cs--card .cs-metric {
  margin-top: 10px;                   /* labels → heading: 32px (with the 22px gap) */
  font-size: var(--fs-headline-lg);   /* the result: 50px */
  line-height: 1;
  letter-spacing: -0.03em;
}

/* the project / client line: mono caps, as the split testimonial's impact line */
.cs-project {
  max-width: 480px;
  margin-top: -6px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-on-inverse-muted);
}

/* the light grey hairline above the stars, as in the previous version
   (1px --line-on-dark, 24px down to the stars) */
.cs-card__stars {
  width: 100%;
  max-width: 460px;                   /* the divider stops short, under the copy */
  margin-top: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--line-on-dark);
}

/* the review: 22px */
.cs-review {
  max-width: 560px;
  font-size: var(--fs-title-lg);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* the client follows the review at the same 22px as stars → review */
.cs-card__person {
  gap: 16px;
}

/* phones only (below): Previous / Next under the image */
.cs-mnav { display: none; }

/* tablets / phones: one column; the sticky panel sits on top, compact */
@media (max-width: 1199px) {
  .cs-left, .cs-right { grid-column: 1 / -1; }
  .cs-sticky { position: relative; top: auto; height: auto; padding-bottom: 24px; }
  .cs-body { margin: 32px 0; }
  .cs-frame { height: 56vh; }
}

/* phones: the card, then only the active testimonial's image right under
   it (fading in when it changes), then round Previous / Next buttons that
   step through the testimonials (case-scroll.js) — no scroll story */
@media (max-width: 809px) {
  /* the card's content on the same left / right edges as the image (the
     card draws no frame, so its 40px inner padding only pushed the text in),
     and closer to the image: 48px from the client to the image (was ~120px) */
  .cs--card .cs-sticky { padding-bottom: 48px; }
  .cs--card .cs-body { margin: 0; padding: 24px var(--col-pad) 0; }
  .cs-card__count { top: 24px; right: var(--col-pad); }
  .cs-right,
  .cs--card .cs-right { gap: 0; padding: 0 var(--col-pad); }

  .cs-case { display: none; }
  .cs-case.is-active { display: block; animation: cs-case-in 0.6s var(--ease-out) both; }
  .cs-frame { height: auto; aspect-ratio: 4 / 3; }

  /* right-aligned: Next on the image's right edge; 36px under the image's
     caption */
  .cs-mnav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 36px;
  }

  /* round, outlined like the site's pill buttons (white 1.5px stroke, white
     arrow); hover / press → filled white, dark arrow; dimmed at either end */
  .cs-mbtn {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: var(--c-on-inverse);
    box-shadow: inset 0 0 0 1.5px var(--c-on-inverse);
    cursor: pointer;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cs-mbtn svg { width: 20px; height: 20px; }

  .cs-mbtn:hover:not(:disabled),
  .cs-mbtn:focus-visible {
    background-color: var(--c-on-inverse);
    color: var(--c-ink);
  }

  .cs-mbtn:active:not(:disabled) { transform: scale(0.95); }

  .cs-mbtn:disabled { opacity: 0.3; cursor: default; }
}

@keyframes cs-case-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-case.is-active { animation: none; }
}