/* ==========================================================================
   WV Start Here — homepage intent-routing section (COMPONENTS.md #38)
   --------------------------------------------------------------------------
   Eyebrow (.wv-section-pill from frozen wv-components.css) + H2 + lede +
   3-up intent cards + light reorder line.

   CTA buttons are section-scoped (matches every other homepage section
   pattern — wv-hero__cta, wv-first5__btn-primary, wv-support-for__cta).
   A shared site-wide CTA component is a follow-up; not promoting here
   with one consumer.
   ========================================================================== */

.wv-start-here {
  padding: 48px 0; /* tightened — starter, designer review */
  background: var(--wv-color-background);
}

.wv-start-here__inner {
  max-width: var(--wv-page-content-max);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* Eyebrow centering — .wv-section-pill is inline-flex with align-self:
   flex-start in the frozen base. Override the alignment via the wrap
   only (no font / color / size redeclaration on the pill itself). */
.wv-start-here__eyebrow-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.wv-start-here__heading {
  margin: 0 0 16px;
}

.wv-start-here__lede {
  margin: 0 auto 40px;
  max-width: var(--wv-content-max);
  /* Designer-specified subdued read. Intentionally overrides the dark
     color baked into .wv-h5 — color exception here is by request. */
  color: var(--wv-color-text-secondary);
}

/* ── Grid ── */

.wv-start-here__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  text-align: left;
}

.wv-start-here__card {
  background: var(--wv-color-card-bg);
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
}

.wv-start-here__card-title {
  margin: 0;
}

.wv-start-here__card-body {
  margin: 0;
  flex: 1 1 auto;
}

/* CTA — section-scoped primary action. Olive fill + cream text, matching
   the established homepage pattern. */
.wv-start-here__card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 14px 28px;
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  border-radius: var(--wv-radius-pill);
  text-decoration: none;
  min-height: 44px;
  transition: var(--wv-transition-color);
}

.wv-start-here__card-cta:hover,
.wv-start-here__card-cta:focus-visible {
  background: var(--wv-color-olive-dark);
  color: var(--wv-color-text-inverse);
}

/* ── Card 1 (featured): full-card bg image, cream text, light pill CTA.
   Replaces the former --quiz coral treatment — the image is the accent,
   so no border. Cream text via the section-root inversion pattern. */
.wv-start-here__card--featured {
  border-color: transparent;
  background-image: var(--wv-three-ways-card-bg);
  background-size: cover;
  background-position: center;
  color: var(--wv-color-text-inverse);
}
.wv-start-here__card--featured .wv-start-here__card-title,
.wv-start-here__card--featured .wv-start-here__card-body {
  color: inherit; /* cream over the image (Rule 3 inherit exception) */
}
.wv-start-here__card--featured .wv-start-here__card-cta {
  background: var(--wv-color-card-bg);
  color: var(--wv-color-text-primary);
}
.wv-start-here__card--featured .wv-start-here__card-cta:hover,
.wv-start-here__card--featured .wv-start-here__card-cta:focus-visible {
  color: var(--wv-color-olive-dark);
}

/* ── Cards 2 & 3: stroke (border) + CTA fill ── */
.wv-start-here__card--dark   { border-color: var(--wv-color-text-primary); }
.wv-start-here__card--accent { border-color: var(--wv-color-accent); }

.wv-start-here__card--dark   .wv-start-here__card-cta { background: var(--wv-color-text-primary); }
.wv-start-here__card--accent .wv-start-here__card-cta { background: var(--wv-color-accent); }

.wv-start-here__card--dark   .wv-start-here__card-cta:hover,
.wv-start-here__card--dark   .wv-start-here__card-cta:focus-visible { background: var(--wv-color-accent); }
.wv-start-here__card--accent .wv-start-here__card-cta:hover,
.wv-start-here__card--accent .wv-start-here__card-cta:focus-visible { background: var(--wv-color-olive-dark); }

/* ── Reorder line — quiet shortcut, NOT a CTA ── */

.wv-start-here__reorder {
  margin: 32px 0 0;
  color: var(--wv-color-text-secondary);
}

.wv-start-here__reorder-link {
  color: var(--wv-color-olive-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  min-height: 44px;
  display: inline-block;
  transition: var(--wv-transition-color);
}

.wv-start-here__reorder-link:hover,
.wv-start-here__reorder-link:focus-visible {
  color: var(--wv-color-text-primary);
}

/* ── Tablet+ — 3-up grid ── */
@media (min-width: 768px) {
  .wv-start-here {
    padding: 72px 0;
  }
  .wv-start-here__inner {
    padding: 0 50px;
  }
  .wv-start-here__lede {
    margin-bottom: 56px;
  }
  .wv-start-here__grid {
    grid-template-columns: 1.5fr 1fr 1fr; /* card 1 wider — starter ratio, designer review */
    gap: 12px;
  }
  .wv-start-here__reorder {
    margin-top: 48px;
  }
}

/* ── Desktop ── */
@media (min-width: 1280px) {
  .wv-start-here {
    padding: 88px 0;
  }
  .wv-start-here__grid {
    gap: 16px;
  }
}