/* ==========================================================================
   parts/google-reviews.css — parts/google-reviews.php: the "Widget for Google Reviews" 6.9.10 slider layout,
   reproduced from the plugin's public-main.css (only the rules the slider uses, same selectors and
   custom properties; the plugin's !important flags are dropped where nothing in this theme competes).
   Live source: .cache/live-src/…/widget-google-reviews/assets/6.9.10/css/public-main.css, resolved values in
   docs/scout/used-css.css; measurements in docs/scout/SECTIONS-B.md §5.3.

   Sizing: the plugin's JS swaps .grw-row-{xs|x|s|m|l|xl} from the row width (< 510 / 750 / 1050 / 1450 / 1800).
   Here a container query on .wp-gr does the same without JS: header / content / card columns (--col) per
   size; 1440 → 1 header + 3 cards, 768 → header | 1 card, 390 → header above 1 card.

   Kept on purpose (live parity): the squashed place photo (DI-D18), square black-cornered avatars (DI-D19),
   review text in #042E4A (the plugin's var(--text-color, #222) picks up the theme token), no hover on
   cards or names. Changed (DI-D15): "review us on" keeps the theme's focus ring; buttons ring in currentColor.
   ========================================================================== */

/* ---- Root + plugin variables ---------------------------------------------------------------------- */
.wp-gr {
  /* colours: theme tokens (tokens.css "third-party skins"; comments = live values) */
  --grw-head-name: var(--neutral);                                 /* #333 */
  --grw-based: var(--wfx-grw-text);                                /* #555 */
  --grw-powered: var(--wfx-grw-muted);                             /* #777 */
  --grw-name: var(--wfx-grw-link);                                 /* #154fc1 */
  --grw-btn: var(--wfx-grw-btn);                                   /* #1f67e7 */
  --grw-text-shadow: var(--wfx-grw-text-shadow);                   /* #888 */
  --grw-control-bg: var(--wfx-grw-control-bg);                     /* #f5f5f5 */
  --grw-control-border: var(--wfx-grw-control-border);             /* #ccc */
  --grw-dot: var(--wfx-grw-dot);                                   /* #999 */
  --grw-shadow: 0 0 2px var(--black-trans-12), 0 2px 4px var(--black-trans-24);

  /* plugin variables (names as in public-main.css) */
  --card-gap: 4px;
  --img-size: 46px;
  --color: var(--wfx-grw-star);                                    /* #fb8e28 */
  --rev-color: var(--wfx-grw-card);                                /* #f4f4f4 */
  --rpi-star-color: var(--color);
  --slider-dot-size: 8px;
  --slider-dot-gap: 8px;
  --slider-dot-padding-top: .5em;
  --slider-dots-visible: 5;
  --slider-act-dot-color: var(--color);
  --star-gap: 2px;
  --rpi-star-size: 20px;
  --rpi-star-empty: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rpi-star-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.7881 3.21068C11.2364 2.13274 12.7635 2.13273 13.2118 3.21068L15.2938 8.2164L20.6979 8.64964C21.8616 8.74293 22.3335 10.1952 21.4469 10.9547L17.3295 14.4817L18.5874 19.7551C18.8583 20.8908 17.6229 21.7883 16.6266 21.1798L11.9999 18.3538L7.37329 21.1798C6.37697 21.7883 5.14158 20.8908 5.41246 19.7551L6.67038 14.4817L2.55303 10.9547C1.66639 10.1952 2.13826 8.74293 3.302 8.64964L8.70609 8.2164L10.7881 3.21068Z'/%3E%3C/svg%3E");
  --rpi-lt: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;
  --rpi-gt: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;

  /* slider controls (.rpi) */
  --slider-btn-size: 16px;
  --slider-btn-bg: var(--grw-control-bg);
  --slider-btn-color: var(--grw-powered);
  --slider-btn-padding: calc(var(--slider-btn-size) / 2);
  --slider-btn-bw: 1px;
  --slider-btn-bc: var(--grw-control-border);
  --slider-btn-shadow: var(--shadow-control);
  --slider-btn-full: calc(var(--slider-btn-size) + (var(--slider-btn-padding) * 2) + (var(--slider-btn-bw) * 2));   /* 34px */
  --slider-btn-offset: 0px;
  --slider-btn-out: calc(var(--slider-btn-full) / 2);
  --slider-btn-pos: calc(var(--slider-btn-out) + var(--slider-btn-offset));
  --slider-offset: calc(var(--slider-btn-out));

  container: grw / inline-size;         /* replaces the plugin's .grw-row-{size} JS (see the queries below) */
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  direction: ltr;
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: start;
  text-decoration: none;
  overflow: visible;
  overflow-wrap: break-word;
}
.wp-gr,
.wp-gr *,
.wp-gr ::after,
.wp-gr ::before { box-sizing: border-box; }

