/* ============================================================
   PRV Blocks — base.css
   Shared rules for every prv-blocks component. Neutral class
   names: the Google Reviews block and the hero slider both use
   them. Component CSS adds only its own skin.

   No :root block. Every var() carries a literal fallback.
   Depends on the prv-design-tokens stylesheet (handle
   prv-design-tokens) being enqueued first.

   Everything is scoped under .prv-block so these generic names
   cannot reach other plugins' markup (prv-similar-rvs ships its
   own carousels).
   ============================================================ */

.prv-block{
  /* Block-local geometry, NOT tokens. Components may override. */
  --prv-track-gap: var(--prv-space-sm, 16px);

  position: relative;
  max-width: 100%;
  overflow-x: clip;           /* nothing here may widen the page */
  font-family: var(--prv-font, inherit);
  color: var(--prv-navy, #0A2240);
}
.prv-block, .prv-block *, .prv-block *::before, .prv-block *::after{ box-sizing: border-box; }
.prv-block p{ margin: 0; }

.prv-block .prv-sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Viewport + track ----------
   The slider cannot work unless the track is a single non-wrapping
   scrollable row. Elementor and Rey both set flex-wrap on flex containers
   and flex-shrink on children. If wrap wins, the slides stack into rows,
   scrollWidth collapses to clientWidth, and the slider dies silently with
   both arrows disabled — on the live site that read as 3 dead desktop rows
   and 8 stacked mobile cards.

   Doubled class + !important on the four load-bearing declarations only.
   prv-slider.js re-asserts the same four inline on init, which beats any
   stylesheet; these rules are what holds the layout before the script runs.
   Do not remove nowrap. Do not reduce to a single class. */
.prv-block .prv-viewport{ position: relative; }

.prv-block .prv-track.prv-track{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;

  gap: var(--prv-track-gap);
  width: auto;
  max-width: none;
  min-width: 0;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* NO scroll-behavior here. A CSS smooth value makes even a bare scrollLeft
     assignment animated, and in this stack that animation never commits —
     every programmatic scroll became a no-op, including the script's own
     fallback. Smoothness is applied per call from JS instead. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px var(--prv-space-2xs, 8px);
  margin: 0;
  list-style: none;
}
.prv-block .prv-track.prv-track::-webkit-scrollbar{ display: none; }

/* Slides never shrink — a theme rule must not squeeze every slide into one
   screen width. The script pins this inline too. */
.prv-block .prv-track > *{
  flex-shrink: 0 !important;
  min-width: 0;
  max-width: none;
  scroll-snap-align: start;
}

/* ---------- Arrows ----------
   Doubled class + explicit resets: the Rey theme styles bare `button`
   (background, border, radius, padding, min-height, font, uppercase,
   transform on hover) and those rules outrank a single class. Everything the
   arrow needs is stated here rather than inherited. Do not reduce to one
   class. Hidden by default; components opt in per width step. */
.prv-block .prv-nav.prv-nav{
  display: none;
  position: absolute; top: 50%; left: auto; right: auto;
  transform: translateY(-50%);
  width: var(--prv-hit-min, 44px); height: var(--prv-hit-min, 44px);
  min-width: 0; min-height: 0; max-width: none;
  align-items: center; justify-content: center;
  margin: 0; padding: 0;
  border: 1px solid var(--prv-line, #DCE1E7);
  border-radius: var(--prv-radius-round, 50%);
  background: var(--prv-white, #FFFFFF);
  background-image: none;
  color: var(--prv-navy, #0A2240);
  font: inherit; line-height: 1; letter-spacing: normal; text-transform: none;
  box-shadow: var(--prv-shadow-sm, 0 2px 10px rgba(10, 34, 64, 0.16));
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  z-index: 2;   /* local: clears the track only, must NOT reach the sticky layer */
  transition: background-color var(--prv-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1));
}
.prv-block .prv-nav.prv-nav > svg{
  display: block; width: 20px; height: 20px; flex: 0 0 auto; pointer-events: none;
}
.prv-block .prv-nav.prv-nav:hover{
  background: var(--prv-surface-alt, #F2F4F7);
  color: var(--prv-navy, #0A2240);
  transform: translateY(-50%);   /* cancel Rey's hover lift */
}
.prv-block .prv-nav.prv-nav[disabled]{
  opacity: 0.35; cursor: default;
  background: var(--prv-white, #FFFFFF);
}
.prv-block .prv-nav.prv-nav--prev{ left: var(--prv-space-2xs, 8px); }
.prv-block .prv-nav.prv-nav--next{ right: var(--prv-space-2xs, 8px); }

/* Set by the script when the slides are laid out but the track has nothing
   to scroll. Arrows would be permanently dead, so don't show them. */
.prv-block[data-prv-noscroll] .prv-nav.prv-nav{ display: none; }

/* ---------- Dots ----------
   Generated by prv-slider.js, one per page, only when the component renders
   a [data-prv-dots] container. Same button reset problem as the arrows. */
.prv-block .prv-dots{
  display: flex; align-items: center; justify-content: center;
  gap: var(--prv-space-2xs, 8px);
  margin-top: var(--prv-space-xs, 12px);
}
.prv-block .prv-dots:empty{ display: none; }
.prv-block .prv-dot.prv-dot{
  display: block;
  width: 9px; height: 9px;          /* dot geometry, block-local */
  min-width: 0; min-height: 0;
  margin: 0;
  /* The visible dot is small, so the button carries invisible padding to
     reach the 44px hit target without inflating the row. */
  padding: calc((var(--prv-hit-min, 44px) - 9px) / 2);
  box-sizing: content-box;
  border: 0;
  border-radius: var(--prv-radius-round, 50%);
  background: var(--prv-navy-tint, #A9C7E4);
  background-clip: content-box;
  font: inherit; letter-spacing: normal; text-transform: none;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  box-shadow: none;
  transition: background-color var(--prv-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1));
}
.prv-block .prv-dot.prv-dot:hover{ background: var(--prv-blue, #1868B3); }
.prv-block .prv-dot.prv-dot.is-active{ background: var(--prv-blue-dark, #0F4682); }

/* ---------- Focus ----------
   One ring for the whole family. --prv-focus is the outline colour token. */
.prv-block .prv-track.prv-track:focus-visible{
  outline: 2px solid var(--prv-focus, #1868B3); outline-offset: 4px;
  border-radius: var(--prv-radius-ms, 10px);
}
.prv-block .prv-nav.prv-nav:focus-visible,
.prv-block .prv-dot.prv-dot:focus-visible{
  outline: 2px solid var(--prv-focus, #1868B3); outline-offset: 2px;
}
.prv-block a:focus-visible,
.prv-block button:focus-visible{
  outline: 2px solid var(--prv-focus, #1868B3); outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce){
  .prv-block .prv-nav.prv-nav,
  .prv-block .prv-dot.prv-dot{ transition: none; }
}