/**
 * Редакционные компоненты WF Agro Blog.
 * Подключать после article-trendy.max.css.
 * Все классы предназначены для HTML-режима редактора 1С-Битрикс.
 */

.article-main-content {
  --article-accent: #06b781;
  --article-deep: #053f33;
  --article-ink: #1a1a1a;
  --article-muted: rgba(11, 11, 11, 0.68);
  --article-line: rgba(5, 63, 51, 0.14);
  --article-surface: #f5f8f7;
  --article-surface-strong: #eef3f1;
  --article-warning: #e8a838;
  --article-danger: #b94a3d;
  --article-series-2: #b57b16;
  --article-series-3: #3565a8;
  --article-series-4: #b94a3d;
  --article-series-5: #16838b;
  /* Совместимость с исходными SVG 11 новых статей */
  --paper: #fbfcf9;
  --surface: #f1f4ec;
  --surface-2: #e4e9dc;
  --ink: #171a15;
  --ink-2: #3a4136;
  --muted: #6c7469;
  --line: #d7dccf;
  --alarm: #9e3218;
  --ok: #3f7a4d;
  --s1: #1e7a3e;
  --s2: #c08205;
  --s3: #2f5ba8;
  --s4: #c43a16;
  --s5: #0093a0;
}

.article-main-content a {
  display: inline;
  color: #057b5a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-main-content a:hover {
  color: #046348;
}

.article-main-content__lead,
.article-lead {
  margin: 0 0 1.25rem;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: rgba(11, 11, 11, 0.88);
  font-weight: 500;
}

.article-main-content .article-main-content__section,
.article-main-content__section,
.article-section,
.article-main-content .article-main-content__section:not(:last-child),
.article-section.article-main-content__section:not(:last-child) {
  min-width: 0;
  margin-bottom: 2rem;
  padding-bottom: 1.65rem;
  border-bottom: 1px solid var(--article-line);
}

.article-main-content .article-main-content__section:last-child,
.article-main-content__section:last-child,
.article-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.article-main-content .article-main-content__subtitle {
  margin-top: 0.45rem;
  margin-bottom: 0.95rem;
}

.article-main-content__subtitle--no-number,
.article-main-content .article-subtitle,
.article-subtitle {
  margin: 1.45rem 0 0.85rem;
  padding-left: 0;
  color: #2d4a42;
  font-weight: 700;
}

.article-main-content__subtitle--no-number::before,
.article-subtitle::before {
  display: none;
  content: none;
}

.article-callout,
.article-main-content__box {
  margin: 1.25rem 0;
  padding: 24px 28px;
  border-left: 4px solid var(--article-accent);
  border-radius: 0 18px 18px 0;
  background: var(--article-surface);
  color: var(--article-ink);
}

.article-callout > :first-child,
.article-main-content__box > :first-child {
  margin-top: 0;
}

.article-callout > :last-child,
.article-main-content__box > :last-child {
  margin-bottom: 0;
}

.article-callout__label {
  display: block;
  margin-bottom: 8px;
  color: var(--article-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-callout--tip,
.article-main-content__box--tip {
  border-left-color: var(--article-accent);
  background: #edf9f5;
}

.article-callout--warning,
.article-main-content__box--warning {
  border-left-color: var(--article-warning);
  background: #fdf7e9;
}

.article-callout--important {
  border-left-color: var(--article-danger);
  background: #fcf1ef;
}

.article-code,
.article-main-content pre.article-code {
  display: block;
  margin: 1.6rem 0;
  padding: 20px 22px;
  overflow-x: auto;
  border-radius: 16px;
  background: #10241e;
  color: #e7f3ee;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

.article-code code {
  font: inherit;
  color: inherit;
  background: none;
}

.article-visual {
  margin: 1.75rem 0;
}

.article-visual > a {
  display: block;
}

.article-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--article-line);
  background: #fff;
}

.article-visual__data {
  margin-top: 12px;
}

.article-visual__data summary {
  cursor: pointer;
  color: var(--article-deep);
  font-weight: 700;
}

.article-visual__raster {
  display: none !important;
  margin-top: 12px;
}

.article-visual__raster summary {
  cursor: pointer;
  color: var(--article-deep);
  font-weight: 700;
}

.article-visual__raster-link {
  display: block;
  margin-top: 12px;
  cursor: zoom-in;
}

.article-visual__raster img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid var(--article-line);
  background: #fff;
}

.article-visual__raster-link img {
  margin-top: 0;
}