.wp-gr div,
.wp-gr span {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  border: 0;
  background: none;
}
.wp-gr a {
  color: inherit;
  border: 0;
  text-decoration: none;
  background: none;
  cursor: pointer;
}
.wp-gr img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  vertical-align: middle;
}
.wp-gr svg {
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: middle;
  overflow: visible;
}

/* ---- Flex helpers (.rpi-flx + modifiers set custom properties that inherit, exactly as the plugin) ---- */
.wp-gr .rpi-flx {
  display: var(--flx, flex);
  flex-direction: var(--dir, column);
  flex-wrap: var(--wrap, nowrap);
  align-items: var(--align, flex-start);
  gap: var(--gap, 2px);
  width: 100%;
  overflow: var(--overflow, visible);
}
.wp-gr .rpi-col12 { --dir: column; --gap: 12px; --align: flex-start; --overflow: hidden; }
.wp-gr .rpi-col8 { --dir: column; --gap: 8px; --align: flex-start; }
.wp-gr .rpi-col6 { --dir: column; --gap: 6px; --align: flex-start; --overflow: hidden; }
.wp-gr .rpi-col4 { --dir: column; --gap: 4px; --align: flex-start; }
.wp-gr .rpi-row12 { --dir: row; --gap: 12px; --align: flex-start; }
.wp-gr .rpi-row12-center { --dir: row; --gap: 12px; --align: center; --overflow: visible; }

/* ---- Row: place header + slider ------------------------------------------------------------------ */
.wp-gr .grw-row {
  display: flex;
  flex-wrap: wrap;                      /* xs: the header sits above the cards */
  align-items: center;
  padding-bottom: calc(var(--slider-dot-padding-top) + var(--slider-dot-size));   /* the dots (plugin JS: 16px) */
}
.wp-gr .grw-header,
.wp-gr .grw-content {
  flex: 1 0 calc(100% / var(--col, 3));
  width: calc(100% / var(--col, 3));
}
.wp-gr .grw-review {
  flex: 1 0 calc((100% - var(--card-gap, 16px) * (var(--col, 3) - 1)) / var(--col, 3));
  width: calc((100% - var(--card-gap, 16px) * (var(--col, 3) - 1)) / var(--col, 3));
}

