/**
 * spacing-utils.scss
 * Утилиты для точного контроля отступов
 * 
 * Использование CSS переменных из variables.css для унифицированных отступов
 */

/* =====================================
   GAP UTILITIES
===================================== */

// Gap для flex/grid контейнеров
.gap-component {
  gap: var(--gap-component);  // 16px - стандартный gap между элементами
}

.gap-section {
  gap: var(--gap-section);  // 24px - gap между секциями
}

.gap-1 {
  gap: var(--space-1);  // 8px
}

.gap-2 {
  gap: var(--space-2);  // 16px
}

.gap-3 {
  gap: var(--space-3);  // 24px
}

.gap-4 {
  gap: var(--space-4);  // 32px
}

/* =====================================
   MARGIN UTILITIES
===================================== */

// Margin bottom для секций и блоков
.mb-section {
  margin-bottom: var(--margin-section);  // 24px - между секциями
}

.mb-block {
  margin-bottom: var(--margin-block);  // 32px - между блоками
}

// Margin на всех сторонах
.my-section {
  margin-block: var(--margin-section);  // 24px сверху/снизу
}

.my-block {
  margin-block: var(--margin-block);  // 32px сверху/снизу
}

/* =====================================
   PADDING UTILITIES
===================================== */

// Padding для карточек
.p-card {
  padding: var(--card-padding);  // 16px со всех сторон
}

.p-card-sm {
  padding: var(--card-padding-sm);  // 8px со всех сторон
}

.p-card-lg {
  padding: var(--card-padding-lg);  // 24px со всех сторон
}

// Padding по осям
.px-card {
  padding-inline: var(--card-padding);  // 16px лево/право
}

.py-card {
  padding-block: var(--card-padding);  // 16px верх/низ
}

.px-card-sm {
  padding-inline: var(--card-padding-sm);  // 8px лево/право
}

.py-card-sm {
  padding-block: var(--card-padding-sm);  // 8px верх/низ
}

.px-card-lg {
  padding-inline: var(--card-padding-lg);  // 24px лево/право
}

.py-card-lg {
  padding-block: var(--card-padding-lg);  // 24px верх/низ
}

/* =====================================
   RESPONSIVE UTILITIES
===================================== */

// Адаптивный gap для мобильных
@media (max-width: 576px) {
  .gap-component-mobile {
    gap: var(--space-1);  // 8px на мобильных
  }
  
  .p-card-mobile {
    padding: var(--card-padding-sm);  // 8px на мобильных
  }
}

/* =====================================
   КОМБИНИРОВАННЫЕ КЛАССЫ
===================================== */

// Стандартная секция с отступами
.section-spacing {
  margin-bottom: var(--margin-section);  // 24px снизу
  padding: var(--card-padding);          // 16px внутри
}

// Компактная секция
.section-spacing-sm {
  margin-bottom: var(--space-2);       // 16px снизу
  padding: var(--card-padding-sm);     // 8px внутри
}

// Просторная секция
.section-spacing-lg {
  margin-bottom: var(--margin-block);  // 32px снизу
  padding: var(--card-padding-lg);     // 24px внутри
}