/* ============================================
   Статья: списки, пуллквот, вопрос-ответ, финал
   Figma: узлы 7699:1766, 7695:2548, 7673:1727
   ============================================ */

/* ---------- Акцентный заголовок раздела (block style «serif») ---------- */

.article-body h2.is-style-serif {
  color: var(--c-terracotta-dark);
  font-family: var(--font-serif);
  font-size: 56px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

/* ---------- Нумерованный список (рейтинг) ---------- */

.article-body ol {
  counter-reset: article-ol;
  list-style: none;
}

.article-body ol > li {
  border-bottom: 1px solid rgba(64, 23, 6, 0.2);
  counter-increment: article-ol;
  display: grid;
  column-gap: 16px;
  grid-template-columns: 48px 1fr;
  padding-bottom: 32px;
  margin-top: 32px;
}

.article-body ol > li:first-child {
  margin-top: 0;
}

.article-body ol > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.article-body ol > li::before {
  color: var(--c-terracotta-dark);
  content: counter(article-ol);
  font-family: var(--font-serif);
  font-size: 56px;
  font-style: italic;
  grid-row: span 2;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.article-body ol > li strong {
  display: block;
  font-family: var(--font-serif-text);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.article-body ol > li {
  color: var(--c-gray);
}

/* ---------- Маркированный список ---------- */

.article-body ul {
  list-style: none;
}

.article-body ul > li {
  align-items: baseline;
  color: var(--c-black);
  display: flex;
  /* Шрифт пунктов = основной текст статьи (решение редакции в трекере 17.08,
     прежний крупный serif 25px им мешал). inherit наследует и мобильные
     размеры тела автоматически. Терракотовые буллеты остаются. */
  font: inherit;
  gap: 16px;
  letter-spacing: inherit;
  margin-top: 24px;
}

.article-body ul > li:first-child {
  margin-top: 0;
}

.article-body ul > li::before {
  background: var(--c-terracotta-dark);
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 15px;
  transform: translateY(2px);
  width: 15px;
}

/* ---------- Пуллквот (core blockquote) ---------- */

.article-body blockquote {
  border-left: 3px solid var(--c-terracotta-dark);
  padding: 0 16px;
}

.article-body blockquote p {
  font-family: var(--font-serif-text);
  font-size: 25px;
  letter-spacing: -0.03em;
  line-height: normal;
}

.article-body blockquote p::before {
  color: var(--c-terracotta-dark);
  content: "« ";
}

.article-body blockquote p::after {
  color: var(--c-terracotta-dark);
  content: " »";
}

.article-body blockquote cite {
  color: var(--c-gray);
  display: block;
  font-family: var(--font-mono);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 16px;
  text-transform: uppercase;
}

/* ---------- Вопрос-ответ ---------- */

.article-faq {
  margin-top: 40px;
}

.article-faq__header {
  border-bottom: 1px solid rgba(64, 23, 6, 0.2);
  border-top: 1px solid rgba(64, 23, 6, 0.2);
  color: var(--c-gray);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
  padding: 24px 0;
  text-transform: uppercase;
}

.article-faq__item {
  margin-top: 32px;
}

.article-faq__item:first-of-type {
  margin-top: 0;
}

.article-faq__question {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.4;
}

.article-faq__answer {
  margin-top: 32px;
  max-height: 84px;
  overflow: hidden;
  position: relative;
}

.article-faq__answer::after {
  background: linear-gradient(to bottom, rgba(239, 237, 232, 0) 0%, var(--c-cream) 100%);
  bottom: 0;
  content: "";
  height: 60px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.article-faq__item.is-open .article-faq__answer {
  max-height: none;
}

.article-faq__item.is-open .article-faq__answer::after {
  display: none;
}

.article-faq__toggle {
  color: var(--c-gray);
  margin-top: 16px;
}

.article-faq__toggle img {
  transition: transform 0.2s ease;
}

.article-faq__item.is-open .article-faq__toggle img {
  transform: rotate(180deg);
}

/* ---------- Читайте также (после тела) ---------- */

.article-related {
  margin-top: 80px;
}

.article-related__header {
  border-top: 2px solid rgba(64, 23, 6, 0.3);
  color: var(--c-terracotta-dark);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding-top: 24px;
  text-transform: uppercase;
}

.article-related__list {
  margin-top: 40px;
}

.article-related__item {
  border-bottom: 1px solid rgba(64, 23, 6, 0.2);
  display: flex;
  gap: 25px;
  margin-top: 32px;
  padding-bottom: 32px;
}

.article-related__item:first-child {
  margin-top: 0;
}

/* Фото держит свой размер: flex-элементом здесь идёт ссылка-обёртка, а не
   сам <img>, и без запрета на сжатие соседний заголовок утягивал её ширину
   (на 375 фото выходило ~40px вместо 96). min-width тексту — чтобы длинное
   слово в заголовке не распирало строку. */
.article-related__item > a {
  flex-shrink: 0;
}

.article-related__item > div {
  min-width: 0;
}

.article-related__photo {
  flex-shrink: 0;
  height: 130px;
  object-fit: cover;
  width: 130px;
}

.article-related__title {
  display: block;
  font-family: var(--font-serif-text);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: normal;
}

.article-related__text {
  color: var(--c-gray);
  font-size: 16px;
  letter-spacing: -0.02em;
  margin-top: 16px;
}

/* ---------- Блок «Интерактив» (CTA) ---------- */

.article-cta {
  border: 1px solid var(--c-terracotta-dark);
  margin-top: 80px;
  padding: 32px;
}

.article-cta__label {
  color: var(--c-terracotta-dark);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-cta__row {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-top: 40px;
}

.article-cta__title {
  font-family: var(--font-serif-text);
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
}

.article-cta__text {
  margin-top: 16px;
  max-width: 621px;
}

/* ---------- Размеры иконок (svg из Figma приходят с width=100%) ---------- */

.btn--dark img {
  height: 10px;
  width: 6px;
}

.aside-newsletter__submit img {
  height: 9px;
  width: 13px;
}

.article-faq__toggle img,
.article-note__toggle img {
  height: 6px;
  width: 10px;
}

.side-partner__more img,
.side-special__all img {
  height: 15px;
  width: 15px;
}

/* Правая колонка: подписка и печатная версия прижаты к низу колонки,
   но сама колонка заканчивается выше центра (в макете низ сайдбара
   ~440px выше низа зоны — напротив «Читайте также»/начала интерактива) */
.article-side--right {
  display: flex;
  flex-direction: column;
  padding-bottom: 440px;
}

.article-side--right .aside-newsletter {
  margin-top: auto;
}

@media (max-width: 1100px) {
  .article-side--right {
    padding-bottom: 0;
  }
}

/* Тёмно-терракотовая кнопка (Primary Button из макета статьи) */
.btn--dark {
  align-items: center;
  background: var(--c-terracotta-dark);
  color: var(--c-cream);
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
  height: 53px;
  letter-spacing: 0.04em;
  max-width: 100%;
  padding: 16px 32px;
  text-transform: uppercase;
  transition: background 0.2s ease;
  white-space: nowrap;
}

/* Тот же ход, что у .btn в base.css: по UI-kit (7555:3174) терракота на hover
   СВЕТЛЕЕТ (#a95635 → #c37044), а не темнеет. Класс самостоятельный — базовый
   .btn на нём не стоит, поэтому и переход, и состояние задаём здесь. */
.btn--dark:hover {
  background: var(--c-terracotta);
}

/* ---------- Сайдбар финала: тёмная подписка ---------- */

.aside-newsletter {
  background: var(--c-terracotta-dark);
  margin-top: 40px;
  padding: 32px;
}

.aside-newsletter__label {
  color: rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aside-newsletter__title {
  color: var(--c-cream);
  font-family: var(--font-serif);
  font-size: 40px;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin-top: 32px;
}

.aside-newsletter__text {
  color: var(--c-white);
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-top: 32px;
}

.aside-newsletter__form {
  margin-top: 40px;
}

.aside-newsletter__input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(214, 214, 214, 0.5);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 16px 16px 8px;
  text-transform: uppercase;
  width: 100%;
}

.aside-newsletter__input::placeholder {
  color: rgba(214, 214, 214, 0.5);
}

.aside-newsletter__submit {
  align-items: center;
  background: var(--c-cream);
  color: var(--c-terracotta-dark);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
  height: 53px;
  letter-spacing: 0.04em;
  margin-top: 32px;
  padding: 16px 32px;
  text-transform: uppercase;
}

.aside-newsletter__disclaimer {
  color: rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: italic;
  margin-top: 16px;
}

.aside-newsletter .form-message {
  color: var(--c-cream);
}

/* ---------- Сайдбар финала: печатная версия ---------- */

.aside-print {
  border: 1px solid var(--c-terracotta-dark);
  margin-top: 40px;
  padding: 16px;
}

.aside-print__label {
  color: var(--c-terracotta-dark);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aside-print__row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

/* Текстовая часть промо: в узкой колонке уходит под обложку целиком,
   а не выдавливает кнопку за границы блока */
.aside-print__row > div {
  flex: 1 1 200px;
  min-width: 0;
}

.aside-print__cover {
  flex-shrink: 0;
  height: 196px;
  object-fit: cover;
  width: 131px;
}

.aside-print__title {
  color: var(--c-dark-gray);
  font-family: var(--font-serif-text);
  font-size: 30px;
  font-weight: 400;
  line-height: normal;
}

.aside-print__text {
  color: var(--c-gray);
  font-size: 16px;
  letter-spacing: -0.02em;
  margin-top: 16px;
}

.aside-print__row .btn--dark {
  margin-top: 16px;
}

/* ---------- Адаптив ---------- */

/* Узкие 3 колонки: 40-й кегль подписки не влезает.
   min-width-гейт, чтобы не менять планшетную одноколонку (там блок во всю ширину) */
@media (min-width: 1101px) and (max-width: 1280px) {
  .aside-newsletter__title {
    font-size: 32px;
    overflow-wrap: break-word;
  }
}

@media (max-width: 1024px) {
  .article-body h2.is-style-serif {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  /* «Читайте также» на мобилке — только фото и заголовок, без подзагов:
     блок сжимается по высоте (баг-лист 12.08). */
  .article-related__text {
    display: none;
  }

  .article-body h2.is-style-serif {
    font-size: 32px;
  }

  .article-body ol > li::before {
    font-size: 40px;
  }

  /* ul > li здесь больше не нужен: пункт наследует мобильный размер тела
     через font: inherit в базовом правиле. */
  .article-body ol > li strong,
  .article-body blockquote p {
    font-size: 20px;
  }

  .article-faq__question {
    font-size: 22px;
  }

  .article-related__photo {
    height: 96px;
    width: 96px;
  }

  .article-cta {
    padding: 20px;
  }

  .article-cta__row {
    flex-direction: column;
  }

  .article-cta__title {
    font-size: 28px;
  }

  .aside-newsletter__title {
    font-size: 32px;
  }

  /* «Печатная версия» на мобилке — компакт по мобильной карте (7992:3579):
     без обложки, мелкий заголовок, кнопка во всю ширину блока. */
  .aside-print__cover {
    display: none;
  }

  .aside-print__label {
    font-size: 12px;
  }

  .aside-print__title {
    font-size: 20px;
  }

  .aside-print__text {
    font-size: 13px;
    margin-top: 8px;
  }

  .aside-print__row {
    flex-direction: column;
    margin-top: 16px;
  }

  .aside-print__row .btn--dark {
    justify-content: center;
    width: 100%;
  }
}