/**
 * CUTIS Theme — Service "Results timeline" section
 * Classes kept identical to _design-reference/style.css (results-bar-wrap,
 * results-bar, results-bar-fill, results-marks, results-grid, result-stage,
 * result-media) — none of them collide with anything in header.css/layout.css.
 * Follows the reference's own visual design as-is, same approach as the
 * Recovery Timeline section.
 *
 * .row, .g-4, .col-sm-6, .col-lg-3 and .section-head.center are already
 * defined in single-service-types.css / single-service-process.css, both
 * enqueued alongside this file on every service singular page — not
 * redeclared here.
 *
 * Progress bar note: in the reference, .results-bar-fill starts at width:0
 * and main.js sets it to width:100% via an IntersectionObserver once the
 * section scrolls into view — a fixed reveal animation independent of any
 * stage's percentage value. Since this theme doesn't port over the
 * reference's reveal-on-scroll JS (no earlier section does either), the fill
 * is hardcoded to its settled end state (100%) directly in CSS below.
 *
 * Colors/fonts/spacing are pulled from the CSS custom properties defined in
 * assets/css/header.css :root and from the Theme Settings design tokens
 * (inc/theme-settings.php -> cutis_output_theme_css_vars()). Values with no
 * matching token (radius/gradient) are hardcoded, same as
 * single-service-comparison.css / single-service-recovery.css.
 */

/* ------------------------------------------------------------------ */
/* Section shell — cream wash, scoped to .service-results the same way
   single-service-comparison.css scopes its cream background, reusing the
   same --cutis-color-cream token. */
/* ------------------------------------------------------------------ */
.service-results {
  background: var(--cutis-color-cream);
}

/* ------------------------------------------------------------------ */
/* Progress bar + percentage marks */
/* ------------------------------------------------------------------ */
.results-bar-wrap {
  margin-top: 46px;
}
.results-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--cutis-color-border);
  position: relative;
  overflow: hidden;
}
.results-bar-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(135deg, var(--cutis-color-primary) 0%, color-mix(in srgb, var(--cutis-color-primary) 70%, black) 100%);
  border-radius: 999px;
}
.results-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}
.results-marks span {
  font-size: 12px;
  color: var(--cutis-color-text);
}

/* ------------------------------------------------------------------ */
/* Result stage cards */
/* ------------------------------------------------------------------ */
.results-grid {
  margin-top: 42px;
}
.result-media {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  margin-bottom: 14px;
}
.result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.result-stage h4 {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cutis-color-primary);
  margin: 0 0 10px;
}
.result-stage p {
  margin: 0;
  font-size: 13.5px;
  color: var(--cutis-color-text);
}