/* ============================================================
   SHIFT — coach profiles and directory (V1)

   Deliberately small. The profile pages render through Joe's own
   components, which already live in styles.css: coach-hero-flow,
   coach-badge, coach-role-tags, coach-hero-headline, help-card,
   book-promo, values-card, coach-quote-card. Nothing here
   duplicates them.

   What is here: sizing for the lithograph portraits (transparent
   canvas, coloured rectangle baked in, 15 different source canvas
   sizes, normalised by the template rather than by cropping), the
   directory grid, and the shared inquiry form.
   ============================================================ */

/* ---------- lithograph portraits ---------- */
.coach-hero-image.coach-lithograph { display: flex; align-items: flex-end; justify-content: flex-end; }

.coach-hero-image.coach-lithograph img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
  object-position: bottom center;
}

.coach-hero-location {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin: 14px 0 22px;
}

/* Invitation card.
   .values-card and .coach-quote-card are shared with Joe's page, where the
   block carries different content and an image. Relying on their inherited
   padding here left the CTA cramped, so this states its own spacing
   explicitly rather than depending on what another page happens to set.
   Typography, button, note, width and card styling are untouched. */
.coach-invite { padding: 72px 0 80px; }

.coach-invite .values-card {
  padding: 48px 56px 44px;
}

.coach-invite .coach-quote-headline {
  max-width: 32ch;
  margin-bottom: 10px;
}

.coach-invite .coach-quote-body {
  max-width: 54ch;
}

.coach-invite .hero-cta-row {
  margin-top: 28px;
}

.coach-invite-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  color: var(--warm-gray);
  margin-top: 16px;
}

.coach-back {
  margin-top: 28px;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coach-back a { color: var(--warm-gray); }
.coach-back a:hover { color: var(--rust); }

/* The V1 hero CTA is a real <button>; .btn-book is written for links. */
.hero-cta-row button.btn-book { border: 0; cursor: pointer; font-family: var(--font-bold); }

/* ---------- directory ---------- */
.coach-directory { padding: 10px 0 90px; }

.coach-directory-count {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 22px;
}

.coach-grid { display: flex; flex-wrap: wrap; margin: 0 -14px; }

.coach-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(25% - 28px);
  max-width: calc(25% - 28px);
  margin: 0 14px 34px;
  box-sizing: border-box;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.coach-card-visual {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--coach-accent, var(--cream-light));
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}

.coach-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

.coach-card:hover { transform: translateY(-5px); }

.coach-card-body { display: block; }

.coach-card-name {
  display: block;
  font-family: var(--font-bold);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
}

.coach-card-location {
  display: block;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin: 6px 0 9px;
}

.coach-card-statement {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--body-gray);
}

.coach-card-more {
  display: block;
  margin-top: 11px;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--burnt-orange);
}

.coach-card:focus-visible { outline: 3px solid rgba(211,103,49,0.5); outline-offset: 6px; border-radius: 14px; }

/* ---------- inquiry form ---------- */
.ci-modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(25,34,53,0.9);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ci-modal[hidden] { display: none; }
.ci-modal.is-open { opacity: 1; }
html.ci-locked, html.ci-locked body { overflow: hidden; }

.ci-panel {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--cream-light);
  border-radius: 16px;
  padding: 34px 36px 32px;
  box-sizing: border-box;
}

.ci-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }

.ci-title {
  font-family: var(--font-bold);
  font-weight: 900;
  font-size: 25px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.ci-close {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  margin: -6px -8px 0 10px;
  border: 0; border-radius: 50%;
  background: none;
  font-size: 26px; line-height: 1;
  color: var(--body-gray);
  cursor: pointer;
}

.ci-close:hover { background: rgba(65,63,57,0.08); color: var(--ink); }

.ci-intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-gray);
  margin-bottom: 22px;
}

.ci-field { margin-bottom: 18px; }

.ci-field label {
  display: block;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 7px;
}

.ci-field input, .ci-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(65,63,57,0.22);
  border-radius: 8px;
  padding: 12px 14px;
}

.ci-field textarea { resize: vertical; min-height: 128px; line-height: 1.55; }

.ci-field input:focus, .ci-field textarea:focus {
  outline: none;
  border-color: var(--burnt-orange);
  box-shadow: 0 0 0 3px rgba(211,103,49,0.16);
}

.ci-consent { display: flex; align-items: flex-start; margin: 4px 0 22px; cursor: pointer; }

.ci-consent input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 3px 12px 0 0;
  accent-color: var(--burnt-orange);
}

.ci-consent span {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.ci-submit { width: 100%; justify-content: center; border: 0; cursor: pointer; }
.ci-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.ci-error {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--deep-red);
  background: rgba(153,34,34,0.07);
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 16px;
}

.ci-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--warm-gray);
  margin-top: 14px;
}

.ci-done { text-align: center; padding: 10px 0 4px; }

.ci-done h2 {
  font-family: var(--font-bold);
  font-weight: 900;
  font-size: 26px;
  color: var(--ink);
  margin-bottom: 12px;
}

.ci-done p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-gray);
  margin-bottom: 20px;
}

/* honeypot: off-screen rather than display:none, which bots detect */
.ci-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ci-modal, .coach-card { transition: none; }
  .coach-card:hover { transform: none; }
}


@media (max-width: 1100px) {
  .coach-card { flex: 0 0 calc(33.333% - 28px); max-width: calc(33.333% - 28px); }
}

@media (max-width: 768px) {
  .coach-hero-image.coach-lithograph { justify-content: center; }
  .coach-hero-image.coach-lithograph img { max-height: 380px; }
  .coach-hero-location { margin: 10px 0 18px; }
  .hero-cta-row button.btn-book { width: 100%; justify-content: center; }
  .coach-invite { padding: 44px 0 56px; }
  .coach-invite .values-card { padding: 30px 22px 28px; }
  .coach-invite .coach-quote-headline { max-width: none; }
  .coach-invite .hero-cta-row { margin-top: 22px; }
  .coach-invite-note { margin-top: 14px; }

  .coach-card { flex: 0 0 calc(50% - 20px); max-width: calc(50% - 20px); margin: 0 10px 26px; }
  .coach-grid { margin: 0 -10px; }
  .coach-card-visual img { height: 100%; }
  .coach-card-name { font-size: 17px; }
  .coach-card-statement { font-size: 14px; }

  .ci-modal { padding: 0; align-items: stretch; }
  .ci-panel { max-width: 100%; max-height: 100%; border-radius: 0; padding: 26px 20px 30px; }
}

@media (max-width: 480px) {
  .coach-card { flex: 0 0 calc(100% - 20px); max-width: calc(100% - 20px); }
  .coach-card-visual img { height: 100%; }
}