/* Columns per widget width (plugin getSize(): < 510 xs, < 750 x, < 1050 s, < 1450 m, < 1800 l, else xl) */
.wp-gr .grw-header,
.wp-gr .grw-content,
.wp-gr .grw-review { --col: 1; }
@container grw (min-width: 510px) {   /* x */
  .wp-gr .grw-row { flex-wrap: nowrap; }
  .wp-gr .grw-header,
  .wp-gr .grw-content { --col: 2; }
  .wp-gr .grw-review { --col: 1; }
}
@container grw (min-width: 750px) {   /* s */
  .wp-gr .grw-header { --col: 3; }
  .wp-gr .grw-content { --col: 1.5; }
  .wp-gr .grw-review { --col: 2; }
}
@container grw (min-width: 1050px) {  /* m (1440: 330 | 990, 3 cards) */
  .wp-gr .grw-header { --col: 4; }
  .wp-gr .grw-content { --col: 1.333333; }
  .wp-gr .grw-review { --col: 3; }
}
@container grw (min-width: 1450px) {  /* l */
  .wp-gr .grw-header { --col: 5; }
  .wp-gr .grw-content { --col: 1.25; }
  .wp-gr .grw-review { --col: 4; }
}
@container grw (min-width: 1800px) {  /* xl */
  .wp-gr .grw-header { --col: 6; }
  .wp-gr .grw-content { --col: 1.2; }
  .wp-gr .grw-review { --col: 5; }
}

/* ---- Place header -------------------------------------------------------------------------------------- */
.wp-gr .grw-header-inner,
.wp-gr .grw-review-inner {
  position: relative;
  width: 100%;
  margin: 4px;
  padding: 16px;
}
.wp-gr .grw-header-inner > .rpi-flx { overflow: hidden; }

.wp-gr .grw-img-wrap {
  position: relative;
  min-width: var(--img-size);
  max-width: var(--img-size);
  overflow: visible;
}
.wp-gr .grw-img-wrap::before {          /* circular shadow, also under the square avatars (as live) */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--img-size);
  height: var(--img-size);
  border-radius: 50%;
  box-shadow: var(--grw-shadow);
  pointer-events: none;
}
.wp-gr .grw-img {
  position: relative;
  z-index: 3;
  min-width: var(--img-size);
  max-width: var(--img-size);
  height: var(--img-size);              /* object-fit stays fill: the 300×200 place photo is squashed (DI-D18) */
  border: none;
}
.wp-gr .grw-header .grw-img { border-radius: 50%; }   /* avatars keep no radius (DI-D19) */

.wp-gr .wp-google-name {
  width: 100%;
  overflow: hidden;
  color: var(--grw-head-name);
  font-size: 100%;
  font-weight: 700;
  text-align: start;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wp-gr .grw-header .wp-google-name {
  margin: 0;
  padding: 0;
  white-space: normal;
}
.wp-gr .wp-google-name a {
  color: var(--grw-head-name);
  font-size: 18px;
  text-decoration: none;
}

.wp-gr .wp-google-based,
.wp-gr .wp-google-powered {
  margin: 0;
  padding: 0;
  color: var(--grw-based);
}
.wp-gr .wp-google-powered {
  color: var(--grw-powered);
  font-size: 16px;
  font-weight: 600;
}

.wp-gr .wp-google-wr {
  display: flex;
  margin: 0;
}
.wp-gr .wp-google-wr a {                /* live also removes the focus ring here; the replica keeps it (DI-D15) */
  padding: 4px 12px 8px;
  border-radius: 27px;
  background: var(--grw-btn);
  box-shadow: var(--grw-shadow);
  color: var(--white);
  text-shadow: 1px 1px 0 var(--grw-text-shadow);
  white-space: nowrap;
  vertical-align: middle;
  opacity: .9;
  user-select: none;
  transition: .2s ease-in-out;
}
.wp-gr .wp-google-wr a:hover {
  opacity: .95;
  box-shadow: 0 0 2px var(--black-trans-12), 0 3px 5px var(--black-trans-24);
}
.wp-gr .wp-google-wr a:active {
  opacity: 1;
  box-shadow: none;
}
.wp-gr .wp-google-wr a svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 0 0 4px;
  padding: 1px;
  border-radius: 50%;
  background: var(--white);
}

