/* ========================================
   ENCYCLOPEDIA - MAIN STYLES
   Mobile-first, lightweight, SEO-optimized
   ======================================== */

/* ===== CSS VARIABLES ===== 
   Глобальные переменные для переиспользования по всему сайту
*/
:root {
  /* Colors - Цветовая палитра */
  --color-primary: #007AFF;           /* Основной синий (кнопки, ссылки) */
  --color-primary-dark: #0051D5;      /* Темный синий (hover состояния) */
  --color-text: #1d1d1f;              /* Основной текст (черный) */
  --color-text-light: #6e6e73;        /* Второстепенный текст (серый) */
  --color-bg: #ffffff;                /* Фон страниц (белый) */
  --color-bg-alt: #f5f5f7;            /* Альтернативный фон (светло-серый) */
  --color-border: #d2d2d7;            /* Цвет рамок */
  --color-shadow: rgba(0, 0, 0, 0.1); /* Цвет теней */
  
  /* Spacing - Отступы и промежутки */
  --spacing-xs: 8px;                  /* Extra small: мелкие отступы */
  --spacing-sm: 16px;                 /* Small: стандартные отступы */
  --spacing-md: 24px;                 /* Medium: средние отступы */
  --spacing-lg: 40px;                 /* Large: большие отступы */
  --spacing-xl: 64px;                 /* Extra large: огромные отступы */
  
  /* Typography - Шрифты */
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  
  /* Layout - Макет */
  --max-width: 1200px;                /* Максимальная ширина контента */
  --header-height: 64px;              /* Высота шапки */
  --border-radius: 12px;              /* Стандартное скругление углов */
  
  /* Transitions - Анимации */
  --transition-fast: 0.2s ease;                              /* Быстрая анимация */
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);   /* Плавная анимация */
}

/* ===== RESET & BASE ===== 
   Сброс стандартных браузерных стилей
*/

/* * - Сброс отступов и box-sizing для всех элементов */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  /* Размеры включают padding и border */
}

/* html - Базовые настройки документа */
html {
  font-size: 16px;           /* Базовый размер шрифта */
  scroll-behavior: smooth;   /* Плавная прокрутка по якорям */
  position: relative;        /* Для sticky элементов */
}

/* body - Основные стили страницы */
body {
  font-family: var(--font-system);           /* Системный шрифт */
  color: var(--color-text);                  /* Цвет текста */
  background: var(--color-bg);               /* Белый фон */
  line-height: 1.6;                          /* Межстрочное расстояние */
  -webkit-font-smoothing: antialiased;       /* Сглаживание шрифтов (Mac) */
  -moz-osx-font-smoothing: grayscale;        /* Сглаживание шрифтов (Firefox Mac) */
  position: relative;                        /* Для позиционирования */
  overflow-x: hidden;                        /* Убрать горизонтальную прокрутку */
  padding-top: var(--header-height);         /* Отступ сверху для закрепленного header */
}

/* ===== TYPOGRAPHY ===== 
   Стили для текста и заголовков
*/

/* h1-h6 - Общие стили для всех заголовков */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;                    /* Жирный шрифт */
  line-height: 1.2;                    /* Плотное межстрочное расстояние */
  margin-bottom: var(--spacing-sm);    /* Отступ снизу */
  color: var(--color-text);            /* Цвет текста */
}

/* h1 - Главный заголовок страницы (только один на странице!) */
h1 {
  font-size: 2.5rem;                   /* 40px на мобильных */
  margin-bottom: var(--spacing-md);    /* Больший отступ */
  font-weight: 700;                    /* Очень жирный (bold) */
}

/* h2 - Заголовки секций */
h2 {
  font-size: 2rem;                     /* 32px на мобильных */
  margin-top: var(--spacing-lg);       /* Отступ сверху */
  margin-bottom: var(--spacing-md);    /* Отступ снизу */
  font-weight: 700;                    /* Очень жирный (bold) */
}

