/* ==========================================================================
   WV Closing CTA — reusable coral quiz-CTA closeout (COMPONENTS.md #39)
   --------------------------------------------------------------------------
   Extracted from the About Dr. Neal page (the former inline .wv-dn-closing
   section) and generalized. Rendered by parts/closing-cta.php on the
   homepage and the Dr. Neal page.

   Cream text on the coral textured surface uses the sanctioned inversion
   pattern: the section root sets --wv-color-text-inverse and the children
   take `color: inherit` (the one color exception allowed on a
   typography-classed element per CLAUDE.md Rule 3).
   ========================================================================== */

.wv-closing-cta {
  padding: 56px 0 64px;
  text-align: center;
  background-color: var(--wv-color-accent);
  background-image: url('../images/dr-neal/coral-quiz-textured-bg.webp');
  background-size: cover;
  background-position: center;
  /* Section root sets the cascade target; children inherit cream. */
  color: var(--wv-color-text-inverse);
}

.wv-closing-cta__inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
}

.wv-closing-cta__eyebrow {
  display: inline-block;
  color: inherit;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 6px 16px;
  border: 1px solid var(--wv-color-text-inverse);
  border-radius: var(--wv-radius-pill);
}

.wv-closing-cta__title {
  color: inherit;
  margin-bottom: 20px;
}

.wv-closing-cta__body {
  color: inherit;
  margin-bottom: 32px;
}

.wv-closing-cta__ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons — dark fill + cream outline on the coral surface. */
.wv-closing-cta .wv-lg__btn-cta {
  background: var(--wv-color-text-primary);
  color: inherit;
}

.wv-closing-cta .wv-lg__btn-outline {
  border-color: var(--wv-color-text-inverse);
  color: inherit;
}

.wv-closing-cta .wv-lg__btn-outline:hover,
.wv-closing-cta .wv-lg__btn-outline:focus-visible {
  background: var(--wv-color-text-inverse);
  color: var(--wv-color-accent);
}

@media (min-width: 768px) {
  .wv-closing-cta {
    padding: 88px 0 96px;
  }
  .wv-closing-cta__inner {
    padding: 0 40px;
  }
}

@media (min-width: 1280px) {
  .wv-closing-cta__inner {
    padding: 0 48px;
  }
}