/* ===== RESULT CARDS, COMPACT (key numbers) =====
 * Ported from pakt.si (paktsi/css/pages/results.css, compact variant only).
 * Markup: index.html (.cr-index), motion: scripts/result-card.js.
 *
 * The band above the card body is the area under a rising curve, so the top
 * edge of the card is the chart. Entrance: the curve sweeps in left to right
 * (clip-path), the number counts up in step with it, the suffix lands last.
 * Animated states are armed only by .js-ready; without JS or with reduced
 * motion the card renders in its final state.
 */

.result-card {
  --band: 168px;
  --result-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --result-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sweep-delay: 0s;
  --sweep-dur: 1.6s;
  --sweep-ease: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic, mirrored by the count-up in JS */
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--color-body);
  filter:
    drop-shadow(0 2px 6px rgb(from var(--color-surface-dark) r g b / 0.04))
    drop-shadow(0 24px 48px rgb(from var(--color-surface-dark) r g b / 0.10));
}

.result-card-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Curve band ── */
.result-card-band {
  position: relative;
  height: var(--band);
  margin-bottom: -1px; /* hide the anti-aliased seam against the body */
}
.result-card-curve {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.result-card-fill { fill: var(--color-white); }
.result-card-stop-wash { stop-color: var(--color-primary); stop-opacity: 0.16; }
.result-card-stop-clear { stop-color: var(--color-primary); stop-opacity: 0; }
.result-card-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.result-card-stop-start { stop-color: var(--color-secondary); }
.result-card-stop-end { stop-color: var(--color-primary); }

/* Where the curve leaves the card (x 400, y 6 in the SVG). Square, like
   every other corner on the site. */
.result-card-peak {
  position: absolute;
  top: calc(6% - 6px);
  right: -6px;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-white), 0 2px 6px rgb(from var(--color-surface-dark) r g b / 0.18);
}

/* ── Body ── */
.result-card-body {
  position: relative;
  background: var(--color-white);
}
.result-card-logo img {
  display: block;
  width: auto;
  height: 44px;
  max-width: 168px;
  object-fit: contain;
  object-position: left center;
}
.result-card-eyebrow {
  position: relative; /* paint above the number's forced-colors text backplate */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-link);
}
.result-card-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--color-gradient);
}
.result-card-number {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}
/* Fixed-width digits only while counting; at rest "11" keeps its natural spacing */
.is-counting .result-card-number { font-variant-numeric: tabular-nums; }
.result-card-value {
  display: inline-block;
  text-align: right; /* digits grow toward the suffix while counting */
}
.result-card-affix { display: inline-block; }
.result-card-affix--accent { color: var(--color-primary); }
.result-card-label {
  margin: 10px 0 0;
  font-size: var(--font-size-body-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Channel tags on compact cards */
.result-card-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result-card-channels li {
  padding: 6px 12px;
  border: 1px solid var(--color-gray-400);
  font-family: var(--font-heading);
  font-size: var(--font-size-tiny);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-body);
}

/* ===== COMPACT: homepage strip ===== */
.results-strip .section-heading {
  padding: var(--space-section-md) 30px var(--space-section-xs);
}
.results-strip-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 30px var(--space-section-lg);
}
.result-card--compact {
  --band: 88px;
  filter:
    drop-shadow(0 2px 4px rgb(from var(--color-surface-dark) r g b / 0.04))
    drop-shadow(0 14px 28px rgb(from var(--color-surface-dark) r g b / 0.07));
  --sweep-dur: 1.2s;
  text-decoration: none;
  transition: transform 0.5s var(--result-ease);
}
/* The four curves rise one after another, a short wave across the row */
.result-card--compact:nth-child(2) { --sweep-delay: 0.18s; }
.result-card--compact:nth-child(3) { --sweep-delay: 0.36s; }
.result-card--compact:nth-child(4) { --sweep-delay: 0.54s; }
.result-card--compact .result-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 26px 24px;
}
.result-card--compact .result-card-logo img {
  height: 36px;
  max-width: 128px;
}
.result-card--compact .result-card-channels { margin-top: auto; } /* tags + link sit at the same height in every card */
.result-card--compact .result-card-channels li { padding: 4px 10px; }
.result-card--compact .result-card-number { font-size: clamp(36px, 3.4vw, 50px); }
.result-card--compact .result-card-label {
  margin-top: 8px;
  font-size: var(--font-size-caption);
}
.result-card-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: var(--font-size-meta);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-link);
}
.result-card-arrow {
  position: relative;
  width: 18px;
  border-top: 2px solid currentColor; /* a border, so it survives forced colors */
  transition: transform 0.4s var(--result-ease);
}
.result-card-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -5px;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(1px) rotate(45deg);
}
.result-card--compact:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .result-card--compact:hover { transform: translateY(-6px); }
  .result-card--compact:hover .result-card-arrow { transform: translateX(5px); }
}

