/* Porchlight reviews: carousel, summary badge, filter chips and grid.
   Works on the home page and on /testimonials. Colors fall back to the
   site palette if a page does not define the variables. */

.tm-section{background:var(--mist,#F4F6F9)}
.tm-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:32px}
.tm-head-copy{display:flex;flex-direction:column;gap:12px;max-width:660px}
.tm-head-copy h2{font-size:clamp(30px,4vw,46px);line-height:1.08}

.tm-score{display:inline-flex;align-items:center;gap:12px;background:var(--white,#fff);border:1px solid var(--line,#DDE2EA);border-radius:999px;padding:10px 22px 10px 18px}
.tm-score b{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;line-height:1;color:var(--navy,#14233B)}
.tm-score span{font-size:15px;font-weight:600;color:var(--muted,#4A5670);line-height:1.25}

.tm-stars{display:inline-flex;gap:2px;flex:0 0 auto}
.tm-stars svg{width:20px;height:20px;fill:var(--amber,#F2B33D);stroke:var(--navy,#14233B);stroke-width:1.3;stroke-linejoin:round}
.tm-stars svg.off{fill:none;stroke:var(--line-2,#C6CEDB)}

/* Carousel */
.tm-viewport{position:relative}
.tm-track{--gap:24px;--per:3;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:6px 4px 20px;margin:0 -4px;scrollbar-width:none}
.tm-track::-webkit-scrollbar{display:none}
.tm-track:focus-visible{outline:3px solid var(--amber,#F2B33D);outline-offset:2px;border-radius:24px}
@media (max-width:980px){.tm-track{--per:2}}
@media (max-width:640px){.tm-track{--per:1;--gap:16px}}

.tm-card{display:flex;flex-direction:column;gap:14px;background:var(--white,#fff);border:1px solid var(--line,#DDE2EA);border-radius:24px;padding:28px;margin:0;min-width:0}
.tm-track .tm-card{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start}
@media (max-width:640px){.tm-card{padding:22px}}

.tm-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px}
.tm-pill{background:var(--amber-soft,#FDF1D8);color:var(--navy,#14233B);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.tm-card h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:23px;line-height:1.18;letter-spacing:-.01em;color:var(--navy,#14233B)}
.tm-card blockquote{margin:0;color:var(--ink,#33405A);font-size:17px;line-height:1.6}
.tm-card blockquote p{margin:0}
.tm-by{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line,#DDE2EA)}
.tm-avatar{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--navy,#14233B);color:var(--white,#fff);display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;letter-spacing:.02em}
.tm-who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.tm-who b{font-size:17px;color:var(--navy,#14233B)}
.tm-who span{font-size:14px;color:var(--muted,#4A5670)}
.tm-date{margin-left:auto;font-size:14px;font-weight:600;color:var(--muted,#4A5670);white-space:nowrap;text-align:right}

/* Controls */
.tm-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:4px}
.tm-dots{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.tm-dot{width:28px;height:28px;padding:0;border:none;background:none;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.tm-dot::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--line-2,#C6CEDB);transition:width .2s ease,background .2s ease}
.tm-dot[aria-current="true"]::before{width:26px;background:var(--navy,#14233B)}
.tm-dot:hover::before{background:var(--navy-2,#2B4470)}
.tm-btns{display:flex;align-items:center;gap:10px}
.tm-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--navy,#14233B);background:var(--white,#fff);color:var(--navy,#14233B);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .15s ease,color .15s ease}
.tm-btn:hover{background:var(--navy,#14233B);color:var(--white,#fff)}
.tm-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tm-btn.tm-play svg{fill:currentColor;stroke:none}
.tm-btn.tm-play{border-color:var(--line-2,#C6CEDB)}
.tm-btn.tm-play:hover{border-color:var(--navy,#14233B)}

/* Filter chips and grid (testimonials page) */
.tm-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.tm-chip{font:inherit;font-weight:600;font-size:16px;min-height:44px;padding:8px 18px;border-radius:999px;border:2px solid var(--line-2,#C6CEDB);background:var(--white,#fff);color:var(--navy,#14233B);cursor:pointer}
.tm-chip:hover{border-color:var(--navy,#14233B)}
.tm-chip[aria-pressed="true"]{background:var(--navy,#14233B);border-color:var(--navy,#14233B);color:var(--white,#fff);font-weight:700}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:24px;align-items:stretch}
.tm-count{font-size:15px;color:var(--muted,#4A5670);margin:-12px 0 22px}

.tm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .tm-track{scroll-behavior:auto}
  .tm-dot::before,.tm-btn{transition:none}
}

.tm-section[hidden],.tm-controls[hidden],.tm-btn[hidden]{display:none}