/* Testimonials: the card, the rail, the /results grid, the submission form.
 *
 * A separate file rather than more of site.css, because site.css is the busiest
 * file in the repository and three sessions were editing it the day this was
 * written. It is pulled in via pageCss on the four pages that need it.
 *
 * Colours come from the existing tokens (navy #011D3A, lime, cream). Nothing
 * here introduces a new palette; the one new colour is the amber used for
 * sample content, which is deliberately outside the brand so that a placeholder
 * never looks like part of the design.
 */

/* ------------------------------------------------------------ sample banner */
/* Amber, not brand. Non-dismissible: a banner you can close is a banner that is
   closed in the screenshot somebody then signs off on. */
.sample-banner {
  display: block;
  background: #FFF4D6;
  border: 1px solid #E0A800;
  border-left: 4px solid #B37F00;
  color: #6B4E00;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 0 0 14px;
}
.sample-banner strong { font-weight: 800; letter-spacing: .04em; }

.quote-card.is-sample {
  border-color: #E0A800;
  background: #FFFDF7;
}

.sample-zone {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 2px dashed #E0A800;
}
.sample-zone > .h4 { color: #6B4E00; }

/* admin table row */
.row-sample > td { background: #FFFDF7; }

/* -------------------------------------------------------------------- card */
.quote-card { margin: 0; }              /* it is a <figure> now */
.quote-card .quote-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.quote-card .quote-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 10px;
}
.quote-card blockquote { margin: 0; }
.quote-card blockquote p { margin: 0 0 .7em; }
.quote-card blockquote p:last-child { margin-bottom: 0; }

.quote-card .quote-video {
  width: 100%;
  border-radius: 10px;
  margin-top: 14px;
  background: #000;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.quote-card .who .av-photo { object-fit: cover; }
.quote-card .who-text { min-width: 0; }

.quote-card .quote-note {
  margin: 10px 0 0;
  font-size: .72rem;
  color: var(--muted);
  font-style: italic;
}

/* -------------------------------------------------------------------- rail */
/* Three across on desktop; a swipeable, snapping rail on a phone. CSS only -
   no carousel script, nothing to break under the strict CSP, and it stays
   keyboard- and screen-reader-navigable because it is just a scrolling list. */
.quote-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.quote-rail > li { display: flex; }
.quote-rail > li > .quote-card { width: 100%; }

.quote-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.quote-grid > li { display: flex; }
.quote-grid > li > .quote-card { width: 100%; }

@media (max-width: 860px) {
  .quote-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* No negative-margin bleed. It used to pull the rail out by a --gutter
       that is not defined anywhere, so it fell back to 20px, did not match
       .wrap's real padding, and left the whole page with a constant 2px
       horizontal scroll at every width from 640 down. A 2px scrollbar on a
       phone is not worth a flush edge, and it would only have appeared on the
       day the first real testimonial was approved - an empty rail hides it. */
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-width: 100%;
  }
  .quote-rail > li {
    scroll-snap-align: start;
    flex: 0 0 84%;
    max-width: 340px;
  }
}

/* A visitor who has asked for less motion gets no smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  .quote-rail { scroll-behavior: auto; }
}

/* ------------------------------------------------------------- /results bits */
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 28px; }
.field-inline { display: flex; flex-direction: column; gap: 4px; }
.field-inline .label { margin: 0; font-size: .78rem; }
.field-inline select { min-width: 190px; }

/* ------------------------------------------------------------- share form */
.consent-set {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 28px 0 22px;
  background: var(--cream, #FAF7EF);
}
.consent-set legend {
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  padding: 0 8px;
  color: var(--ink);
}
.consent-set .check { margin-top: 12px; }

.fine-print {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--muted);
  border-left: 3px solid var(--line-2, #D9E1E8);
  padding-left: 14px;
  margin: 0 0 26px;
}

/* --------------------------------------------------------------- admin bits */
.copy-field {
  width: 100%;
  min-width: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  padding: 6px 8px;
}
.inline { display: inline; }
/* .h4 lives in site.css now - it is a site-wide heading utility, not a
   testimonial one. */

/* ============================================================ coach photos */
/* These live here rather than in site.css only because site.css was being
   edited by two other sessions on the day this was written. They belong with
   the rest of the photograph work.

   The .hero-art-photo rules that used to sit here are gone with the homepage
   photograph they styled - see views/public/home.php. Nothing emits the class
   any more, and leaving styling behind for a class nothing emits is how it
   quietly comes back. */

/* ------------------------------------------------------- about + contact */
.coach-figure { margin: 0 0 28px; }
.coach-figure img {
  /* The source is a full-body shot cropped to one person, so it is very tall.
     Rendered at its natural ratio it runs past the fold on its own. Boxed at
     3:4 and anchored to the top, which keeps the face and the paddle. */
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 12%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.coach-figure figcaption {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}

.about-intro { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; }
@media (max-width: 780px) {
  .about-intro { grid-template-columns: 1fr; gap: 20px; }
  .about-intro .coach-figure img { max-width: 260px; }
}

/* A face beside "call or text a stranger" does more work than any sentence. */
.contact-coach {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.contact-coach img {
  width: 76px; height: 76px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 2px solid var(--lime);
}
/* The contact card is navy, so this text is light. var(--ink) here rendered the
   name invisible against its own background. */
.contact-coach .who b { display: block; font-family: var(--display); font-size: .96rem; color: #fff; }
.contact-coach .who > span { display: block; font-size: .8rem; color: #AFC2D3; margin-top: 2px; }

/* One line above the lesson grid for people who have never played. Deliberately
   not a panel or a card: it is a signpost, and a signpost that looks like a
   section competes with the thing it is pointing at. */
.start-here {
  margin: 18px auto 0;
  max-width: 62ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--body);
}
.start-here strong { color: var(--ink); font-family: var(--display); }
.start-here a { font-weight: 600; }