/* =============================================================================
   MODULE · b-practitioner — "Why choose this practice"

   Two columns on desktop, copy first in the source so the mobile stack reads
   argument-then-portrait. Formula runs their equivalent at roughly 44% copy /
   50% image with a wide gutter; the same proportions here, expressed as fr.

   Nothing in this file sets a colour, size or curve directly. If a value is
   wanted and it is not in alwc-tokens.css, it gets added there first.
   ========================================================================== */

.b-practitioner__inner {
  display: grid;
  gap: clamp(var(--sp-10), 5vw, var(--sp-16));
}

/* --- copy ---------------------------------------------------------------- */

.b-practitioner__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: var(--measure);
  align-self: center;
}

.b-practitioner__eyebrow { margin: 0; }

.b-practitioner__h { text-wrap: balance; }

.b-practitioner__body { max-width: var(--measure); }
/* Same gap the other prose blocks use — Rachel's bio is two paragraphs and
   they were running together with no break at any width. */
.b-practitioner__body > p + p { margin-block-start: var(--sp-6); }

.b-practitioner__cta {
  margin: var(--sp-2) 0 0;
  display: flex;
}

/* --- media --------------------------------------------------------------- */

.b-practitioner__media { margin: 0; }

/* Portrait crop. The slot and a real <img> dropped in later share the ratio,
   so swapping one for the other does not move the rest of the page. */
.b-practitioner .slot--media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  aspect-ratio: 4 / 5;
  padding: var(--sp-6);
}

.b-practitioner__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* --- slot primitives (scoped) -------------------------------------------- */

.b-practitioner .slot {
  color: var(--soft);
  border: 1px dashed var(--sage);
  border-radius: var(--radius);
  margin: 0;
}

/* Inline slots sit inside a heading, so only the underline reads as "empty" —
   a full box around a display line would fight the type. */
.b-practitioner .slot--inline {
  display: inline;
  border: 0;
  border-bottom: 1px dashed var(--sage);
}

.b-practitioner .slot--block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.b-practitioner .slot__hint { opacity: 0.8; }

.b-practitioner .slot__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.b-practitioner .slot__lines i {
  display: block;
  height: var(--sp-2);
  border-radius: var(--radius);
  background: var(--line);
}

.b-practitioner .slot__lines i:last-child { width: 62%; }

/* --- two columns --------------------------------------------------------- */

@media (min-width: 900px) {
  .b-practitioner__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
  }

  /* --flip swaps the sides without touching the source order, so the mobile
     reading order stays copy-then-portrait either way. */
  .b-practitioner--flip .b-practitioner__copy  { order: 2; }
  .b-practitioner--flip .b-practitioner__media { order: 1; }
}