/* Results — client result cards (plan 2026-10-09, after Nick's mockup). Built from the system:
   cards are surface/raised at radius/md; values are the Numbers module's treatment (Ekstra
   Light, tabular, a ghost copy holding the width while they count up), stepped down to
   Display/3. On Grey and Black the cards sit on the ground; on Page and White a white card
   needs a hairline to exist. */
.block--results { overflow-wrap: anywhere; } /* a long unbroken word wraps inside its card, never past it */
.block--results .results__head { display: grid; gap: var(--space-24); max-width: 880px; margin-bottom: var(--space-64); }
.block--results .results__intro { color: var(--ink-muted); }
.block--results .results__kicker { margin-top: var(--space-8); }

.block--results .results__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); }
.block--results .results__card {
  position: relative; /* contains the values' visually-hidden copies, which would otherwise escape the phone rail and widen the page */
  display: flex; flex-direction: column; gap: var(--space-32); min-width: 0;
  padding: var(--space-40);
  background: var(--surface-raised); border-radius: var(--radius-md);
}
.block--results:not(.theme-subtle, .theme-dark) .results__card { box-shadow: inset 0 0 0 1px var(--border-default); }
.theme-dark .block--results:not(.theme-light, .theme-subtle) .results__card { box-shadow: none; }

.block--results .results__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8) var(--space-16); }
.block--results .results__logo { display: block; height: 32px; width: auto; max-width: 240px; }
.block--results .results__label { color: var(--ink-muted); }

.block--results .results__stats { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--space-24); container-type: inline-size; }
.block--results .results__stat { min-width: 0; }
.block--results .results__value {
  display: grid;
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-3);
  line-height: 1; letter-spacing: -0.06em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* A long value ("1,234,567+", the field's 10) steps down until it fits its column: --len is its
   character count (min 5), --n the columns; Ekstra Light figures run ~0.56em. */
.block--results .results__stats .results__value { font-size: min(var(--fs-display-3), calc((100cqi - (var(--n) - 1) * var(--space-24)) / var(--n) / (var(--len) * 0.56))); }
.block--results .results__value > [aria-hidden] { grid-area: 1 / 1; }
.block--results .results__ghost { visibility: hidden; }
.block--results .results__caption { margin-top: var(--space-12); line-height: 1.3; }
.block--results .results__period { margin-top: var(--space-8); color: var(--ink-subtle); }

/* Below the numbers: a third number (smaller, beside its caption), then headline and support. */
.block--results .results__story { display: grid; gap: var(--space-8); padding-top: var(--space-24); border-top: 1px solid var(--border-default); }
.block--results .results__stat--inline { display: flex; align-items: baseline; gap: var(--space-16); }
.block--results .results__stat--inline .results__value { font-size: var(--fs-display-5); }
.block--results .results__stat--inline .results__caption { margin-top: 0; }
.block--results .results__support { color: var(--ink-muted); }
.block--results .results__source { margin-top: auto; color: var(--ink-subtle); line-height: 1.4; }
/* On black, border/default is the card's own grey; the page ground reads as a cut instead. */
.block--results.theme-dark .results__story,
.theme-dark .block--results:not(.theme-light, .theme-subtle) .results__story { border-top-color: var(--surface-page); }


/* Single card (case study): who and why on the left, the numbers on the right. */
.block--results.results--single .results__cards { grid-template-columns: 1fr; }
.block--results.results--single .results__card {
  display: grid; grid-template-columns: 5fr 7fr; grid-template-areas: "top stats" "story stats" "story source";
  gap: var(--space-24) var(--space-48); align-items: start;
}
.block--results.results--single .results__top { grid-area: top; flex-direction: column; align-items: flex-start; }
.block--results.results--single .results__stats { grid-area: stats; }
.block--results.results--single .results__story { grid-area: story; }
.block--results.results--single .results__source { grid-area: source; margin-top: 0; }

/* Strips (the Work page, Nick's comp A, 2026-10-15): the card stretched to the container,
   a slideshow on the left half, the copy and numbers on the right. Under 1024 the images
   sit above the copy at 16:9; under 768 at 4:3, the numbers stacked. */
.block--results.results--strips .results__cards { grid-template-columns: 1fr; }
.block--results.results--strips .results__card {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  padding: 0; overflow: hidden;
}
.block--results.results--strips .results__card--bare { grid-template-columns: 1fr; }

/* The slideshow: a native scroll-snap row (swipe, trackpad and arrow keys need no JS);
   slides.js only wires the dots. Its height follows the copy beside it. */
.block--results .results__slides { position: relative; min-height: 520px; background: var(--surface-subtle); }
.block--results .results__track {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.block--results .results__track::-webkit-scrollbar { display: none; }
.block--results .results__track:focus-visible { outline-offset: -4px; }
.block--results .results__slide { flex: none; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.block--results .results__slide > :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }

/* Dots in a frosted pill, bottom centre, over the image; the current dot stretches to a dash.
   The pill and dots stay white-on-dark on any ground, since they sit on a photo. */
.block--results .results__dots {
  position: absolute; left: 50%; bottom: var(--space-20); transform: translateX(-50%);
  display: flex; gap: 2px; padding: 0 var(--space-4); /* V0.1 (comp A): 2px between dot boxes */
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 0.32); /* V0.1 (comp A): scrim behind the dots */
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); /* V0.1 (comp A) */
}
.block--results .results__dot { display: grid; place-items: center; width: 24px; height: 24px; transition: width var(--dur-base) var(--ease-out); }
.block--results .results__dot::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); /* V0.1 (comp A): dot 7, dash 18 */
  background: rgb(255 255 255 / 0.5); /* V0.1 (comp A) */
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
:where([data-input="mouse"], .no-js) .block--results .results__dot:hover::before { background: rgb(255 255 255 / 0.8); } /* V0.1 (comp A) */
.block--results .results__dot[aria-current="true"] { width: 34px; }
.block--results .results__dot[aria-current="true"]::before { width: 18px; background: var(--color-white); }
.block--results .results__dot:focus-visible { outline-color: var(--color-white); outline-offset: -2px; border-radius: var(--radius-pill); }