/* ===== ENTRANCE (armed by js) =====
 * .js-ready (on the strip) sets the hidden state with no
 * transition, so arming is instant. JS adds .is-in per card when it scrolls
 * into view; transitions live there only, so they run once, forward. */
.js-ready .result-card-curve { clip-path: inset(-10px 100% -10px 0); }
.is-in .result-card-curve {
  clip-path: inset(-10px -10px -10px 0);
  transition: clip-path var(--sweep-dur) var(--sweep-ease) var(--sweep-delay);
}

.js-ready .result-card-peak { transform: scale(0); }
.is-in .result-card-peak {
  transform: scale(1);
  transition: transform 0.5s var(--result-pop) calc(var(--sweep-delay) + var(--sweep-dur) - 0.15s);
}

/* "+" lands when the count stops; an ordinal dot just stays with its digits */
.js-ready .result-card-affix--accent {
  opacity: 0;
  transform: translateY(0.25em);
}
.is-in .result-card-affix--accent {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.5s var(--result-pop);
  transition-delay: calc(var(--sweep-delay) + var(--sweep-dur) - 0.1s);
}

.js-ready :is(.result-card-brand, .result-card-eyebrow, .result-card-number, .result-card-label, .result-card-channels, .result-card-summary, .result-card-facts, .result-card-more) {
  opacity: 0;
  transform: translateY(12px);
}
.is-in :is(.result-card-brand, .result-card-eyebrow, .result-card-number, .result-card-label, .result-card-channels, .result-card-summary, .result-card-facts, .result-card-more) {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--result-ease), transform 0.8s var(--result-ease);
  transition-delay: calc(var(--sweep-delay) + var(--stagger, 0s));
}
.result-card-label { --stagger: 0.15s; }
.result-card--compact .result-card-channels { --stagger: 0.25s; }
.result-card-summary { --stagger: 0.3s; }
.result-card-facts { --stagger: 0.55s; }
.result-card-more { --stagger: 0.3s; }

/* After the entrance, hover and focus react without the stagger delays */
.result-card.is-settled,
.result-card.is-settled * { transition-delay: 0s !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  /* Strip becomes a snap scroller: one card in focus, the next one peeks */
  .results-strip .section-heading { padding: var(--space-section-xs) 25px 30px; }
  .results-strip-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 320px);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    padding: 8px 20px var(--space-section-sm);
  }
  .results-strip-track::-webkit-scrollbar { display: none; }
  .result-card--compact { scroll-snap-align: start; }
}

/* ===== ACCESSIBILITY MODES ===== */
@media (prefers-reduced-motion: reduce) {
  .result-card,
  .result-card * { transition: none !important; }
}

@media (forced-colors: active) {
  .result-card { filter: none; }
  .result-card-body { border: 1px solid CanvasText; }
  .result-card-fill { fill: Canvas; }
  .result-card-wash { display: none; }
  .result-card-line { stroke: CanvasText; }
  .result-card-peak { background: CanvasText; box-shadow: none; }
  .result-card-affix--accent,
  .result-card-eyebrow,
  .result-card-more { color: CanvasText; }
  .result-card-channels li { border-color: CanvasText; }
}