/* sprint 28 — the rebuilt clinician profiles, scoped .obc-mv.mv-pro.
 *
 * The old page was a booking catalogue with a biography stapled to the top. This one is the half the
 * Finder cannot do: who she is, where she actually works, and one button that opens the Finder
 * already pinned to her. Three sections and a close, which is the same shape as every other page in
 * this pass.
 */

.obc-mv.mv-pro {
  background: var(--mv-paper);
}

/* ---------- who ---------- */

.obc-mv.mv-pro .mv-pro-head.mv-section {
  padding: clamp(36px, 5vw, 76px) 0;
}

.obc-mv.mv-pro .mv-pro-split.wp-block-columns {
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

.obc-mv.mv-pro .mv-pro-portrait-cell.wp-block-column {
  flex-basis: 340px !important;
  flex-grow: 0;
}

.obc-mv.mv-pro .mv-pro-portrait {
  margin: 0;
}

.obc-mv.mv-pro .mv-pro-portrait img {
  display: block;
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.obc-mv.mv-pro .mv-pro-head .mv-kicker {
  margin-bottom: 12px;
  color: var(--mv-highlight);
}

.obc-mv.mv-pro .mv-pro-name {
  margin: 0 0 14px;
  color: var(--mv-paper);
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.obc-mv.mv-pro .mv-pro-lede {
  max-width: 42ch;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
}

.obc-mv.mv-pro .mv-pro-note {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}

/* sprint 29 — the promo page's one button wants the same gold. Widened rather than copied,
   because two rules painting the same button drift the first time either is touched. */
.obc-mv.mv-pro .mv-pro-cta .wp-block-button__link,
.obc-mv.mv-promo .mv-pro-cta .wp-block-button__link {
  padding: 16px 32px;
  border: 0;
  border-radius: 999px;
  background: #e9c471;
  color: var(--mv-ink);
  font-family: var(--mv-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.obc-mv.mv-pro .mv-pro-cta .wp-block-button__link:hover,
.obc-mv.mv-pro .mv-pro-cta .wp-block-button__link:focus-visible,
.obc-mv.mv-promo .mv-pro-cta .wp-block-button__link:hover,
.obc-mv.mv-promo .mv-pro-cta .wp-block-button__link:focus-visible {
  background: #f2d79a;
  color: var(--mv-ink);
  transform: translateY(-1px);
}

.obc-mv.mv-pro .mv-pro-under {
  max-width: 46ch;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.6;
}

/* the under-line links only. A button in this section is not a link to be underlined. */
.obc-mv.mv-pro .mv-pro-under a,
.obc-mv.mv-pro .mv-pro-close .mv-body a {
  color: var(--mv-highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- where ---------- */

.obc-mv.mv-pro .mv-pro-where .mv-lede {
  max-width: 20ch;
}

/* sprint 28 — the same grid Emma's five sit in: the first card takes the width, the rest go two by
   two under it. The look itself is shared and lives in redesign-referral.css. */
.obc-mv.mv-pro .mv-who-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(24px, 3vw, 36px);
  counter-reset: obc-five;
}

@media (min-width: 900px) {
  .obc-mv.mv-pro .mv-who-grid {
    grid-template-columns: 1fr 1fr;
  }

  .obc-mv.mv-pro .mv-who-grid > .mv-who-card:first-child {
    grid-column: 1 / -1;
  }
}

/* the virtual one is the card that is true wherever they live, so it keeps the warm ground */
.obc-mv.mv-pro .mv-who-card.is-virtual {
  background: var(--mv-cream);
}

.obc-mv.mv-pro .mv-who-card-title {
  margin: 0 0 8px;
  padding-right: 2.4em;
  color: var(--mv-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.obc-mv.mv-pro .mv-who-where {
  max-width: 34ch;
  margin: 0 0 8px;
  color: var(--mv-deep);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.25;
}

.obc-mv.mv-pro .mv-who-area,
.obc-mv.mv-pro .mv-who-note {
  max-width: 52ch;
  margin: 0 0 6px;
  color: var(--mv-ink);
  font-size: 14px;
  line-height: 1.55;
}

.obc-mv.mv-pro .mv-who-note {
  color: var(--mv-muted);
}

/* the label is the whole card, the way Emma's five are */
.obc-mv.mv-pro .mv-who-go {
  margin: 14px 0 0;
  font-size: 15px;
}

.obc-mv.mv-pro .mv-who-go a {
  color: #3f7a76;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(79, 143, 139, 0.4);
}

.obc-mv.mv-pro .mv-who-go a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

.obc-mv.mv-pro .mv-who-go a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.34em;
  transition: transform 0.2s ease;
}

.obc-mv.mv-pro .mv-who-card:hover .mv-who-go a,
.obc-mv.mv-pro .mv-who-card:focus-within .mv-who-go a {
  color: var(--mv-deep);
  border-bottom-color: var(--mv-deep);
}

.obc-mv.mv-pro .mv-who-card:hover .mv-who-go a::after {
  transform: translateX(5px);
}

.obc-mv.mv-pro .mv-who-card:focus-within {
  outline: 2px solid var(--mv-deep);
  outline-offset: 3px;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(24, 62, 73, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv.mv-pro .mv-who-go a::after {
    transition: none;
  }

  .obc-mv.mv-pro .mv-who-card:focus-within {
    transform: none;
  }
}

/* ---------- her words ---------- */

.obc-mv.mv-pro .mv-pro-story .mv-inner {
  max-width: 900px;
}

.obc-mv.mv-pro .mv-pro-story-body {
  margin-top: clamp(20px, 2.4vw, 30px);
}

.obc-mv.mv-pro .mv-pro-story-title {
  margin: 26px 0 10px;
  color: var(--mv-deep);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
}

.obc-mv.mv-pro .mv-pro-story-text {
  max-width: 66ch;
  margin: 0 0 16px;
  color: var(--mv-ink);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.72;
}

/* the first line of a story is worth a little more room than the rest */
.obc-mv.mv-pro .mv-pro-story-text:first-child {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
}

/* ---------- close ---------- */

.obc-mv.mv-pro .mv-pro-close {
  text-align: center;
}

.obc-mv.mv-pro .mv-pro-close .mv-lede,
.obc-mv.mv-pro .mv-pro-close .mv-body {
  margin-left: auto;
  margin-right: auto;
}

.obc-mv.mv-pro .mv-pro-close .mv-lede {
  max-width: 18ch;
}

.obc-mv.mv-pro .mv-pro-close .mv-body {
  max-width: 56ch;
}

.obc-mv.mv-pro .mv-pro-close .wp-block-buttons {
  justify-content: center;
}

.obc-mv.mv-pro .mv-pro-close .mv-pro-under {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 781px) {
  .obc-mv.mv-pro .mv-pro-portrait-cell.wp-block-column {
    flex-basis: 100% !important;
  }
}

/* sprint 29 — the job, under the name.
   Two of the eighteen have one. The kicker above stays credentials on every profile, because a
   letter after a name and a role in an organisation are different claims and should not share a
   line. Warm Gold rather than paper so it reads as a label instead of a second sentence. */
.obc-mv.mv-pro .mv-pro-role {
  margin: -6px 0 16px;
  color: var(--mv-highlight);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- sprint 33: the published study, where somebody wrote one ---------- */
/* Between her own words and the booking close, on the white band so the three sections alternate
   ivory, white, deep green like every other page. */
.obc-mv.mv-pro .mv-pro-study .mv-lede {
  max-width: 20ch;
}

.obc-mv.mv-pro .mv-pro-study .mv-body {
  max-width: 62ch;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}

/* the findings. A card rather than loose bullets, because they are quoted figures and want an edge
   around them saying where the quotation starts and stops. */
.obc-mv.mv-pro .mv-pro-findings {
  max-width: 62ch;
  margin: 0;
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
  border-left: 3px solid var(--mv-gold, #d7b47a);
  border-radius: 0 14px 14px 0;
  background: var(--mv-cream, #f6efe6);
  list-style: none;
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.55;
}

.obc-mv.mv-pro .mv-pro-findings li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 24px;
}

.obc-mv.mv-pro .mv-pro-findings li:last-child {
  margin-bottom: 0;
}

.obc-mv.mv-pro .mv-pro-findings li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 11px;
  height: 2px;
  background: var(--mv-dark, #294f4b);
}

/* how many parents, under the figures rather than in them: it is the size of the study rather than
   one of its findings, and putting it in the list would read as a fourth result. */
.obc-mv.mv-pro .mv-pro-study .mv-pro-under {
  margin-top: clamp(14px, 1.8vw, 20px);
  color: var(--mv-slate, #758287);
  font-size: 14.5px;
}

/* ---------- sprint 33: somewhere she has been a guest ---------- */
/* Ivory, between the white research band and the deep green close, so the page keeps alternating.
   Deliberately quieter than the research above it: one is peer-reviewed work she wrote and the other
   is an hour and three quarters on somebody else's show, and the page should not weigh them the
   same. */
.obc-mv.mv-pro .mv-pro-elsewhere .mv-lede {
  max-width: 22ch;
}

.obc-mv.mv-pro .mv-pro-elsewhere .mv-body {
  max-width: 62ch;
}

/* the same pill the locations page uses for directions, because it is the same kind of thing: a
   quiet second action that leaves the site. */
.obc-mv.mv-pro .mv-pro-listen {
  margin: clamp(16px, 2vw, 22px) 0 0;
}

.obc-mv.mv-pro .mv-pro-listen a {
  display: inline-block;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--mv-dark, #294f4b);
  border-radius: 999px;
  color: var(--mv-dark, #294f4b);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.obc-mv.mv-pro .mv-pro-listen a:hover,
.obc-mv.mv-pro .mv-pro-listen a:focus-visible {
  background: var(--mv-paper, #fff);
}