/* ==========================================================================
   service_list.css — Список услуг (сетка карточек)
   ==========================================================================
   Брейкпоинты выровнены по Bootstrap 5:
     xxl  ≥ 1400px   (десктоп, полная ширина)
     xl   ≥ 1200px
     lg   ≥ 992px
     md   ≥ 768px
     sm   ≥ 576px
     xs   < 576px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Переменные страницы
   -------------------------------------------------------------------------- */
.services-page {
  --background: #ffffff;      /* фон страницы */
  --color-dark: #071621;      /* основной тёмный цвет текста */
  background: #ffffff;
  color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   Прозрачный фон у сетки и карточек (чтобы не перебивать фон страницы)
   -------------------------------------------------------------------------- */
.services-page .services-grid,
.services-page .service-card,
.services-page .service-card__thumb {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Шрифт — единый для всей страницы и вложенных элементов
   -------------------------------------------------------------------------- */
.services-page,
.services-page * {
  font-family: 'Nunito', Arial, sans-serif;
}

/* ==========================================================================
   Заголовок страницы
   ========================================================================== */
.services-page .services-page__title {
  font-size: 32px;
  font-weight: 600;
  color: var(--color-dark, #071621);
  margin: 0 0 100px;           /* нижний отступ до сетки */
  padding: 0 30px;             /* боковые отступы вместо calc-хака с фиксированной шириной */
}

/* ==========================================================================
   Сетка карточек
   --------------------------------------------------------------------------
   По умолчанию (≥ 1400 px) — 4 колонки, максимальная ширина 100%
   ========================================================================== */
.services-page .services-grid {
  max-width: 100%;             /* вместо фиксированной width: 1637px */
  margin: 0 auto 120px;       /* центрирование + нижний отступ */
  padding: 0 30px;            /* боковые поля */
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 колонки */
  justify-items: center;
  column-gap: 144px;          /* горизонтальный зазор между карточками */
  row-gap: 96px;              /* вертикальный зазор между рядами */
  box-sizing: border-box;
}

/* ==========================================================================
   Карточка услуги — базовые стили
   ========================================================================== */
.services-page .service-card {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;         /* центрируем содержимое по горизонтали */
  text-align: center;
}

/* --------------------------------------------------------------------------
   Обложка (миниатюра) карточки
   -------------------------------------------------------------------------- */
.services-page .service-card__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;        /* соотношение сторон */
  display: block;
  overflow: hidden;
  border-radius: 12px;         /* скруглённые углы */
}

/* Изображение внутри обложки — полностью заполняет контейнер */
.services-page .service-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* обрезка по центру */
  display: block;
  border-radius: 0;            /* скругление задаёт родитель */
}

/* --------------------------------------------------------------------------
   Заголовок карточки (ссылка)
   -------------------------------------------------------------------------- */
.services-page .service-card__title {
  display: inline-block;
  margin-top: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-dark, #071621);
  text-decoration: none;
}

/* Убираем подчёркивание и смену цвета во всех состояниях ссылки */
.services-page .service-card__title,
.services-page .service-card__title:visited,
.services-page .service-card__title:hover,
.services-page .service-card__title:active,
.services-page .service-card__title:focus {
  color: var(--color-dark, #071621);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Заглушка «нет услуг»
   -------------------------------------------------------------------------- */
.services-page .services-empty {
  max-width: 100%;             /* вместо фиксированной ширины 1637px */
  padding: 0 30px;
  margin: 0 auto 120px;
  color: #68707a;
  font-size: 18px;
}

/* ==========================================================================
   АДАПТИВНЫЕ СТИЛИ — Bootstrap 5 брейкпоинты
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1399.98px — «большой десктоп»
   Сетка по-прежнему 4 колонки, но уменьшаем зазоры
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  /* Заголовок — стандартный боковой отступ */
  .services-page .services-page__title {
    padding: 0 30px;
  }

  /* Уменьшаем зазоры, чтобы карточки не сжимались слишком сильно */
  .services-page .services-grid {
    padding: 0 30px;
    column-gap: 100px;
  }
}

/* --------------------------------------------------------------------------
   ≤ 1199.98px — «средний десктоп / большой планшет»
   Переключаемся на 3 колонки
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .services-page .services-grid {
    grid-template-columns: repeat(3, 1fr);   /* 3 колонки */
    column-gap: 80px;
  }
}

/* --------------------------------------------------------------------------
   ≤ 991.98px — «планшет»
   Переключаемся на 2 колонки, ещё компактнее зазоры
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .services-page .services-grid {
    grid-template-columns: repeat(2, 1fr);   /* 2 колонки */
    column-gap: 48px;
  }
}

/* --------------------------------------------------------------------------
   ≤ 575.98px — «мобильный»
   Одна колонка, заголовок по центру, минимальные отступы
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Заголовок страницы — центрируем, уменьшаем шрифт и отступ */
  .services-page .services-page__title {
    margin: 0 0 20px;
    padding: 0 12px;
    text-align: center;
    font-size: 22px;
  }

  /* Сетка — одна колонка, минимальные зазоры */
  .services-page .services-grid {
    width: 100%;
    padding: 0 12px;
    grid-template-columns: 1fr;              /* 1 колонка */
    column-gap: 12px;
    row-gap: 16px;
    justify-items: stretch;                  /* карточка растягивается на всю ширину */
  }

  /* Заголовок карточки — мельче шрифт, меньше отступ */
  .services-page .service-card__title {
    font-size: 14px;
    margin-top: 8px;
  }

  /* Заглушка «нет услуг» — компактнее */
  .services-page .services-empty {
    width: 100%;
    padding: 0 12px;
    margin: 0 auto 60px;
    text-align: center;
    font-size: 16px;
  }
}