/* ==========================================================================
   Секция 09 · Наши мастера (слайдер — jQuery Owl Carousel)
   ========================================================================== */

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

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

.stlk-masters__carousel { padding-bottom: 4px; }

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

.stlk-master-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.stlk-master-card__photo {
  width: 148px;
  height: 148px;
  border-radius: var(--stlk-radius-l);
  display: grid;
  place-items: center;
  color: var(--stlk-white);
  font-family: var(--stlk-font-display);
  font-weight: 800;
  font-size: 1.75rem;
  box-shadow: var(--stlk-shadow-m);
  transition: transform var(--stlk-dur-standard) var(--stlk-ease-bounce);
}
.stlk-master-card:hover .stlk-master-card__photo { transform: scale(1.05) rotate(-1deg); }

.stlk-master-card h3 { font-size: 1rem; }
.stlk-master-card p { font-size: var(--stlk-fs-small); color: var(--stlk-wood-500); }

.stlk-masters__nav {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.stlk-masters__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-masters__arrow:hover { background: var(--stlk-wood-100); }
.stlk-masters__arrow:active { transform: scale(0.92); }
.stlk-masters__arrow svg { width: 20px; height: 20px; }

.stlk-masters .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.stlk-masters .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-masters .owl-dot.active span,
.stlk-masters .owl-dot:hover span { background: var(--stlk-accent); transform: scale(1.2); }