/* ===== ARTICLE STYLES ===== */
/* Подключается во всех статьях: <link rel="stylesheet" href="article.css">
   После подключения — удалить <style> блок из статьи.
   h1 font-size оставить в каждой статье индивидуально (зависит от длины заголовка). */

*, *::before, *::after { box-sizing: border-box; }

.art-section { background: var(--dark); overflow-x: hidden; }

.art-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
}

/* 2 колонки: текст + медиа */
.art-cols { display: flex; align-items: center; gap: 25px; }
.art-cols__text {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 30px;
}
.art-cols__media { flex: 1 1 0; min-width: 0; }
.art-cols__media img { display: block; width: 100%; height: auto; }

/* медиа с градиентом-затемнением слева */
.art-media { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.art-media img { display: block; width: 100%; height: auto; }
.art-media::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(15,18,21,0) 45%, var(--dark) 100%);
  pointer-events: none;
}

/* шапка блока */
.art-head { display: flex; flex-direction: column; gap: 29px; }

/* карточка-блок */
.art-card {
  background: #14181B;
  outline: 1px solid rgba(255,255,255,0.25);
  outline-offset: -1px;
  padding: 50px;
  display: flex; flex-direction: column; gap: 30px;
}

/* текст с красной чертой слева */
.art-quote { padding-left: 25px; border-left: 2px solid var(--red); }
.art-quote p { font-size: 16px; line-height: 1.5; color: var(--text); }
.art-quote p + p { margin-top: 10px; }
.art-quote strong { font-weight: 700; color: var(--text); }
/* если внутри quote есть список — убираем левую черту */
.art-quote:has(.art-list) { border-left: none; padding-left: 0; }

.art-stack { display: flex; flex-direction: column; gap: 20px; }
.art-divider { height: 1px; background: rgba(255,255,255,0.25); }

.art-text { font-size: 16px; line-height: 1.5; color: var(--text); }
.art-text strong { font-weight: 700; }

/* Списки */
.art-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 14px;
  padding-left: 0; margin: 0;
}
.art-list li { font-size: 16px; line-height: 1.5; color: var(--text); }
.art-list strong { font-weight: 700; }

/* маркированные */
.art-list:not(.art-list--num) li { padding-left: 20px; position: relative; }
.art-list:not(.art-list--num) li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: var(--red);
}

/* нумерованные */
.art-list--num { counter-reset: step; }
.art-list--num li { position: relative; padding-left: 42px; }
.art-list--num li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px;
  background: var(--red-dark);
  color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.art-link { display: inline-flex; color: var(--red); font-size: 16px; text-decoration: none; line-height: 1.4; }
.art-link:hover { text-decoration: underline; }
.art-links { display: flex; flex-direction: column; gap: 12px; }

.art-note {
  font-size: 16px; line-height: 1.5; color: var(--text);
  padding: 18px 20px; background: rgba(255,255,255,0.04);
  border-left: 2px solid var(--red);
}

/* Таблица */
.art-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art-table {
  width: 100%; border-collapse: collapse;
  font-size: 16px; color: var(--text); min-width: 560px;
}
.art-table th, .art-table td {
  border: 1px solid rgba(255,255,255,0.25);
  padding: 14px 16px; text-align: left; line-height: 1.4; vertical-align: top;
}
.art-table th { background: rgba(255,255,255,0.04); font-weight: 700; }

/* Читайте также */
.art-related__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.art-related__list a {
  display: block; padding: 20px 24px;
  background: #14181B; outline: 1px solid rgba(255,255,255,0.25); outline-offset: -1px;
  color: var(--text); text-decoration: none; font-size: 16px; line-height: 1.3;
  transition: outline-color 0.2s, color 0.2s;
}
.art-related__list a:hover { outline-color: rgba(255,255,255,0.5); color: var(--red); }

/* Кнопки */
.art-cols__text .button,
.art-card .button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
}
/* CTA-баннер: перебиваем style.css который делает кнопку width:100% на мобилке */
.cta-banner__content .button--service {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* FAQ */
.faq__answer { border-left: none; padding-left: 0; }

/* H1 */
.art-cols__text h1 {
  font-size: 58px;
  line-height: 0.94;
  overflow-wrap: break-word;
}

/* ===== АДАПТИВ ===== */
@media (max-width: 768px) {
  .art-container { padding: 32px 20px; max-width: 100%; }
  .art-cols { flex-direction: column; align-items: stretch; }
  .art-media::before { display: none; }
  .art-card { padding: 30px 20px; }
  .art-cols__media img,
  .art-media img { max-width: 100%; }
  .art-cols__text h1 { font-size: 42px; overflow-wrap: break-word; }
  .art-cols__text .button,
  .art-card .button { align-self: stretch; justify-content: center; }
}

@media (max-width: 375px) {
  .art-container { padding: 32px 16px; max-width: 100%; }
  .art-card { padding: 24px 16px; }
  .art-cols__text h1 { font-size: 29px; }
  .art-related__list { grid-template-columns: 1fr; }
  .cta-banner__content .button--service { width: auto; }
}