/* testimonials.small.css — 08 / Testimonials below 900px
 *
 * TWO BANDS: the designed mobile layout first, then the undesigned tablet
 * fallback at the end of the file. The tablet block is fenced with
 * `min-width: 768px`, so it cannot reach into the mobile block and the order
 * between them carries no meaning.
 *
 * From the Testimonial Section Designs mobile handoff. The handoff describes this
 * as "the max-width: 767px branch" of the desktop design, and it is: same
 * markup, same mechanic, same JS. The card highlight already derives from
 * scrollLeft against a MEASURED pitch — testimonials.js has never hard-coded
 * 420px — so the one change the handoff calls out for shared logic was already
 * in place before mobile existed.
 *
 * What changes: the 200px left rail becomes a single header row, the strip
 * snaps, and the card shrinks to a peeking 302px.
 */

@media (max-width: 767.98px) {

  .ts {
    /* Released, as Contact and the footer are: the stacked content is taller
       than a phone viewport anyway, so a 100vh floor only adds dead space. */
    min-height: 0;
    padding: 44px 0 40px;
  }

  .ts__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 20px;
  }


  /* --- the rail becomes one header row ------------------------------------
     `08 / TESTIMONIALS` against the `4×` count, on one baseline with a rule
     under it. The VOICES / ON RECORD caption and the whole
     SOURCE — LinkedIn — unedited block are dropped. */

  .ts__rail {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(244, 242, 237, .14);
  }
  .ts__eyebrow { font-size: .7rem; letter-spacing: .2em; line-height: 1; }
  .ts__railblock {
    border-top: 0;
    padding-top: 0;
    flex: none;
  }
  /* The second rail block is the source note; the count keeps only its numeral. */
  .ts__railblock:last-child,
  .ts__countcap { display: none; }
  .ts__count { font-size: 1.15rem; line-height: 1; }
  .ts__count sup { font-size: .6rem; }


  /* --- header -------------------------------------------------------------- */

  .ts__head {
    display: block;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .ts__title {
    margin-top: 26px;
    font-size: 2.15rem;
    line-height: 1.04;
    letter-spacing: -.025em;
    max-width: none;
  }
  .ts__intro {
    margin-top: 16px;
    font-size: .95rem;
    text-align: left;
    max-width: none;
    /* The desktop sheet holds this paragraph off the RIGHT VIEWPORT EDGE with
       padding-right: var(--t-hold), because up there the section has no right
       gutter and the row runs to the glass. Here there is a symmetric 20px
       gutter and the text is left-aligned, so the hold-off is not clearance any
       more — it just eats 16px off the wrap width and the paragraph breaks
       early against a title that runs the full column. */
    padding-right: 0;
  }


  /* --- pager --------------------------------------------------------------- */

  .ts__pager {
    margin-top: 22px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(244, 242, 237, .14);
    gap: 16px;
  }
  .ts__counter { font-size: .64rem; letter-spacing: .18em; }
  .ts__swipe { display: inline; }
  /* The eyebrow's wide-only break. Declared here rather than shared because
     small-screen overrides belong in the section's own *.small.css — see
     CLAUDE.md, and the same pair in about.small.css. */
  .wide-only { display: none; }
  .ts__navs { gap: 8px; }
  /* 44 x 44 is the minimum touch target — do not shrink it. */
  .ts__nav { width: 44px; height: 44px; }


  /* --- the strip ----------------------------------------------------------
     Breaks out of the 20px gutter so the next card peeks at the right edge,
     and snaps: on touch the swipe is the control, not the arrows. */

  .ts__strip {
    gap: 14px;
    margin: 0 -20px;
    padding: 20px 20px 4px;
    scroll-snap-type: x mandatory;
  }
  /* The desktop trailing spacer let the last card reach the left edge of a
     1440px viewport. At 390px the card is most of the screen already. */
  .ts__strip::after { display: none; }

  .ts-card {
    width: min(302px, 82vw);
    min-height: 350px;
    padding: 26px 22px;
    scroll-snap-align: start;
  }
  .ts-card__meta { font-size: .56rem; letter-spacing: .16em; margin-bottom: 20px; }
  .ts-card__quote { font-size: .98rem; line-height: 1.58; }
  .ts-card--lead .ts-card__quote { font-size: 1.12rem; line-height: 1.26; }
  .ts-card__foot { padding-top: 22px; gap: 12px; }
  .ts-card__avatar { width: 42px; height: 42px; }
  .ts-card__name { font-size: .86rem; }
  .ts-card__role { font-size: .54rem; margin-top: 3px; }


  /* --- section footer ------------------------------------------------------ */

  .ts__foot {
    margin: 26px 20px 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(244, 242, 237, .14);
    gap: 16px;
    font-size: .6rem;
    letter-spacing: .14em;
    line-height: 1.4;
  }
  /* The whole left cell is gone at every width now — see the note in
     testimonials.css. This block used to drop only the second line here. */
}


/* =========================================================================
   TABLET FALLBACK — 768 to 900px
   Not designed; this follows the desktop handoff's own recommendation. The
   strip is already horizontally scrollable, so it survives the change intact —
   the card width becomes fluid, which is why testimonials.js measures the step
   rather than hard-coding 420. Below 768px the mobile handoff's own layout
   takes over (testimonials.small.css), so this band is fenced off from it.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 900px) {
  /* Released here, as Contact and the footer are — the stacked content is taller
     than a phone viewport anyway, so the lock would only add dead space. */
  .ts { min-height: 0; padding: 48px 0; }
  .ts__grid { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }

  .ts__rail { flex-direction: row; flex-wrap: wrap; gap: 20px 28px; }
  .ts__railblock { flex: 1 1 40%; }

  .ts__head { flex-direction: column; gap: 16px; }
  .ts__title { font-size: 2rem; max-width: none; }
  /* Both of these drop the desktop hold-off for the same reason the mobile
     block does: this band has a symmetric 20px gutter, so the extra right inset
     is not clearance from the viewport edge, it is a 16px misalignment against
     everything else in the column. */
  .ts__intro { text-align: left; max-width: none; padding-right: 0; }
  .ts__pager { padding-right: 0; }

  .ts-card { width: min(84vw, 400px); min-height: 340px; padding: 28px 24px; }
  .ts-card--lead .ts-card__quote { font-size: 1.18rem; }
  /* The spacer only needs to clear the last card, not a desktop viewport. */
  .ts__strip::after { width: 20vw; }

  .ts__foot { padding: 28px 20px 0; flex-direction: column; align-items: flex-start; gap: 12px; }
}