/* Блоки, добавленные при пересборке страницы /calculator.
   Существующие классы wCa__ и cAlC__ не переопределяются — только новые
   calc__. Палитра и радиусы те же, что в blog.css: акцент #3C4AFA,
   границы #EAEAEA, скругления 24/18/100px. */

:root {
  --calc-accent: #3C4AFA;
  --calc-accent-dark: #3040e8;
  --calc-line: #EAEAEA;
  --calc-muted: #6B7280;
  --calc-soft: #F7F8FC;
}

/* ── HERO: две колонки, на мобильном форма уходит под текст ── */
.calc__hero {
  display: grid;
  /* Ширины подобраны под два ряда чипов. Шесть чипов требуют 640px
     в самой широкой строке, а вся ширина HERO постоянна — 1070px
     на любом экране от 1200 и выше. Значит, шире колонка с текстом
     только за счёт формы.
     Возврат к исходным 420px и зазору 48 проверялся отдельно: левой
     колонке достаётся 602, не хватает 38px, ряда снова три.
     Текущие значения дают колонке 654. Плейсхолдер поля «Товар»
     после сокращения просит 230px при 292 доступных, так что
     упирается именно в чипы. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 36px;
  /* По центру, а не по верху: форма выше текста, и при выравнивании
     по верхнему краю под чипами оставалась пустая колонка высотой
     в треть экрана. Добивать текст ради баланса — хуже. */
  align-items: center;
}
.calc__hero-left { min-width: 0; }

/* Левая колонка по левому краю. Центрирование приходит сверху,
   от .wCa__hero (text-align:center) и от двух правил рядов чипов,
   поэтому перебиваем адресно, в границах самой колонки: правая
   колонка с формой этих правил не касается.
   Селекторы с классом колонки обязаны быть глубже одиночных
   .wCa__tags-area и .wCa__tags-row — иначе не перебьют. */
.calc__hero-left { text-align: left; }
.calc__hero-left .wCa__tags-area { align-items: flex-start; }
.calc__hero-left .wCa__tags-row { justify-content: flex-start; }

/* Ниже 380px страница переводит ряд чипов в колонку и центрирует
   их по align-items — там justify-content уже не главная ось.
   У чипа фиксированная высота 29px, поэтому flex-start по кресту
   его не растянет и не сожмёт. */
@media (max-width: 380px) {
  .calc__hero-left .wCa__tags-row { align-items: flex-start; }
}

/* Две строки слогана. Главная — первая, поэтому она крупнее и темнее;
   вспомогательная мельче и светлее. До правки было наоборот: первая
   шла 15px/#868686, вторая 18px/#6B6B6B, и подстрочник перебивал
   то, к чему был подстрочником.
   Мобильный размер второй строки тут не задаём: класс SUB_TITLE_Mobile
   из nav.css ставит 16px/#A0A0A0 через !important, одинаково на всех
   страницах сайта. Любое правило отсюда было бы мёртвым. */
.calc__hero-lead {
  max-width: min(560px, 94%);
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: #4A4A4A;
}

.calc__hero-sub {
  max-width: min(460px, 92%);
  margin: 0 0 clamp(18px, 2.8vw, 28px);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #8C8C8C;
}

/* ── Форма ── */
.calc__form {
  background: #fff;
  border: 1px solid var(--calc-line);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 18px 48px -32px rgba(60, 74, 250, .45);
  text-align: left;
}
.calc__field { margin-bottom: 16px; min-width: 0; }
.calc__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--calc-muted);
  margin-bottom: 6px;
}
.calc__input-wrap { position: relative; }
.calc__input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--calc-line);
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  color: #111;
  background: #fff;
  transition: border-color .2s;
}
.calc__input::placeholder { color: #A6ADBB; }
.calc__input:focus { outline: none; border-color: var(--calc-accent); }
/* Пустое поле подсвечивается, но переход не блокирует */
.calc__input--empty { border-color: #f5a623; background: #fffdf7; }
.calc__input-wrap .calc__input { padding-right: 38px; }
.calc__unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--calc-muted);
  pointer-events: none;
}

