/* =============================================================================
   TESTIMONIALS  |  Quote carousel (whole cards only, one card at a time, looping).
   HTML: index.html -> <!-- SECTION: TESTIMONIALS -->     JS: js/testimonials.js
   Edit only this file when you want to change how testimonials looks.
   ============================================================================= */

.thead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.thead h2{max-width:14ch}
.arrows{display:flex;gap:.5rem;flex:none}

/* THE CAROUSEL. --n = how many cards show at once (1 phone, 2 tablet, 3 desktop). Change those numbers to show more or fewer.
   The side padding gives the card shadows room, so they are never cut off. */
.car{--n:1;--gap:1rem;position:relative;overflow-x:clip;padding-inline:1rem;margin-inline:-1rem}
@media(min-width:600px){
  .car{--n:2}
}
@media(min-width:900px){
  .car{--n:3}
}
@media(min-width:1280px){
  .car{padding-inline:2.4rem;margin-inline:-2.4rem}
}
.ctrack{position:relative}
.quote{position:absolute;top:0;left:0;width:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));padding:1.8rem;margin:0;
  transform:translateX(calc(var(--s,0) * (100% + var(--gap))));
  transition:transform .6s var(--ease),opacity .5s,visibility 0s}
/* cards that are not on screen are fully hidden, so no sliver of the next card is ever visible */
.quote.off{opacity:0;visibility:hidden;pointer-events:none;transition:transform .6s var(--ease),opacity .5s,visibility 0s .5s}
.quote.nt{transition:none!important}
.quote::before{content:"“";position:absolute;top:.2rem;left:1.3rem;font-size:4.5rem;line-height:1;color:var(--green);font-family:Georgia,serif}
.quote p{margin:2rem 0 1.4rem;font-size:1.05rem;min-height:5.6em}
.who{display:flex;align-items:center;gap:.7rem;font-size:.85rem}
.who i,.who img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
.who i{display:grid;place-items:center;font-style:normal;font-size:.78rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--green),#1c1c1c)}
.who span{display:block;color:var(--muted)}
[data-theme=dark] .who i{background:linear-gradient(135deg,var(--green),#1c1c1c)}
.car:focus-visible{outline:2px solid var(--green)!important;outline-offset:3px}
.quote::before{font-family:var(--font);font-weight:700}