/**
 * CUTIS Theme — Service "Why choose CUTIS" section
 * Classes kept identical to _design-reference/style.css (why-media,
 * feature-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 .feature-card here, so
 * the two never overlap.)
 *
 * .container-cutis, .row/.g-4/.col-sm-6 are already defined in
 * single-service-types.css; .g-5 is already defined in
 * single-service-candidate.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-lg-5/col-lg-7 don't exist yet
 * anywhere in the theme, so they're added below alongside align-items-start
 * and mb-5 (Bootstrap's 3rem spacer, same convention as single-service-
 * technique.css's .mb-4).
 *
 * This section has a plain white background in the reference (no bg wash
 * class), so 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/shadow) are hardcoded or derived via
 * color-mix()/gradient, same technique used throughout single-service-
 * introduction.css / single-service-results.css.
 */

/* ------------------------------------------------------------------ */
/* Grid additions on top of the .row/.g-4/.g-5/.col-sm-6 rules already
   defined in earlier section stylesheets. */
/* ------------------------------------------------------------------ */
.align-items-start {
  align-items: flex-start;
}
.mb-5 {
  margin-bottom: 48px;
}
@media (min-width: 992px) {
  .col-lg-5 {
    width: 41.6666%;
  }
  .col-lg-7 {
    width: 58.3333%;
  }
}

/* ------------------------------------------------------------------ */
/* Left column — media image below the description */
/* ------------------------------------------------------------------ */
.why-media {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 12;
  box-shadow:
    0 4px 24px rgba(15, 43, 61, 0.08),
    0 1px 3px rgba(15, 43, 61, 0.05);
}
.why-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------------ */
/* Right column — feature card grid */
/* ------------------------------------------------------------------ */
.feature-card {
  background: var(--cutis-color-surface);
  border: 1px solid var(--cutis-color-border);
  border-radius: 20px;
  padding: 28px 24px;
  height: 100%;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 50px rgba(15, 43, 61, 0.12),
    0 4px 10px rgba(15, 43, 61, 0.06);
}
.feature-card .icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cutis-color-primary) 0%, color-mix(in srgb, var(--cutis-color-primary) 70%, black) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.feature-card .icon-tile img {
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  display: block;
}
.feature-card h4 {
  font-size: 16px;
  color: var(--cutis-color-heading);
  margin-bottom: 8px;
}
.feature-card p {
  font-size: 13.5px;
  color: var(--cutis-color-text);
  margin: 0;
}