/* Students Testimonial cards — Stage J rewrite (PUBLIC_UI_DESIGN.md §5).
   THE single source of the card recipe: background = the brand veil over
   --sj-tm-bg (set by the card1/2/3 statics below, or by the partial's inline
   style when an admin picks a photo — N2/J3 de-triplication). The admin
   panel's preview (.sj-prev--tm) mirrors this recipe. Self-contained since
   home-bs4-remnants.css was retired. */

.testimonial-container {
  background: #fff;
  padding: var(--sj-sec-pad) clamp(16px, 4vw, 48px);
  text-align: center;
}
.testimonial-container > h1 {
  font-family: var(--sj-font-head);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 54px);
  color: var(--sj-navy-dark);
}
.testimonial-container > h1::after {
  content: ""; display: block;
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--sj-gold); margin: 14px auto 0;
}

/* K9: slider chassis — arrows in the side gutters, a clipping viewport, and
   the .testimonial class ON the track so the card recipe below is untouched.
   site.js (sjTestimonialSlider) moves the track one card at a time and
   auto-advances every 3s (paused on hover/focus, off under reduced motion). */
.tm-slider { position: relative; margin-top: 40px; padding: 0 58px; }
.tm-viewport { overflow: hidden; }
.tm-track {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 26px;
  transition: transform .6s var(--sj-ease);
  will-change: transform;
}
.tm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--sj-grad-brand);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  box-shadow: var(--sj-shadow-1);
  transition: background var(--sj-t-fast) ease, color var(--sj-t-fast) ease,
              transform var(--sj-t-fast) ease;
}
.tm-nav:hover { background: var(--sj-gold); color: var(--sj-navy-dark); transform: translateY(-50%) scale(1.06); }
.tm-nav:focus-visible { outline: 3px solid var(--sj-gold); outline-offset: 2px; }
.tm-nav--prev { left: 0; }
.tm-nav--next { right: 0; }
.tm-nav[hidden] { display: none; }

.testimonial .card {
  --sj-tm-bg: none;
  position: relative;
  flex: 0 0 calc((100% - 52px) / 3); /* three visible; 52px = two track gaps */
  min-width: 0;
  padding: 56px 26px 30px;
  text-align: left;
  border: 0;
  border-radius: var(--sj-r-card);
  box-shadow: var(--sj-shadow-1);
  /* K10 (owner): anchor the photo to its TOP — centered cover showed only the
     middle band of tall photos on the shorter slider cards. */
  background: var(--sj-veil), var(--sj-tm-bg) top center / cover no-repeat;
  background-color: var(--sj-navy-dark); /* paint when no photo resolves */
  color: #fff;
  overflow: hidden;
  transition: transform var(--sj-t-med) var(--sj-ease), box-shadow var(--sj-t-med) var(--sj-ease);
}
.testimonial .card:hover { transform: translateY(-6px); box-shadow: var(--sj-shadow-2); }

/* the three shipped static backgrounds (admin photo overrides via --sj-tm-bg) */
.testimonial .card1 { --sj-tm-bg: url("/media/static/testimonial1.jpg"); }
.testimonial .card2 { --sj-tm-bg: url("/media/static/testimonial2.jpg"); }
.testimonial .card3 { --sj-tm-bg: url("/media/static/testimonial3.jpg"); }

.testimonial .card h2 {
  font-family: var(--sj-font-head);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.6rem);
  color: var(--sj-gold);
  border-bottom: 2px solid #fff;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.testimonial .card p {
  font-family: var(--sj-font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .92);
  text-align: justify;
}
.quote-icon {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 34px;
  opacity: .9;
}

@media (max-width: 900px) {
  /* one card per view — the slider slides instead of stacking */
  .tm-slider { padding: 0 48px; }
  .testimonial .card { flex: 0 0 100%; }
  .tm-nav { width: 38px; height: 38px; font-size: 13px; }
}

/* ===== K13 mobile — small phones: the 2×48px side gutters were 27% of a
   360px screen. Card goes full-width; the arrows become a centered 44px
   pair BELOW the card (hover transform reset so they stay put). ===== */
@media (max-width: 576px) {
  .tm-slider { padding: 0 0 64px; }
  .tm-nav { top: auto; bottom: 0; transform: none; width: 44px; height: 44px; font-size: 15px; }
  .tm-nav:hover { transform: none; }
  .tm-nav--prev { left: calc(50% - 56px); }
  .tm-nav--next { right: calc(50% - 56px); }
  .testimonial .card { padding: 44px 20px 26px; }
  .testimonial-container > h1 { font-size: clamp(24px, 7vw, 30px); }
}

/* ===== K16 (owner): "Read more" on phones =====
   A full testimonial is ~1000 characters — at 14.5px/1.75 in a one-card-wide
   column that is a ~900px tall card, so the arrows underneath sat far below
   the fold and looked missing. On phones the quote is capped to --tm-clamp and
   a gold Read more button expands it in place.
   Progressive enhancement: the cap applies ONLY to .tm-clamped, which site.js
   adds after measuring real overflow — so no-JS visitors keep the full text,
   short quotes get no button, and edit mode is never clamped. */
.tm-more { display: none; }     /* desktop + un-clamped cards: nothing to show */

@media (max-width: 900px) {
  .testimonial .card { --tm-clamp: 190px; }   /* ≈ 7 lines — JS reads this */
  .testimonial .card .tm-body { position: relative; }

  .testimonial .card.tm-clamped .tm-body {
    max-height: var(--tm-clamp);
    overflow: hidden;
  }
  /* fade the cut so it reads as "there is more", not as a broken sentence.
     Matches the veil's bottom tone (--sj-navy-dark at ~.75 over the photo). */
  .testimonial .card.tm-clamped .tm-body::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 4.2em;
    background: linear-gradient(to bottom, rgba(26, 53, 93, 0), rgba(26, 53, 93, .93));
    pointer-events: none;
  }
  .testimonial .card.tm-clamped.is-expanded .tm-body { max-height: none; }
  .testimonial .card.tm-clamped.is-expanded .tm-body::after { content: none; }

  /* gold on navy — the allowed pairing (never gold on white) */
  .testimonial .card.tm-clamped .tm-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    min-height: 40px;                 /* comfortable tap target */
    padding: 9px 16px;
    font-family: var(--sj-font-body);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--sj-navy-dark);
    background: var(--sj-gold);
    border: 0;
    border-radius: var(--sj-r-btn);
    cursor: pointer;
    transition: background var(--sj-t-fast) ease, transform var(--sj-t-fast) ease;
  }
  .testimonial .card.tm-clamped .tm-more:hover { background: #f2cc00; }
  .testimonial .card.tm-clamped .tm-more:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  .testimonial .card.tm-clamped .tm-more i { transition: transform var(--sj-t-fast) ease; }
  .testimonial .card.tm-clamped.is-expanded .tm-more i { transform: rotate(180deg); }
}