/* h3 - Подзаголовки */
h3 {
  font-size: 1.5rem;                   /* 24px */
}

/* p - Параграфы текста */
p {
  margin-bottom: var(--spacing-sm);    /* Отступ между параграфами */
  color: var(--color-text);            /* Цвет текста */
}

/* a - Ссылки */
a {
  color: var(--color-primary);         /* Синий цвет */
  text-decoration: none;               /* Без подчеркивания по умолчанию */
  transition: color var(--transition-fast);  /* Плавная смена цвета */
}

/* a:hover - Ссылки при наведении */
a:hover {
  color: var(--color-primary-dark);    /* Темнее при наведении */
  text-decoration: underline;          /* Подчеркивание при наведении */
}

/* img - Изображения */
img {
  max-width: 100%;                     /* Не шире родителя */
  height: auto;                        /* Пропорциональная высота */
  display: block;                      /* Убрать пробел снизу */
}

/* ===== LAYOUT ===== 
   Основные контейнеры и макет
*/

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

/* .section - Секция контента с отступом снизу */
.section {
  margin-bottom: var(--spacing-xl);    /* Большой отступ между секциями */
}

/* Category sections spacing - Дополнительный отступ между категориями на главной */
.section > div[id] {
  margin-bottom: 80px;                 /* Еще больше пространства между категориями */
}

/* ===== HEADER ===== 
   Шапка сайта - ЗАФИКСИРОВАНА СВЕРХУ при прокрутке
*/

/* .header - Контейнер шапки (черный фон, всегда сверху) */
.header {
  position: fixed;                     /* ФИКСАЦИЯ сверху экрана */
  top: 0;                              /* Прилипает к верхнему краю */
  left: 0;                             /* От левого края */
  right: 0;                            /* До правого края */
  z-index: 9999;                       /* Поверх всего контента */
  background: #000000;                 /* Черный фон */
  backdrop-filter: blur(20px);         /* Размытие фона (эффект глубины) */
  -webkit-backdrop-filter: blur(20px); /* Для Safari */
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);  /* Полупрозрачная рамка */
  height: var(--header-height);        /* Высота 64px */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);  /* Тень для глубины */
  width: 100%;                         /* Полная ширина */
}

/* .header-content - Внутренний контейнер header с flex раскладкой */
.header-content {
  max-width: var(--max-width);         /* Ограничение ширины */
  margin: 0 auto;                      /* Центрирование */
  padding: 0 var(--spacing-sm);        /* Отступы по бокам */
  height: 100%;                        /* На всю высоту header */
  display: flex;                       /* Flexbox для раскладки */
  align-items: center;                 /* Вертикальное выравнивание */
  justify-content: space-between;      /* Logo слева, nav справа */
}

/* .logo - Логотип сайта (ссылка на главную) */
.logo {
  display: flex;                       /* Flexbox для logo + текст */
  align-items: center;                 /* Вертикальное выравнивание */
  gap: 8px;                            /* Промежуток между logo и текстом */
  font-size: 1.25rem;                  /* Размер текста */
  font-weight: 600;                    /* Жирный */
  color: #ffffff;                      /* Белый текст (на черном фоне) */
  text-decoration: none;               /* Без подчеркивания */
}

/* .logo-image - Изображение логотипа в header */
.logo-image {
  height: 32.2px;                      /* Высота логотипа в шапке (увеличена на 15%) */
  width: auto;                         /* Пропорциональная ширина */
}

/* .logo:hover - Логотип при наведении */
.logo:hover {
  text-decoration: none;               /* Без подчеркивания */
  opacity: 0.8;                        /* Легкая прозрачность */
}

/* .logo:hover - Сохранение белого цвета при наведении */
.logo:hover {
  color: #ffffff;                      /* Остается белым */
}

/* .nav - Контейнер навигации в header */
.nav {
  display: flex;                       /* Flexbox для элементов */
  align-items: center;                 /* Вертикальное выравнивание */
  gap: var(--spacing-md);              /* Промежуток между элементами */
}

