/*
 * Доработка 119: баннер «Смена оператора ЭДО или отчётности — скидка до 50 %» внутри текста статьи.
 * Подключает template-parts/nd-smena.php (только там, где баннер печатается).
 * Токены — из news.css (.nd) и chrome.css (.nd-chrome); запасные значения — те же hex из DESIGN.md.
 * Селекторы с двумя классами: правила .nd-art__body p (news.css) иначе перебивают абзацы баннера.
 * Анимацию делает assets/js/nd-smena.js; без него и при prefers-reduced-motion виден итоговый кадр.
 */
.nd-smena {
  --sm-ink: var(--nd-ink, #1a1919);
  --sm-ink-2: var(--nd-ink-2, #5a5450);
  --sm-line: var(--nd-line, #e5dfd8);
  --sm-surface: var(--nd-surface, #f7f5f2);
  --sm-accent-ink: var(--nd-accent-ink, #c25412);
  --sm-navy: var(--nd-navy, #283370);
  display: block;
  margin: 28px 0;
  border: 1px solid var(--sm-line);
  border-radius: 4px;
  background-color: var(--sm-surface);
  color: var(--sm-ink);
}
.nd-smena .nd-smena__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px 28px;
  align-items: center;
  margin: 0;
  padding: 24px;
}
.nd-smena .nd-smena__card { min-width: 0; }
.nd-smena .nd-smena__eyebrow {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sm-navy);
}
.nd-smena .nd-smena__title {
  margin: 0 0 10px;
  font-family: var(--nd-serif, "Literata", Georgia, "Times New Roman", serif);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  text-transform: none;
  color: var(--sm-ink);
}
.nd-smena .nd-smena__num {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--sm-accent-ink);
}
.nd-smena .nd-smena__text {
  margin: 0 0 18px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sm-ink-2);
}
.nd-smena .nd-smena__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* Кнопка: цвет и наведение — стандартный .nd-btn темы (#f3712b), как у всех кнопок сайта.
   Контраст белого на #f3712b 2,9:1 ниже AA — исключение по слову пользователя 13.10.2026, контраст всех кнопок — docs/backlog.md */
.nd-smena .nd-smena__btn {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  padding: 12px 22px;
}
.nd-smena .nd-smena__btn:focus-visible {
  outline: 2px solid var(--sm-navy);
  outline-offset: 2px;
}
/* Блик: сплошная светлая полоса-параллелограмм, движется только transform (nd-smena.js) */
.nd-smena .nd-smena__shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26px;
  background-color: rgba(255, 255, 255, 0.34);
  clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%);
  opacity: 0;
  pointer-events: none;
}
.nd-smena .nd-smena__note { font-size: 0.75rem; line-height: 1.4; color: var(--sm-ink-2); }

/* Иллюстрация: фиксированная пропорция, место резервируется до отрисовки (без CLS) */
.nd-smena .nd-smena__art {
  width: 100%;
  aspect-ratio: 360 / 150;
  margin: 0;
}
.nd-smena .nd-smena__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nd-smena .nd-smena__plate-lbl { font-family: var(--font-family, Montserrat), "Segoe UI", system-ui, sans-serif; }
.nd-smena .nd-smena__doc { opacity: 0; }
.nd-smena .nd-smena__check { transform-box: fill-box; transform-origin: center; }

/* Начальный кадр анимации ставит nd-smena.js после загрузки библиотеки (класс на баннере) */
.nd-smena.nd-smena--prep .nd-smena__check { opacity: 0; }

@media (max-width: 1024px) {
  .nd-smena .nd-smena__in { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 767.9px) {
  .nd-smena .nd-smena__in { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
  .nd-smena .nd-smena__art { order: -1; max-width: 360px; margin: 0 auto; }
  .nd-smena .nd-smena__title { font-size: 1.3125rem; }
}
@media (max-width: 576px) {
  .nd-smena { margin: 22px 0; }
  .nd-smena .nd-smena__in { padding: 16px; }
  .nd-smena .nd-smena__art { max-width: none; aspect-ratio: auto; height: 120px; }
  .nd-smena .nd-smena__act { flex-direction: column; align-items: stretch; gap: 10px; }
  .nd-smena .nd-smena__btn { width: 100%; }
  .nd-smena .nd-smena__note { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nd-smena .nd-smena__shine { display: none; }
}