@media (max-width: 700px) {
  .article-visual__shot {
    display: none;
  }

  .article-visual__raster {
    display: block !important;
  }

  .article-visual__data > summary,
  .article-source-visual__data > summary {
    display: none;
  }

  .article-visual__data > *:not(summary),
  .article-source-visual__data > *:not(summary) {
    display: block !important;
    margin-top: 0;
  }
}

.article-quote {
  margin: 2rem 0;
  padding: 24px 28px;
  border-left: 4px solid var(--article-accent);
  border-radius: 0 18px 18px 0;
  background: var(--article-surface);
}

.article-quote__text {
  margin: 0;
  color: var(--article-deep);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  font-style: italic;
}

.article-quote__author {
  display: block;
  margin-top: 14px;
  color: var(--article-muted);
  font-size: 14px;
  font-style: normal;
}

.article-table-wrap {
  max-width: 100%;
  margin: 1.75rem 0;
  overflow: auto hidden;
  border: 1px solid #c9d7d2;
  border-radius: 16px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.article-table,
.article-main-content__table {
  width: 100%;
  min-width: 620px;
  border: 0;
  border-collapse: collapse;
  color: var(--article-ink);
  font-size: 16px;
}

.article-table caption,
.article-main-content__table caption {
  padding: 16px 18px;
  color: var(--article-deep);
  font-weight: 700;
  text-align: left;
  background: var(--article-surface);
}

.article-table th,
.article-table td,
.article-main-content__table th,
.article-main-content__table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--article-line);
  text-align: left;
  vertical-align: top;
}

.article-table th p,
.article-table td p,
.article-main-content__table th p,
.article-main-content__table td p {
  margin: 0;
}

.article-table th,
.article-main-content__table th {
  color: var(--article-deep);
  background: var(--article-surface);
  font-size: 14px;
  font-weight: 700;
}

.article-table tbody tr:last-child td,
.article-main-content__table tbody tr:last-child td {
  border-bottom: 0;
}

.article-table tbody tr:hover td,
.article-main-content__table tbody tr:hover td {
  background: rgba(6, 183, 129, 0.04);
}

.article-table__number {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.article-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 1.25rem 0;
}