.calc__submit {
  width: 100%;
  height: 52px;
  margin-top: 4px;
  border: 0;
  border-radius: 100px;
  background: var(--calc-accent);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.calc__submit:hover { background: var(--calc-accent-dark); transform: translateY(-2px); }

.calc__note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--calc-muted);
  text-align: left;
}

/* ── Мобильные ── */
@media (max-width: 900px) {
  .calc__hero { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .calc__form { padding: 20px; border-radius: 18px; }
  .calc__field-row { grid-template-columns: 1fr; gap: 0; }
}


/* ── Заголовок секции второго экрана ──
   Оформление берётся у cAlC__header, здесь только ширина абзаца.
   На всю ширину контейнера строка выходит на 145 знаков — читать
   такую нельзя, поэтому абзац ограничен и центрирован. Заголовок
   растягивается по-прежнему. */
.calc__section-head p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────
   Информационный блок «Из чего складывается
   экономика импорта». Живёт внутри старой
   двухколоночной раскладки cAlC__main-content:
   текст в левой колонке, иллюстрация «Детализация
   расчёта» — в правой. Ниже 1024px правая колонка
   скрыта существующим правилом страницы, блок
   становится одноколоночным.
   ───────────────────────────────────────────── */

.calc__info {
  max-width: 660px;
  text-align: left;
}

.calc__info-h2 {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.25;
  color: #000;
  margin: 0 0 20px;
}

.calc__info-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0 0 16px;
}

.calc__info-p {
  font-size: 16px;
  line-height: 1.65;
  color: #444;
  margin: 0 0 14px;
}

.calc__info-h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: #000;
  margin: 28px 0 10px;
}

/* Номер пункта: кружок фиксированного размера,
   чтобы длинные заголовки не сжимали его. */
.calc__info-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EEF0FF;
  color: #3C4AFA;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calc__info-outro {
  font-size: 17px;
  line-height: 1.6;
  color: #1a1a1a;
  font-weight: 500;
  margin: 32px 0 14px;
  padding-top: 24px;
  border-top: 1px solid #E8E8E8;
}

.calc__link {
  color: #3C4AFA;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.calc__link:hover { text-decoration: none; }

/* Правая колонка тянулась на всю высоту левой: у cAlC__calc-card
   стоит flex:1, а родитель — align-items:stretch. С длинным текстом
   слева карточка растянулась бы на несколько экранов. Прижимаем
   её к верху. */
.cAlC__main-content > .cAlC__right-column {
  align-self: flex-start;
}

.cAlC__main-content > .cAlC__right-column .cAlC__calc-card {
  flex: 0 0 auto;
}

/* Липкая карточка — только там, где правая колонка вообще показана:
   ниже 1025px её скрывает существующее правило страницы, и sticky
   был бы правилом для невидимого элемента.
   Отступ сверху = высота фиксированной шапки navM__nav (64px)
   плюс воздух, иначе карточка уезжает под неё. */
@media (min-width: 1025px) {
  .cAlC__main-content > .cAlC__right-column {
    position: sticky;
    top: 88px;
  }
}

@media (max-width: 768px) {
  .calc__info-h2 { font-size: 24px; }
  .calc__info-lead { font-size: 16px; }
  .calc__info-h3 { font-size: 17px; margin-top: 24px; }
  .calc__info-outro { font-size: 16px; }
}

/* ─────────────────────────────────────────────
   Готовые расчёты по категориям
   ───────────────────────────────────────────── */

.calc__section {
  padding: 56px 0 64px;
}

/* Ширину и боковые отступы задаёт cAlC__container — тот же класс,
   что у второго экрана. Своей ширины здесь нет намеренно: иначе
   секции разъезжаются по краям при первой же правке контейнера. */
.calc__block {
  text-align: left;
}

/* Таблица шире экрана телефона по определению: пять строк
   в четыре колонки не сжимаются. Прокручивается внутри обёртки,
   страница по горизонтали не едет. */
.calc__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0 12px;
  border: 1px solid #EAEAEA;
  border-radius: 16px;
  background: #fff;
}

