/**
 * =============================================================================
 * GRID SYSTEM & LAYOUT UTILITIES
 * =============================================================================
 * 
 * Система сетки и утилиты для макета.
 * Основана на современных CSS Grid и Flexbox технологиях.
 * 
 * Структура:
 * - Container: Контейнеры для контента
 * - Flexbox utilities: Утилиты для Flexbox
 * - Responsive utilities: Адаптивные утилиты
 * 
 * @author: Carpathians Team
 * @version: 1.0.0
 * @updated: 2024
 */

/* ===== CONTAINER SYSTEM ===== */
/* Система контейнеров для ограничения ширины контента */

.container {
    max-width: var(--container-max-width);  /* Максимальная ширина контейнера */
    margin: 0 auto;                        /* Центрирование контейнера */
    padding: 0 var(--container-padding);   /* Отступы контейнера */
}

.container-fluid {
    width: 100%;                           /* Полная ширина */
    padding: 0 var(--container-padding);   /* Отступы контейнера */
}

/* ===== GRID SYSTEM ===== */
/* CSS Grid утилиты для сложных макетов */

.grid {
    display: grid;
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }

/* Grid gaps */
.gap-grid-xs { gap: var(--spacing-xs); }
.gap-grid-sm { gap: var(--spacing-sm); }
.gap-grid-md { gap: var(--spacing-md); }
.gap-grid-lg { gap: var(--spacing-lg); }
.gap-grid-xl { gap: var(--spacing-xl); }