/* =========================================================
   TIEKTA UI KIT — CUT CORNERS SYSTEM
   Форма: верх-право + низ-лево
   Production-ready / Design System
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   Глобальные переменные дизайн-системы
   ========================================================= */

:root {

  /* Размеры срезов */
  --cut-0: 0px;
  --cut-xs: 8px;
  --cut-sm: 12px;
  --cut-md: 20px;
  --cut-lg: 32px;
  --cut-xl: 48px;


  /* Анимация */
  --cut-transition: 1.25s ease;

}


/* =========================================================
   2. БАЗОВЫЙ CUT-UTILITY
   Универсальный класс для любых элементов
   ========================================================= */

.u-cut {

  /* Размер по умолчанию */
  --cut-size: var(--cut-md);

  position: relative;
  display: inline-block;

  /* Safari поддержка */
  -webkit-clip-path: polygon(0 0,
      calc(100% - var(--cut-size)) 0,
      100% var(--cut-size),
      100% 100%,
      var(--cut-size) 100%,
      0 calc(100% - var(--cut-size)));

  clip-path: polygon(0 0,
      calc(100% - var(--cut-size)) 0,
      100% var(--cut-size),
      100% 100%,
      var(--cut-size) 100%,
      0 calc(100% - var(--cut-size)));

  transition: all var(--cut-transition);
}


/* =========================================================
   3. SIZE MODIFIERS
   Управление размером углов
   ========================================================= */

.u-cut-xs {
  --cut-size: var(--cut-xs);
}

.u-cut-sm {
  --cut-size: var(--cut-sm);
}

.u-cut-md {
  --cut-size: var(--cut-md);
}

.u-cut-lg {
  --cut-size: var(--cut-lg);
}

.u-cut-xl {
  --cut-size: var(--cut-xl);
}


/* =========================================================
   4. BACKGROUND UTILITIES
   Примеры цветовых модификаторов
   ========================================================= */

.u-bg-primary {
  background: var(--color-content-primary);
  color: var(--color-white);
}

.u-bg-dark {
  background: var(--color-content-secondary);
  color: var(--color-white);
}

.u-bg-accent {
  background: var(--color-accent-primary);
}

.u-bg-white {
  background: var(--color-surface-primary);
}

.u-bg-subtle {
  background: var(--background-subtle);
}

/* =========================================================
   5. HOVER EFFECTS
   Инженерная анимация увеличения угла
   ========================================================= */

.u-cut-hover:hover {
  --cut-size: calc(var(--cut-size) * 1.3);
  transition: var(--cut-transition);
}


/* =========================================================
   6. SHADOW SUPPORT
   ВАЖНО: clip-path обрезает box-shadow
   Используем drop-shadow через wrapper
   ========================================================= */

.u-cut-shadow-wrapper {
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
}

.u-cut-shadow-wrapper-s {
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.05));
}


/* =========================================================
   7. MEDIA SUPPORT (для изображений)
   ========================================================= */

.u-cut-media {
  overflow: hidden;
}

.u-cut-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================================================
   8. ENTERPRISE FALLBACK
   Если clip-path не поддерживается —
   элемент остаётся прямоугольным
   ========================================================= */

@supports not (clip-path: polygon(0 0)) {
  .u-cut {
    clip-path: none;
  }
}


/* =========================================================
   9. RESPONSIVE TOKENS
   Адаптация размеров среза под мобильные устройства
   ========================================================= */

@media (max-width: 768px) {
  :root {
    /* Пропорциональное уменьшение для мобилок */
    --cut-xs: 6px;
    /* Было 8px */
    --cut-sm: 10px;
    /* Было 12px */
    --cut-md: 16px;
    /* Было 20px */
    --cut-lg: 24px;
    /* Было 32px */
    --cut-xl: 32px;
    /* Было 48px */

    /* Опционально: ускоряем анимацию на мобильных для отзывчивости */
    --cut-transition: 0.8s ease;
  }

  /* На очень узких экранах (iPhone SE и т.д.) 
     большие срезы могут ломать сетку 
  */
  @media (max-width: 380px) {
    :root {
      --cut-lg: 16px;
      --cut-xl: 24px;
    }
  }
}