/* ----- 1. ОСНОВНОЙ ФОН ----- */
body {
    background-color: #FAFAFA;
}
/* ----- 2. АКЦЕНТНЫЕ БЛОКИ (шапка, подвал) ----- */
#sp-header {
    background-color: #C4D7F2 !important;
}
#sp-footer {
    background-color: #C4D7F2 !important;
}
/* Баннеры внизу страницы, отступ после баннера*/
.mod-banners__item {
    margin-bottom: 30px;
}

/* СТИЛИ ДЛЯ КАРТОЧЕК ДОКУМЕНТОВ */
  /* 1. Основная сетка */
.docs-grid {
  display: grid;
  /* Колонки, мин. ширина 260px, макс. вся страница */
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  /* Расстояние между карточками по вертикали и горизонтали */
  gap: 24px;
  /* Отступ сверху и снизу от сетки до текста страницы */
  margin: 30px 0;
}
  /* 2. Стиль самой карточки */
.doc-card{
  /* Фон */
  background: #D9C5B2;
  /* Закругление углов */
  border-radius: 12px;
  /* Внутренние отступы */
  padding: 25px 15px 20px;
  /* Тень */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* Выравнивание содержимого по центру*/
  text-align: center;
  /* Плавная анимация при наведении */
  transition: all 0.25s ease-in-out;
  /* Растягивание карточки по ширине в пределах ряда */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Рамка */
  border: 1px solid rgba(0, 0, 0, 0.05);
}
  /* Эффект при наведении на карточку */
.doc-card:hover {
  /* Подъем вверх на 5px */
  transform: translateY(-5px);
  /* Делаем тень более заметной */
  box-shadow: 0 12px 24px rgba(44, 62, 80, 0.15);
  /* Затемнить границу */
  border-color: rgba(0, 0, 0, 0.08);
}
  /* 3. Иконка файла */
.doc-card i {
  /* Размер иконки */
  font-size: 2rem;
  /* Отступ от иконки до названия */
  margin-bottom: 16px;
  /* Делаем иконку блочным элементом */
  display: block;
  /* Цвет */
  color: #FAFAFA;
}
  /* 4. Название документа */
.doc-card span {
  /* Делаем блочным элементом */
  display: block;
  /* Отступ снизу до кномки */
  margin-bottom: 24px;
  /* Размер шрифта */
  font-size: 1rem;
  /* Высота строки */
  line-height: 1.5;
  /* Цвет текста */
  color: #2d3436;
  /* Жирность шрифта (500 - полужирный) */
  font-weight:500;
  /* Минимальная высота, чтобы кнопки были на одном уровне */
  min-height: 60px;
}
  /* 5. Кнопка скачивания */
.btn-download {
  /* Делаем ссылку похожей на кнопку */
  display: inline-block;
  /* Внутренние отступы кнопки (вертикаль и горизонталь) */
  padding: 10px 22px;
  /* Основной цвет фона кнопки (заменить на цвет сайта) */
  background: #2C3E50;
  /* Цвет текста */
  color: #ffffff !important;
  /* Убираем подчеркивание */
  text-decoration: none !important;
  /* Скругляем углы */
  border-radius: 30px;
  /* Размер шрифта */
  font-size: 0.9rem;
  /* Жирность шрифта */
  font-weight: 600;
  /* Превращаем текст в капс (заглавные) */
  text-transform: uppercase;
  /* Расстояние между буквами */
  letter-spacing: 0.5px;
  /* Плавность анимации */
  transition: background 0.2s ease, transform 0.1s ease;
  /* Чтобы кнопка не прилипала к краям, а была по центру */
  align-self: center;
  /* Максимальная ширина кнопки (чтобы не растягивалась на всю карточку) */
  max-width: 180px;
  width: 100%;
  /* Тень для кнопки */
  box-shadow: 0 4px 6px rgba(0, 102, 204, 0.2);
}
  /* Эффект при наведении на кнопку */