/* .nav a - Ссылки в навигации */
.nav a {
  color: #ffffff;                      /* Белый текст */
  font-size: 0.95rem;                  /* Немного меньше обычного */
  text-decoration: none;               /* Без подчеркивания */
}

/* .nav a:hover - Ссылки навигации при наведении */
.nav a:hover {
  color: #ffffff;                      /* Остается белым */
  text-decoration: none;               /* Без подчеркивания */
  opacity: 0.8;                        /* Легкая прозрачность */
}

/* ===== MAIN CONTENT ===== 
   Основной контент страницы
*/

/* main - Контейнер основного контента (с отступом под fixed header) */
main {
  min-height: calc(100vh - var(--header-height));  /* Минимум на весь экран */
  padding-top: calc(var(--header-height) + var(--spacing-lg));  /* Отступ = высота header + 40px */
  padding-bottom: var(--spacing-xl);   /* Отступ снизу */
}

/* ===== GRID SYSTEM ===== 
   Системы сеток для layout'ов
*/

/* .grid - Базовый grid контейнер */
.grid {
  display: grid;                       /* CSS Grid */
  gap: var(--spacing-md);              /* Промежуток между элементами */
}

/* .grid-2 - Grid из 2 колонок (1 на мобильных) */
.grid-2 {
  grid-template-columns: 1fr;          /* 1 колонка на мобильных */
}

/* .grid-3 - Grid из 3 колонок (1 на мобильных, 2 на планшетах) */
.grid-3 {
  grid-template-columns: 1fr;          /* 1 колонка на мобильных */
}

/* .grid-responsive - Адаптивный grid (автоматически подстраивается) */
.grid-responsive {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  /* Автоколонки */
}

/* Two columns on tablet+ - 2 колонки на планшетах и выше */
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;    /* 2 равные колонки */
  }
  
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);  /* 2 колонки на планшетах */
  }
}

/* Three columns on desktop - 3 колонки на десктопах */
@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);  /* 3 равные колонки */
  }
}

/* ===== ARTICLE CARD ===== 
   Карточки статей на главной странице
*/

/* .article-card - Контейнер карточки статьи (кликабельная ссылка) */
.article-card {
  background: var(--color-bg);         /* Белый фон */
  border-radius: 0;                    /* Без скругления */
  transition: transform var(--transition-smooth);  /* Плавная анимация */
  border: none;                        /* Без рамки */
  box-shadow: none;                    /* Без тени */
  display: flex;                       /* Горизонтальное расположение */
  align-items: flex-start;             /* Выравнивание по верхнему краю */
  gap: var(--spacing-md);              /* Отступ между изображением и текстом */
  padding: 0;                          /* Без внутренних отступов */
}

/* .article-card:hover - Карточка при наведении (эффект подъема) */
.article-card:hover {
  transform: translateY(-6px);         /* Поднимается на 6px */
  box-shadow: none;                    /* Без тени */
  text-decoration: none;               /* Без подчеркивания */
}

/* .article-card:hover .article-card-title - Заголовок карточки при hover */
.article-card:hover .article-card-title {
  text-decoration: none;               /* Убрать подчеркивание заголовка */
}

/* .article-card-image - Изображение превью в карточке */
.article-card-image {
  width: 120px;                        /* Квадрат 120px */
  height: 120px;                       /* Квадрат 120px */
  object-fit: cover;                   /* Обрезка с сохранением пропорций */
  border-radius: 0;                    /* Без скругления */
  flex-shrink: 0;                      /* Не сжимается */
}

@media (max-width: 600px) {
  .article-card-image {
    width: 64px;                       /* Квадрат 64px */
    height: 64px;                      /* Квадрат 64px */
  }
}

/* .article-card-content - Текстовый контент карточки (под изображением) */
.article-card-content {
  padding: 0;                          /* Без внутренних отступов */
  flex: 1;                             /* Занимает оставшееся пространство */
}

