/* Типографика текстовых (посадочных) страниц и SEO-блоков.

   Отдельный файл, потому что style.min.css собирается из исходников сборкой.
   Переменные (--primary и др.) объявлены там же, поэтому здесь везде
   продублирован запасной цвет — на случай, если файл подключат отдельно.

   Важно: ширину колонки и стили ссылок задаём только прямым потомкам
   .seo-page / .seo-text — то есть абзацам, спискам и заголовкам статьи.
   Если стилизовать всех потомков, под правила попадает и каталог программ,
   вставленный в середину статьи: карточки сжимаются до текстовой колонки,
   а ссылка-картинка и «Подробнее» получают зелёное подчёркивание. */

.seo-page,
.seo-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--primary-text, #171717);
}

/* Блок в конце готовых лендингов (главная, «О методе», карточка программы). */
.seo-text {
  margin-bottom: 64px;
  padding-top: 8px;
}

/* Комфортная длина строки — только у текста. Каталог остаётся во всю ширину. */
.seo-page__title,
.seo-page > h2,
.seo-page > h3,
.seo-page > h4,
.seo-page > p,
.seo-page > ul,
.seo-page > ol,
.seo-text > h2,
.seo-text > h3,
.seo-text > h4,
.seo-text > p,
.seo-text > ul,
.seo-text > ol {
  max-width: 900px;
}

/* H1 стоит вне .seo-page: между ним и текстом идёт функциональный блок
   (каталог, калькулятор, отзывы или вопросы). */
.seo-page__title {
  margin: 0 0 32px;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-align: left;
}

/* text-align и max-width у h2 тема задаёт для секций главной; в сплошном
   тексте заголовок должен идти слева и на всю ширину колонки. */
.seo-page > h2,
.seo-text > h2 {
  margin: 40px 0 16px;
  font-size: 26px;
  line-height: 1.25;
  text-align: left;
  max-width: 900px;
}

.seo-page > h3,
.seo-text > h3 {
  margin: 28px 0 12px;
  font-size: 20px;
  line-height: 1.3;
  text-align: left;
}

.seo-page > h2:first-child,
.seo-text > h2:first-child {
  margin-top: 0;
}

.seo-page > p,
.seo-text > p {
  margin: 0 0 16px;
}

.seo-page > ul,
.seo-page > ol,
.seo-text > ul,
.seo-text > ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.seo-page li,
.seo-text li {
  margin-bottom: 8px;
}

/* Ссылки — только в тексте статьи. Внутри карточек товара своя вёрстка. */
.seo-page > p a,
.seo-page > ul a,
.seo-page > ol a,
.seo-text > p a,
.seo-text > ul a,
.seo-text > ol a {
  color: var(--primary, #7a972d);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s, border-color 0.2s;
}

.seo-page > p a:hover,
.seo-page > ul a:hover,
.seo-page > ol a:hover,
.seo-text > p a:hover,
.seo-text > ul a:hover,
.seo-text > ol a:hover {
  color: var(--primary-darked, #5a6f24);
}

/* Каталог программ на /programmyi.html. На главной карточка лежит в слайде
   swiper и берёт от него фиксированные 315px; здесь слайдера нет, поэтому
   раскладку задаёт сетка, а жёсткую ширину карточки снимаем. */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px 24px;
}

.programs-grid .p-card {
  width: auto;
  min-width: 0;
  margin: 0;
}

.programs-grid .p-card picture,
.programs-grid .p-card img {
  max-width: 100%;
  height: auto;
}

/* Кнопка прижата к низу, чтобы ряд карточек выглядел ровным при разной
   длине названий программ. */
.programs-grid .p-card .btn {
  margin-top: auto;
}

@media screen and (max-width: 768px) {
  .seo-page,
  .seo-text {
    font-size: 15px;
  }

  .seo-page__title {
    font-size: 30px;
    margin-bottom: 24px;
  }

  .seo-page > h2,
  .seo-text > h2 {
    font-size: 22px;
    margin-top: 32px;
  }

  .seo-page > h3,
  .seo-text > h3 {
    font-size: 18px;
  }

  .programs-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px 16px;
  }
}

@media screen and (max-width: 560px) {
  .programs-grid {
    grid-template-columns: 1fr;
  }
}