.block--results.results--strips .results__body { display: flex; flex-direction: column; gap: var(--space-32); min-width: 0; padding: var(--space-48); }
.block--results.results--strips .results__top { min-height: 48px; }
.block--results.results--strips .results__logo { height: var(--logo-h, 28px); max-width: 200px; }
.block--results.results--strips .results__story { gap: var(--space-16); padding-top: 0; border-top: 0; }
.block--results.results--strips .results__headline { text-wrap: balance; }
.block--results.results--strips .results__support { max-width: 34em; text-wrap: pretty; }
.block--results.results--strips .results__stats { margin-top: auto; padding-top: var(--space-24); border-top: 1px solid var(--border-default); }
.block--results.results--strips .results__caption { text-wrap: balance; }
.block--results.results--strips .results__source { margin-top: 0; }
.block--results .results__source--placeholder { color: var(--ink-accent); }
.block--results.results--strips.theme-dark .results__stats,
.theme-dark .block--results.results--strips:not(.theme-light, .theme-subtle) .results__stats { border-top-color: var(--surface-page); }

@media (max-width: 1023px) {
  .block--results .results__cards { grid-template-columns: 1fr; gap: var(--space-24); }
  .block--results.results--single .results__card { grid-template-columns: 1fr; grid-template-areas: "top" "stats" "story" "source"; }
  .block--results.results--strips .results__card { grid-template-columns: 1fr; }
  .block--results .results__slides { min-height: 0; aspect-ratio: 16 / 9; }
  .block--results.results--strips .results__stats { margin-top: 0; }
}

@media (max-width: 767px) {
  .block--results .results__head { margin-bottom: var(--space-40); }
  /* Phones: a swipe rail (base.css .rail), the next card peeking in, instead of four tall cards. */
  .block--results .results__cards.rail { display: flex; --rail-item: 86%; --rail-gap: var(--space-12); --rail-snap: mandatory; }
  .block--results .results__card { padding: var(--space-24); gap: var(--space-24); }
  .block--results .results__top { flex-direction: column; align-items: flex-start; }
  .block--results .results__caption { font-size: var(--fs-label-md); text-wrap: balance; }
  .block--results .results__stat--inline { display: block; }
  .block--results .results__stat--inline .results__caption { margin-top: var(--space-8); }
}

@media (max-width: 767px) {
  .block--results .results__slides { aspect-ratio: 4 / 3; }
  .block--results .results__dots { bottom: var(--space-12); }
  /* Each dot's tap target is 44 tall, invisibly, over the photo (target-size audit 10-22).
     44 wide would mean spacing the dots out; that's Nick's call. */
  .block--results .results__dot { position: relative; }
  .block--results .results__dot::after { content: ""; position: absolute; inset: -10px 0; }
  .block--results.results--strips .results__body { padding: var(--space-24); gap: var(--space-24); }
  .block--results.results--strips .results__top { min-height: 40px; flex-direction: row; align-items: center; }
  .block--results.results--strips .results__logo { height: calc(var(--logo-h, 28px) * 0.86); }
  /* Three numbers across would shrink to ~24px on a phone. Stacked instead, number left and
     words right, every number stays big enough to scan. */
  .block--results.results--strips .results__stats { grid-template-columns: max-content 1fr; gap: var(--space-16); }
  .block--results.results--strips .results__stat { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
  .block--results.results--strips .results__value { grid-row: span 2; font-size: min(var(--fs-display-2), calc(55cqi / (var(--len) * 0.56))); }
  .block--results.results--strips .results__words { display: contents; }
  .block--results.results--strips .results__caption { margin-top: 0; align-self: end; }
  .block--results.results--strips .results__period { margin-top: var(--space-4); align-self: start; }
  .block--results.results--strips .results__caption:last-child { grid-row: span 2; align-self: center; }
}