/* .article-card-title - Заголовок статьи в карточке */
.article-card-title {
  font-size: 1.25rem;                  /* Крупнее обычного текста */
  margin-bottom: var(--spacing-xs);    /* Маленький отступ */
  color: var(--color-text);            /* Черный текст */
}

/* .article-card-description - Краткое описание статьи */
.article-card-description {
  color: var(--color-text-light);      /* Серый текст */
  font-size: 0.95rem;                  /* Немного меньше */
  margin-bottom: var(--spacing-sm);    /* Отступ снизу */
  line-height: 1.5;                    /* Межстрочное расстояние */
}

/* .article-card-category - Бейдж категории (Widgets, Themes, etc.) */
.article-card-category {
  display: inline-block;               /* Инлайн блок */
  background: rgb(227, 229, 233);     /* Простой серый фон (как в постхедере) */
  color: #4b5563;                      /* Темно-серый текст */
  padding: 5px 14px;                   /* Отступы внутри (как в постхедере) */
  border-radius: 20px;                 /* Круглые углы (таблетка) */
  font-size: 0.6rem;                   /* Мелкий шрифт (как в постхедере) */
  font-weight: 600;                    /* Жирный */
  text-transform: uppercase;           /* Заглавные буквы */
  letter-spacing: 0.5px;               /* Промежуток между буквами */
  border: 1px solid #d1d5db;           /* Тонкая рамка */
  margin-bottom: 8px;                  /* Отступ снизу под тегом */
}

/* ===== ARTICLE CONTENT ===== 
   Стили для контента внутри статей
*/

/* .article-hero - Шапка статьи (заголовок + мета) */
.article-hero {
  margin-bottom: var(--spacing-lg);    /* Отступ снизу */
}

/* .article-meta - Мета информация (категория, дата обновления) */
.article-meta {
  color: var(--color-text-light);      /* Серый цвет */
  font-size: 0.9rem;                   /* Мелкий шрифт */
  margin-bottom: var(--spacing-md);    /* Отступ снизу */
}

/* .content-section - Секция контента внутри статьи */
.content-section {
  margin-bottom: var(--spacing-lg);    /* Отступ между секциями */
}

/* .content-two-cols - Layout из 2 колонок (текст + изображение) */
.content-two-cols {
  display: grid;                       /* CSS Grid */
  grid-template-columns: 1fr;          /* 1 колонка на мобильных */
  gap: var(--spacing-md);              /* Промежуток между колонками */
  align-items: start;                  /* Выравнивание по верху */
}

/* .content-two-cols медиа - 2 колонки на планшетах и выше */
@media (min-width: 768px) {
  .content-two-cols {
    grid-template-columns: 1fr 1fr;    /* 2 равные колонки */
  }
}

/* .content-image - Изображения внутри статей */
.content-image {
  width: 100%;                         /* Полная ширина */
  border-radius: 16px;                 /* Скругленные углы */
  margin: var(--spacing-sm) 0;         /* Отступы сверху и снизу */
  border: none;                        /* Убрать рамку */
  box-shadow: none;                    /* Убрать тень */
}

/* ===== LISTS ===== 
   Списки с галочками
*/

/* .content-list - Список с кастомными маркерами (галочки) */
.content-list {
  list-style: none;                    /* Убрать стандартные буллеты */
  margin: var(--spacing-md) 0;         /* Отступы сверху и снизу */
}

/* .content-list li - Элемент списка */
.content-list li {
  position: relative;                  /* Для позиционирования ::before */
  padding-left: var(--spacing-md);     /* Отступ слева (место для галочки) */
  margin-bottom: var(--spacing-sm);    /* Отступ между элементами */
}

/* .content-list li::before - Галочка перед элементом списка */
.content-list li::before {
  content: "✓";                        /* Символ галочки */
  position: absolute;                  /* Абсолютное позиционирование */
  left: 0;                             /* Слева */
  color: var(--color-primary);         /* Синяя галочка */
  font-weight: 600;                    /* Жирная */
}

