/* ============================================================================
   Типографика статей — надстройка над css/styles.css
   ----------------------------------------------------------------------------
   Правила ниже применяются ТОЛЬКО внутри .art, поэтому лендинг не затрагивается.
   Всё, что обычно хочется подкрутить, собрано в одном блоке токенов — меняйте
   значения здесь, а не в разметке.

   Как это устроено:
   · шрифты те же, что на сайте (--font-display / --font-body из styles.css);
   · размеры заданы модульной шкалой с шагом 1.22 от базового кегля текста;
   · вертикальный ритм держат ДВА токена: --art-flow (между абзацами)
     и --art-section (между смысловыми разделами).
   ========================================================================== */

.art{
  /* — Кегли ---------------------------------------------------------------
     Базовый кегль текста. Всё остальное считается от него по шкале 1.22.
     На лендинге h2 доходит до 46px — для статьи это баннерный размер,
     поэтому здесь заголовки заметно тише. */
  --art-h1:        clamp(30px,   2.1vw + 20px,  46px);   /* на лендинге h1 до 64px — в колонке статьи это съедает первый экран */
  --art-text:      clamp(16.5px, 0.45vw + 15px, 18px);
  --art-lead:      clamp(19px,   0.9vw + 16px,  22px);   /* врез под заголовком */
  --art-h2:        clamp(25px,   1.5vw + 19px,  33px);
  --art-h3:        clamp(19px,   0.6vw + 17px,  22px);
  --art-small:     15px;                                  /* мета, источники, сноски */
  --art-micro:     13px;                                  /* метки и чипы */

  /* — Ритм и мера --------------------------------------------------------- */
  --art-measure:   68ch;   /* ширина колонки текста: 65–75 знаков — предел удобного чтения */
  --art-line:      1.72;   /* интерлиньяж основного текста */
  --art-line-tight:1.28;   /* интерлиньяж заголовков */
  --art-flow:      16px;                    /* между абзацами */
  --art-section:   clamp(38px, 4.5vw, 64px);/* между разделами */

  /* — Роли цвета ----------------------------------------------------------
     Зелёный на сайте закреплён за действием (кнопки, CTA) — в тексте он не
     используется, иначе ссылка спорит с кнопкой. Ссылки и цитаты — бирюзовые. */
  --art-accent:    var(--teal);
  --art-mark:      var(--green);
  --art-rule:      #e9ece0;

  max-width: var(--art-measure);
  margin: 0 auto;
  font-size: var(--art-text);
}

/* Разделы статьи: гасим унаследованный section{padding:var(--gap)} — иначе
   отступ раздела складывается с нашим ритмом и промежутки прыгают. */
.art section{ padding: 0; margin: 0 0 var(--art-section); }
.art section:last-child{ margin-bottom: 0; }

/* — Заголовки -------------------------------------------------------------- */
.art h1{ font-size: var(--art-h1); line-height: var(--art-line-tight); }
.art h2{ font-size: var(--art-h2); line-height: var(--art-line-tight); margin: 0 0 14px; }
.art h3{ font-size: var(--art-h3); line-height: 1.35; margin: 28px 0 10px; }

/* — Текст ------------------------------------------------------------------ */
.art p{ margin: 0 0 var(--art-flow); font-size: var(--art-text); line-height: var(--art-line); color: var(--ink); }
.art ul, .art ol{ margin: 0 0 20px; padding-left: 22px; }
.art li{ margin: 0 0 10px; font-size: var(--art-text); line-height: 1.65; }
.art li::marker{ color: var(--art-mark); }
.art strong{ font-weight: 700; }

/* Ссылка внутри текста. В styles.css глобально a{color:inherit;text-decoration:none},
   поэтому без явного правила ссылка в абзаце неотличима от обычного текста. */
.art p a, .art li a, .text-link{
  color: var(--art-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
.art p a:hover, .art li a:hover, .text-link:hover{ color: var(--green-700); }
.art a:focus-visible, .text-link:focus-visible{
  outline: 2px solid var(--art-accent); outline-offset: 3px; border-radius: 2px;
}

/* — Шапка статьи -----------------------------------------------------------
   Только padding-top. Шорткат `padding: X 0 0` здесь обнулял и боковые поля
   .container (24px, на мобильном 18px) — статья стояла вплотную к краям
   экрана, на телефоне текст упирался в рамку. Ширину колонки при этом держит
   --art-measure, и боковые поля теперь входят в неё: 68ch минус 48px ≈ 63
   знака в строке — по-прежнему внутри комфортного диапазона. */
.art-hero{ padding-top: clamp(28px, 5vw, 52px); }
.art-meta{
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  font-size: var(--art-small); color: var(--gray); margin: 18px 0 26px;
}
.art-meta time{ font-weight: 500; color: var(--green-700); }

/* — Короткий ответ: смысловой центр страницы ------------------------------
   Единственный акцентный блок статьи. Всё остальное намеренно тихое. */
.answer{
  margin: 0 0 var(--art-section);   /* тот же ритм, что между разделами */
  border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 32px);
  background: var(--bg-soft);
  border: 1px solid rgba(160, 200, 20, .45);
  border-left: 5px solid var(--art-mark);
  box-shadow: var(--shadow);
}
/* Метка — тоже <p>, поэтому селектор с .art: иначе .art p перебивает её
   по специфичности и метка получает кегль основного текста. */
.art .answer__label{
  display: inline-block; margin: 0 0 10px;
  font-size: var(--art-micro); font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--green-700);
}
.answer p{ margin-bottom: 12px; }
.answer p:last-child{ margin-bottom: 0; }
/* Первый абзац после метки — сам ответ, он крупнее остального текста.
   Целимся именно в него, а не в :first-of-type: первым <p> идёт метка. */
