/* sprint 28 — the provider profiles, redesigned in stylesheet only.
 *
 * These pages are generated from a model captured off the live site. Their contract checks 184
 * anchors, 250 destinations and 98% of the words across the eighteen, and other pages link into them
 * by anchor, so the markup is the one thing not to touch for a visual change. Everything here works
 * against the classes the generator already emits, which also means all eighteen change together.
 *
 * What was wrong with the page rather than with its colours: every line was centred, including bios
 * that run to a hundred words; the in-person choices were grey boxes with a button floating in the
 * middle; and each bookable appointment was three centred paragraphs with a small button under them,
 * so a page offering eight of them read as one long column of text with no edges in it.
 *
 * So: the writing goes left, the appointments become cards you can count, and the choices become
 * something that looks pressable.
 */

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

/* ---------- the clinic strip the source repeats on every profile ---------- */

.obc-mv.mv-profile .obc-provider-brand {
  padding: clamp(24px, 3.4vw, 40px) var(--mv-gutter) 0;
  text-align: center;
}

.obc-mv.mv-profile .obc-site-title {
  margin: 0 0 4px;
  color: var(--mv-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.obc-mv.mv-profile .obc-site-tagline {
  margin: 0;
  color: var(--mv-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
}

/* ---------- who they are ---------- */

.obc-mv.mv-profile .obc-provider-hero {
  align-items: start;
  width: 100%;
  max-width: var(--mv-measure);
  padding: clamp(32px, 5vw, 68px) var(--mv-gutter) clamp(28px, 4vw, 52px);
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

.obc-mv.mv-profile .obc-provider-portrait {
  margin: 0;
}

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

.obc-mv.mv-profile .obc-provider-name,
.obc-mv.mv-profile .obc-provider-name.has-text-align-center {
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: var(--mv-deep);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-align: left;
}

.obc-mv.mv-profile .obc-provider-bio,
.obc-mv.mv-profile .obc-provider-bio.has-text-align-center,
.obc-mv.mv-profile .obc-provider-bio-title,
.obc-mv.mv-profile .obc-provider-bio-title.has-text-align-center {
  max-width: 62ch;
  text-align: left;
}

.obc-mv.mv-profile .obc-provider-bio {
  margin: 0 0 14px;
  color: var(--mv-ink);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.68;
}

.obc-mv.mv-profile .obc-provider-bio-title {
  margin: 22px 0 8px;
  color: var(--mv-deep);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
}

/* ---------- the CHOOSE ... labels that divide the page ---------- */

.obc-mv.mv-profile .obc-provider-prompt,
.obc-mv.mv-profile .obc-provider-prompt.has-text-align-center {
  width: 100%;
  max-width: var(--mv-measure);
  margin: clamp(40px, 5vw, 72px) auto clamp(16px, 2vw, 24px);
  padding: 0 var(--mv-gutter) 12px;
  border-bottom: 1px solid rgba(79, 143, 139, 0.4);
  color: var(--mv-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
}

/* ---------- the in-person choices ---------- */

.obc-mv.mv-profile .obc-provider-gateway {
  width: 100%;
  max-width: var(--mv-measure);
  margin: 0 auto;
  padding: 0 var(--mv-gutter);
}

.obc-mv.mv-profile .obc-provider-choices.wp-block-columns {
  gap: clamp(14px, 1.8vw, 24px);
}

.obc-mv.mv-profile .obc-provider-tile,
.obc-mv.mv-profile .obc-provider-tile-plain {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(150px, 17vw, 210px);
  padding: clamp(18px, 2vw, 26px);
  overflow: hidden;
  border-radius: 4px;
  background: var(--mv-dark);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.28, 1), box-shadow 0.6s ease;
}

.obc-mv.mv-profile .obc-provider-tile:hover,
.obc-mv.mv-profile .obc-provider-tile-plain:hover,
.obc-mv.mv-profile .obc-provider-tile:focus-within,
.obc-mv.mv-profile .obc-provider-tile-plain:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(215, 180, 122, 0.45), 0 10px 30px rgba(215, 180, 122, 0.35);
}

.obc-mv.mv-profile .obc-provider-choice-actions.wp-block-buttons {
  margin: 0;
}

/* the label is the whole tile, so the tile is what you press */
.obc-mv.mv-profile .obc-provider-choice .wp-block-button__link {
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  background: none;
  color: #fff;
  font-family: var(--mv-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.obc-mv.mv-profile .obc-provider-choice .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.obc-mv.mv-profile .obc-provider-tile:hover .obc-provider-choice .wp-block-button__link,
.obc-mv.mv-profile .obc-provider-tile-plain:hover .obc-provider-choice .wp-block-button__link,
.obc-mv.mv-profile .obc-provider-choice .wp-block-button__link:focus-visible {
  border-bottom-color: var(--mv-highlight);
  color: var(--mv-highlight);
}

.obc-mv.mv-profile .obc-provider-choice-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- what a consult is ---------- */

.obc-mv.mv-profile .obc-provider-consult,
.obc-mv.mv-profile .obc-provider-bookings {
  align-items: start;
  width: 100%;
  max-width: var(--mv-measure);
  padding: 0 var(--mv-gutter);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

/* the bookings sections carry no picture, and the source layout gave them a 330px column for one
   anyway, so every appointment sat beside a column of nothing. One column unless there is a figure. */
.obc-mv.mv-profile .obc-provider-consult:not(:has(figure)),
.obc-mv.mv-profile .obc-provider-bookings:not(:has(figure)) {
  grid-template-columns: minmax(0, 1fr);
}

/* and where there is a picture, everything else belongs beside it rather than under it. These are
   grids, so without this the title takes the second column, the first paragraph drops back into the
   first, and the writing zigzags around the photograph. */
.obc-mv.mv-profile .obc-provider-consult:has(figure) > *:not(figure):not(.obc-provider-prompt),
.obc-mv.mv-profile .obc-provider-bookings:has(figure) > *:not(figure):not(.obc-provider-prompt) {
  grid-column: 2;
}

.obc-mv.mv-profile .obc-provider-consult-image img,
.obc-mv.mv-profile .obc-provider-bookings > figure img {
  border-radius: 4px;
}

.obc-mv.mv-profile .obc-provider-consult-title,
.obc-mv.mv-profile .obc-provider-consult-title.has-text-align-center {
  margin: 0 0 10px;
  color: var(--mv-deep);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 400;
  text-align: left;
}

.obc-mv.mv-profile .obc-provider-consult-text,
.obc-mv.mv-profile .obc-provider-consult-text.has-text-align-center,
.obc-mv.mv-profile .obc-provider-booking-intro,
.obc-mv.mv-profile .obc-provider-booking-intro.has-text-align-center {
  max-width: 64ch;
  margin: 0 0 12px;
  color: var(--mv-ink);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.64;
  text-align: left;
}

/* ---------- the appointments themselves ---------- */

.obc-mv.mv-profile .obc-provider-options.wp-block-columns {
  gap: clamp(14px, 1.8vw, 22px);
  align-items: stretch;
  margin-top: clamp(16px, 2vw, 24px);
}

.obc-mv.mv-profile .obc-provider-options .wp-block-column {
  display: flex;
}

.obc-mv.mv-profile .obc-provider-option {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(31, 44, 49, 0.12);
  border-radius: 18px;
  background: var(--mv-cream);
}

.obc-mv.mv-profile .obc-provider-option-title,
.obc-mv.mv-profile .obc-provider-option-title.has-text-align-center {
  margin: 0 0 8px;
  color: var(--mv-deep);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
}

.obc-mv.mv-profile .obc-provider-option-text,
.obc-mv.mv-profile .obc-provider-option-text.has-text-align-center {
  margin: 0 0 10px;
  color: var(--mv-ink);
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}

.obc-mv.mv-profile .obc-provider-option-actions.wp-block-buttons {
  margin-top: auto;
  padding-top: 12px;
}

/* ---------- every button on the page ---------- */

.obc-mv.mv-profile .obc-provider-action .wp-block-button__link {
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--mv-dark);
  color: var(--mv-paper);
  font-family: var(--mv-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: background-color 0.2s ease;
}

.obc-mv.mv-profile .obc-provider-action .wp-block-button__link:hover,
.obc-mv.mv-profile .obc-provider-action .wp-block-button__link:focus-visible {
  background: var(--mv-deep);
  color: var(--mv-paper);
}

.obc-mv.mv-profile .wp-block-gallery img {
  border-radius: 4px;
}

.obc-mv.mv-profile > *:last-child {
  margin-bottom: clamp(48px, 6vw, 88px);
}

@media (max-width: 781px) {
  .obc-mv.mv-profile .obc-provider-hero,
  .obc-mv.mv-profile .obc-provider-consult,
  .obc-mv.mv-profile .obc-provider-bookings {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .obc-mv.mv-profile .obc-provider-tile,
  .obc-mv.mv-profile .obc-provider-tile-plain {
    transition: none;
  }

  .obc-mv.mv-profile .obc-provider-tile:hover,
  .obc-mv.mv-profile .obc-provider-tile-plain:hover {
    transform: none;
  }
}

/* sprint 30 — how you actually reach a clinician who cannot be booked directly.
   Sits between the name and the biography, because it is the first question anybody arriving on
   Dr Forrester's page has, and it is not biography. Tinted rather than bordered so it reads as the
   clinic answering, not as a warning. */
.obc-mv .mv-pro-note-block {
  padding-block: clamp(28px, 4vw, 44px);
  background: rgba(215, 180, 122, 0.14);
}

.obc-mv .mv-pro-note-title {
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
}

.obc-mv .mv-pro-note-line {
  max-width: 62ch;
  margin: 0 0 10px;
  line-height: 1.55;
}

.obc-mv .mv-pro-note-line:last-child { margin-bottom: 0; }