/* =============================================================================
   TESTIMONIALS  |  Swipeable quote carousel.
   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}
.car{--cw:min(80vw,340px);display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.2rem calc(50% - var(--cw)/2);scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.car::-webkit-scrollbar{display:none}
.car.drag{scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto}
.quote{flex:none;width:var(--cw);scroll-snap-align:center;padding:1.8rem;position:relative;margin:0;transition:transform .2s linear,opacity .2s linear;user-select:none}
.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{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--ink))}
.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}