/* ===== FAQ SECTION ===== 
   Блок вопросов и ответов
*/

/* .faq-section - Контейнер FAQ блока (серый градиент) */
.faq-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);  /* Градиентный фон */
  padding: var(--spacing-lg);          /* Отступы внутри */
  border-radius: 20px;                 /* Скругленные углы */
  margin: var(--spacing-lg) 0;         /* Отступы сверху и снизу */
  border: 2px solid #e8eaed;           /* Серая рамка */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);  /* Мягкая тень */
}

/* .faq-item - Один вопрос-ответ */
.faq-item {
  margin-bottom: var(--spacing-md);    /* Отступ между вопросами */
}

/* .faq-question - Вопрос в FAQ (жирный текст) */
.faq-question {
  font-weight: 600;                    /* Жирный */
  font-size: 1.1rem;                   /* Крупнее обычного */
  margin-bottom: var(--spacing-xs);    /* Маленький отступ */
  color: var(--color-text);            /* Черный текст */
}

/* .faq-answer - Ответ в FAQ (обычный текст) */
.faq-answer {
  color: var(--color-text-light);      /* Серый текст */
  line-height: 1.6;                    /* Межстрочное расстояние */
}

/* ===== CONCLUSION / CTA BLOCK ===== 
   Призыв к действию (синий блок с кнопками)
*/

/* .conclusion - Контейнер CTA блока (синий градиент) */
.conclusion {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;                        /* Белый текст */
  padding: var(--spacing-xl);          /* Большие отступы */
  border-radius: 24px;                 /* Сильное скругление */
  margin: var(--spacing-lg) 0;         /* Отступы сверху и снизу */
  text-align: center;                  /* Центрирование текста */
  box-shadow: 0 8px 24px rgba(0, 122, 255, 0.25);  /* Синяя тень */
  border: 2px solid rgba(255, 255, 255, 0.2);  /* Полупрозрачная рамка */
}

/* .conclusion-logo - Логотип в CTA блоке (сверху) */
.conclusion-logo {
  height: 40px;                        /* Высота логотипа в CTA (больше чем в header) */
  width: auto;                         /* Пропорциональная ширина */
  margin: 0 auto var(--spacing-md);    /* Центрирование + отступ снизу */
  display: block;                      /* Блочный элемент */
}

/* .conclusion h2, h3 - Заголовки в CTA блоке */
.conclusion h2,
.conclusion h3 {
  color: white;                        /* Белый цвет */
  margin-bottom: var(--spacing-sm);    /* Отступ снизу */
}

/* .conclusion p - Параграфы в CTA блоке */
.conclusion p {
  color: rgba(255, 255, 255, 0.9);     /* Почти белый (легкая прозрачность) */
  margin-bottom: var(--spacing-md);    /* Отступ снизу */
}

/* .conclusion-buttons - Контейнер для 2 кнопок в CTA блоке */
.conclusion-buttons {
  display: flex;                       /* Flexbox для кнопок */
  gap: var(--spacing-sm);              /* Промежуток между кнопками */
  justify-content: center;             /* Центрирование */
  flex-wrap: wrap;                     /* Перенос на новую строку на маленьких экранах */
  margin-top: var(--spacing-md);       /* Отступ сверху */
}

/* ===== TIPS BLOCK ===== 
   Блок с советами (бледно-зеленый)
*/

/* .tips-block - Контейнер для Pro Tips (зеленый градиент) */
.tips-block {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);  /* Зеленый градиент */
  padding: var(--spacing-lg);          /* Отступы внутри */
  border-radius: var(--border-radius); /* Скругленные углы */
  border: 2px solid #86efac;           /* Светло-зеленая рамка */
  box-shadow: 0 4px 12px rgba(134, 239, 172, 0.15);  /* Зеленоватая тень */
}

