/* ==========================================================================
   /about - the coach page.

   Loaded by PageController::about through the pageCss hook, so none of this
   costs the other eleven public pages a byte. Two things live here:

   1. A split page head. Every other page's .page-head is a text block with a
      60ch cap, which on a 1440px screen leaves the whole right half of the
      navy band empty. On the one page that is *about a person*, that space
      is where the person goes.
   2. The teaching principles as a two-up card grid. Stacked, each card ran a
      95-character line - readable, but a wall.
   ========================================================================== */

/* ----------------------------------------------------------- split head */
.coach-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: center;
}

/* A lime wash for depth, echoing .hero::after on the homepage. Kept weak and
   pushed off the top corner deliberately: at the homepage's .20 it sat
   directly behind the photograph and turned the navy a muddy green where the
   two met, which looked like a rendering fault rather than a flourish. Sits
   under .page-head .wrap, which is z-index 2. */
.coach-head::after {
  content: "";
  position: absolute; pointer-events: none;
  width: 620px; height: 620px; border-radius: 50%;
  right: -330px; top: -330px;
  background: radial-gradient(circle at 50% 50%, rgba(166, 214, 8, .13), rgba(166, 214, 8, 0) 60%);
}

.coach-head .hero-badges { margin-top: 26px; }
.coach-head-cta { margin-top: 30px; }

/* ------------------------------------------------------------- portrait */
.coach-portrait {
  justify-self: end;
  width: 100%;
  max-width: 380px;
  margin: 0;
}

/* An offset lime rule behind the photograph - the printed flyer's trick, and
   the only ornament on the page. It hangs off <picture>, not off the <figure>,
   because the figure is as tall as the caption too: anchored there the rule
   ran past the bottom of the photo and boxed the caption in with it, which
   read as a broken container rather than a frame. .page-head clips its
   overflow, so the 16px it pokes out to the right can never widen the page. */
.coach-portrait picture { display: block; position: relative; }
.coach-portrait picture::before {
  content: "";
  position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid rgba(166, 214, 8, .38);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.coach-portrait img {
  display: block; width: 100%; height: auto;
  /* The file is the source frame whole, at 3:4 - build/about_photo.py crops
     nothing. Declaring the ratio again reserves the box before the bytes
     arrive, so the head does not jump when the photo lands, and object-fit
     is cover only as a guard: at the file's own ratio it crops nothing. */
  aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9);
  position: relative; z-index: 1;
}

.coach-portrait figcaption {
  /* flex-start, not centre: the caption wraps to two lines under a 240px
     photo on a phone, and a centred icon then floats between them. */
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px;
  font-size: .78rem; line-height: 1.45; color: #8CA3B8;
}
.coach-portrait figcaption svg {
  width: 14px; height: 14px; color: var(--lime); flex: none; margin-top: 2px;
}

/* ----------------------------------------------------------- principles */
.principles { display: grid; gap: 16px; }

.principle { display: flex; gap: 16px; align-items: flex-start; height: 100%; }
.principle-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--navy-900); color: var(--lime);
  display: flex; align-items: center; justify-content: center;
}
.principle h4 { margin-bottom: 5px; }

/* Two up as soon as there is room for it. The awkward band is 981-1059px:
   .book-layout is still holding a 340px rail there, which leaves the text
   column under 660px - two cards plus two 44px icons in that is a squeeze,
   so it stays stacked until the rail goes away or the window grows. */
@media (min-width: 660px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 981px) and (max-width: 1059px) {
  .principles { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- responsive */

/* The head keeps its two columns well below the nav's 1024 breakpoint - it
   just narrows the photo twice on the way down. Stacking earlier looked worse
   than a tight grid: at 768 the photo sat alone on the left of a 720px band
   with 460px of empty navy beside it. */

/* Between the nav breakpoint and the full 1180px wrap the photo was taking
   38% of the window and squeezing the copy: at 1024 the three credential chips
   measured 591px against a 588px column and wrapped to two lines by three
   pixels. A narrower photo here fixes both. */
@media (max-width: 1100px) and (min-width: 861px) {
  .coach-head-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .coach-portrait { max-width: 320px; }
}

@media (max-width: 860px) and (min-width: 700px) {
  .coach-head-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
  .coach-portrait { max-width: 280px; }
}

/* The wash is sized in pixels, so the narrower the window the larger a share
   of the band it covers - by 768 it had stopped being a hint of warmth in the
   corner and become a visible green patch. It is decoration; it goes. */
@media (max-width: 860px) {
  .coach-head::after { display: none; }
}

/* It stacks at 700 because that is where the copy column stops holding
   "Michael Kuhlman" on one line: the h1 is clamp(2.1rem, 5vw, 3.5rem), so at
   700px it sets at 35px and measures ~325px against a 380px column. */
@media (max-width: 699px) {
  .coach-head-grid { grid-template-columns: 1fr; gap: 30px; }

  /* Left, not centred: the head is a left-aligned column and a centred photo
     under it reads as a different page. 280px keeps the whole head inside a
     phone's first screen, which a full-bleed 3:4 frame (467px tall on a 390px
     phone, before the caption) would not. */
  .coach-portrait { justify-self: start; max-width: 280px; }
}

/* Three chips at the shared .hero-badge size measure 138 + 214 + 219px, which
   on a 390px phone is 362px of content in 354px of wrap - eight pixels short
   of fitting two on a line, so all three stacked and the head grew by 40px for
   nothing. Trimmed padding and a half-point of type buys those eight pixels
   back. Scoped to .coach-head, so the homepage hero is untouched. */
@media (max-width: 560px) {
  .coach-head .hero-badges { gap: 8px; margin-top: 22px; }
  .coach-head .hero-badge { font-size: 12px; padding: 6px 11px; gap: 7px; }
}

@media (max-width: 400px) {
  .coach-portrait { max-width: 240px; }
  .coach-portrait picture::before { inset: 12px -12px -12px 12px; }
}

/* Once .book-layout drops its rail (980px, components.css) the prose runs the
   full width of the wrap - 120 characters a line at 980px, which is roughly
   double what anyone reads comfortably. Cap it and centre the column. */
@media (max-width: 980px) {
  .about-body { justify-items: center; }
  .about-body > * { width: 100%; max-width: 68ch; }
}

@media print {
  .coach-portrait picture::before, .coach-head::after { display: none; }
  .coach-portrait img { border: 1px solid #ccc; box-shadow: none; max-width: 200px; }
  .coach-portrait figcaption { color: #333; }
}