/* ============ REVIEWS SECTION ============ */
.reviews-hero{
  --bg: var(--reviews-bg);
  position: relative;
  padding: clamp(42px, 6vw, 80px) 16px;
  background: #0b0f17;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  border-radius: 0;
  overflow: hidden;
}

.reviews-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0.42));
  pointer-events: none;
}

.reviews-hero__inner{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.reviews-hero__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.reviews-hero__title{
  margin: 0;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.reviews-hero__google{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 44px;
  color: #fff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* rail */
.reviews-rail{
  position: relative;
}

.reviews-rail__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 22px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 12px;
  padding: 6px 4px 10px;

  -webkit-overflow-scrolling: touch;
}

.reviews-rail__track::-webkit-scrollbar{ height: 10px; }
.reviews-rail__track::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}
.reviews-rail__track::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}

/* nav arrows */
.reviews-rail__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 3;
}

.reviews-rail__nav--left{ left: -10px; }
.reviews-rail__nav--right{ right: -10px; }

@media (max-width: 900px){
  .reviews-rail__nav{ display: none; } /* mobile: swipe */
}

/* ============ GLASS CARD (adapted) ============ */
.glass-card{
  position: relative;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(192, 192, 192, 0.28);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  overflow: hidden;
  scroll-snap-align: start;

  padding: 22px 22px 18px;
  min-height: 280px;
}

.glass-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.8px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.55),
    rgba(180,180,180,0.35),
    rgba(255,255,255,0.25)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  pointer-events: none;
}

.review-card > *{ position: relative; z-index: 1; }

.review-card__stars{
  font-size: 28px;
  letter-spacing: 2px;
  color: #ffeb3b;
  margin-bottom: 10px;
}

.review-card__name{
  margin: 0 0 10px;
  font-size: 22px;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-body);
  font-weight: 600;
}

.review-card__text{
  margin: 0 0 18px;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
  font-size: 15px;
  max-height: 9.5em;
  overflow: hidden;
}

.review-card__meta{
  margin-top: auto;
  color: rgba(255,255,255,0.62);
  font-size: 14px;
}

/* reveal anim like your demo, but for many cards */
.js-reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms ease, transform 650ms ease;
}
.js-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .js-reveal{ opacity: 1; transform: none; transition: none; }
}

.review-card--cta{
  display: grid;
  align-content: start;
  gap: 10px;
  text-decoration: none;
}

.review-card__cta{
  margin-top: auto;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.reviews-hero__title{
  margin: 0 0 26px;
  font-family: var(--font-body); /* ✅ Outfit */
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: white;
}

.reviews-rail__track{
  overflow-y: hidden;   /* ✅ voorkomt verticale scroll */
}

.reviews-hero__head{
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 64px; /* gelijk aan google blok */
}

.reviews-hero__title{
  margin: 0;
  line-height: 1;   /* voorkomt dat de h2 optisch zakt */
  display: flex;
  align-items: center;
}

.reviews-hero__google{
  display: grid;
  place-items: center;
  line-height: 1;
}