/* =========================================
   UI KIT CODE11: Утилиты (Helpers)
   ========================================= */

/* Accessibility (skip-link, screen-reader) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Базовое выравнивание текста */
.c-text-left { 
    text-align: left !important; 
}

.c-text-center { 
    text-align: center !important; 
}

.c-text-right { 
    text-align: right !important; 
}
/* Яркий фирменный градиент (использует первичный синий цвет) */
.c-bg-gradient-primary {
    background: linear-gradient(135deg, #113669 0%, var(--c-color-primary) 100%) !important;
}



.c-bg-glass {
    /* 1. Делаем ваш текущий цвет шапки прозрачным на 75% с помощью color-mix */
    background-color: color-mix(in srgb, var(--c-header-bg, var(--c-color-bg)) 75%, transparent) !important;
    
    /* 2. Применяем эффект размытия того, что находится ПОД блоком */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important; /* Обязательно для поддержки Safari */
    
    /* 3. Делаем нижнюю границу более тонкой и прозрачной для реалистичности "стекла" */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.c-bg-glass-primary {
    /* Создаем градиент, где оба цвета смешаны с прозрачностью на 85% */
    background: linear-gradient(
        135deg, 
        color-mix(in srgb, #113669 25%, transparent) 0%, 
        color-mix(in srgb, var(--c-color-primary) 25%, transparent) 100%
    ) !important;
    
    /* Добавляем размытие фона под шапкой */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Тонкая светлая линия снизу для подчеркивания эффекта стекла */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}



/* 
   Адаптивное выравнивание текста (Опционально, но очень полезно)
   Часто бывает нужно, чтобы на десктопе текст был слева, а на мобилке — по центру.
*/
@media (max-width: 768px) {
    .c-text-center-mobile { 
        text-align: center !important; 
    }
    .c-text-left-mobile { 
        text-align: left !important; 
    }
}



/* =========================================
   UI KIT CODE11: Утилиты сеток (Grid Layouts)
   ========================================= */

/* Базовый класс сетки (включает Grid и стандартный отступ) */
.c-grid {
    display: grid;
    gap: var(--c-grid-gap, 30px); /* Используем переменную, чтобы легко менять во всем проекте */
}

/* 
   Модификаторы колонок (Desktop First)
   Здесь мы задаем поведение для десктопа, а ниже автоматически перестроим для мобилок 
*/

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

/* =========================================
   Автоматическая Адаптивность для сеток
   ========================================= */

/* Планшеты (1024px): 4 и 5 колонок превращаем в 2, а 3 колонки пока оставляем или тоже делаем 2 */
@media (max-width: 1024px) {
    .c-grid--cols-4,
    .c-grid--cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .c-grid--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Телефоны (768px): Абсолютно все сетки выстраиваются в 1 колонку (друг под друга) */
@media (max-width: 768px) {
    .c-grid--cols-2,
    .c-grid--cols-3,
    .c-grid--cols-4,
    .c-grid--cols-5 {
        grid-template-columns: 1fr;
    }
}