/* ═══════════════════════════════════════════════
   REVIEWS — every reply from the sample giveaway,
   verbatim, in a row you swipe (or arrow) through.
   Markup is static in index.html; js/reviews.js
   only adds the arrows' state, the progress bar and
   the „Още“ toggle on long replies.
   ═══════════════════════════════════════════════ */

.reviews{
  --edge:max(24px, calc((100vw - 1120px) / 2));
  position:relative; z-index:2;
  padding:clamp(40px,7vw,80px) 0 clamp(8px,2vw,16px);
}

.reviews__head{max-width:620px; margin:0 auto; padding:0 24px; text-align:center}
.reviews__eyebrow{
  margin:0 0 10px; font:600 11px/1 var(--sans);
  letter-spacing:.26em; text-transform:uppercase; color:var(--wine);
}
.reviews__title{
  margin:0 0 12px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(26px,4.6vw,38px); line-height:1.18; color:var(--wine);
}
.reviews__sub{
  margin:0 auto; max-width:46ch;
  font:400 14px/1.7 var(--sans); color:var(--ink-soft);
}

/* ── the row ──
   Padded so the first card lines up with the page's content column, and the
   same padding is the snap inset so every stop leaves that margin. */
.reviews__rail{
  margin-top:clamp(28px,4vw,40px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--edge);
  scroll-behavior:smooth;
  scrollbar-width:none;
  outline-offset:-2px;
}
.reviews__rail::-webkit-scrollbar{display:none}
.reviews__list{
  display:flex; align-items:stretch; gap:16px;   /* equal heights: the row reads as one row */
  margin:0; padding:6px var(--edge) 26px;      /* room for the card shadow */
  list-style:none;
  width:max-content;
}

.rv{
  flex:0 0 clamp(264px, 80vw, 340px);
  scroll-snap-align:start;
}
.rv__card{
  position:relative; margin:0;
  display:flex; flex-direction:column;
  height:100%;
  padding:50px 26px 20px;
  background:linear-gradient(165deg, rgba(255,255,255,.88), rgba(226,178,170,.20)), var(--cream);
  border:1px solid rgba(136,1,42,.12);
  border-radius:20px;
  box-shadow:0 16px 38px rgba(43,28,30,.08);
}
/* a quote mark as ornament, above the text — the high “ rather than the
   Bulgarian low „, which in Playfair drops onto the first line */
.rv__card::before{
  content:'“'; position:absolute; left:22px; top:12px;
  font-family:var(--serif); font-size:56px; line-height:1; color:var(--wine); opacity:.3;
}

.rv__text{
  margin:0; position:relative;
  font:400 14.5px/1.62 var(--sans); color:var(--ink);
  overflow-wrap:anywhere;
}
.rv__text p{margin:0}
.rv__text p + p{margin-top:.7em}

/* long replies: seven lines, faded out, until „Още“ */
.rv.is-long .rv__text{
  max-height:calc(1.62em * 7); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent);
          mask-image:linear-gradient(180deg, #000 70%, transparent);
}
.rv.is-long.is-open .rv__text{max-height:none; -webkit-mask-image:none; mask-image:none}

.rv__more{
  align-self:flex-start; position:relative;
  margin:10px 0 0; padding:2px 0;
  appearance:none; background:none; border:0; cursor:pointer;
  border-bottom:1px solid rgba(136,1,42,.3);
  font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--wine);
}
.rv__more::after{content:''; position:absolute; inset:-9px -6px}
.rv__more:hover{border-color:var(--wine)}

.rv__n{
  margin-top:auto; padding-top:16px;
  font:600 11px/1 var(--sans); letter-spacing:.14em; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* ── arrows + progress ── */
.reviews__nav{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:0 24px;
}
.reviews__btn{
  display:grid; place-items:center;
  width:44px; height:44px; padding:0;
  appearance:none; cursor:pointer;
  background:rgba(255,255,255,.6); color:var(--wine);
  border:1px solid rgba(136,1,42,.22); border-radius:50%;
  transition:background .25s var(--ease), border-color .25s var(--ease), opacity .25s;
}
.reviews__btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.reviews__btn:hover{background:rgba(136,1,42,.06); border-color:var(--wine)}
.reviews__btn:disabled{opacity:.35; cursor:default; background:transparent; border-color:rgba(136,1,42,.22)}

.reviews__bar{
  position:relative; width:min(220px, 40vw); height:2px; border-radius:2px;
  background:rgba(136,1,42,.14); overflow:hidden;
}
.reviews__bar i{
  position:absolute; left:0; top:0; bottom:0; width:20%;
  background:var(--wine); border-radius:2px;
  transition:width .25s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .reviews__rail{scroll-behavior:auto}
  .reviews__btn, .reviews__bar i{transition:none}
}