.answer__label + p{ font-size: var(--art-lead); font-weight: 500; line-height: 1.5; }

/* — Цитата источника ------------------------------------------------------- */
.quote{
  margin: 0 0 20px; padding: 18px 22px;
  border-left: 4px solid var(--art-accent);
  background: var(--bg-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.quote p{ margin: 0 0 8px; font-style: italic; }
.quote cite{ font-style: normal; font-size: var(--art-small); color: var(--gray); }
/* строка «Источник: …» под разделом — тот же вид, что у подписи цитаты */
.art p.art-src{ font-size: var(--art-small); color: var(--gray); margin-top: 6px; }

/* — Шаги: нумерация здесь несёт смысл (порядок действий), а не украшает ---- */
.steps{ counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li{ counter-increment: s; position: relative; padding-left: 52px; margin-bottom: 20px; }
.steps li::before{
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--art-mark); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps b{ display: block; margin-bottom: 4px; }

/* — Вопросы и ответы ------------------------------------------------------- */
.faq details{ border-bottom: 1px solid var(--art-rule); padding: 16px 0; }
.faq summary{
  cursor: pointer; font-weight: 500; font-size: calc(var(--art-text) + 0.5px);
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; color: var(--green-700); font-size: 24px; line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after{ content: "–"; }
.faq details p{ margin: 12px 0 0; color: var(--gray); }
.faq summary:focus-visible{ outline: 2px solid var(--art-accent); outline-offset: 4px; border-radius: 4px; }

/* — Города ----------------------------------------------------------------- */
.cities{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.cities li{
  margin: 0; background: var(--bg-soft); border: 1px solid var(--art-rule);
  border-radius: 100px; padding: 7px 16px; font-size: var(--art-small);
}

/* — Служебное: источники и оговорка ---------------------------------------- */
.sources{ font-size: var(--art-small); color: var(--gray); }
.sources li{ margin-bottom: 8px; font-size: var(--art-small); }
.notice{
  font-size: var(--art-small); color: var(--gray);
  border-top: 1px solid var(--art-rule); padding-top: 18px;
}

/* — Форма внутри статьи ----------------------------------------------------
   На лендинге форма лежит в позиционированной секции .contact. Здесь такой
   секции нет, и скрытые чекбоксы мессенджеров (position:absolute) считают
   точкой отсчёта окно — из-за чего растягиваются на всю ширину экрана. */
.art .form{ position: relative; }

/* Чипы мессенджеров — те же фирменные заливки, что на лендинге. */
.msgr-chip .msgr-ico{ width: 30px; height: 30px; }
.msgr-chip span{ color: #fff; border: none; height: 50px; }
.msgr-chip span:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.msgr-chip span::after{ border-color: rgba(255, 255, 255, .85); background: transparent; }
.msgr-chip input:checked + span{ box-shadow: 0 0 0 3px rgba(0, 0, 0, .16); }
.msgr-chip input:checked + span::after{
  border-color: #fff; background-color: #fff; background-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E");
}
.msgr-chip--wa span, .msgr-chip--wa input:checked + span{ background: #25D366; }
.msgr-chip--tg span, .msgr-chip--tg input:checked + span{ background: #2AABEE; }
.msgr-chip--max span, .msgr-chip--max input:checked + span{ background: #6A4DE6; }
.msgr-chip--vk span, .msgr-chip--vk input:checked + span{ background: #0077FF; }

/* — Лёгкий блок обращения --------------------------------------------------
   Тише, чем .cta-band: тот тяжёлый, с фото и градиентом, и двух таких на
   статью достаточно. Этот ставится там, где у читателя возникает вопрос. */
.art-cta{
  margin: 0 0 var(--art-section);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--art-rule);
  border-left: 5px solid var(--art-accent);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.art-cta h3{ margin: 0 0 8px; }
.art-cta p{ margin: 0 0 18px; color: var(--gray); }
.art-cta__btns{ display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px){
  .art-cta__btns{ flex-direction: column; }
  .art-cta__btns .btn{ text-align: center; }
}

/* Ссылка на Telegram внутри абзаца. Класс .btn--tg оставлен намеренно: на него
   в js/main.js навешана цель click_telegram. Здесь он гасится до вида ссылки. */
.art p a.btn--tg{
  background: none; box-shadow: none; padding: 0; border-radius: 0;
  font-weight: inherit; font-size: inherit; color: var(--art-accent);
}
.art p a.btn--tg:hover{ background: none; color: var(--green-700); }

/* — Форма в середине статьи ------------------------------------------------ */
.art-offer{ margin: 0 0 var(--art-section); }
.art-offer > p{ margin-bottom: 22px; }

/* — Панель обращения ------------------------------------------------------
   .cta-band из styles.css рассчитан на широкую секцию лендинга: фото Берлина
   под лайм-бирюзовым градиентом. В колонке статьи это разваливается, причём
   по трём независимым причинам:

   1. background-attachment:fixed привязывает кадр к ОКНУ, а не к блоку.
      В вырез шириной ~690px попадает вертикальный срез фотографии — ровно
      с телебашней, и она проходит поперёк заголовка и кнопки в обоих блоках.
   2. Белый заголовок на лаймовой половине градиента даёт контраст 2.2:1 —
      ниже минимума 3:1 даже для крупного текста.
   3. Абзац при этом оставался тёмным: .art p (0-2-0) перебивает
      .cta-band p (0-1-1), и в одном блоке оказывалось два цвета текста
      с противоположной логикой.

   Поэтому блок переопределён целиком: плотная тёмно-зелёная панель без фото,
   выключка влево по той же оси, что и текст статьи. Тёмный фон — смена
   регистра: в светлой статье он встречается только там, где зовут к действию.
   Селекторы с .art (0-2-0 и выше) — чтобы гарантированно перебить и
   styles.css, и собственные правила .art выше по файлу. */
.art .cta-band{
  --band-text: #c9d6ba;                 /* 9.5:1 на панели — спокойнее белого */
  --band-rule: rgba(160, 200, 20, .26);

  margin: 0 0 var(--art-section);
  padding: clamp(26px, 3.2vw, 36px);
  /* шорткат, а не background-color: он заодно сбрасывает градиент и фото */
  background: var(--bg-dark);
  border-radius: var(--radius);
  /* --shadow-lg рассчитана на светлые карточки: под тёмной панелью она
     читается как серый ореол. Панель отделяет от фона сам контраст. */
  box-shadow: none;
  text-align: left;
  color: var(--band-text);
}
.art .cta-band h2{
  color: #fff;
  font-size: var(--art-h2);
  max-width: 30ch;          /* заголовок ломается в две строки, а не в одну длинную */
  margin: 0 0 12px;
}
.art .cta-band p{
  color: var(--band-text);
  font-size: var(--art-text);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 26px;
}

/* Опоры оффера: во втором блоке это были четыре довода, слипшиеся в один
   абзац на шесть строк. Разделены линиями, а не карточками — это перечень
   фактов, а не набор плиток. */
.art .band-facts{
  list-style: none; margin: 0 0 28px; padding: 0;
  border-top: 1px solid var(--band-rule);
}
.art .band-facts li{
  margin: 0; padding: 13px 0;
  border-bottom: 1px solid var(--band-rule);
  font-size: var(--art-small);
  line-height: 1.5;
  color: var(--band-text);
}
.art .band-facts b{
  display: block; margin-bottom: 3px;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--art-text); color: #fff;
}

/* Кнопка: на панели она самый светлый элемент — туда и уходит взгляд.
   Тёмная подпись на лайме даёт 8.6:1 против 3.7:1 у прежней белой пилюли.
   Осветление на наведении — тот же приём, что у чипов мессенджеров выше:
   штатный hover .btn уводит фон в --green-600, то есть на тёмной панели
   кнопка бы гасла. */
.art .cta-band .btn{
  background: var(--green); color: #16210d; box-shadow: none;
}
.art .cta-band .btn:hover{
  background: var(--green); filter: brightness(1.08); box-shadow: none;
}
.art .cta-band .btn:focus-visible{
  outline: 2px solid #fff; outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .art *, .art *::before, .art *::after{
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* — Блог: список статей ----------------------------------------------------
   Карточка — одна ссылка целиком. Правила с .art, потому что без него
   `.art p` и `.art h2` перебивают размеры по специфичности. */
.art .blog-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }   /* .art ul задаёт отступ слева — с .art перебиваем */
.art .blog-list li{ margin: 0; }
.art a.blog-card{
  display: block; padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--art-rule); border-radius: var(--radius);
  background: #fff; color: var(--ink); text-decoration: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.art a.blog-card:hover{ box-shadow: var(--shadow); border-color: rgba(160, 200, 20, .45); }
.art .blog-card__meta{ font-size: var(--art-micro); letter-spacing: .4px; color: var(--gray); margin: 0 0 8px; }
.art .blog-card h2{ font-size: var(--art-h3); line-height: 1.3; margin: 0 0 8px; }
.art .blog-card p{ font-size: var(--art-small); line-height: 1.6; color: var(--gray); margin: 0; }
.art .related{ margin-top: 0; }