/**
 * CUTIS Theme — Service "Awards & accreditation" section
 * Classes kept identical to _design-reference/style.css (award-card,
 * icon-tile) since none of them collide with anything in header.css/
 * layout.css. (single-service-types.css also has an .icon-tile, but it's
 * scoped under .condition-card there and .award-card here, so the two
 * never overlap.)
 *
 * .container-cutis, .eyebrow, .section-head.center, .row are already defined
 * in single-service-types.css; .col-lg-3 is already defined in
 * single-service-process.css. Both are enqueued alongside this file on every
 * service singular page (all conditioned on is_singular('service') in
 * functions.php) — not redeclared here. .col-6 and .g-3 don't exist yet
 * anywhere in the theme, so they're added below.
 *
 * PADDING DECISION: the reference uses "py-section-sm" here instead of the
 * site's default "py-section" (120px/72px vs 72px/48px desktop/mobile in
 * _design-reference/style.css — a ~40% reduction for this one "denser"
 * section). Every other section in this theme, however, already uses the
 * single site-wide "section-padding" utility (80px/60px/40px), which is
 * itself already a compacted version of the reference's default py-section.
 * Introducing a second, smaller padding scale for just this one section
 * would break the consistent vertical rhythm established across all eleven
 * other sections and complicate the shared "section-padding" convention for
 * no strong visual gain at this scale. Chose to apply the standard
 * "section-padding" utility here too, same as every other section, for
 * site-wide consistency — flagging the trade-off per the brief.
 *
 * The grey wash (reference's .section-bg-grey utility) is reproduced the
 * same way single-service-types.css / single-service-process.css scope it —
 * directly on this section's own wrapper class — using the same color-mix
 * formula for visual consistency.
 *
 * 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, "slate-soft" tone) are derived via color-mix()
 * from the closest token, same technique used throughout single-service-
 * introduction.css / single-service-risks.css. The reference's --font-mono
 * is dropped, same reasoning as single-service-cost.css — no monospace token
 * exists in the theme, so the year/label span falls back to the body font.
 */

/* ------------------------------------------------------------------ */
/* Section shell — grey wash, scoped like .service-types / .service-process */
/* ------------------------------------------------------------------ */
.service-awards {
  background: color-mix(in srgb, var(--cutis-color-border) 30%, white);
}

/* ------------------------------------------------------------------ */
/* Grid additions — col-6 (2-across, always) and g-3 (1rem gutter), on top
   of the .row/.col-lg-3 rules already defined in earlier section
   stylesheets. */
/* ------------------------------------------------------------------ */
.col-6 {
  width: 50%;
}
/* Re-asserted here (identical to single-service-process.css's own rule) so
   this file's cascade always wins regardless of enqueue order — .col-6 above
   and .col-lg-3 in process.css have equal specificity, and since awards.css
   loads after process.css, .col-6 would otherwise override .col-lg-3 at
   >=992px and collapse the grid to 2 columns instead of 4. */
@media (min-width: 992px) {
  .col-lg-3 {
    width: 25%;
  }
}
.g-3 {
  margin-top: -16px;
  margin-left: -8px;
  margin-right: -8px;
}
.g-3 > * {
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 16px;
}

/* ------------------------------------------------------------------ */
/* Award card */
/* ------------------------------------------------------------------ */
.award-card {
  text-align: center;
  padding: 30px 20px;
  border: 1px solid var(--cutis-color-border);
  border-radius: 20px;
  background: var(--cutis-color-surface);
  height: 100%;
}
.award-card .icon-tile {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cutis-color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.award-card .icon-tile img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.award-card h4 {
  font-size: 14.5px;
  color: var(--cutis-color-heading);
  margin-bottom: 4px;
}
.award-card span {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--cutis-color-text) 65%, white);
}