/* ==========================================================================
   "What parents and students say" testimonials — shared by index.html and
   about.html. Edit here only; both pages load this file so they can't drift.

   Card width and track position are computed entirely in CSS. The script
   (/shared/testimonials.js) only sets --t-index (which card is first/active),
   so the layout is identical on every load, refresh and navigation.
   ========================================================================== */

.testimonials-section{background:#fff;}
.testimonials-heading{white-space:nowrap;}
@media (max-width:760px){.testimonials-heading{white-space:normal;}}
.t-br-mobile{display:none;}

.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:920px){.t-grid{grid-template-columns:1fr;}}

/* ---------- CAROUSEL ---------- */
.t-carousel{display:flex;align-items:center;gap:16px;}
.t-viewport{overflow:hidden;flex:1;min-width:0;}
.t-viewport:focus{outline:2px solid var(--orange);outline-offset:4px;border-radius:8px;}
.t-track{
  /* Percentages below resolve against the track, which is exactly as wide as
     the clipping viewport — so no JS measurement is needed. */
  --t-per:3;
  --t-gap:22px;
  --t-card:calc((100% - var(--t-gap) * (var(--t-per) - 1)) / var(--t-per));
  --t-shift:0px; /* offset of the active card from the viewport's left edge */
  display:flex;gap:var(--t-gap);
  transform:translateX(calc(var(--t-shift) - var(--t-index, 0) * (var(--t-card) + var(--t-gap))));
  transition:transform .35s ease;
}
@media (max-width:920px){.t-track{--t-per:2;}}
.t-track > .t-card{flex:0 0 var(--t-card);}
.t-arrow{
  flex-shrink:0;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line-dark);color:var(--navy);
  cursor:pointer;transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.t-arrow:hover:not(:disabled){background:var(--paper);border-color:var(--navy);}

/* ---------- CARDS ---------- */
.t-card{
  background:var(--paper);border-radius:var(--radius-lg);
  padding:26px 24px;border:1px solid var(--line-dark);
  display:flex;flex-direction:column;flex-shrink:0;
}
.stars{display:flex;gap:3px;margin-bottom:16px;}
.t-card p.quote{font-size:15px;line-height:1.7;color:var(--ink);margin-bottom:18px;}
.t-name{font-size:13.5px;font-weight:700;color:var(--navy);margin-top:auto;}
.t-role{font-size:12.5px;color:rgba(22,27,43,.78);}
.t-readmore{
  display:inline-block;margin-top:2px;margin-bottom:14px;
  font-size:13.5px;font-weight:700;color:var(--orange);
}
.placeholder-flag{
  display:inline-block;margin-top:10px;font-size:11px;font-weight:700;color:var(--orange);
  letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- GOOGLE REVIEWS LINK ---------- */
.google-reviews-link{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:24px;
  font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--navy);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;
  text-decoration-color:rgba(253,89,2,.4);
  transition:color .15s ease, text-decoration-color .15s ease;
}
.google-reviews-link .external-arrow{color:var(--orange);}
.google-reviews-link:hover{color:var(--orange);text-decoration-color:var(--orange);}
.google-reviews-link:hover .external-arrow{color:var(--orange);}

/* ---------- MOBILE ---------- */
@media (max-width:640px){
  .testimonials-section{padding:60px 0;}
  /* Intro is locked to two lines each ("What parents and / students say",
     "Real feedback from families learning with / Syllara Academy.").
     The supporting line (~324px at 16.5px) shrinks only on phones narrower
     than ~375px so it never wraps or overflows. */
  .testimonials-section .section-head{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:55px;}
  .t-br-mobile{display:inline;}
  .testimonials-section .section-head h2,
  .testimonials-section .section-head p{white-space:nowrap;}
  .testimonials-section .section-head p{margin-top:30px;font-size:min(16.5px, calc((100vw - 40px) / 20.2));}
  .testimonials-section .google-reviews-link{display:flex;width:fit-content;margin-left:auto;margin-right:auto;}

  .t-carousel{display:block;position:relative;}
  /* Active card is centred with a fixed 18px sliver of each neighbour on every
     phone width. The sliver must stay smaller than the card's 1px border +
     20px padding (below), so only a blank card edge ever shows — no stars,
     text or names from the previous/next review. */
  .t-track{
    --t-gap:12px;
    --t-peek:18px;
    --t-card:calc(100% - 2 * (var(--t-gap) + var(--t-peek)));
    --t-shift:calc(var(--t-gap) + var(--t-peek));
  }
  /* The side previews are only partly on screen, so the page's scroll-reveal
     (15% visibility threshold) would never fire for them and they'd stay
     invisible. Carousel cards are always shown on mobile. */
  .t-track > .t-card.reveal{opacity:1;transform:none;}
  .t-arrow{position:absolute;top:50%;z-index:2;width:36px;height:36px;transform:translateY(-50%);}
  .t-arrow-prev{left:-8px;}
  .t-arrow-next{right:-8px;}
  .t-card{padding:22px 20px;}
}