/* ==========================================================================
   Секция 05 · Доступные операции (слайдер — jQuery Owl Carousel)
   ========================================================================== */

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

.stlk-operations__head { margin-bottom: clamp(24px, 4vw, 36px); }
.stlk-operations__title { font-size: var(--stlk-fs-h2); margin-top: 16px; }

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

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

.stlk-op-card {
  aspect-ratio: 1 / 1;
  background: var(--stlk-surface);
  border-radius: var(--stlk-radius-m);
  box-shadow: var(--stlk-shadow-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
  transition: transform var(--stlk-dur-fast) var(--stlk-ease-standard),
              box-shadow var(--stlk-dur-fast) var(--stlk-ease-standard),
              background var(--stlk-dur-fast) var(--stlk-ease-standard);
}
.stlk-op-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--stlk-shadow-m);
  background: var(--stlk-yellow-light);
}

.stlk-op-card__icon {
  width: 40px; height: 40px;
  color: var(--stlk-accent);
}
.stlk-op-card__icon svg { width: 100%; height: 100%; }

.stlk-op-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--stlk-wood-700);
  line-height: 1.2;
}

/* ---- Брендовые стрелки Owl Carousel ---- */
.stlk-operations .owl-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.stlk-operations .owl-nav button.owl-prev,
.stlk-operations .owl-nav button.owl-next {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--stlk-wood-300);
  background: var(--stlk-surface);
  color: var(--stlk-wood-900);
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--stlk-dur-fast) var(--stlk-ease-standard);
}
.stlk-operations .owl-nav button.owl-prev:hover,
.stlk-operations .owl-nav button.owl-next:hover { background: var(--stlk-wood-100); }
.stlk-operations .owl-nav button.disabled { opacity: 0.35; pointer-events: none; }