/* ===== RELATED ARTICLES ===== 
   Блок связанных статей (внизу страницы)
*/

/* .related-section - Контейнер секции Related Articles */
.related-section {
  margin-top: var(--spacing-xl);       /* Большой отступ сверху */
  padding-top: var(--spacing-lg);      /* Отступ сверху */
  border-top: 1px solid var(--color-border);  /* Разделительная линия */
}

/* .related-grid - Grid для карточек связанных статей */
.related-grid {
  display: grid;                       /* CSS Grid */
  grid-template-columns: 1fr;          /* 1 колонка на мобильных */
  gap: var(--spacing-sm);              /* Промежуток между карточками */
  margin-top: var(--spacing-md);       /* Отступ сверху */
}

/* .related-grid медиа - 3 колонки на планшетах и выше */
@media (min-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(3, 1fr);  /* 3 равные колонки */
  }
}

/* .related-link - Карточка связанной статьи (маленькая) */
.related-link {
  display: block;                      /* Блочная ссылка */
  padding: var(--spacing-md);          /* Отступы внутри */
  border: 2px solid #e5e7eb;           /* Серая рамка */
  border-radius: 12px;                 /* Скругленные углы */
  transition: all var(--transition-smooth);  /* Плавные переходы */
  background: white;                   /* Белый фон */
}

/* .related-link:hover - Карточка связанной статьи при наведении */
.related-link:hover {
  background: var(--color-bg-alt);     /* Светло-серый фон */
  text-decoration: none;               /* Без подчеркивания */
  border-color: var(--color-primary);  /* Синяя рамка */
  transform: translateY(-2px);         /* Легкое поднятие */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  /* Тень */
}

/* .related-link-title - Заголовок связанной статьи */
.related-link-title {
  font-weight: 500;                    /* Средней жирности */
  color: var(--color-text);            /* Черный текст */
  margin-bottom: 4px;                  /* Маленький отступ */
}

/* .related-link-category - Категория связанной статьи */
.related-link-category {
  font-size: 0.85rem;                  /* Мелкий шрифт */
  color: var(--color-text-light);      /* Серый текст */
}

/* ===== BREADCRUMBS ===== 
   Навигационные крошки (Home › Encyclopedia › Category › Page)
*/

/* .breadcrumbs - Контейнер хлебных крошек */
.breadcrumbs {
  font-size: 0.9rem;                   /* Мелкий шрифт */
  color: var(--color-text-light);      /* Серый цвет */
  margin-bottom: var(--spacing-md);    /* Отступ снизу */
}

/* .breadcrumbs a - Ссылки в крошках */
.breadcrumbs a {
  color: var(--color-text-light);      /* Серый цвет */
}

/* .breadcrumbs a:hover - Ссылки крошек при наведении */
.breadcrumbs a:hover {
  color: var(--color-primary);         /* Синий при наведении */
}

/* .breadcrumbs span - Текущая страница (не ссылка) */
.breadcrumbs span {
  color: var(--color-text);            /* Черный текст */
}

/* ===== BUTTONS ===== 
   Все стили кнопок
*/

/* .btn - Базовый стиль кнопки */
.btn {
  display: inline-block;               /* Инлайн блок */
  padding: 9.6px 28px;                 /* Отступы внутри (вертикальный уменьшен на 20%) */
  border-radius: 30px;                 /* Сильно скругленные углы (таблетка) */
  font-weight: 600;                    /* Жирный текст */
  text-align: center;                  /* Центрирование */
  transition: all var(--transition-smooth);  /* Плавные переходы */
  cursor: pointer;                     /* Курсор-указатель */
  border: none;                        /* Без рамки */
  font-size: 1rem;                     /* Стандартный размер */
  text-decoration: none;               /* Без подчеркивания */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* Легкая тень */
}

/* .btn-primary - Основная кнопка (синяя) */
.btn-primary {
  background: var(--color-primary);    /* Синий фон */
  color: white;                        /* Белый текст */
}