/* ---- Stars (.rpi-stars: two masked strips, the filled one clipped by --rating) ------------------------ */
.rpi-stars {
  --star-size: var(--rpi-star-size, 18px);
  --star-color: var(--rpi-star-color);
  --empty: var(--rpi-star-empty);
  --mask: var(--rpi-star-mask);
  --stars: 5;
  --icon-scale: 1;
  --rating-scale: .8;
  --gap: var(--star-gap, 2px);
  --stars-w: calc(var(--stars) * (var(--star-size) + var(--star-gap)));
  --fill: calc((var(--rating) / var(--stars)) * 100%);
  --bg-size: calc(var(--star-size) * var(--icon-scale));
  --bg-size-x: calc(var(--bg-size) + var(--star-gap));
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: var(--star-align-self, start);
  width: max-content;
  height: var(--star-size);
  padding-right: calc(var(--stars-w) + var(--gap));
  color: var(--rpi-rating-color, var(--star-color));
  font-size: calc(var(--star-size) * var(--rating-scale));
  font-weight: var(--head-grade-weight, 900);
  white-space: nowrap;
  vertical-align: middle;
}
.wp-gr .rpi-stars {                     /* beat the .wp-gr span reset, as the plugin's !important did */
  padding-right: calc(var(--stars-w) + var(--gap));
  color: var(--rpi-rating-color, var(--star-color));
  font-size: calc(var(--star-size) * var(--rating-scale));
  font-weight: var(--head-grade-weight, 900);
}
.rpi-stars:empty { --gap: calc(-1 * (var(--star-gap) / 2 + 1px)); }
.rpi-stars::before,
.rpi-stars::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--stars-w);
  height: var(--star-size);
  transform: translateY(-50%);
  background-color: var(--star-color);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: var(--bg-size-x) var(--bg-size);
  mask-size: var(--bg-size-x) var(--bg-size);
}
.rpi-stars::before {
  -webkit-mask-image: var(--empty);
  mask-image: var(--empty);
}
.rpi-stars::after {
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  clip-path: inset(0 calc(100% - var(--fill)) 0 0);
}

/* ---- Slider: strip, cards, arrows, dots --------------------------------------------------------------- */
.wp-gr .grw-content {
  position: relative;
  min-width: 0;
}
.wp-gr .grw-content-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.rpi .rpi-slides {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  gap: var(--slider-gap, var(--card-gap, 8px));
  overflow: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: var(--rpi-slider-behavior, smooth);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rpi .rpi-slides::-webkit-scrollbar { display: none; }

/* The strip "bites" a circle out of the cards behind each arrow (radius = half the arrow + 6px). */
.rpi .rpi-slides-bite {
  --offset: var(--slides-bite-offset, 6px);
  --alpha: .2px;
  --shift: var(--slider-btn-offset);
  --radius: calc(var(--slider-btn-out) + var(--offset));
  --bite: radial-gradient(circle var(--radius) at calc(0% - var(--shift)) 50%, transparent 0, transparent calc(var(--radius) - var(--alpha)), black calc(var(--radius) + var(--alpha))),
          radial-gradient(circle var(--radius) at calc(100% + var(--shift)) 50%, transparent 0, transparent calc(var(--radius) - var(--alpha)), black calc(var(--radius) + var(--alpha))),
          linear-gradient(black 0 0);
  margin: 0 var(--slider-offset, 0);
  -webkit-mask: var(--slider-bite, var(--bite));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-composite: source-in, source-in;
  mask: var(--slider-bite, var(--bite));
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-composite: intersect, intersect;
}

.rpi .rpi-slide {
  overflow: hidden;
  padding: 4px 3px;
  scroll-snap-align: start;
}
.wp-gr .grw-review {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.wp-gr .grw-review-inner { height: 100%; }
.wp-gr .grw-review-inner.grw-round { border-radius: 8px; }
.wp-gr:not(.wp-dark) .grw-review-inner.grw-backgnd { background: var(--rev-color); }
.wp-gr .grw-review-inner > svg {        /* Google "G" badge */
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
}

.wp-gr .rpi-col6 > .wp-google-name {    /* reviewer name (plugin: .wp-gr.rpi a.wp-google-name) */
  margin: 0;
  color: var(--grw-name);
}
.wp-gr .wp-google-time {
  color: var(--grw-based);
  font-size: 13px;
  white-space: nowrap;
}

.wp-gr .grw-review .wp-google-feedback {  /* fixed 100px box that scrolls; no read-more (live text_size "") */
  height: 100px;
  overflow-y: auto;
}
.wp-gr .wp-google-text {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-color);             /* plugin var(--text-color, #222): the theme token wins, as on live */
  font-size: 15px;
  line-height: 24px;
  white-space: pre-wrap;                /* keeps the stored line breaks (DI-D16) and double spaces */
  word-break: break-word;
  vertical-align: middle;
}
.wp-gr .grw-scroll::-webkit-scrollbar { width: 4px; }
.wp-gr .grw-scroll::-webkit-scrollbar-track {
  border-radius: 4px;
  box-shadow: inset 0 0 6px var(--black-trans-33);
}
.wp-gr .grw-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--grw-control-border);
  box-shadow: inset 0 0 6px var(--black-trans-50);
}

