/* Homepage reviews: Google-style review cards on a self-running carousel. */

.ox-reviews{
  --ox-card:min(calc(100vw - 4rem),22.5rem);
  --ox-gap:1rem;
  --ox-fade:clamp(1rem,6vw,6rem);
  --ox-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  --ox-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(4.5rem,9vw,7.5rem) clamp(3.5rem,7vw,6rem);
  scroll-margin-top:1rem;
  background:#fff;
}
.ox-reviews::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle,#0429531a 1px,transparent 1.3px);
  background-size:1.5rem 1.5rem;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 62%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 55% at 50% 62%,#000 10%,transparent 72%);
}
.ox-reviews::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:58%;
  left:50%;
  width:min(70rem,140vw);
  aspect-ratio:2.4;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,#44adfe1f,transparent 66%);
  pointer-events:none;
}

.ox-reviews-head{display:grid;gap:1.5rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.ox-reviews-head h2{max-width:16ch;margin:.85rem 0 0;color:var(--navy)}
.ox-reviews-head h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--blue)}
.ox-reviews-score{justify-self:start;display:inline-flex;align-items:center;gap:.6rem;margin:0;padding:.6rem 1.1rem .6rem .7rem;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 .75rem 1.75rem -1rem #04295340;color:#3c4043;font-size:.88rem;line-height:1}
.ox-reviews-score strong{color:#202124;font-family:Manrope,sans-serif;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.ox-g{flex:none;width:1.35rem;height:1.35rem;background:var(--ox-g) center/contain no-repeat}
.ox-rating-stars{flex:none;width:5.4rem;height:1.05rem;background:#fbbc04;-webkit-mask:var(--ox-star) 0 0/1.08rem 1.05rem repeat-x;mask:var(--ox-star) 0 0/1.08rem 1.05rem repeat-x}

/* Without the script the row is a plain swipeable strip. */
.ox-reviews-viewport{
  overflow-x:auto;
  padding:.75rem max(1.25rem,calc((100% - var(--wrap)) / 2)) 1.75rem;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:max(1.25rem,calc((100% - var(--wrap)) / 2));
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--ox-fade),#000 calc(100% - var(--ox-fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--ox-fade),#000 calc(100% - var(--ox-fade)),transparent);
}
.ox-reviews-viewport::-webkit-scrollbar{display:none}
.ox-reviews-track{display:flex;width:max-content}
.ox-reviews-set{display:flex;align-items:flex-start;gap:var(--ox-gap);margin:0;padding:0 var(--ox-gap) 0 0;list-style:none}
.ox-reviews-set>li{flex:none;width:var(--ox-card);scroll-snap-align:start}
.ox-reviews.is-live .ox-reviews-viewport{overflow:hidden;padding-inline:0;scroll-snap-type:none;touch-action:pan-y}
.ox-reviews.is-live .ox-reviews-track{will-change:transform}

/* Card */
.ox-review{display:flex;flex-direction:column;margin:0;padding:1.25rem 1.3rem .85rem;border:1px solid #e3e7ec;border-radius:1rem;background:#fff;box-shadow:0 1px 2px #3c404314,0 .9rem 2rem -1.1rem #04295338;color:#3c4043;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.ox-review:hover{transform:translateY(-3px);border-color:#d3dde7;box-shadow:0 1px 2px #3c404314,0 1.4rem 2.6rem -1.2rem #0429534d}
.ox-review-head{display:flex;align-items:center;gap:.8rem}
.ox-review-avatar{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--avatar,#5f6368);color:#fff;font-size:1.1rem;font-weight:500;line-height:1}
.ox-review-who{flex:1;min-width:0}
.ox-review-who strong{display:block;overflow:hidden;color:#202124;font-size:.98rem;font-weight:600;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.ox-review-who small{display:block;margin-top:.1rem;color:#70757a;font-size:.8rem;line-height:1.35}
.ox-review-head .ox-g{align-self:flex-start;width:1.25rem;height:1.25rem}
.ox-review-stars{display:flex;margin-top:.95rem}
.ox-review-text{margin:.65rem 0 0}
.ox-review-text p{margin:0;font-size:.96rem;line-height:1.6;text-wrap:pretty}
.ox-reviews.is-live .ox-review-text p{display:-webkit-box;min-height:11.2em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:7}
.ox-reviews.is-live .ox-review.is-open .ox-review-text p{display:block;overflow:visible;-webkit-line-clamp:unset}
.ox-review-more{display:none;align-self:flex-start;min-height:2.25rem;margin-top:.15rem;padding:0;border:0;background:none;color:#1a73e8;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.ox-review-more:hover{text-decoration:underline;text-underline-offset:.2em}
.ox-reviews.is-live .ox-review-more{display:inline-flex;align-items:center;visibility:hidden}
.ox-reviews.is-live .ox-review.is-clamped .ox-review-more,.ox-reviews.is-live .ox-review.is-open .ox-review-more{visibility:visible}
.ox-review-less,.ox-review.is-open .ox-review-expand{display:none}
.ox-review.is-open .ox-review-less{display:inline}

/* Controls */
.ox-reviews-controls{display:flex;justify-content:center;gap:.6rem;margin-top:.5rem}
.ox-reviews-controls[hidden]{display:none}
.ox-reviews-btn{display:grid;place-items:center;width:2.9rem;height:2.9rem;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s}
.ox-reviews-btn:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.ox-reviews-btn:active{transform:scale(.94)}
.ox-reviews-btn:focus-visible,.ox-review-more:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.ox-reviews-btn svg{width:1.1rem;height:1.1rem}
.ox-reviews-pause,.ox-reviews.is-playing .ox-reviews-play{display:none}
.ox-reviews.is-playing .ox-reviews-pause{display:block}

@media (min-width:48rem){
  .ox-reviews{--ox-gap:1.25rem}
  .ox-reviews-head{grid-template-columns:1fr auto;align-items:end;gap:2rem}
  .ox-reviews-score{justify-self:end;margin-bottom:.35rem}
}
@media (prefers-reduced-motion:reduce){
  .ox-review,.ox-reviews-btn{transition:none}
  .ox-review:hover{transform:none}
}