.btn-download:hover {
  /* Темнеем на 10% */
  background: #3E5A6F;
  /* Слегка поднимаем кнопку */
  transform: translateY(-2px);
  /* Усиливаем тень */
  box-shadow: 0 6px 10px rgba(0, 75, 153, 0.3);
}
  /* Эффект при нажатии на кнопку */
.btn-download:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 75, 153, 0.2);
}
  /* 6. АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ ТЕЛЕФОНОВ */
@media (max-width: 576px) {
  .docs-grid {
    /* На маленьких экранах делаем карточки в одну колонку */
    grid-template-columns: 1fr;
    /* Уменьшаем отступы */
    gap: 16px;
  }
  .doc-card {
    /* Уменьшаем внутренние отступы */
    padding: 20px 15px;
  }
  .doc-card span {
    /* Убираем фиксированную минимальную высоту на мобилках */
    min-height: auto;
    /* Уменьшаем отступ до кнопки */
    margin-bottom: 20px;
  }
  .btn-download {
    /* Делаем кнопку чуть шире для удобства нажатия пальцем */
    max-width: 220px;
    padding: 12px 20px;
  }
}

/* =============================================
   КАРТОЧКИ СОТРУДНИКОВ — АДАПТИВНЫЕ
   ============================================= */

/* 1. СЕТКА */
.staff-grid {
  display: grid;
  /* На десктопе — 2 колонки */
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 30px 0;
}

/* 2. КАРТОЧКА */
.staff-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* Фото и текст в строку (по умолчанию) */
  display: flex;
  align-items: center;
  /* Плавная анимация при изменении раскладки */
  transition: all 0.3s ease;
}

/* 3. ФОТО */
.staff-card__photo {
  width: 130px;
  height: 130px;
  flex-shrink: 0; /* Фото не сжимается */
  margin-right: 24px;
}

.staff-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Круглое фото */
  border-radius: 50%;
  /* Тонкая рамка */
  border: 3px solid #C4D7F2;
}

/* 4. ИНФОРМАЦИЯ (ФИО, должность, телефон) */
.staff-card__info {
  flex: 1;
}

/* Заголовок с именем */
.staff-card__name {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2C3E50;
  line-height: 1.3;
}

/* Должность */
.staff-card__position {
  margin: 0 0 10px 0;
  font-size: 0.95rem;
  color: #666666;
  line-height: 1.4;
}

/* Телефон */
.staff-card__phone {
  display: inline-block;
  color: #2C3E50;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  /* Иконка телефона перед номером (опционально) */
  padding-left: 20px;
  position: relative;
}

/* Иконка телефона через псевдоэлемент */
.staff-card__phone::before {
  content: "📞";
  position: absolute;
  left: 0;
  font-size: 0.85rem;
}

/* При наведении на телефон — подчеркивание */
.staff-card__phone:hover {
  text-decoration: underline;
}

/* 5. ТЕНЬ ПРИ НАВЕДЕНИИ НА ВСЮ КАРТОЧКУ */
.staff-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* =============================================
   6. АДАПТАЦИЯ
   ============================================= */

