/* Подключаем шрифты-заменители, если оригинальных нет на сервере */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Playfair+Display:wght@400&display=swap');

:root {
    --rox-page-canvas: #f5f5f4;
    --rox-surface-white: #ffffff;
    --rox-blueprint-blue: #0b64e9;
    --rox-text-primary: #0c0a09;
    --rox-text-subtle: #57534d;
    --rox-border-light: #f0efef;
    --rox-shadow-sm: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
    --rox-shadow-hover: rgba(0, 0, 0, 0.1) 0px 10px 20px 0px;
}
.dealers-section-rox {
    /* Накладываем темный фильтр поверх картинки, чтобы проявить светлый текст */
    background: linear-gradient(rgba(120, 125, 129, 0.226), rgba(31, 38, 45, 0.219)), 
                url('/templates/microton/img/dillers/dillers_background.jpeg') no-repeat center center;
    background-size: cover;
    padding: 40px 20px;
    /* font-family: 'Inter', sans-serif; */
}
.dealers-title {
    text-align: left;
    margin-bottom: 60px;
}
.dealers-title h3 {
    /* font-family: 'Playfair Display', serif; */
    font-size: 34px;
    font-weight: 600;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    
    /* Эффект градиента на тексте (от белого к серебристому) */
    background: linear-gradient(180deg, #ffffff 0%, #dcdcdc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    
    /* Легкая тень под буквами для дополнительного объема */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
}

.rox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.rox-card {
    background: var(--rox-surface-white);
    border-radius: 0px; 
    padding: 32px 24px;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--rox-shadow-sm);
    border: 1px solid transparent;
}

.rox-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rox-shadow-hover);
    border-color: var(--rox-border-light);
}

.rox-img-wrapper {
    height: 60px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
}

.rox-img-wrapper img {
    max-width: 160px;
    max-height: 50px;
    object-fit: contain;
    filter: grayscale(1); /* Делаем логотипы ч/б для чистоты стиля */
    opacity: 0.8;
    transition: all 0.3s ease;
}

.rox-card:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.rox-desc {
    font-size: 14px; /* text-body */
    line-height: 1.4;
    color: var(--rox-text-subtle);
    margin: 0;
}

.rox-footer {
    text-align: center;
    margin-top: 20px;
}

.rox-btn-primary {
    display: inline-block;
    background-color: var(--rox-blueprint-blue);
    color: #ffffff !important;
    padding: 12px 32px;
    /* border-radius: 8px; */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}

.rox-btn-primary:hover {
    opacity: 0.9;
}

/* Адаптивность */
@media (max-width: 768px) {
    .dealers-title h3 { font-size: 24px; }
    .rox-grid { grid-template-columns: 1fr; }
    .dealers-section-rox { padding: 40px 15px; }
}

/* Применяем сетку 3+2 только для компьютеров и больших экранов */
@media (min-width: 992px) {
    .rox-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important; /* Сетка из 6 равных колонок */
        gap: 16px !important;
    }
    
    .rox-card {
        grid-column: span 2 !important; /* Каждая карточка занимает 2 колонки из 6 (итого 3 в ряд) */
    }
    
    /* Сдвигаем 4-ю карточку на одну колонку вправо, чтобы отцентровать нижний ряд */
    .rox-card:nth-child(4) {
        grid-column: 2 / span 2 !important; /* Начинается со 2-й колонки, занимает 2 */
    }
    
    .rox-card:nth-child(5) {
        grid-column: 4 / span 2 !important; /* Начинается с 4-й колонки, занимает 2 */
    }
}


/* Выравниваем контейнер заголовка дилеров по сетке карточек */
.dealers-title {
    max-width: 1200px !important; /* Совпадает с шириной сетки карточек */
    margin: 0 auto 20px !important; /* Центрирует сам контейнер на экране */
    text-align: left !important;  /* Прижимает текст внутри контейнера влево */
}

/* Сдвигаем сам текст заголовка влево */
.dealers-title h3 {
    margin-left: 0 !important;    /* Убираем центрирование текста */
    margin-right: auto !important;
    text-align: left !important;
}

/* Если красная полоска сделана через псевдоэлемент, сдвигаем её тоже влево */
.dealers-title h3::after {
    margin-left: 0 !important;    /* Сдвигает красную линию под начало текста */
    margin-right: auto !important;
}

/* Растягиваем заголовок во всю ширину, чтобы он не переносился на ПК */
.dealers-title h3 {
    max-width: 100% !important; 
    margin: 0 !important;
    position: relative !important; /* Нужно для правильной привязки линии к тексту */
    text-align: left !important;
}

/* Жестко сдвигаем красную полоску в левый край (для абсолютного и маржинального позиционирования) */
.dealers-title h3::after,
.dealers-title::after {
    left: 0 !important;
    transform: none !important; /* Убираем сдвиг по оси X */
    margin-left: 0 !important;
    margin-right: auto !important;
}