/* .btn-primary:hover - Основная кнопка при наведении */
.btn-primary:hover {
  background: var(--color-primary-dark);  /* Темнее */
  transform: translateY(-2px);         /* Поднимается */
  box-shadow: 0 8px 16px rgba(0, 122, 255, 0.3);  /* Синяя тень */
  text-decoration: none;               /* Без подчеркивания */
  color: white;                        /* Остается белым */
}

/* .btn-secondary - Вторичная кнопка (белая с синей рамкой) */
.btn-secondary {
  background: white;                   /* Белый фон */
  color: var(--color-primary);         /* Синий текст */
  border: 2px solid var(--color-primary);  /* Синяя рамка */
}

/* .btn-secondary:hover - Вторичная кнопка при наведении */
.btn-secondary:hover {
  background: var(--color-primary);    /* Синий фон */
  color: white;                        /* Белый текст */
  text-decoration: none;               /* Без подчеркивания */
}

/* .btn-large - Увеличенная кнопка (для CTA) */
.btn-large {
  padding: 12.8px 32px;               /* Больше отступы (вертикальный уменьшен на 20%) */
  font-size: 1.1rem;                   /* Крупнее текст */
}

/* .btn-with-icon - Кнопка с иконкой (текст + изображение) */
.btn-with-icon {
  display: inline-flex;                /* Flex для выравнивания */
  align-items: center;                 /* Вертикальное выравнивание */
  gap: var(--spacing-xs);              /* Промежуток между текстом и иконкой */
}

/* .btn-with-icon img - Изображение внутри кнопки */
.btn-with-icon img {
  height: 24px;                        /* Высота иконки */
  width: auto;                         /* Пропорциональная ширина */
}

/* ===== FOOTER ===== 
   Подвал сайта
*/

/* .footer - Контейнер футера */
.footer {
  background: var(--color-bg-alt);     /* Светло-серый фон */
  border-top: 1px solid var(--color-border);  /* Разделительная линия сверху */
  padding: var(--spacing-xl) 0;        /* Отступы сверху и снизу */
  margin-top: var(--spacing-xl);       /* Отступ сверху */
}

/* .footer-cta - CTA секция в футере */
.footer-cta {
  text-align: center;                  /* Центрирование */
  padding: var(--spacing-lg) 0;        /* Отступы сверху и снизу */
  margin-bottom: var(--spacing-lg);    /* Отступ снизу */
}

/* .footer-cta-buttons - Контейнер для кнопок в футере */
.footer-cta-buttons {
  display: flex;                       /* Flexbox */
  flex-direction: column;              /* Колонкой на мобильных */
  gap: var(--spacing-sm);              /* Промежуток между кнопками */
  align-items: center;                 /* Центрирование */
  margin-top: var(--spacing-md);       /* Отступ сверху */
}

/* .footer-cta-buttons медиа - В ряд на планшетах */
@media (min-width: 768px) {
  .footer-cta-buttons {
    flex-direction: row;               /* В ряд */
    justify-content: center;           /* Центрирование */
  }
}

/* .footer-links - Правовые ссылки в футере */
.footer-links {
  display: flex;                       /* Flexbox */
  flex-wrap: wrap;                     /* Перенос на новую строку */
  justify-content: center;             /* Центрирование */
  gap: var(--spacing-md);              /* Промежуток между ссылками */
  padding: var(--spacing-md) 0;        /* Отступы сверху и снизу */
  border-top: 1px solid var(--color-border);  /* Разделительная линия */
}

/* .footer-links a - Ссылки в футере */
.footer-links a {
  color: var(--color-text-light);      /* Серый текст */
  font-size: 0.9rem;                   /* Мелкий шрифт */
}

/* .footer-copyright - Copyright текст */
.footer-copyright {
  text-align: center;                  /* Центрирование */
  color: var(--color-text-light);      /* Серый текст */
  font-size: 0.85rem;                  /* Мелкий шрифт */
  margin-top: var(--spacing-md);       /* Отступ сверху */
}

