/* Results page. Built from the home page's panels (home.css: ad-*) and the about
   page's opening and stats (about.css: ab-hero, ab-stats); these are the case-study parts. */

.rs-stats { max-width: 960px; margin: 0 auto; background: #fff; }
@media (min-width: 768px) {
  .rs-stats { grid-template-columns: repeat(4, 1fr); }
  .rs-stats div { border-width: 0; }
  .rs-stats div:not(:last-child) { border-right-width: 1px; }
}

.rs-head { margin: 8px 0 0 !important; font-size: 18px !important; font-weight: 600; color: var(--ad-ink) !important; }

/* The result, read at a glance */
.rs-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 12px 18px;
  border-radius: 16px;
  background: #fff;
}
.rs-metric b { font-size: clamp(26px, 3vw, 34px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--ad-brand); }
.rs-metric span { font-size: 14px; font-weight: 500; color: var(--ad-soft); }

/* Panel copy lists are check-lists (home.css); these tags are pills instead. */
.ad-panel-copy .rs-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ad-panel-copy .rs-tags li { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 500; }

/* ---------- Case images ----------
   The frame holds the rounded corners and shadow; the image inside is a little
   larger than the frame so it can drift for parallax without showing an edge. */
.rs-frame {
  /* clip, not hidden: hidden would make the frame a scroll container and the
     image's view() timeline would measure the frame instead of the page. */
  overflow: hidden;
  overflow: clip;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 2px 6px rgba(22, 20, 58, .06), 0 24px 54px rgba(22, 20, 58, .14);
}
.rs-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --drift (-1 to 1) comes from results.js as the card crosses the screen. */
  transform: scale(1.12) translateY(calc(var(--drift, 0) * 5%));
  will-change: transform;
}

/* ---------- Scroll-linked motion ----------
   Each case card slides in from the side as it scrolls into view: the first from
   the left, the next from the right, and so on. results.js sets --in (0 to 1) from
   the card's position on screen, so the card follows the scroll, and scrolling
   back slides it out again. Before the script runs, cards simply sit in place. */
.rs-cases .ad-panel {
  --dir: -1;
  --dist: min(180px, 14vw);
  transform: translateX(calc((1 - var(--in, 1)) * var(--dist) * var(--dir)));
  opacity: calc(.15 + var(--in, 1) * .85);
  will-change: transform, opacity;
}
.rs-cases .ad-panel:nth-child(even) { --dir: 1; }
/* The result box and tags arrive just after the card. */
.rs-cases .rs-metric, .rs-cases .rs-tags {
  transform: translateY(calc((1 - var(--late, 1)) * 16px));
  opacity: var(--late, 1);
}

@media (prefers-reduced-motion: reduce) {
  .rs-cases .ad-panel { transform: none; opacity: 1; }
  .rs-cases .rs-metric, .rs-cases .rs-tags { transform: none; opacity: 1; }
  .rs-img { transform: scale(1.12); }
}

/* Seven case studies of different lengths don't stack cleanly: a taller card would
   show below a shorter one pinned over it. Here they simply follow each other. */
@media (min-width: 1024px) and (min-height: 700px) {
  .ad-panels.rs-cases { gap: 24px; padding-bottom: 0; }
  .rs-cases .ad-panel { position: relative; top: auto; min-height: 0; box-shadow: none; }
}