/* ============================================================
   LLS GROUP - review bar
   Six genuine Facebook recommendations, supplied verbatim.
   Nothing invented: no counts, no synthetic testimonials. Text is
   exactly as written by each customer. Every one of these is a
   Facebook *recommendation* - a positive endorsement - so the
   five-star mark states what the record already says.

   Dates are deliberately not rendered. Do not turn them back on.

   Note: there is no approved board for this component, so it is
   built in the existing site language - cream ground, olive rule,
   EB Garamond quote, Inter attribution.

   Layout is columns divided by hairlines, not boxed cards: the
   quote carries the weight, the rules only keep the rhythm.
   ============================================================ */
.l-rev{
  position:relative;background:var(--cream-2);overflow:hidden;
  padding:calc(76 * var(--u)) 0 calc(80 * var(--u));
}
.l-rev-head{padding:0 calc(60 * var(--u));margin-bottom:calc(46 * var(--u))}
.l-rev-head .l-label{color:var(--olive)}

/* the moving track */
.l-rev-vp{position:relative;overflow:hidden;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(60 * var(--u)),
    #000 calc(100% - 60 * var(--u)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 calc(60 * var(--u)),
    #000 calc(100% - 60 * var(--u)),transparent)}
.l-rev-track{display:flex;align-items:flex-start;gap:0;width:max-content;
  animation:l-rev-run 78s linear infinite}
.l-rev-vp:hover .l-rev-track,
.l-rev-vp:focus-within .l-rev-track{animation-play-state:paused}
@keyframes l-rev-run{from{transform:translate3d(0,0,0)}
                     to{transform:translate3d(-50%,0,0)}}

/* a column, not a card: hairline divider, no fill, no outline */
.l-rev-card{
  flex:0 0 calc(352 * var(--u));
  box-sizing:border-box;
  padding:calc(4 * var(--u)) calc(46 * var(--u)) 0 calc(38 * var(--u));
  border-left:1px solid var(--hair);
  display:flex;flex-direction:column;
}

/* five stars - drawn, never an emoji or a font glyph */
.l-rev-stars{display:flex;gap:calc(4 * var(--u));margin-bottom:calc(20 * var(--u))}
.l-rev-stars svg{display:block;width:calc(13 * var(--u));height:calc(13 * var(--u));
  fill:var(--olive);flex:none}

.l-rev-q{margin:0;font-family:var(--serif);font-weight:400;
  font-size:calc(19 * var(--u));line-height:calc(29 * var(--u));color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.l-rev-card.is-open .l-rev-q{-webkit-line-clamp:unset;overflow:visible}

.l-rev-more{align-self:flex-start;margin-top:calc(14 * var(--u));
  font-weight:600;font-size:calc(10 * var(--u));letter-spacing:calc(.7 * var(--u));
  text-transform:uppercase;color:var(--olive);cursor:pointer;
  background:none;border:0;padding:0;transition:opacity 180ms var(--e-out,ease)}
.l-rev-more:hover{opacity:.6}
/* small type, finger-sized target */
.l-rev-more{position:relative}
.l-rev-more::after{content:"";position:absolute;inset:-14px -8px}

/* attribution sits with the quote it belongs to, not pinned to a card floor */
.l-rev-by{margin:calc(22 * var(--u)) 0 0;display:flex;align-items:baseline}
.l-rev-n{font-weight:600;font-size:calc(10.5 * var(--u));
  letter-spacing:calc(.9 * var(--u));text-transform:uppercase;color:var(--ink)}
.l-rev-n::before{content:"- ";color:var(--olive)}

.l-rev-src{margin:calc(46 * var(--u)) 0 0;padding:0 calc(60 * var(--u));
  font-size:calc(10 * var(--u));letter-spacing:calc(.3 * var(--u));
  color:var(--body);opacity:.75}

/* the paging bar belongs to the mobile mode only */
.l-rev-bar{display:none}

@media (max-width:900px){
  .l-rev{padding:calc(50 * var(--u)) 0 calc(52 * var(--u))}
  .l-rev-head{padding:0 calc(20 * var(--u));margin-bottom:calc(30 * var(--u))}

  /* one review at a time: no edge mask, no marquee, no sliced neighbour */
  .l-rev.is-paged .l-rev-vp{-webkit-mask-image:none;mask-image:none;
    /* margin not padding: overflow clips at the padding box, so a padded
       viewport still showed a sliver of the next card in the gutter */
    margin:0 calc(20 * var(--u));
    transition:height 420ms cubic-bezier(.22,.61,.36,1)}
  .l-rev.is-paged .l-rev-track{animation:none;width:100%;
    transition:transform 560ms cubic-bezier(.22,.61,.36,1)}
  .l-rev.is-paged .l-rev-card{flex:0 0 100%;border-left:0;padding:0}

  .l-rev-stars{margin-bottom:calc(17 * var(--u))}
  .l-rev-stars svg{width:calc(13 * var(--u));height:calc(13 * var(--u))}
  .l-rev-q{font-size:calc(17 * var(--u));line-height:calc(27 * var(--u));-webkit-line-clamp:8}
  .l-rev-by{margin-top:calc(22 * var(--u))}

  .l-rev-bar{display:flex;align-items:center;
    margin:calc(26 * var(--u)) calc(20 * var(--u)) 0}
  .l-rev-count{font-family:var(--serif);font-size:calc(14 * var(--u));
    color:var(--ink);font-variant-numeric:tabular-nums}
  .l-rev-count i{font-style:normal;color:var(--body);opacity:.55}
  .l-rev-nav{margin-left:auto;display:flex;gap:calc(10 * var(--u))}
  .l-rev-nav button{width:calc(46 * var(--u));height:calc(46 * var(--u));
    border-radius:50%;border:1px solid var(--hair);background:transparent;
    display:grid;place-items:center;cursor:pointer}
  .l-rev-nav button:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
  .l-rev-nav svg{width:calc(15 * var(--u));height:calc(15 * var(--u));
    stroke:var(--ink);stroke-width:1.5;fill:none}

  .l-rev-src{margin-top:calc(28 * var(--u));padding:0 calc(20 * var(--u))}
}

/* reduced motion: the bar stops and becomes a normal scrollable row */
@media (prefers-reduced-motion:reduce){
  .l-rev-track{animation:none!important}
  .l-rev-vp{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .l-rev-more{transition:none!important}
}
/* an opened review scrolls inside its card instead of growing the
   section, and the marquee holds still while one is open */
@media (min-width:901px){
  .l-rev-card.is-open .l-rev-q{max-height:calc(230 * var(--u));overflow:auto;padding-right:calc(8 * var(--u))}
  .l-rev-track:has(.l-rev-card.is-open){animation-play-state:paused}
}