/* Guest reviews testimonial slider (2026-09-23).
   Scope: the central torn-paper review card, its two arrow circles and the three dots only.
   The left ratings block, "Good Beach Days Ahead" and the beach/fence art are untouched.
   Desktop (.rv-slider--art) sits on the reviews artboard in its own art units (--g, 1840-wide art):
   the torn paper stays baked in guest-reviews-slider.webp (quote, avatar, arrows and dots painted out)
   and only the review content slides across it. Mobile (.rv-slider--paper) makes every slide its own
   torn-paper card, cut from the same art (review-paper.webp).
   Sources: /root/sandpiper-reviews-slider/ */

@font-face{font-family:"RV Bodoni";src:url("../fonts/library/bauer-bodoni/bauer-bodoni-400.woff2") format("woff2");font-weight:400;font-display:swap}

.rv-slider{
  --rv-ink:#0E4A4F;
  --rv-quote:#0F3F49;
  --rv-gold:#B08A5E;
  --rv-muted:#5F6B6E;
  --rv-dot:#D1D5DB;
  --rv-dot-on:#004D40;
  --rv-ease:cubic-bezier(0.25, 1, 0.5, 1);
  position:relative;
  color:var(--rv-quote);
}
.rv-slider__viewport{
  position:relative;
  max-width:100%;
  overflow:hidden;
  touch-action:pan-y;
}
.rv-slider__track{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  transform:translate3d(0,0,0);
  transition:transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change:transform;
}
.rv-slider.is-dragging .rv-slider__track{transition:none}
.rv-slide{
  position:relative;
  flex:0 0 100%;
  min-width:0;
  margin:0;
  box-sizing:border-box;
}
/* the quote mark is the comp's own glyph, cut from the art (review-quote-mark.png, 56 x 48) */
.rv-slide__mark{
  display:block;
  background:url("../img/intro-v2/review-quote-mark.png") 0 0 / 100% 100% no-repeat;
  user-select:none;
}
.rv-slide__quote{margin:0}
.rv-slide__quote p{margin:0;font-family:"RV Bodoni","Bauer Bodoni",Georgia,serif;font-weight:400;color:var(--rv-quote)}
.rv-slide__by{display:flex;align-items:center;margin:0}
.rv-slide__by span,.rv-slide__by small{display:block}
.rv-slide__by b{font-weight:500;color:var(--rv-ink)}
.rv-slide__by small{color:var(--rv-muted)}
.rv-slide__avatar{flex:none;display:block;border-radius:50%;object-fit:cover}
.rv-slide__by .rv-slide__avatar--initial{
  display:grid;
  place-items:center;
  background:#E9DFCD;
  color:var(--rv-ink);
  font-family:"RV Bodoni","Bauer Bodoni",Georgia,serif;
  box-shadow:inset 0 0 0 1px rgba(176,138,94,.35);
}
.rv-slider__arrow{
  position:absolute;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:#fff;
  color:var(--rv-dot-on);
  cursor:pointer;
  box-shadow:0 6px 18px -6px rgba(20,48,43,.35),0 1px 3px rgba(20,48,43,.12);
  transition:transform .2s var(--rv-ease),box-shadow .2s var(--rv-ease);
}
.rv-slider__arrow:hover{transform:scale(1.06);box-shadow:0 10px 22px -8px rgba(20,48,43,.42),0 1px 3px rgba(20,48,43,.14)}
.rv-slider__arrow svg{display:block;width:38%;height:auto}
.rv-slider__dots{display:flex;align-items:center}
.rv-slider__dot{
  flex:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--rv-dot);
  cursor:pointer;
  transition:background-color .3s var(--rv-ease),transform .3s var(--rv-ease);
}
.rv-slider__dot.is-active{background:var(--rv-dot-on)}
.rv-slider__arrow:focus-visible,.rv-slider__dot:focus-visible{outline:3px solid var(--rv-dot-on);outline-offset:3px}

