/* ============================================================
   PINK LAGOON POOLS — reviews carousel
   Loaded ONLY by index.html, after site.css. Pure additive
   classes (.rc-*) — nothing here restyles existing markup.
   Featured big quote + stars stay exactly as they were; this
   adds a swipeable card row beneath them.
   ============================================================ */

.reviews__carousel { max-width: 1000px; margin: clamp(40px, 7vh, 72px) auto 0; position: relative; }

.rc-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(260px, 30vw, 360px);
  gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 4px 22px;
  scrollbar-width: none;
}
.rc-track::-webkit-scrollbar { display: none; }

.rc-card {
  scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px 22px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  transition: border-color 0.4s, transform 0.5s var(--ease-out);
}
.rc-card:hover { border-color: var(--pink); }

.rc-card__stars { color: var(--pink); letter-spacing: 0.3em; font-size: 16px; }
.rc-card__text {
  color: rgba(244, 250, 253, 0.85); font-size: 15px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1;
}
.rc-card__by {
  margin-top: 4px; font-family: var(--font-script); font-size: 24px; color: var(--pink);
}
.rc-card__src {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

/* placeholder card (until real Google review texts are supplied) */
.rc-card--pending { border-style: dashed; }
.rc-card--pending .rc-card__text { color: var(--muted); font-style: italic; -webkit-line-clamp: 3; }

/* arrows */
.rc-nav {
  position: absolute; top: 45%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(4, 20, 31, 0.75); color: var(--pink);
  border: 1px solid rgba(255, 102, 196, 0.4);
  font-size: 20px; cursor: pointer;
  transition: background 0.3s, border-color 0.3s, opacity 0.3s;
}
.rc-nav:hover { background: var(--pink); color: var(--ink); }
.rc-nav[disabled] { opacity: 0.25; pointer-events: none; }
.rc-nav--prev { left: -10px; }
.rc-nav--next { right: -10px; }
@media (max-width: 1100px) { .rc-nav--prev { left: 4px; } .rc-nav--next { right: 4px; } }

/* dots */
.rc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.rc-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.22); transition: background 0.3s, transform 0.3s;
  padding: 0;
}
.rc-dots button.is-active { background: var(--pink); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .rc-track { scroll-behavior: auto; }
  .rc-card, .rc-card:hover { transform: none; }
}

/* ============================================================
   GOOGLE ATTRIBUTION + CTA
   Added with the reviews brief: a Google-marked section header,
   per-review attribution, and a link out to the full review set.
   Additive .reviews__* rules plus flex tweaks to .rc-card__src, so
   the existing card design is otherwise untouched.
   ============================================================ */

.reviews__head { margin: 0 auto clamp(28px, 4.5vh, 48px); max-width: 620px; }
.reviews__g { width: 30px; height: auto; margin: 0 auto 14px; }

.reviews__kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--pink);
}
.reviews__sub {
  margin-top: 10px; color: var(--muted);
  font-size: clamp(13.5px, 1.2vw, 15.5px); line-height: 1.6;
}

/* attribution rows: Google mark + label, shared by featured + cards */
.reviews__src,
.rc-card__src { display: inline-flex; align-items: center; gap: 8px; }
.reviews__src {
  margin-top: 22px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.reviews__src img { width: 15px; height: auto; flex: 0 0 auto; }
.rc-card__src { align-self: flex-start; }
.rc-card__src img { width: 14px; height: auto; flex: 0 0 auto; }

.reviews__actions {
  display: flex; justify-content: center;
  margin-top: clamp(30px, 4.5vh, 50px);
}