/**
 * spacing-utils.css
 * Утилиты для точного контроля отступов
 * 
 * Использование CSS переменных из variables.css для унифицированных отступов
 * Подключение: <link rel="stylesheet" href="{% static 'css/components/spacing-utils.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 внутри */
}