/**
 * CUTIS Theme — Service "Final CTA" section (last section before the footer)
 * Classes kept identical to _design-reference/style.css (final-cta,
 * hero-actions, btn-cutis-primary, btn-cutis-light) since none of them
 * collide with anything in header.css/layout.css.
 *
 * .container-cutis and .eyebrow are already defined in single-service-
 * types.css, enqueued alongside this file on every service singular page —
 * not redeclared here. This section skips the usual .section-head wrapper:
 * the reference puts eyebrow/h2/p directly inside .final-cta, centered via
 * the card's own text-align:center rather than a .section-head.center
 * modifier, so the markup follows that structure exactly. .hero-actions
 * doesn't exist yet anywhere in the theme, so it's defined fresh below
 * (base rule + a .final-cta-scoped override for centering, matching how
 * the reference itself layers them).
 *
 * PADDING DECISION: same trade-off already made in single-service-awards.css
 * — the reference uses "py-section-sm" on the outer <section> here, but
 * every other section in this theme uses the single site-wide
 * "section-padding" utility (80px/60px/40px). Introducing a second padding
 * scale for just this section would break the consistent vertical rhythm
 * established elsewhere, so "section-padding" is used here too, same as
 * every other section. This is independent of the .final-cta card's OWN
 * internal padding (72px 56px, reduced on mobile), which is a different,
 * reference-matched value scoped to the card itself, not the outer section.
 * The outer <section> itself has no background wash — the dark gradient
 * lives entirely on the .final-cta card inside it, matching the reference.
 *
 * BUTTON DECISION: .btn-cutis (base — padding, display, gap, border,
 * transition) already exists in single-service-doctor-video.css and is
 * enqueued alongside this file — reused as-is, not redeclared. Only the two
 * new variants this section needs are added below:
 *   - .btn-cutis-primary: solid fill, built from the same --cutis-button-*
 *     tokens single-service-hero.css's .service-hero__cta--primary already
 *     reads from, for the same reason single-service-doctor-video.css's
 *     .btn-cutis-outline matches Hero's outline variant — stays in sync
 *     with Theme Settings if those tokens change.
 *   - .btn-cutis-light: a light/white-ish fill for use on this section's
 *     dark gradient card. Deliberately NOT the same treatment as
 *     .btn-cutis-outline (transparent background, built for light-bg
 *     sections elsewhere) — a transparent-background button would nearly
 *     disappear against the dark gradient here, so .btn-cutis-light gets an
 *     actual light fill instead, matching the reference's own
 *     .btn-cutis-light (white background, teal text).
 *
 * 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()). The gradient
 * background, radial highlight overlay, and card corner radius are
 * section-specific brand styling with no matching token, so they're
 * hardcoded straight from the reference, same treatment as the card
 * radius/shadow values already hardcoded throughout single-service-blog.css
 * / single-service-awards.css / single-service-types.css.
 */

/* ------------------------------------------------------------------ */
/* Card */
/* ------------------------------------------------------------------ */
.service-final-cta {
  padding-bottom: 60px;
}

.final-cta {
  border-radius: 28px;
  background: linear-gradient(135deg, #123b3c 0%, #1f7c7e 100%);
  padding: 72px 56px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    50% 60% at 80% 0%,
    rgba(255, 230, 196, 0.18),
    transparent 60%
  );
}
.final-cta .eyebrow {
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}
.final-cta h2 {
  color: var(--cutis-color-surface);
  font-size: clamp(28px, 3.4vw, 40px);
  position: relative;
  z-index: 2;
}
.final-cta p {
  color: rgba(255, 255, 255, 0.8);
  margin-top: 16px;
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin-inline: auto;
}
.final-cta .hero-actions {
  justify-content: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 575.98px) {
  .final-cta {
    padding: 48px 24px;
  }
}

/* ------------------------------------------------------------------ */
/* Button row — doesn't exist elsewhere in the theme yet */
/* ------------------------------------------------------------------ */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* ------------------------------------------------------------------ */
/* Button variants — .btn-cutis base already defined in single-service-
   doctor-video.css, only the new fill/color per variant is added here. */
/* ------------------------------------------------------------------ */
.btn-cutis-primary {
  background: var(--cutis-button-bg);
  color: var(--cutis-button-text);
  border-color: var(--cutis-button-bg);
}
.btn-cutis-primary:hover {
  background: var(--cutis-button-bg-hover);
  border-color: var(--cutis-button-bg-hover);
}

.btn-cutis-light {
  background: var(--cutis-color-surface);
  color: var(--cutis-color-primary);
  border-color: var(--cutis-color-surface);
}
.btn-cutis-light:hover {
  background: color-mix(
    in srgb,
    var(--cutis-color-surface) 85%,
    var(--cutis-color-primary)
  );
}