/* Buttons: the plugin resets them with all:revert and restyles below. */
.rpi .rpi-ltgt,
.rpi .rpi-dot {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.rpi .rpi-ltgt:focus-visible,
.rpi .rpi-dot:focus-visible { outline-color: currentColor; }   /* live: 2px currentColor (#0F202D), offset 2px */

.rpi .rpi-ltgt {
  --margin: calc(-1 * var(--slider-btn-pos) + var(--slider-offset, 0px));
  position: var(--slider-btn-position, absolute);
  z-index: 1;
  padding: var(--slider-btn-padding);
  border: var(--slider-btn-bw) solid var(--slider-btn-bc);
  border-radius: 50%;
  background-color: var(--slider-btn-bg);
  box-shadow: var(--slider-btn-shadow);
  transition: background-color .2s ease-in-out;
}
.rpi .rpi-ltgt:active { box-shadow: none; }
.rpi .rpi-ltgt.rpi-lt {
  left: 0;
  margin-left: var(--margin);
}
.rpi .rpi-ltgt.rpi-gt {
  right: 0;
  margin-right: var(--margin);
}
.rpi-ltgt.rpi-lt::before,
.rpi-ltgt.rpi-gt::after {
  content: "";
  position: relative;
  display: block;
  width: var(--slider-btn-size);
  height: var(--slider-btn-size);
  background-color: var(--slider-btn-color);
}
.rpi-ltgt.rpi-lt::before {
  -webkit-mask: var(--rpi-lt);
  mask: var(--rpi-lt);
}
.rpi-ltgt.rpi-gt::after {
  -webkit-mask: var(--rpi-gt);
  mask: var(--rpi-gt);
}

.rpi .rpi-dots-wrap {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  width: calc(var(--slider-dots-visible) * var(--slider-dot-size) + (var(--slider-dots-visible) - 1) * var(--slider-dot-gap));
  max-width: 100%;
  margin: 0 auto;
  padding-top: var(--slider-dot-padding-top);
}
.rpi .rpi-dots {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--slider-dot-gap);
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rpi .rpi-dots::-webkit-scrollbar { display: none; }
.rpi-dots .rpi-dot {
  display: inline-block;
  flex: 1 0 auto;
  width: var(--slider-dot-size);
  height: var(--slider-dot-size);
  border-radius: 20px;
  background-color: var(--slider-dot-color, var(--grw-dot));
  opacity: .4;
  transform: scale(.55);
  vertical-align: middle;
  scroll-snap-align: center;
}
.rpi-dots .rpi-dot:hover { opacity: 1; }
.rpi-dots .rpi-dot.active {
  background-color: var(--slider-act-dot-color);
  opacity: 1;
  transform: scale(.95);
}
.rpi-dots .rpi-dot.s2 { transform: scale(.85); }
.rpi-dots .rpi-dot.s3 { transform: scale(.65); }