/* ===== UTILITIES ===== 
   Утилитарные классы для быстрой стилизации
*/

/* .text-center - Центрирование текста */
.text-center {
  text-align: center;
}

/* Margin bottom - Отступы снизу */
.mb-0 { margin-bottom: 0; }                          /* Без отступа */
.mb-sm { margin-bottom: var(--spacing-sm); }         /* 16px */
.mb-md { margin-bottom: var(--spacing-md); }         /* 24px */
.mb-lg { margin-bottom: var(--spacing-lg); }         /* 40px */

/* Margin top - Отступы сверху */
.mt-0 { margin-top: 0; }                             /* Без отступа */
.mt-sm { margin-top: var(--spacing-sm); }            /* 16px */
.mt-md { margin-top: var(--spacing-md); }            /* 24px */
.mt-lg { margin-top: var(--spacing-lg); }            /* 40px */

/* mb-xl - Extra large margin bottom (для категорий на главной) */
.mb-xl { 
  margin-bottom: var(--spacing-xl);    /* 64px */
}

/* ===== RESPONSIVE TYPOGRAPHY ===== 
   Адаптивные размеры заголовков на больших экранах
*/
@media (min-width: 768px) {
  h1 {
    font-size: 3rem;                   /* 48px на desktop */
  }
  
  h2 {
    font-size: 2.25rem;                /* 36px на desktop */
  }
  
  h3 {
    font-size: 1.75rem;                /* 28px на desktop */
  }
}

/* ===== ACCESSIBILITY ===== 
   Улучшение доступности для клавиатурной навигации
*/

/* .skip-to-content - Ссылка "Перейти к контенту" (для screen readers) */
.skip-to-content {
  position: absolute;                  /* Абсолютное позиционирование */
  top: -40px;                          /* Скрыта за экраном */
  left: 0;
  background: var(--color-primary);    /* Синий фон */
  color: white;                        /* Белый текст */
  padding: 8px;                        /* Отступы */
  z-index: 100;                        /* Поверх контента */
}

/* .skip-to-content:focus - Ссылка при фокусе (Tab навигация) */
.skip-to-content:focus {
  top: 0;                              /* Появляется при фокусе */
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== 
   Отключение анимаций для пользователей с настройками доступности
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;        /* Убрать анимации */
    animation-iteration-count: 1 !important;      /* Одна итерация */
    transition-duration: 0.01ms !important;       /* Мгновенные переходы */
    scroll-behavior: auto !important;             /* Без плавной прокрутки */
  }
}

/* ===== PRINT STYLES ===== 
   Стили для печати страницы
*/
@media print {
  /* Скрыть при печати */
  .header,
  .footer,
  .related-section,
  .btn {
    display: none;                     /* Не печатать навигацию и кнопки */
  }
  
  body {
    font-size: 12pt;                   /* Стандартный размер для печати */
    line-height: 1.5;                  /* Межстрочное расстояние */
  }
  
  a {
    text-decoration: underline;        /* Подчеркнутые ссылки */
  }
  
  /* Показать URL после ссылок */
  a[href^="http"]:after {
    content: " (" attr(href) ")";      /* Добавить URL в скобках */
  }
}

/* ========================================
   КОНЕЦ ФАЙЛА
   
   ИТОГО КЛАССОВ: 40+
   
   ОСНОВНЫЕ ГРУППЫ:
   - Layout: container, section, grid-*
   - Header: header, logo, nav
   - Cards: article-card, related-link
   - Content: content-section, content-image, content-list
   - Blocks: faq-section, tips-block, conclusion
   - Buttons: btn, btn-primary, btn-secondary, btn-large
   - Footer: footer, footer-cta, footer-links
   - Utils: text-center, mb-*, mt-*
   - Breadcrumbs: breadcrumbs
   
   ======================================== */