/* ==========================================================================
   /testimonials/ — page-local stylesheet.

   WHY THIS IS A FILE AND NOT A <style> BLOCK. Sibling pages are being edited
   at the same time as this one, so components.css is off limits; and a page
   <style> block would put the rules in the same file as the copy, which is
   the one file two agents were most likely to touch at once. This sheet is
   loaded by site/testimonials/index.html and by nothing else. Every class is
   prefixed .tst- so it cannot collide with the kit or with another page.

   TOKENS ONLY. No raw colour, no raw type size, no raw spacing value. The
   only literals below are `ch` measures and the three sanctioned breakpoints
   (640 / 768 / 1024), which are the same conventions components.css and the
   other page-local sheets in this tree already use.

   NOTHING HERE ADDS BEHAVIOUR. The two video rails, the hard-end trimming
   and the reveal animation are all driven by /assets/js/app.js against markup
   copied verbatim from the home page. This sheet only lays out the furniture
   around them. (The click-to-play facade went with the lead player it drove;
   the rails use native controls.)
   ========================================================================== */

/* ---------- 1. Hero ---------------------------------------------------- */
/* Single stack, not the kit's 1.15fr/1fr split: there is nothing to put in a
   second column, and an empty one on a proof page reads as a missing asset.
   The measure goes on each element against its OWN type — a `ch` cap on the
   wrapper resolves against the body face and silently crops the headline.

   THE LEAD PARAGRAPHS ARE GONE and so are their rules. The hero is now the
   overline, the h1 and the jump links; the copy that explained the page was
   stripped on Josh's instruction. If lead copy is ever reinstated it needs its
   own measure again — do not re-add these rules speculatively. */
/* PULLED BACK AT EVERY WIDTH, NOT JUST ON A PHONE. The kit hero opens on
   --space-9 top and --space-8 bottom, which with a two-line lockup spent most
   of the first screen on empty green before anything happened - and the point
   of this page is the clips, which were landing below the fold. */
.tst-hero { padding-block: var(--space-7) var(--space-6); }
/* FLAT BRAND GREEN, NO WASH. The kit hero paints two large radial gradients
   through .uep-hero--green::before - a white bloom top right and an ink pool
   bottom left. With the off-white band that used to sit under this hero now
   gone, the hero runs straight into the green rails below it, and those
   gradients made the join read as two mismatched greens meeting rather than
   one field. The ::before is emptied rather than removed: it still exists in
   the kit, so only its paint is cancelled here. */
.tst-hero { background: var(--uep-green); }
.tst-hero::before { background: none; }

.tst-hero__copy { max-width: 68ch; }
/* margin 0, not a trailing step: the h1 is the last thing in the hero now that
   the jump links are gone, so a bottom margin here would only add empty green
   above the first band. */
.tst-hero__copy h1 { max-width: 15ch; margin: 0; }

/* ---------- 2. Shared section furniture -------------------------------- */
/* Left-aligned throughout, like every other page in this tree.
   EVERY SECTION IS NOW OVERLINE + H2 ONLY. The intro paragraph each section
   used to carry explained the section to the reader and was stripped, so the
   rule that styled those paragraphs went with it. :last-child zeroes the
   trailing margin on the h2 that is now always last. */

/* Several kit components colour every descendant <p>, which would drag the
   eyebrow off-brand. Restate it after those rules, same as /mini-series/. */
p.uep-overline { color: var(--uep-green-darker); margin-bottom: var(--space-3); }
.uep-hero--green p.uep-overline,
.uep-section--green p.uep-overline { color: var(--uep-gold); }

/* ONE NOTE LEFT, AND IT IS NOT DECORATION. The provenance notes that used to
   sit under the lead clip and above the rails were page-about-the-page copy and
   were stripped. The single survivor is under Katie F's card: it qualifies a
   specific result as hers and not something the program offers anyone else,
   which is a consumer-law requirement, not a style choice. It is set apart from
   body copy so it cannot be read as part of her quote. Do not delete it and do
   not delete this rule. */

/* ---------- 3. The rails ----------------------------------------------- */
/* NO HEADING BAND ANY MORE. An off-white section sat between the hero and the
   rails to carry a title; the title was stripped, the empty band went with it,
   and the rule that existed only to close that band's bottom gap is gone too.
   The rails now meet the hero directly, both on flat brand green. */

/* ---------- 4. The written wall ---------------------------------------- */
/* NOT A GRID. Eight quotes of very different lengths in equal cells is the
   wall-of-identical-cards look this page has to avoid: every card grows to the
   tallest in its row and the short quotes end in dead space. Columns let each
   card keep its own height, so the shape of the wall is made by the length of
   what people actually said. */
.tst-wall {
  columns: 1;
  column-gap: var(--space-5);
}
@media (min-width: 768px) {
  .tst-wall { columns: 2; column-gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .tst-wall { columns: 3; }
}
.tst-wall > * {
  break-inside: avoid;
  /* Safari still reads the old property name for figures in a column flow. */
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .tst-wall > * { margin-bottom: var(--space-6); }
}
/* .uep-testimonial is height:100% so it can fill a grid cell. In a column
   flow there is no cell to fill and the declaration is at best inert, so it is
   cleared to keep the intent of the card readable. */
.tst-wall .uep-testimonial { height: auto; }

/* Two of the eight are promoted. Hierarchy inside the wall has to come from
   somewhere, and promoting on LENGTH would just reward whoever talked longest.
   These two are the ones that name something checkable — a stage of the model
   and a first step taken, and who is actually in the room — rather than a
   feeling about the room. Tint ground, larger type, no border. */
.tst-wall .tst-quote--lead {
  background: var(--uep-green-tint);
  border-color: transparent;
}
.tst-wall .tst-quote--lead .uep-testimonial__quote {
  font-size: var(--fs-h5);
  letter-spacing: var(--tracking-tight);
}

/* ---------- 5. Closing call ---------------------------------------------- */
/* On the green ground, so the copy colours are the on-dark pair rather than
   the slate the rest of the page uses. */
.tst-cta { max-width: 60ch; }
.tst-cta h2 { margin: 0 0 var(--space-4); }
.tst-cta p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--uep-on-dark);
  margin: 0 0 var(--space-6);
}
.tst-cta__alt {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-small);
}
.tst-cta__alt a {
  color: var(--uep-gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.tst-cta > :last-child { margin-bottom: 0; }

/* ---------- 6. Mobile ---------------------------------------------------- */
@media (max-width: 767px) {
  .tst-hero { padding-block: var(--space-6) var(--space-5); }
}