/* ============================================================
   BRODCO — Location page social-proof review carousel
   Reuses .review-card / .stars / .review-who / .avatar tokens
   already defined on each page; no new colours or fonts.
   ============================================================ */

.reviews-carousel-section .section-head{margin-bottom:36px;}

.rc{position:relative;max-width:820px;margin:0 auto;}

.rc-viewport{position:relative;overflow:hidden;touch-action:pan-y;}

/* --- No-JS / base state: readable stacked list --- */
.rc-track{display:flex;flex-direction:column;gap:20px;}
.rc-track .rc-slide{position:static;opacity:1;visibility:visible;transform:none;}
.rc-slide{width:100%;}
.rc-slide .stars{display:block;}

.rc-arrow,.rc-dots{display:none;}

/* --- JS-enhanced carousel state --- */
.rc.rc-js .rc-track{
  display:block;
  position:relative;
  min-height:var(--rc-h, 300px);
}
.rc.rc-js .rc-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform:translateX(16px);
  transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
  width:100%;
}
.rc.rc-js .rc-slide.is-active{
  position:relative;
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  transition:opacity .5s ease, transform .5s ease;
}
.rc.rc-js .rc-slide.is-prev{transform:translateX(-16px);}

/* Controls sit in a row below the card at every breakpoint so they
   never overlap the review text and stay reachable with a thumb. */
.rc.rc-js .rc-controls{
  display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px;
}
.rc.rc-js .rc-arrow{
  display:flex;align-items:center;justify-content:center;
  position:static;transform:none;
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
  padding:0;
}
.rc.rc-js .rc-arrow:hover{background:var(--amber);border-color:var(--amber);color:#fff;}
.rc.rc-js .rc-arrow svg{width:18px;height:18px;pointer-events:none;}

.rc.rc-js .rc-dots{
  display:flex;justify-content:center;align-items:center;gap:2px;
}
.rc.rc-js .rc-dot{
  width:44px;height:44px;padding:0;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rc.rc-js .rc-dot::before{
  content:'';display:block;width:9px;height:9px;border-radius:50%;
  background:var(--line);transition:background .18s ease,transform .18s ease;
}
.rc.rc-js .rc-dot:hover::before{background:var(--amber-tint);}
.rc.rc-js .rc-dot.is-active::before{background:var(--amber);transform:scale(1.2);}

/* Fixed heights per breakpoint so the longest review (Renee's) fits
   without excess empty space on shorter reviews. */
.rc.rc-js{--rc-h:280px;}
@media (max-width:1024px){.rc.rc-js{--rc-h:320px;}}
@media (max-width:768px){
  .rc{max-width:100%;}
  .rc.rc-js{--rc-h:400px;}
  .rc.rc-js .rc-slide p{font-size:14px;line-height:1.65;}
}
@media (max-width:420px){.rc.rc-js{--rc-h:440px;}}

@media (prefers-reduced-motion: reduce){
  .rc.rc-js .rc-slide{transition:none;}
}