/**
 * CUTIS Theme — Service "Recovery timeline" section
 * Classes kept identical to _design-reference/style.css (recovery-card,
 * recovery-media, stage-flag, recovery-body) — none of them collide with
 * anything in header.css/layout.css. Unlike the Procedure Steps section,
 * this one follows the reference's own visual design as-is.
 *
 * .row, .g-4, .col-sm-6 and .col-lg-3 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.
 * .section-head.center is also already defined in single-service-types.css.
 *
 * This section has a plain white background in the reference (no grey/cream
 * wash), so no background scoping is needed here — just the section-padding
 * utility applied in the markup.
 *
 * 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 (card radius/shadow) are hardcoded, same as
 * single-service-process.css.
 */

.recovery-card {
  border-radius: 20px;
  overflow: hidden;
  background: var(--cutis-color-surface);
  border: 1px solid var(--cutis-color-border);
  box-shadow:
    0 4px 24px rgba(15, 43, 61, 0.06),
    0 1px 3px rgba(15, 43, 61, 0.05);
  height: 100%;
}

.recovery-media {
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  position: relative;
}
.recovery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recovery-media .stage-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--cutis-color-heading);
  color: var(--cutis-color-surface);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.recovery-body {
  padding: 20px 22px;
}
.recovery-body h4 {
  font-size: 15.5px;
  margin: 0 0 6px;
  color: var(--cutis-color-heading);
}
.recovery-body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--cutis-color-text);
}