/* Планшет и меньше (≤ 768px) — 1 колонка */
@media (max-width: 768px) {
  .staff-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Маленький экран (≤ 550px) — фото СВЕРХУ, описание ПОД ФОТО */
@media (max-width: 550px) {
  .staff-card {
    /* Меняем направление: фото над текстом */
    flex-direction: column;
    /* Выравниваем содержимое по центру */
    align-items: center;
    text-align: center;
    padding: 20px 15px;
  }

  .staff-card__photo {
    /* Убираем отступ справа */
    margin-right: 0;
    /* Добавляем отступ снизу */
    margin-bottom: 16px;
    /* Немного уменьшаем фото */
    width: 110px;
    height: 110px;
  }

  .staff-card__name {
    font-size: 1rem;
  }

  .staff-card__position {
    font-size: 0.9rem;
  }
}
/* =============================================
   НАВИГАЦИОННЫЕ КАРТОЧКИ ПОДРАЗДЕЛОВ
   ============================================= */

/* 1. СЕТКА КАРТОЧЕК */
.subpages-grid {
  display: grid;
  /* Автоматически подбираем количество колонок: минимум 280px, максимум — вся доступная ширина */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin: 30px 0;
}

/* 2. КАРТОЧКА (это ссылка, поэтому вся карточка кликабельна) */
.subpage-card {
  /* Делаем ссылку блочным элементом */
  display: flex;
  flex-direction: column;
  /* Фон карточки */
  background: #FFFFFF;
  /* Закругление углов */
  border-radius: 12px;
  /* Внутренние отступы */
  padding: 28px 24px 20px;
  /* Тень */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* Убираем подчёркивание у ссылки */
  text-decoration: none !important;
  /* Цвет текста наследуется */
  color: inherit;
  /* Плавная анимация */
  transition: all 0.3s ease;
  /* Рамка */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Позиционирование для стрелки */
  position: relative;
  /* Чтобы карточка была одной высоты с соседями */
  height: 100%;
}

/* 3. ИКОНКА */
.subpage-card__icon {
  /* Размер блока с иконкой */
  width: 56px;
  height: 56px;
  /* Фон иконки — цвет из вашей палитры */
  background-color: #C4D7F2;
  /* Круглая форма */
  border-radius: 50%;
  /* Выравниваем иконку по центру */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Отступ снизу */
  margin-bottom: 18px;
  /* Плавная анимация */
  transition: background-color 0.3s ease;
}

.subpage-card__icon .fa,
.subpage-card__icon .fas {
  /* Размер иконки */
  font-size: 1.4rem;
  /* Цвет иконки */
  color: #2C3E50;
  transition: color 0.3s ease;
}

/* 4. ЗАГОЛОВОК */
.subpage-card__title {
  margin: 0 0 10px 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #2C3E50;
  line-height: 1.3;
}

/* 5. ОПИСАНИЕ */
.subpage-card__desc {
  margin: 0 0 30px 0;  /* Снизу побольше, чтобы стрелка была внизу */
  font-size: 0.9rem;
  color: #666666;
  line-height: 1.5;
  /* Чтобы описание не сжималось, а занимало доступное место */
  flex: 1;
}

/* 6. СТРЕЛКА */
.subpage-card__arrow {
  /* Располагаем стрелку справа внизу */
  align-self: flex-end;
  /* Размер шрифта */
  font-size: 1.2rem;
  /* Цвет стрелки */
  color: #2C3E50;
  /* Шрифт жирный */
  font-weight: 700;
  /* Плавная анимация */
  transition: transform 0.3s ease;
}

/* 7. ЭФФЕКТЫ ПРИ НАВЕДЕНИИ */
.subpage-card:hover {
  /* Поднимаем карточку */
  transform: translateY(-6px);
  /* Усиливаем тень */
  box-shadow: 0 12px 28px rgba(44, 62, 80, 0.15);
  /* Меняем цвет рамки */
  border-color: #C4D7F2;
}

.subpage-card:hover .subpage-card__icon {
  /* Меняем фон иконки при наведении */
  background-color: #2C3E50;
}

.subpage-card:hover .subpage-card__icon .fa,
.subpage-card:hover .subpage-card__icon .fas {
  /* Делаем иконку белой */
  color: #FFFFFF;
}

.subpage-card:hover .subpage-card__arrow {
  /* Сдвигаем стрелку вправо */
  transform: translateX(4px);
}

/* 8. АДАПТАЦИЯ ДЛЯ ТЕЛЕФОНОВ */
@media (max-width: 600px) {
  .subpages-grid {
    /* На маленьких экранах — одна колонка */
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .subpage-card {
    padding: 22px 18px 16px;
  }

  .subpage-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
  }

  .subpage-card__title {
    font-size: 1.05rem;
  }

  .subpage-card__desc {
    margin-bottom: 24px;
  }
}