/**
 * CUTIS Theme — Service "Risks & Safety" section
 * Classes kept identical to _design-reference/style.css (risk-card, risk-icon,
 * risk-disclaimer) since none of them collide with anything in header.css/layout.css.
 *
 * .container-cutis, .eyebrow, .section-head, .row/.g-4/.col-sm-6/.col-lg-4 are
 * already defined in single-service-types.css, which is enqueued alongside this
 * file on every service singular page (both conditioned on is_singular('service')
 * in functions.php) — not redeclared here to avoid duplicate/conflicting rules.
 * This section has a plain white background in the reference (no bg wash class),
 * so unlike single-service-types.css it needs no section-shell background rule.
 *
 * 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/icon tile background/disclaimer text tone) are
 * derived via color-mix() from the closest token, same technique used
 * throughout single-service-introduction.css / single-service-hero.css.
 */

/* ------------------------------------------------------------------ */
/* Risk card */
/* ------------------------------------------------------------------ */
.risk-card {
  background: var(--cutis-color-surface);
  border: 1px solid var(--cutis-color-border);
  border-radius: 20px;
  padding: 26px 24px;
  height: 100%;
}
.risk-card .risk-icon {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cutis-color-cream) 70%, orange 10%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.risk-card .risk-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}
.risk-card h4 {
  font-size: 15.5px;
  color: var(--cutis-color-heading);
  margin-bottom: 8px;
}
.risk-card p {
  font-size: 13.5px;
  color: var(--cutis-color-text);
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Disclaimer paragraph below the grid */
/* ------------------------------------------------------------------ */
.risk-disclaimer {
  margin-top: 32px;
  font-size: 13px;
  color: color-mix(in srgb, var(--cutis-color-text) 65%, white);
  border-top: 1px solid var(--cutis-color-border);
  padding-top: 20px;
}