/* 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;
}

/* 15 September 2026 — a card with more than one thing to book is not one tap target.
 *
 * Every link on these cards lays an overlay across the whole card, which is right while a card has
 * one. Ashley's frenotomy card has two, prep and aftercare, and the second overlay covered the first:
 * tapping "Book frenotomy prep" opened aftercare. Each link is its own target here instead. */
.obc-mv.mv-pro .mv-who-card.is-several .mv-who-go a::before {
  content: none;
}

/* 15 September 2026 — the card of consults one clinician offers on her own: the full width, last,
   with a button for each consult because each one books something different */
@media (min-width: 900px) {
  .obc-mv.mv-pro .mv-who-grid > .mv-who-card.is-wide {
    grid-column: 1 / -1;
  }
}

/* 15 September 2026 — the fee note under a list of home visit areas, set apart from the last link so
   it reads as the note for all of them rather than as a line under Mississauga */
.obc-mv.mv-pro .mv-who-card.is-several .mv-who-go + .mv-who-note {
  margin-top: 14px;
}

.obc-mv.mv-pro .mv-who-books.wp-block-buttons {
  gap: 10px;
  margin-top: 14px;
}

.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);
  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-muted);
  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);
}

/* 11 September 2026 — the tongue tie section, softened. Amanda: "firstly it's alot of white, can
 * you please soften the look of the section with ivory card on clinical teal please?"
 *
 * It had no styling at all, which is why it read as a gap between two pages rather than a part of
 * one. Two profiles carry it, his and Anubha's, and both are about the same thing.
 *
 * Clinical Teal is the meaning colour rather than a choice of shade: BRAND.md gives it to oral
 * function and feeding, which is what a tongue tie section is. It is the one place on a profile
 * where that theme is the subject.
 *
 * EVERY WORD IS INSIDE THE CARD, and that is a contrast decision rather than a layout one. Ivory on
 * Clinical Teal measures 3.3 to 1 and white 3.7, both of which fail the 4.5 that body text needs.
 * On the ivory card the same words sit at about 12 to 1. So the teal is the ground and the card
 * carries the reading, which is the arrangement that lets this colour be used here at all. */
.obc-mv.mv-pro .mv-pro-release {
  /* Clinical Teal is not a token in this theme: the palette names the greens it already used and
     this is the first place a profile needs it. Written out, once, rather than adding a token for
     one section. */
  background: #4f8f8b;
}

/* .mv-inner is the page's gutter, so painting the card straight onto it made the card full-bleed
   and the teal invisible at the sides -- a card on a colour with none of the colour showing. The
   gutter stays a gutter and the card is drawn inside it, which is why this is two rules. */
.obc-mv.mv-pro .mv-pro-release .mv-inner {
  padding: 0 var(--mv-gutter);
}

.obc-mv.mv-pro .mv-pro-release .mv-inner > * {
  position: relative;
  z-index: 1;
}

.obc-mv.mv-pro .mv-pro-release .mv-inner::before {
  content: "";
  position: absolute;
  inset: 0 var(--mv-gutter);
  border-radius: 22px;
  background: var(--mv-cream);
  box-shadow: 0 18px 44px rgba(24, 62, 73, 0.18);
}

.obc-mv.mv-pro .mv-pro-release .mv-inner {
  position: relative;
  padding-top: clamp(30px, 4.4vw, 56px);
  padding-bottom: clamp(30px, 4.4vw, 56px);
  /* narrower than the page measure on purpose. At full width the card ran to 1112px with the prose
     still at its own reading width, so the right third was empty ivory -- the same complaint that
     started this, in a different colour. */
  max-width: 940px;
}

/* the words sit in from the card's own edge, on top of the gutter that positions it */
.obc-mv.mv-pro .mv-pro-release .mv-inner > *:not(.obc-signup) {
  padding-inline: clamp(20px, 3vw, 40px);
}

.obc-mv.mv-pro .mv-pro-release .obc-signup {
  margin-inline: clamp(20px, 3vw, 40px);
}

/* the kicker is Deep Navy on ivory rather than the gold it is elsewhere: Warm Gold on this card
   measures about 1.9 to 1, which is invisible at the small uppercase size a kicker uses, and Deep
   Navy is 10.1. */
.obc-mv.mv-pro .mv-pro-release .mv-kicker {
  color: var(--mv-deep);
}

.obc-mv.mv-pro .mv-pro-release .mv-lede,
.obc-mv.mv-pro .mv-pro-release .mv-body,
.obc-mv.mv-pro .mv-pro-release .mv-pro-listen {
  color: var(--mv-muted);
}

/* the section sits between two pale bands, so it needs less height of its own than they do or the
   page grows a hole where the colour is */
@media (min-width: 782px) {
  .obc-mv.mv-pro .mv-pro-release.mv-section {
    padding: clamp(56px, 7vw, 92px) 0;
  }
}