/**
 * CUTIS Theme — Service "Am I a Candidate" section
 * Classes kept identical to _design-reference/style.css (row, align-items-center,
 * g-5, col-lg-6, check-list, note-card, candidate-photo) — none of them collide
 * with anything in header.css/layout.css.
 *
 * .row and .container-cutis 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. Only the pieces this section
 * adds on top (g-5 gutter, col-lg-6, align-items-center) are defined 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 (card radius/shadow) are hardcoded, same as
 * single-service-introduction.css / single-service-types.css.
 */

/* ------------------------------------------------------------------ */
/* Grid additions — g-5 gutter, col-lg-6, and vertical centering, on top
   of the .row base rule already defined in single-service-types.css.
   g-5's negative margin is -20px (not Bootstrap's literal -24px) to match
   .container-cutis's own 20px padding-inline exactly — at -24px the row
   bled 4px past the container edge on every section that uses .g-5
   (this one, Why, and Doctor Video) whenever the viewport is narrow enough
   that .container-cutis's max-width no longer provides slack outside its
   own padding (<=1280px). Invisible in practice (no border/background on
   .row itself to reveal it, and it never grew into an actual scrollbar),
   but incorrect regardless — fixed at the source so all three inherit it. */
/* ------------------------------------------------------------------ */
.align-items-center {
  align-items: center;
}
.g-5 {
  margin-top: -48px;
  margin-left: -20px;
  margin-right: -20px;
}
.g-5 > * {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 48px;
}
@media (min-width: 992px) {
  .col-lg-6 {
    width: 50%;
  }
}

/* This section's h2 isn't wrapped in .section-head (unlike Types), so it
   needs its own size — otherwise it would fall back to the browser's
   default h2 size, reading much smaller than every other section title. */
.service-candidate h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
  color: var(--cutis-color-heading);
  margin-top: 12px;
}

/* ------------------------------------------------------------------ */
/* Eligibility checklist */
/* ------------------------------------------------------------------ */
.check-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--cutis-color-heading);
  font-weight: 500;
}
.check-list li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--cutis-color-primary);
  margin-top: 2px;
}

/* ------------------------------------------------------------------ */
/* Note / disclaimer card */
/* ------------------------------------------------------------------ */
.note-card {
  margin-top: 26px;
  background: color-mix(in srgb, var(--cutis-color-border) 30%, white);
  border-left: 3px solid var(--cutis-color-primary);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  font-size: 14.5px;
  color: var(--cutis-color-text);
}

/* ------------------------------------------------------------------ */
/* Candidate photo */
/* ------------------------------------------------------------------ */
.candidate-photo {
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(15, 43, 61, 0.08),
    0 1px 3px rgba(15, 43, 61, 0.05);
}
.candidate-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}