.calc__table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

.calc__table th,
.calc__table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid #F0F0F0;
  vertical-align: top;
}

.calc__table thead th {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #6B6B6B;
  background: #FAFAFC;
  border-bottom: 1px solid #EAEAEA;
  white-space: nowrap;
}

.calc__table tbody tr:last-child td { border-bottom: 0; }

/* Селектор обязан быть глубже, чем `.calc__table td` выше:
   у того вес 0,1,1 и он перебил бы одиночный класс. */
.calc__table .calc__td--right { text-align: right; white-space: nowrap; }

.calc__table-note {
  font-size: 13px;
  line-height: 1.5;
  color: #7A7A7A;
  margin: 0 0 20px;
}

@media (max-width: 768px) {
  .calc__section { padding: 36px 0 44px; }
  /* Тень у правого края: без неё обрезанная колонка читается как
     сломанная вёрстка. Заливка едет вместе с содержимым и гаснет
     в конце прокрутки, тень стоит у края. Тот же приём, что и
     у таблиц блога, — чистый CSS, скриптов не нужно. */
  .calc__table-wrap {
    background:
      linear-gradient(to left, #fff, rgba(255,255,255,0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(17,17,17,.16), rgba(17,17,17,0)) right center / 14px 100% no-repeat scroll,
      /* белая подложка карточки: в сокращённой записи её
         нужно вернуть явно, иначе фон страницы просвечивает */
      #fff;
  }
  .calc__table { font-size: 14px; }
  .calc__table th,
  .calc__table td { padding: 12px 14px; }
}

/* ─────────────────────────────────────────────
   Частые вопросы. Раскрывашки на <details>:
   без скрипта, работают до загрузки JS и
   доступны с клавиатуры.
   ───────────────────────────────────────────── */

.calc__section--faq { padding-top: 0; }

.calc__faq {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.calc__faq-item {
  background: #fff;
  border: 1px solid #EAEAEA;
  border-radius: 14px;
  padding: 16px 20px;
}

.calc__faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 32px;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  color: #000;
}

.calc__faq-item summary::-webkit-details-marker { display: none; }

.calc__faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: #3C4AFA;
}

.calc__faq-item[open] summary::after { content: '−'; }

.calc__faq-answer {
  font-size: 16px;
  line-height: 1.65;
  color: #444;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .calc__faq-item { padding: 14px 16px; }
  .calc__faq-item summary { font-size: 16px; }
  .calc__faq-answer { font-size: 15px; }
}

/* ─────────────────────────────────────────────
   Финальный CTA
   ───────────────────────────────────────────── */

.calc__section--cta { padding-top: 0; padding-bottom: 72px; }

.calc__cta {
  background: #3C4AFA;
  border-radius: 24px;
  padding: 44px 48px;
  text-align: center;
  color: #fff;
}

.calc__cta-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 12px;
  color: #fff;
}

.calc__cta-sub {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 auto 28px;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.85);
}

.calc__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 16px 32px;
  border-radius: 111px;
  background: #fff;
  color: #3C4AFA;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calc__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.calc__cta-btn:active { transform: scale(0.98); }

@media (max-width: 768px) {
  .calc__section--cta { padding-bottom: 48px; }
  .calc__cta { padding: 32px 20px; border-radius: 20px; }
  .calc__cta-title { font-size: 24px; }
  .calc__cta-sub { font-size: 16px; margin-bottom: 22px; }
  .calc__cta-btn { width: 100%; min-width: 0; }
}