/* ------------------------------------------------------------------ */
/* Buutnhewoon — Google reviews                                        */
/* ------------------------------------------------------------------ */
/* Everything is driven by the custom properties on .bnw-rev, so a site can
   restyle the element without touching this file. Put the overrides in the
   theme's stylesheet, or in a Bricks "custom CSS" box on the element:

       .bnw-rev {
         --bnw-rev-card-bg: #f3f4f6;
         --bnw-rev-accent:  #2563eb;
         --bnw-rev-text:    #111827;
       }

   The carousel is scroll-snap rather than a JavaScript slider: nothing here
   depends on a library stylesheet that could fail to arrive, it scrolls
   natively on touch, and it still works with JavaScript off. The arrows are an
   enhancement, not the mechanism. */

.bnw-rev {
  position: relative;

  --bnw-rev-per-view: 3;
  --bnw-rev-gap: 24px;

  --bnw-rev-card-bg: #fdf1ea;
  --bnw-rev-radius: 10px;
  --bnw-rev-pad: 26px 28px 28px;

  --bnw-rev-text: #1f2d3d;
  --bnw-rev-muted: #6b7280;
  --bnw-rev-accent: #f5916b;
  --bnw-rev-star-off: #e4e4e4;

  --bnw-rev-button-bg: var(--bnw-rev-accent);
  --bnw-rev-button-text: var(--bnw-rev-text);
  --bnw-rev-arrow: #9aa0a6;

  /* Room either side for the arrows, which sit beside the cards rather than
     floating over them. */
  padding-inline: 44px;
}

.bnw-rev *,
.bnw-rev *::before,
.bnw-rev *::after { box-sizing: border-box; }

.bnw-rev__track {
  display: flex;
  align-items: stretch;
  gap: var(--bnw-rev-gap);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.bnw-rev__track::-webkit-scrollbar { display: none; }

.bnw-rev__card {
  flex: 0 0 calc((100% - (var(--bnw-rev-per-view) - 1) * var(--bnw-rev-gap)) / var(--bnw-rev-per-view));
  scroll-snap-align: start;
  background: var(--bnw-rev-card-bg);
  border-radius: var(--bnw-rev-radius);
  padding: var(--bnw-rev-pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.bnw-rev--grid { padding-inline: 0; }
.bnw-rev--grid .bnw-rev__track {
  display: grid;
  grid-template-columns: repeat(var(--bnw-rev-per-view), minmax(0, 1fr));
  overflow: visible;
}

.bnw-rev__head { display: flex; align-items: center; gap: 14px; }

.bnw-rev__avatar {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.bnw-rev__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.bnw-rev__name {
  font-weight: 800;
  font-size: 16px;
  color: var(--bnw-rev-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.bnw-rev__stars { display: inline-flex; gap: 3px; }
.bnw-rev__star { width: 17px; height: 17px; display: block; fill: var(--bnw-rev-star-off); }
.bnw-rev__star.is-on { fill: var(--bnw-rev-accent); }

.bnw-rev__date { font-size: 13px; color: var(--bnw-rev-muted); }

.bnw-rev__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bnw-rev-text);
  overflow-wrap: anywhere;
}

/* margin-top:auto is what keeps the buttons on one line across a row of cards
   whose reviews are different lengths. Drop that one line to have each button
   sit directly under its own text instead. */
.bnw-rev__more {
  margin-top: auto;
  display: block;
  text-align: center;
  background: var(--bnw-rev-button-bg);
  color: var(--bnw-rev-button-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 6px;
}
.bnw-rev__more:hover,
.bnw-rev__more:focus-visible { filter: brightness(.96); color: var(--bnw-rev-button-text); }

.bnw-rev__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--bnw-rev-arrow);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bnw-rev__arrow::before {
  content: "";
  width: 12px; height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.bnw-rev__arrow--prev { left: 0; }
.bnw-rev__arrow--prev::before { transform: rotate(-135deg); margin-left: 4px; }
.bnw-rev__arrow--next { right: 0; }
.bnw-rev__arrow--next::before { transform: rotate(45deg); margin-right: 4px; }
.bnw-rev__arrow:hover { color: var(--bnw-rev-text); }
.bnw-rev__arrow[disabled] { opacity: .25; cursor: default; }
.bnw-rev--grid .bnw-rev__arrow { display: none; }

@media (max-width: 991px) {
  .bnw-rev { --bnw-rev-per-view: 2; }
}

@media (max-width: 767px) {
  .bnw-rev { --bnw-rev-per-view: 1; padding-inline: 0; }
  .bnw-rev__arrow { display: none; }
  .bnw-rev__card { padding: 22px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .bnw-rev__track { scroll-behavior: auto; }
}