/* ==========================================================================
   WV How We're Different — homepage unsell + Dr. Neal section (COMPONENTS.md #40)
   --------------------------------------------------------------------------
   Two-column layout: left column carries the unsell copy, right column
   is a contained dark Dr. Neal card. Stacks 1-col at mobile.

   Dr. Neal card uses --wv-color-text-primary as the surface (the dark
   olive-black). Cream text + cream-outlined CTA — uses the
   text-inverse-on-text-primary certified contrast pair.
   ========================================================================== */

.wv-how-were-different {
  padding: 64px 0;
}

.wv-how-were-different__inner {
  max-width: var(--wv-page-content-max);
  margin: 0 auto;
  padding: 0 24px;
}

.wv-how-were-different__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

/* ── Left: unsell copy ── */
.wv-how-were-different__left {
  display: flex;
  flex-direction: column;
}

.wv-how-were-different__eyebrow-wrap {
  margin-bottom: 16px;
}

.wv-how-were-different__heading {
  margin: 0 0 24px;
}

.wv-how-were-different__body-lede {
  margin: 0 0 16px;
}

.wv-how-were-different__body-tag {
  margin: 0 0 24px;
  /* .wv-body covers typography. */
}

/* Left-column CTA — quiet text link on cream page background.
   Mirrors the __neal-link treatment but inverted for the light surface
   (dark text + olive hover). Same min-height, same underline-offset. */
.wv-how-were-different__left-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px;
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  border-radius: var(--wv-radius-pill);
  text-decoration: none;
  transition: background var(--wv-transition-base);
}

.wv-how-were-different__left-link:hover,
.wv-how-were-different__left-link:focus-visible {
  background: var(--wv-color-atc-hover);
  color: var(--wv-color-text-inverse);
}

/* ── Right: Dr. Neal card ──
   Light card (card-bg / white). Text colors come from the typography
   classes' own defaults — no per-element color overrides. */
.wv-how-were-different__neal-card {
  background: var(--wv-color-card-bg);
  border-radius: var(--wv-radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Portrait placeholder — fixed 1:1 aspect, muted surface fill,
   labeled in-DOM so it's identifiable in the build. Swap markup
   when the real asset ships. */
.wv-how-were-different__neal-portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--wv-color-surface-2);
  border-radius: var(--wv-radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wv-how-were-different__neal-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Light card: colors come from the typography classes' own defaults —
   name .wv-h5 (text-primary), credential .wv-label-small + body .wv-body
   (text-secondary). No color overrides here (Rule 3). */
.wv-how-were-different__neal-name {
  margin: 0;
}

.wv-how-were-different__neal-credential {
  margin: -8px 0 0;
}

.wv-how-were-different__neal-body {
  margin: 0;
}

.wv-how-were-different__neal-link {
  align-self: flex-start;
  color: var(--wv-color-olive-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: var(--wv-transition-color);
}

.wv-how-were-different__neal-link:hover,
.wv-how-were-different__neal-link:focus-visible {
  color: var(--wv-color-text-primary);
}

/* ── Tablet+ — 2-col layout ── */
@media (min-width: 768px) {
  .wv-how-were-different {
    padding: 96px 0;
  }
  .wv-how-were-different__inner {
    padding: 0 50px;
  }
  .wv-how-were-different__grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
  .wv-how-were-different__neal-card {
    padding: 40px 36px;
  }
}

/* ── Desktop ── */
@media (min-width: 1280px) {
  .wv-how-were-different {
    padding: 120px 0;
  }
  .wv-how-were-different__inner {
    padding: 0;
  }
  .wv-how-were-different__grid {
    gap: 72px;
  }
  .wv-how-were-different__neal-card {
    padding: 48px 40px;
  }
}