/* =========================================
   1. УТИЛИТЫ ВИДИМОСТИ (Показ/Скрытие)
   ========================================= */

/* Скрыть на десктопе (показывать только на планшетах и телефонах < 960px) */
.hide-on-desktop { display: none !important; }

/* Скрыть на мобильных (показывать только на экранах > 640px) */
.hide-on-mobile { display: block !important; }

@media screen and (max-width: 960px) {
    .hide-on-desktop { display: block !important; }
}

@media screen and (max-width: 640px) {
    .hide-on-mobile { display: none !important; }
}

/* =========================================
   2. FLEXBOX-РАЗМЕТКА (Для выравнивания)
   ========================================= */

/* Превращает элемент в гибкий контейнер */
.flex-container {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px; /* Расстояние между элементами */
}

/* Центрирование контента по вертикали и горизонтали */
.flex-center {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* На мобильных (менее 640px) выстраиваем колонки друг под другом */
@media screen and (max-width: 640px) {
    .flex-container {
        flex-direction: column !important;
    }
}

/* =========================================
   3. CSS GRID (Для ровных сеток)
   ========================================= */

/* Сетка из 3 колонок на десктопе */
.grid-3-cols {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Перестраиваем в 2 колонки на планшете */
@media screen and (max-width: 960px) {
    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Перестраиваем в 1 колонку на мобильном */
@media screen and (max-width: 640px) {
    .grid-3-cols {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* =========================================
   4. АДАПТИВНАЯ (РЕЗИНОВАЯ) ТИПОГРАФИКА
   ========================================= */

/* Текст будет плавно уменьшаться с 48px до 24px при сужении экрана */
.fluid-title {
    font-size: clamp(24px, 4vw, 48px) !important;
    line-height: 1.2;
}

/* Обычный текст: от 16px до 20px */
.fluid-text {
    font-size: clamp(16px, 1.5vw, 20px) !important;
}

/* =========================================
   5. ПОЛЕЗНЫЕ ОТСТУПЫ (Paddings / Margins)
   ========================================= */
.pad-section { padding: 100px 0 !important; }

@media screen and (max-width: 640px) {
    .pad-section { padding: 40px 0 !important; }
}

/* =========================================
   6. ОПТИМИЗАЦИЯ ПОД СВЕРХБОЛЬШИЕ ЭКРАНЫ (UltraWide & 4K)
   ========================================= */

/* Ограничитель контейнера, чтобы контент на 4K не расползался до краев */
.max-width-container {
    max-width: 1600px !important; /* Оптимальная ширина для больших экранов */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Изменение поведения сеток на экранах Ultra-HD */
@media screen and (min-width: 1920px) {
    /* 3-колоночная сетка превращается в 4-колоночную на 4K, если нужно */
    .grid-4k-4-cols {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 40px !important;
    }

    /* Увеличиваем базовые отступы секций для масштаба 4K */
    .pad-section { 
        padding: 160px 0 !important; 
    }
}

/* =========================================
   КОРРЕКЦИЯ ТИПОГРАФИКИ ДЛЯ 4K
   ========================================= */

/* 
   В предыдущем коде clamp(24px, 4vw, 48px) на 4K-экране (3840px) 
   упрется в лимит 48px. Текст может показаться слишком мелким для такого монитора.
   Если вы хотите, чтобы на 4K шрифт рос дальше, используйте класс ниже:
*/
.fluid-title-4k {
    font-size: clamp(28px, 3.5vw, 72px) !important; /* На 4K вырастет до 72px */
    line-height: 1.1;
}

.fluid-text-4k {
    font-size: clamp(16px, 1.2vw, 24px) !important; /* На 4K вырастет до 24px */
}