/* ==========================================================================
   WV Meet Dr. Neal — DRAFT
   --------------------------------------------------------------------------
   First-pass visual render. Hardcoded content in parts/pdp-meet-dr-neal.php.
   Argification + ACF integration pending.

   LAYOUT NOTE: the Dr. Neal image is a direct child of the section,
   absolutely positioned at the section's bottom and sized to 100vw.
   Its height (auto, preserving the ~1:1 asset ratio) makes it extend
   upward past the section's top edge, bleeding into the preceding
   Comparison Table's space. The preceding section must have a
   transparent background for the bleed to render.
   ========================================================================== */

.wv-meet-dr-neal {
  /* Bleed-pair primitive (2026-06-03) — lower half of the pair with
     Comparison Table above. mobile/tablet keep the prior min-height
     fallback; desktop pins to the spec'd --wv-bleed-pair-lower (765)
     via the media rule below. */
  position: relative;
  min-height: 720px;
  padding-top: 100px;
  z-index: 0;
}
@media (min-width: 1280px) {
  .wv-meet-dr-neal {
    height: var(--wv-bleed-pair-lower);
    min-height: 0;
    padding-top: 0; /* image absorbs the whole 765 zone */
  }
}

/* Bleed-pair primitive image — fills the combined upper + lower zone
   (510 + 765 = 1275 at desktop) at any viewport width via object-fit:
   cover, bottom-anchored. Replaces the prior `height: auto` approach
   that let the image scale to its natural ~1:1 aspect at 100vw,
   producing wildly different heights as viewport changed. */
.wv-meet-dr-neal__image {
  position: absolute;
  left: 50%;
  margin-left: -50vw;
  bottom: 0;
  width: 100vw;
  /* Mobile bleed amount: ~240px above MDN section per designer call
     (2026-06-03). Image height = section height + bleed amount.
     Scaling proportional across tiers; designer can tune. */
  height: 600px;
  z-index: -1;
  pointer-events: none;
  display: block;
  object-fit: cover;
  object-position: center bottom;
}
@media (min-width: 768px) {
  .wv-meet-dr-neal__image {
    height: 900px;
  }
}
@media (min-width: 1280px) {
  .wv-meet-dr-neal__image {
    height: calc(var(--wv-bleed-pair-upper) + var(--wv-bleed-pair-lower));
  }
}

.wv-meet-dr-neal__content {
  /* Normal-flow block inside the section, right-aligned via auto left
     margin. Section height = content height + padding; image handles
     its own visual extent independently. */
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: 10%;
  width: 35%;
  padding: 80px 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* NEEDS DESIGNER REVIEW: gap between content blocks */
  gap: 0;

  /* All text in this section sits on the green gradient background. */
  /* NEEDS DESIGNER REVIEW: assumed --wv-color-text-inverse (cream) for
     contrast against green. Measure actual contrast at the text position
     over the gradient — the gradient varies in lightness so text may sit
     in a region that fails WCAG AA. If so, add a semi-transparent dark
     overlay behind the text or reposition text. */
  color: var(--wv-color-text-inverse);
}

.wv-meet-dr-neal__headline {
  margin: 0;
  /* .wv-h-serif class sets color: var(--wv-color-text-primary) explicitly;
     override to inherit cream from .wv-meet-dr-neal__content so the headline
     matches the rest of the section's text. Color isn't in CLAUDE.md #3's
     forbidden-redeclaration list so this is compliant. */
  color: inherit;
}

.wv-meet-dr-neal__quote-wrap {
  /* NEEDS DESIGNER REVIEW: spacing between headline and quote */
  margin: 16px 0 0;
  padding: 0;
}

.wv-meet-dr-neal__quote {
  margin: 0;
  color: inherit;
}

.wv-meet-dr-neal__credentials {
  /* NEEDS DESIGNER REVIEW: spacing between quote and credentials */
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  /* NEEDS DESIGNER REVIEW: gap between credential rows */
  gap: 12px;
}

.wv-meet-dr-neal__credential {
  display: flex;
  align-items: center;
  /* NEEDS DESIGNER REVIEW: gap between icon and label */
  gap: 12px;
}

.wv-meet-dr-neal__credential-icon {
  /* NEEDS DESIGNER REVIEW: icon size + checkmark variant
     (icon-checkmark-background.png vs -outline.png) */
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.wv-meet-dr-neal__credential-label {
  color: inherit;
}

.wv-meet-dr-neal__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* NEEDS DESIGNER REVIEW: height + horizontal padding */
  height: 48px;
  padding: 0 40px;
  /* NEEDS DESIGNER REVIEW: fill — --wv-color-card-bg (white) vs
     --wv-color-background (cream) */
  background: var(--wv-color-card-bg);
  color: var(--wv-color-text-primary);
  border-radius: var(--wv-radius-pill);
  text-decoration: none;
  white-space: nowrap;
  /* NEEDS DESIGNER REVIEW: spacing above CTA */
  margin-top: 40px;
  transition: background var(--wv-transition-base);
}

.wv-meet-dr-neal__cta:hover {
  /* NEEDS DESIGNER REVIEW: hover not specified in mockup — subtle cream shift */
  background: var(--wv-color-background);
}

.wv-meet-dr-neal__cta-arrow {
  /* Decorative Unicode arrow, aria-hidden in PHP */
}

/* ==========================================================================
   MOBILE — NOT YET BUILT
   --------------------------------------------------------------------------
   Two-column layout (empty left for image, right 35% for text) does not
   fit mobile. Designer spec required. Deferred this pass.
   ========================================================================== */