/* ==========================================================================
   Секция 04 · Отзывы (слайдер — jQuery Owl Carousel)
   ========================================================================== */

.stlk-reviews {
  padding-block: var(--stlk-section-pad);
  background: linear-gradient(160deg, var(--stlk-bg) 0%, color-mix(in srgb, var(--stlk-bg) 90%, var(--stlk-wood-300)) 100%);
}

.stlk-reviews__head { margin-bottom: clamp(28px, 4vw, 44px); }
.stlk-reviews__title { font-size: var(--stlk-fs-h2); margin-top: 16px; }

.stlk-reviews__carousel { padding-bottom: 6px; }

/* Owl Carousel сам вешает overflow:hidden на .owl-stage-outer (см.
   vendor/owl-carousel/assets/owl.carousel.min.css) — это обрезает тень
   карточек со всех сторон, особенно в hover (--stlk-shadow-m + подъём
   translateY). Фикс одинаковый по всем 4 сторонам: добавляем внутренний
   отступ под тень и компенсируем его равным отрицательным полем — так
   область видимости (padding-box, к которой applies overflow:hidden)
   расширяется наружу, а сам контент (.owl-stage с карточками) остаётся
   ровно на прежнем месте и прежней ширины. Это безопасно и по
   горизонтали: Owl считает ширину слайдов через this.$element.width()
   — а $element это сам .owl-carousel (родитель .owl-stage-outer), его
   мы не трогаем, так что расчёт ширины слайдов не сбивается. Слева и
   справа отступ меньше, чем сверху/снизу — с запасом внутри бокового
   gutter'а секции (--stlk-gutter, минимум 20px), чтобы тень не вылезала
   за пределы страницы и не создавала горизонтальный скролл. */
.stlk-reviews .owl-stage-outer {
  padding: 24px 16px 40px;
  margin: -24px -16px -40px;
}

.stlk-review-card {
  background: var(--stlk-surface);
  border-radius: var(--stlk-radius-l);
  padding: 26px;
  box-shadow: var(--stlk-shadow-s);
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  transition: transform var(--stlk-dur-standard) var(--stlk-ease-standard), box-shadow var(--stlk-dur-standard);
}
.stlk-review-card:hover { transform: translateY(-4px); box-shadow: var(--stlk-shadow-m); }

.stlk-review-card__stars { color: var(--stlk-yellow); letter-spacing: 2px; font-size: 1rem; }

.stlk-review-card__text { color: var(--stlk-wood-700); flex: 1; }

.stlk-review-card__author { display: flex; align-items: center; gap: 12px; }
.stlk-review-card__author strong { display: block; font-size: 0.9375rem; }
.stlk-review-card__author span { display: block; font-size: var(--stlk-fs-small); color: var(--stlk-wood-500); }

.stlk-review-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--stlk-white);
  font-weight: 700;
  font-size: 0.875rem;
  flex: none;
}

.stlk-reviews__nav {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.stlk-reviews__arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--stlk-wood-300);
  background: var(--stlk-surface);
  color: var(--stlk-wood-900);
  display: grid; place-items: center;
  transition: transform var(--stlk-dur-fast) var(--stlk-ease-standard), background var(--stlk-dur-fast);
}
.stlk-reviews__arrow:hover { background: var(--stlk-wood-100); }
.stlk-reviews__arrow:active { transform: scale(0.92); }
.stlk-reviews__arrow svg { width: 20px; height: 20px; }

/* ---- Брендовые переопределения точек Owl Carousel ---- */
.stlk-reviews .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.stlk-reviews .owl-dot span {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--stlk-wood-300);
  transition: background var(--stlk-dur-fast) var(--stlk-ease-standard), transform var(--stlk-dur-fast) var(--stlk-ease-standard);
}
.stlk-reviews .owl-dot.active span,
.stlk-reviews .owl-dot:hover span { background: var(--stlk-accent); transform: scale(1.2); }