/* =================================================================
   Willow — coaching page

   Shared by coaching.html and nl/coaching.html, one file for both
   languages (same rule as page-customers.css).

   Almost everything on this page is composed from styles.css:
   .page-head, .sec-head, .card, .feat-pair/.feat-tile, .c-steps,
   .cta-card/.cta-quote and .btn. What is left below is only the two
   things the site had no component for — a portrait card for the
   coaches, and a standalone quote card (the site's only quote
   component, .cta-quote, is scoped to the dark .cta-card).
   ================================================================= */

/* ---------- Coach portraits ----------
   The site has portrait treatments on customers.html (.people-strip
   .face) but they are scoped to that page's strip layout. This is the
   same idea — a circular image-slot in a card — at card scale. */
.coach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.coach .face {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: var(--cream-2);
}
.coach .face image-slot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  --is-bg: transparent; --is-border: transparent;
  --is-text: rgba(20,28,48,0.4);
  font-size: 12px;
}
.coach h3 { font-size: 22px; letter-spacing: -0.018em; margin-top: 20px; }
.coach .role {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.coach p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- Ink band ----------
   .c-steps is a dark-surface component — its fills and text colours
   assume ink underneath — so the section hosting it has to be an ink
   band. .sec-head has no dark variant, hence the two overrides. */
.coach-band { background: var(--ink); }
.coach-band .sec-head h2 { color: var(--cream); }
.coach-band .sec-head p { color: var(--on-dark-2); }

/* ---------- Standalone quotes ----------
   .cta-quote is the site's quote component but it is scoped to the ink
   .cta-card. These are the same idea on a light card. */
.coach-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.quote { display: flex; flex-direction: column; }
.quote blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  flex: 1;
}
.quote blockquote::before { content: "“"; }
.quote blockquote::after { content: "”"; }
.quote figcaption {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}
.quote figcaption strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Notes and lead-in copy ---------- */
.coach-note {
  margin-top: 32px;
  font-size: 14px;
  color: var(--ink-4);
}
.coach-lead {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .coach-grid { grid-template-columns: 1fr 1fr; }
  .coach-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .coach-grid { grid-template-columns: 1fr; }
}

/* styles.css sets `a { color: inherit; text-decoration: none }`, so an anchor
   inside body copy is indistinguishable from the sentence around it. Same
   treatment as page-social-media-templates.css uses for its asides: brand blue
   plus an underline, so the affordance is not carried by colour alone. */
.coach-note a,
.coach-lead a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}