/**
 * Theme Name:   Blocksy Child
 * Description:  Оптимизированные стили для B2B каталога
 * Author:       Creative Themes
 * Template:     blocksy
 * Text Domain:  blocksy
 * Version:      1.0.0
 */

/* ------------------------------
   1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
------------------------------ */
:root {
    
    
    /* Базовые цвета утилит */
    --border: #d2d2d7;
    --bg-light: #f5f5f7;
    --bg-white: #ffffff;

    /* RGB версии для прозрачности rgba() */
    --primary-rgb: 0, 85, 255;
    --primary-dark-rgb: 0, 68, 204;

    /* Системные тени (Уровни глубины B2B) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 85, 255, 0.1);

    /* Скругления */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Анимации */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* Жидкая типографика (Fluid Typography) для кастомных блоков */
    --fs-small: clamp(14px, 1.2vw, 16px);
    --fs-medium: clamp(16px, 1.5vw, 18px);
    --fs-large: clamp(20px, 2.5vw, 24px);
    --fs-xlarge: clamp(24px, 4vw, 42px);
}

/* ------------------------------
   2. КАСТОМНЫЕ УТИЛИТЫ И СЕТКИ
------------------------------ */

/* Отступы для кастомных секций */
.section-padding {
    padding: clamp(48px, 8vw, 80px) 0;
}

.bg-light {
    background-color: var(--bg-light);
}

/* Реверс колонок на мобильных (Полезно, если не используется Flex-блок) */
@media (max-width: 767px) {
    .mobile-reverse {
        display: flex;
        flex-direction: column-reverse;
    }
}

/* --- Сетка горизонтального скролла для мобилок (Отличная UX фича) --- */
.has-mobile-scroll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .has-mobile-scroll-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        /* Скрываем скроллбар для эстетики */
        scrollbar-width: none; 
    }
    .has-mobile-scroll-grid::-webkit-scrollbar {
        display: none;
    }
    .has-mobile-scroll-grid > * {
        flex: 0 0 85%;
        scroll-snap-align: center;
        margin-right: 15px;
    }
}

/* --- Masonry сетка (Кирпичная кладка) --- */
.has-masonry-grid {
    column-count: 3;
    column-gap: 20px;
}
.has-masonry-grid > * {
    break-inside: avoid;
    margin-bottom: 20px;
}
@media (max-width: 900px) { 
    .has-masonry-grid { column-count: 2; } 
}
@media (max-width: 600px) { 
    .has-masonry-grid { column-count: 1; } 
}