.article-kpis:has(.article-kpi:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-kpis:has(.article-kpi:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-kpi {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--article-line);
  border-radius: 18px;
  background: var(--article-surface);
}

.article-kpi__value {
  display: block;
  color: var(--article-deep);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.article-kpi__label {
  display: block;
  margin-top: 8px;
  color: var(--article-muted);
  font-size: 14px;
  line-height: 1.4;
}

.article-chart {
  margin: 2rem 0;
}

.article-chart__viewport {
  max-width: 100%;
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--article-line);
  border-radius: 18px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.article-chart svg {
  display: block;
  width: 100%;
  min-width: 680px;
  height: auto;
}

.article-chart__grid {
  stroke: var(--article-line);
  stroke-width: 1;
}

.article-chart__axis {
  stroke: #5c6b66;
  stroke-width: 1.2;
}

.article-chart__series {
  fill: none;
  stroke: var(--article-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-chart__bar {
  fill: var(--article-deep);
}

.article-chart__bar--accent {
  fill: var(--article-accent);
}

.article-chart__label {
  fill: #5c6b66;
  font-family: Manrope, Arial, sans-serif;
  font-size: 14px;
}

.article-chart__value {
  fill: var(--article-deep);
  font-family: Manrope, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.article-chart figcaption,
.article-figure figcaption {
  margin-top: 10px;
  color: var(--article-muted);
  font-size: 14px;
  line-height: 1.45;
}

.article-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 12px;
  color: var(--article-muted);
  font-size: 13px;
}

.article-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.article-chart__legend-mark {
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: var(--article-accent);
}

.article-figure {
  margin: 1.25rem 0;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.article-figure figcaption,
.article-source-visual figcaption {
  margin-top: 10px;
  color: var(--article-muted);
  font-size: 14px;
  line-height: 1.45;
}

.article-section p:not(:last-child),
.article-main-content > p:not(:last-child),
.article-main-content p:not(:last-child) {
  margin-bottom: 1.15rem;
}

.article-main-content li p,
.article-main-content li p:not(:last-child) {
  margin-bottom: 0;
}

.article-main-content li + li {
  margin-top: 0.5rem;
}

.article-main-content ul:not(.article-score-list):not(.article-infographic-list):not(.article-process),
.article-main-content ol:not(.article-process) {
  max-width: none;
  margin: 0.7rem 0 1rem;
  padding: 0;
  list-style: none;
  list-style-position: outside;
}

.article-main-content ul:not(.article-score-list):not(.article-infographic-list):not(.article-process) > li,
.article-main-content ol:not(.article-process) > li {
  position: relative;
  margin: 0 0 0.45rem;
}

.article-main-content ul:not(.article-score-list):not(.article-infographic-list):not(.article-process) > li {
  padding-left: 1.35rem;
}

.article-main-content ol:not(.article-process) {
  counter-reset: article-ol;
}

.article-main-content ol:not(.article-process) > li {
  counter-increment: article-ol;
  padding-left: 2rem;
}

.article-main-content ul:not(.article-score-list):not(.article-infographic-list):not(.article-process) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #06b781;
}

.article-main-content ol:not(.article-process) > li::before {
  content: counter(article-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #057b5a;
  font-weight: 700;
  line-height: inherit;
}

.article-source-visual__data {
  margin-top: 14px;
  padding: 16px 18px 18px;
  border: 1px solid var(--article-line);
  border-radius: 14px;
  background: var(--article-surface);
}

.article-source-visual__data summary {
  cursor: pointer;
  color: var(--article-deep);
  font-weight: 700;
}

.article-source-visual__data .article-infographic-text {
  margin: 16px 0 0;
}

.article-infographic-text__title {
  margin: 0 0 8px;
  color: var(--article-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.article-infographic-text__lead {
  margin: 0 0 16px;
  color: var(--article-muted);
  font-size: 14px;
  line-height: 1.45;
}

.article-infographic-text .article-kpis,
.article-infographic-text .article-comparison,
.article-infographic-text .article-table-wrap,
.article-infographic-text .article-timeline {
  margin: 0 0 12px;
}

.article-process {
  display: grid;
  grid-template-columns: repeat(var(--process-cols, 5), minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-process--2 { --process-cols: 2; }
.article-process--3 { --process-cols: 3; }
.article-process--4 { --process-cols: 4; }
.article-process--5 { --process-cols: 5; }
.article-process--6 { --process-cols: 6; }
.article-process--7 { --process-cols: 7; }

.article-process__step {
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid var(--article-line);
  border-radius: 14px;
  background: #fff;
}

.article-process__num {
  display: block;
  margin-bottom: 8px;
  color: var(--article-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.article-process__name {
  display: block;
  margin-bottom: 6px;
  color: var(--article-deep);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.article-process__text {
  display: block;
  color: var(--article-ink);
  font-size: 13px;
  line-height: 1.4;
}

.article-process__banner {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--article-deep);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.article-score-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-score-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--article-line);
}

.article-score-list li:last-child {
  border-bottom: 0;
  font-weight: 700;
}

.article-score-list__value {
  color: var(--article-deep);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.article-infographic-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-infographic-list li {
  padding: 10px 12px;
  border-bottom: 1px solid var(--article-line);
  color: var(--article-ink);
  font-size: 14px;
  line-height: 1.45;
}

.article-infographic-list li:last-child {
  border-bottom: 0;
}

.article-code-visual {
  margin: 2rem 0;
  padding: 22px 24px;
  border: 1px solid var(--article-line);
  border-radius: 18px;
  background: var(--article-surface);
}

.article-code-visual__label {
  display: block;
  margin-bottom: 8px;
  color: var(--article-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-code-visual__title {
  margin: 0 0 14px;
  color: var(--article-deep);
  font-size: 18px;
  line-height: 1.35;
}

.article-code-visual__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-code-visual__content li {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  color: var(--article-ink);
  font-size: 14px;
  line-height: 1.4;
}

.article-timeline {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.article-timeline__item {
  position: relative;
  margin-left: 12px;
  padding: 0 0 26px 30px;
  border-left: 2px solid var(--article-line);
}

.article-timeline__item:last-child {
  padding-bottom: 0;
}

.article-timeline__item::before {
  position: absolute;
  top: 4px;
  left: -7px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--article-accent);
  content: "";
}

.article-timeline__date {
  display: block;
  margin-bottom: 4px;
  color: var(--article-deep);
  font-size: 14px;
  font-weight: 700;
}

.article-timeline__text {
  margin: 0;
}

.article-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2rem 0;
  overflow: hidden;
  border: 1px solid var(--article-line);
  border-radius: 18px;
}

.article-comparison__column {
  padding: 22px 24px;
}

.article-comparison__column + .article-comparison__column {
  border-left: 1px solid var(--article-line);
  background: #edf9f5;
}

.article-comparison__title {
  display: block;
  margin-bottom: 8px;
  color: var(--article-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-sources {
  margin: 2rem 0;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--article-surface);
}

.article-sources__title {
  margin: 0 0 12px;
  color: var(--article-deep);
  font-size: 16px;
}

.article-sources ol {
  margin: 0;
  padding-left: 22px;
}

.article-sources li + li {
  margin-top: 8px;
}

.article-note {
  margin: 1rem 0;
  color: var(--article-muted);
  font-size: 14px;
  line-height: 1.5;
}

.article-note--eyebrow {
  margin-bottom: 12px;
  color: var(--article-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.article-sources__list {
  margin: 2rem 0;
  padding: 20px 24px 20px 46px;
  border-radius: 16px;
  background: var(--article-surface);
  color: var(--article-muted);
  font-size: 14px;
}

.article-sources__list li + li {
  margin-top: 8px;
}

.article-faq {
  margin: 2rem 0;
  border-top: 1px solid var(--article-line);
}

.article-faq details {
  border-bottom: 1px solid var(--article-line);
}

.article-faq summary {
  position: relative;
  padding: 18px 38px 18px 0;
  color: var(--article-deep);
  font-weight: 700;
  cursor: pointer;
}

.article-faq summary::after {
  position: absolute;
  top: 16px;
  right: 4px;
  color: var(--article-accent);
  font-size: 22px;
  content: "+";
}

.article-faq details[open] summary::after {
  content: "−";
}

.article-faq details > :not(summary) {
  margin-top: 0;
}

/* Совместимые классы SVG из 11 исходных аналитических статей.
 * Они действуют только внутри .article-chart и не загрязняют страницу. */
.article-chart .grid {
  stroke: var(--article-line);
  stroke-width: 1;
}

.article-chart .axis,
.article-chart .tick {
  stroke: #5c6b66;
  stroke-width: 1.2;
}

.article-chart .band {
  fill: var(--article-surface-strong);
}

.article-chart .panel {
  fill: #fff;
  stroke: var(--article-line);
}

.article-chart .ln,
.article-chart .dg-ln {
  fill: none;
  stroke: var(--article-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-chart .ln.s1,
.article-chart .dg-ln.s1 { stroke: var(--article-accent); }
.article-chart .ln.s2,
.article-chart .dg-ln.s2 { stroke: var(--article-series-2); }
.article-chart .ln.s3,
.article-chart .dg-ln.s3 { stroke: var(--article-series-3); }
.article-chart .ln.s4,
.article-chart .dg-ln.s4 { stroke: var(--article-series-4); }
.article-chart .ln.s5,
.article-chart .dg-ln.s5 { stroke: var(--article-series-5); }

.article-chart .dot {
  stroke: #fff;
  stroke-width: 2;
}

.article-chart .bar {
  opacity: 0.9;
  stroke: none;
}

.article-chart .s1f { fill: var(--article-accent); }
.article-chart .s2f { fill: var(--article-series-2); }
.article-chart .s3f { fill: var(--article-series-3); }
.article-chart .s4f { fill: var(--article-series-4); }
.article-chart .s5f { fill: var(--article-series-5); }
.article-chart .s1t { fill: var(--article-accent); }
.article-chart .s2t { fill: var(--article-series-2); }
.article-chart .s3t { fill: var(--article-series-3); }
.article-chart .s4t { fill: var(--article-series-4); }
.article-chart .s5t { fill: var(--article-series-5); }

.article-chart .ax,
.article-chart .mn,
.article-chart .sm,
.article-chart .lbl,
.article-chart .cap {
  fill: #5c6b66;
  font-family: Manrope, Arial, sans-serif;
  font-size: 14px;
}

.article-chart .sm,
.article-chart .lbl {
  fill: var(--article-deep);
  font-weight: 700;
}

.article-chart .pk {
  fill: var(--article-deep);
  font-family: Manrope, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.article-chart .barlbl {
  fill: #fff;
  font-family: Manrope, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.article-chart .lead {
  stroke: var(--article-warning);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.article-table tr.hl td {
  background: var(--article-surface);
  font-weight: 700;
}

.article-table td.n,
.article-table th.n {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .article-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .article-callout,
  .article-main-content__box,
  .article-quote {
    padding: 20px;
  }

  .article-kpis,
  .article-comparison,
  .article-code-visual__content,
  .article-process {
    grid-template-columns: 1fr;
  }

  .article-comparison__column + .article-comparison__column {
    border-top: 1px solid var(--article-line);
    border-left: 0;
  }

  .article-chart__viewport {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-main-content *,
  .article-main-content *::before,
  .article-main-content *::after {
    scroll-behavior: auto;
  }
}