/* ==========================================================================
   service_detail.css — Детальная страница услуги
   ==========================================================================
   Брейкпоинты выровнены по Bootstrap 5:
     lg   ≥ 992px   → max-width: 991.98px
     md   ≥ 768px   → max-width: 767.98px
     sm   ≥ 576px   → max-width: 575.98px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Корневой контейнер страницы
   -------------------------------------------------------------------------- */
.service-detail {
  background: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-primary);
}

/* --------------------------------------------------------------------------
   Заголовок услуги
   -------------------------------------------------------------------------- */
.service-detail__title {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   Бейдж «Новинка»
   -------------------------------------------------------------------------- */
.service-chip-new {
  background-color: var(--color-detail);
  color: var(--color-dark);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  border-radius: 20px;
  height: 45px;
  padding: 0 14px;
}

/* --------------------------------------------------------------------------
   Медиа-блок (обложка)
   -------------------------------------------------------------------------- */
.service-detail__media {
  width: 100%;
  height: 360px;               /* фиксированная высота на десктопе */
  overflow: hidden;
}

/* Изображение — заполняет контейнер с обрезкой */
.service-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* ==========================================================================
   Контент из админки (WYSIWYG / CKEditor)
   ========================================================================== */
.service-detail__text {
  font-size: var(--font-size-lg); /* 20px */
  line-height: 1.7;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Параграфы */
.service-detail__text p {
  margin: 0 0 12px;
}

/* Подзаголовки внутри текста */
.service-detail__text h2,
.service-detail__text h3,
.service-detail__text h4 {
  margin: 20px 0 10px;
  line-height: 1.3;
  color: var(--color-dark);
}
.service-detail__text h2 { font-size: var(--font-size-xl); font-weight: 800; } /* 24px */
.service-detail__text h3 { font-size: 22px; font-weight: 700; }
.service-detail__text h4 { font-size: var(--font-size-lg); font-weight: 700; }

/* Списки */
.service-detail__text ul,
.service-detail__text ol {
  margin: 0 0 14px 1.2em;
  padding: 0;
}
.service-detail__text ul { list-style: disc; }
.service-detail__text ol { list-style: decimal; }
.service-detail__text li { margin: 6px 0; line-height: 1.6; }

/* Ссылки */
.service-detail__text a {
  color: var(--color-blue);
  text-decoration: underline;
}
.service-detail__text a:hover { text-decoration: none; }

/* Картинки внутри текста */
.service-detail__text img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px 0;
  border-radius: 0;
}

/* Таблицы */
.service-detail__text table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 18px;
  line-height: 1.5;
}
.service-detail__text th,
.service-detail__text td {
  border: 1px solid rgba(7, 22, 33, .12);
  padding: 10px 12px;
  text-align: left;
}
.service-detail__text th {
  background: rgba(7, 22, 33, .04);
  font-weight: 700;
}

/* ==========================================================================
   Чек-лист (список преимуществ с галочками)
   ========================================================================== */
.service-detail__features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-detail__features li {
  position: relative;
  padding-left: 40px;          /* место под иконку-галочку */
  margin: 12px 0;
  font-size: var(--font-size-lg); /* 20px */
  line-height: 1.6;
  text-align: left;
  word-break: break-word;
}

/* Иконка-галочка перед каждым пунктом */
.service-detail__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 28px;
  height: 28px;
  background-image: var(--checkmark-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .95;
}

/* --------------------------------------------------------------------------
   Цена услуги
   -------------------------------------------------------------------------- */
.service-detail__price {
  font-size: var(--font-size-lg);
  line-height: 1.2;
}
.service-detail__price b { font-weight: 800; }

/* ==========================================================================
   Кнопка CTA (призыв к действию)
   ========================================================================== */
.cta-btn {
  display: inline-block;
  position: relative;
  width: 305px;
  height: 52px;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--transition-fast);
  line-height: 0;
}

/* Фоновая картинка кнопки */
.cta-btn img { width: 100%; height: 100%; display: block; }

/* Текстовая надпись поверх фона */
.cta-btn__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-light);
  user-select: none;
  pointer-events: none;
}

/* Ховер-эффект — лёгкое увеличение */
.cta-btn:hover { transform: scale(1.03); }

/* Фокус для клавиатурной навигации */
.cta-btn:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Ссылка «Назад»
   -------------------------------------------------------------------------- */
.service-detail__back a {
  font-weight: var(--font-weight-semibold);
}

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

/* --------------------------------------------------------------------------
   ≤ 991.98px — «планшет»
   Уменьшаем высоту обложки и размеры шрифтов контента
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Обложка — чуть ниже */
  .service-detail__media { height: 300px; }

  /* Текст и чек-лист — 18px вместо 20px */
  .service-detail__text { font-size: 18px; }
  .service-detail__features li { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   ≤ 767.98px — «мобильный / маленький планшет»
   Компактная вёрстка: мельче шрифты, авто-высота обложки
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Заголовок — уменьшаем */
  .service-detail__title { font-size: 22px; }

  /* Бейдж «Новинка» — компактнее */
  .service-chip-new {
    height: 28px;
    font-size: 13px;
    border-radius: 14px;
    padding: 0 10px;
  }

  /* Обложка — высота по содержимому, соотношение 16:9 */
  .service-detail__media {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Текст — мельче шрифт, без justify на узком экране */
  .service-detail__text {
    font-size: 16px;
    line-height: 1.65;
    text-align: left;           /* justify плохо смотрится на мобильных */
  }

  /* Чек-лист — компактнее отступы и шрифт */
  .service-detail__features li {
    padding-left: 32px;
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.55;
  }
  .service-detail__features li::before {
    width: 20px;
    height: 20px;
    top: .25em;
  }

  /* Кнопка CTA — на всю ширину экрана */
  .cta-btn { width: 100%; }
  .cta-btn__label { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   ≤ 575.98px — «узкий мобильный»
   Минимальные размеры шрифтов и иконок
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Заголовок — ещё мельче */
  .service-detail__title { font-size: 20px; }

  /* Надпись на кнопке — мельче */
  .cta-btn__label { font-size: 16px; }

  /* Чек-лист — минимальный размер */
  .service-detail__features li { font-size: 15px; padding-left: 30px; }
  .service-detail__features li::before { width: 18px; height: 18px; }
}