/* ---- Desktop: on the artboard, art units ---------------------------------------------------- */
.rv-slider--art{
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
}
.rv-slider--art > *{pointer-events:auto}
.rv-slider--art .rv-slider__viewport{
  position:absolute;
  left:calc(752 * var(--g));
  top:calc(188 * var(--g));
  width:calc(684 * var(--g));
  height:calc(398 * var(--g));
  /* soft edges so text leaving the card fades into the paper instead of being cut */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 calc(22 * var(--g)),#000 calc(100% - calc(22 * var(--g))),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 calc(22 * var(--g)),#000 calc(100% - calc(22 * var(--g))),transparent 100%);
}
.rv-slider--art .rv-slider__track{height:100%}
.rv-slider--art .rv-slide{padding:calc(var(--rv-mt, 37) * var(--g)) calc(40 * var(--g)) 0 calc(var(--rv-ml, 64) * var(--g))}
.rv-slider--art .rv-slide__mark{width:calc(56 * var(--g));height:calc(48 * var(--g));margin:calc(-4 * var(--g)) 0 0 calc(-4 * var(--g))}
.rv-slider--art .rv-slide__quote{margin-top:calc(var(--rv-qt, 12.35) * var(--g))}
.rv-slider--art .rv-slide__quote p{width:calc(var(--rv-qw, 600) * var(--g));font-size:calc(var(--rv-qfs, 24.89) * var(--g));line-height:calc(var(--rv-qlh, 33.9) * var(--g));letter-spacing:calc(var(--rv-qls, 0) * var(--g))}
/* slide 1 carries the comp's own line breaks (desktop only); keep them even where small sizes round glyphs wider */
.rv-slider--art .rv-slide__quote p:has(.rv-br){white-space:nowrap}
.rv-slider--art .rv-slide__by{margin-top:calc(var(--rv-bt, 13.6) * var(--g));gap:calc(21 * var(--g))}
.rv-slider--art .rv-slide__avatar{width:calc(85 * var(--g));height:calc(85 * var(--g));margin-left:calc(-4.5 * var(--g))}
.rv-slider--art .rv-slide__avatar--initial{font-size:calc(34 * var(--g))}
.rv-slider--art .rv-slide__by b{font:500 calc(18 * var(--g))/1.2 "Univers Next",Arial,sans-serif;-webkit-text-stroke:calc(.35 * var(--g)) currentColor}
.rv-slider--art .rv-slide__by small{margin-top:calc(6 * var(--g));font:400 calc(17.5 * var(--g))/1.2 "Univers Next",Arial,sans-serif}
.rv-slider--art .rv-slider__arrow{width:calc(65 * var(--g));height:calc(65 * var(--g));top:calc(363 * var(--g))}
.rv-slider--art .rv-slider__arrow--prev{left:calc(655 * var(--g))}
.rv-slider--art .rv-slider__arrow--next{left:calc(1461 * var(--g))}
.rv-slider--art .rv-slider__dots{position:absolute;left:calc(1026 * var(--g));top:calc(619 * var(--g));gap:calc(16 * var(--g))}
.rv-slider--art .rv-slider__dot{width:calc(17 * var(--g));height:calc(17 * var(--g))}
/* comfortable hit area without moving the drawn dot */
.rv-slider--art .rv-slider__dot{position:relative}
.rv-slider--art .rv-slider__dot::after{content:"";position:absolute;inset:calc(-8 * var(--g))}

/* ---- Mobile (<= 900px): each slide is its own torn-paper card -------------------------------- */
.rv-slider--paper{
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:14px;
  margin:34px 0 0;
}
.rv-slider--paper .rv-slider__viewport{
  grid-column:2;
  width:90vw;
  max-width:min(600px, 100%);
  justify-self:center;
  /* the shadow sits on the viewport, not the slides: a slide's own shadow would be cut square by the clip */
  filter:drop-shadow(0 14px 16px rgba(20,48,43,.14));
}
.rv-slider--paper .rv-slide{
  padding:clamp(58px, 12vw, 74px) clamp(26px, 6vw, 44px) clamp(34px, 6vw, 44px) clamp(30px, 7vw, 50px);
  border-style:solid;
  border-color:transparent;
  border-width:0;
  border-image:url("../img/intro-v2/review-paper.webp") 110 48 46 112 fill / clamp(64px,14vw,90px) clamp(26px,5vw,40px) clamp(26px,5vw,38px) clamp(64px,14vw,92px) stretch;
  color:var(--rv-quote);
}
.rv-slider--paper .rv-slide__mark{position:absolute;left:clamp(66px,15vw,104px);top:clamp(18px,4vw,28px);width:clamp(36px,8vw,46px);aspect-ratio:56 / 48;height:auto}
.rv-slider--paper .rv-br{display:none}
.rv-slider--paper .rv-slide__quote p{font-size:clamp(17px,2.9vw,21px);line-height:1.45}
.rv-slider--paper .rv-slide__by{gap:14px;margin-top:22px}
.rv-slider--paper .rv-slide__avatar{width:56px;height:56px}
.rv-slider--paper .rv-slide__avatar--initial{font-size:24px}
.rv-slider--paper .rv-slide__by b{font:500 15px/1.25 "Univers Next",Arial,sans-serif}
.rv-slider--paper .rv-slide__by small{margin-top:3px;font:400 14px/1.3 "Univers Next",Arial,sans-serif}
.rv-slider--paper .rv-slider__arrow{position:relative;width:48px;height:48px}
.rv-slider--paper .rv-slider__arrow--prev{grid-column:1;grid-row:1}
.rv-slider--paper .rv-slider__arrow--next{grid-column:3;grid-row:1}
.rv-slider--paper .rv-slider__dots{grid-column:1 / -1;justify-content:center;gap:12px;margin-top:10px}
.rv-slider--paper .rv-slider__dot{width:11px;height:11px;position:relative}
.rv-slider--paper .rv-slider__dot::after{content:"";position:absolute;inset:-10px}

/* phones: the arrows would crowd the text, so the card takes the full row and swipe + dots drive it */
@media (max-width:560px){
  .rv-slider--paper{grid-template-columns:minmax(0,1fr);column-gap:0}
  .rv-slider--paper .rv-slider__viewport{grid-column:1}
  .rv-slider--paper .rv-slider__arrow{display:none}
  .rv-slider--paper .rv-slide__quote p{font-size:16px;line-height:1.5}
  .rv-slider--paper .rv-slide__mark{width:34px}
}

@media (prefers-reduced-motion:reduce){
  .rv-slider__track,.rv-slider__arrow,.rv-slider__dot{transition:none}
}