/* ==========================================================================
   Банковские карты — page-company.css
   Только раскладка двух шаблонов:
     страница банка          single-kt_bank.php      классы kt-co-…
     сравнение двух банков   single-kt_compare.php   классы kt-cmp-…
   Компоненты (карта-плитка, полоса условий, таблицы, кнопки…) — в components.css, здесь их не переопределяем.
   Медиазапросы только min-width: 768px и min-width: 1200px. Теней, градиентов и размытия нет.
   ========================================================================== */

/* ==========================================================================
   1. СТРАНИЦА БАНКА
   ========================================================================== */

/* ---------- 1.1. Шапка: лид, дата, оценка с местом ---------- */

/* Правая колонка с оценкой и кнопками бывает выше левой: ряды левой не растягиваем, отступы остаются ровными */
.kt-bankhead > .kt-bankhead__main { align-content: start; }
.kt-co-lead,
.kt-co-checked { grid-column: 1 / -1; }
.kt-co-lead { max-width: var(--kt-prose); }

/* Оценка и место в рейтинге: на телефоне в одну строку, от 768px — столбцом в правой колонке */
.kt-co-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kt-space-8) var(--kt-space-24);
}
.kt-co-place {
  font-size: var(--kt-small-size);
  line-height: var(--kt-small-lh);
  color: var(--kt-muted);
}
.kt-co-place b { color: var(--kt-ink); }

/* Кнопки шапки: до 768px их заменяет закреплённая полоса .kt-stickycta внизу экрана */
.kt-co-head-actions { display: none; }

/* ---------- 1.2. Ключевые цифры, паспорт, переходы по странице ---------- */

.kt-co-keyfigs { margin-top: var(--kt-space-24); }

.kt-co-passport {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-left: var(--kt-border);
}
.kt-co-passport > div {
  min-width: 0;
  padding: var(--kt-space-12);
  border-right: var(--kt-border);
  border-bottom: var(--kt-border);
}
.kt-co-passport dt {
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
}
.kt-co-passport dd {
  margin-top: var(--kt-space-2);
  font-size: var(--kt-ui-size);
  line-height: 1.45;
}

.kt-co-nav { margin-top: var(--kt-space-20); }
.kt-co-nav__cap { margin-bottom: var(--kt-space-8); }

/* ---------- 1.3. Карты банка по типам ---------- */

/* Заголовок, карта, фраза, условия, кнопка: условия тянутся, кнопки трёх колонок стоят на одной линии */
.kt-co-cards .kt-offer { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.kt-co-card__body {
  display: grid;
  align-content: start;
  gap: var(--kt-space-12);
  min-width: 0;
}
.kt-co-card__more { font-size: var(--kt-small-size); line-height: var(--kt-small-lh); }

/* Поле остатка — отдельная ячейка сетки карт. До 768px стоит сразу под дебетовой картой, от 768px — в свободной ячейке
   рядом с последней картой, от 1200px — полосой под тремя картами */
.kt-co-calc { align-self: start; min-width: 0; }

/* ---------- 1.4. Таблица условий ---------- */

/* Метка над таблицей и звёздочка в шапке столбца «Оговорка» */
.kt-co-star,
.kt-co-th {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kt-co-star { margin-bottom: var(--kt-space-12); }
.kt-co-star .kt-ico,
.kt-co-th .kt-ico { color: var(--kt-accent); }

.kt-co-cond {
  display: block;
  font-size: var(--kt-ui-size);
  font-weight: var(--kt-weight-semibold);
  line-height: 1.3;
}
/* До 768px строка таблицы — карточка: источник и дата стоят в одном ряду (от 768px это обычные ячейки таблицы) */
.kt-co-fine tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kt-co-fine td { grid-column: 1 / -1; }
.kt-co-fine td:nth-last-child(-n+2) { grid-column: auto; }

/* ---------- 1.5. Кому подойдёт и кому нет ---------- */

.kt-co-fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-16) var(--kt-gap);
}
.kt-co-fit > .kt-callout {
  align-content: start;
  min-width: 0;
  margin: 0;
}
.kt-co-fit .kt-callout--warn .kt-callout__list li::before { background: var(--kt-warning); }

/* ---------- 1.6. Оценка: три профиля слева, разбор по критериям справа ---------- */

.kt-co-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-32) var(--kt-gap);
}
.kt-co-score > * { min-width: 0; }
.kt-co-score h3 { margin-bottom: var(--kt-space-12); }
.kt-co-score__note {
  margin-top: var(--kt-space-12);
  font-size: var(--kt-small-size);
  line-height: var(--kt-small-lh);
  color: var(--kt-muted);
}

/* Формула с подставленными баллами: расчёт сайта, поэтому моноширинным на углублении */
.kt-co-formula {
  display: grid;
  gap: var(--kt-space-4);
  margin-top: var(--kt-space-20);
  padding: var(--kt-space-12) var(--kt-space-16);
  background: var(--kt-well);
  border: var(--kt-border);
}
.kt-co-formula__calc {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-num-weight);
  line-height: 1.6;
}
.kt-co-formula__calc b { font-weight: var(--kt-weight-semibold); }

/* ---------- 1.7. Кнопка под шагами, подзаголовки внутри секций ---------- */

.kt-co-cta { margin-top: var(--kt-space-24); }
.kt-co-sub { margin: var(--kt-space-24) 0 var(--kt-space-12); }

/* ---------- 1.8. Подборки с банком: дебетовые и кредитные ---------- */

.kt-co-pods {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--kt-space-32) var(--kt-gap);
}
.kt-co-pods > * { min-width: 0; }
.kt-co-pods h3 { margin-bottom: var(--kt-space-12); }

/* ---------- 1.9. Отзывы: правила и форма ---------- */

.kt-co-reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--kt-space-24) var(--kt-gap);
}
.kt-co-reviews > * { min-width: 0; }
.kt-co-reviews__empty {
  display: grid;
  align-content: start;
  gap: var(--kt-space-12);
}
.kt-co-reviews__empty > .kt-callout { margin: 0; }
.kt-co-reviews__lead {
  max-width: var(--kt-prose);
  font-size: var(--kt-text-size);
  line-height: var(--kt-text-lh);
  color: var(--kt-muted);
}

.kt-co-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-16);
  padding: var(--kt-space-16);
  border: var(--kt-border);
}
.kt-co-form > * { min-width: 0; }
.kt-co-form__rating {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.kt-co-form__rating legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-muted);
}
.kt-co-form__rating .kt-chip { min-width: 48px; justify-content: center; }
.kt-co-form .kt-check { align-items: flex-start; }
.kt-co-form__note {
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
}

/* ---------- 1.10. Источники данных ---------- */

.kt-co-sources { border-top: var(--kt-border); }
.kt-co-sources li {
  display: grid;
  gap: var(--kt-space-4);
  padding: var(--kt-space-12) 0;
  border-bottom: var(--kt-border);
}
.kt-co-sources__url {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth);
  font-size: var(--kt-num-size);
  font-weight: var(--kt-num-weight);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.kt-co-sources__what { font-size: var(--kt-small-size); line-height: var(--kt-small-lh); }
.kt-co-sources__meta {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  line-height: 1.4;
  color: var(--kt-quiet);
}

/* ---------- 1.11. Закреплённые кнопки до 768px ---------- */

/* Полоса занимает место панели сравнения: подвал не прячется под ней, панель на телефоне не показываем */
body:has(.kt-stickycta) { padding-bottom: var(--kt-bar-h); }
body:has(.kt-stickycta) .kt-cmpbar { display: none; }

/* ==========================================================================
   2. СРАВНЕНИЕ ДВУХ БАНКОВ
   ========================================================================== */

/* ---------- 2.1. Первый экран: заголовок, две плитки, вывод ---------- */

.kt-cmp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-20);
  padding-top: var(--kt-space-8);
}
.kt-cmp-head > * { min-width: 0; }
.kt-cmp-head__text {
  display: grid;
  align-content: start;
  gap: var(--kt-space-12);
}
.kt-cmp-head__verdict > .kt-callout { margin: 0; }

/* Две плитки рядом на любой ширине: до 768px — малые карты, название и оценка; от 768px — средние карты */
.kt-cmp-duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--kt-space-16);
}
.kt-cmp-bank { justify-items: start; }
.kt-cmp-bank > .kt-card--m { display: none; }
.kt-cmp-bank > .kt-actions {
  justify-self: stretch;
  grid-template-columns: minmax(0, 1fr);
}
.kt-cmp-bank__id {
  display: grid;
  gap: var(--kt-space-4);
  min-width: 0;
}
.kt-cmp-bank__name {
  font-family: var(--kt-font-head);
  font-size: 17px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.25;
}

/* ---------- 2.2. Таблица бок о бок ---------- */

/* Два банка помещаются и на 320px: запас ширины компонента для трёх–четырёх колонок здесь не нужен */
.kt-cmp-vs { min-width: 0; }

/* Названия банков остаются на виду, пока таблица прокручивается */
.kt-cmp-vs .kt-vs__row--head {
  position: sticky;
  top: 0;
  z-index: var(--kt-z-sticky);
  align-items: center;
  background: var(--kt-bg);
}
.kt-cmp-vs .kt-vs__row--head .kt-vs__label { display: none; }
.kt-cmp-vs .kt-vs__label { font-size: var(--kt-small-size); color: var(--kt-muted); }

.kt-cmp-vs__bank {
  display: flex;
  align-items: center;
  gap: var(--kt-space-8);
  min-width: 0;
}
.kt-cmp-vs__name {
  font-family: var(--kt-font-head);
  font-size: 15px;
  font-weight: var(--kt-weight-semibold);
  line-height: 1.2;
}
.kt-cmp-vs__name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kt-cmp-vs__score {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-mono-wdth-tight);
  font-size: 12px;
  line-height: 1.3;
  color: var(--kt-quiet);
  white-space: nowrap;
}
.kt-cmp-vs__score b {
  font-family: var(--kt-font-head);
  font-stretch: normal;
  font-size: 18px;
  font-weight: var(--kt-weight-heavy);
  line-height: 1;
  color: var(--kt-ink);
}

/* Название поля, под ним — что считается лучшим и отметка «одинаково» */
.kt-cmp-vs__title { display: block; }

/* Подзаголовок группы строк */
.kt-cmp-vs__group {
  padding: var(--kt-space-24) 0 var(--kt-space-8);
  border-bottom: var(--kt-border);
}
/* Что считается лучшим в строке — словами под названием поля */
.kt-cmp-vs__hint {
  display: block;
  margin-top: var(--kt-space-2);
  font-size: var(--kt-micro-size);
  line-height: var(--kt-micro-lh);
  color: var(--kt-quiet);
}
.kt-cmp-vs__same { margin-top: var(--kt-space-4); }
/* Значение словами (типы карт, тип банка) — шрифтом текста: моноширинный оставлен цифрам */
.kt-cmp-vs__val--text {
  font-family: var(--kt-font-body);
  font-stretch: normal;
  font-size: var(--kt-ui-size);
  line-height: var(--kt-ui-lh);
}
/* Оговорка банка рядом с цифрой: цветом текста, не мельче 13px */
.kt-cmp-vs__note {
  font-family: var(--kt-font-mono);
  font-stretch: var(--kt-fine-wdth);
  font-size: var(--kt-num-size);
  line-height: var(--kt-fine-lh);
  color: var(--kt-ink);
}

/* ---------- 2.3. Кому какой банк ---------- */

.kt-cmp-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-16) var(--kt-gap);
}
.kt-cmp-pick > .kt-callout {
  align-content: start;
  min-width: 0;
  margin: 0;
}
.kt-cmp-sub { margin: var(--kt-space-32) 0 var(--kt-space-12); }

/* ---------- 2.4. Мелкий шрифт обоих банков ---------- */

.kt-cmp-fine {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--kt-space-24) var(--kt-gap);
}
.kt-cmp-fine > * { min-width: 0; }
.kt-cmp-fine__col {
  display: grid;
  align-content: start;
  gap: var(--kt-space-12);
}
.kt-cmp-fine__bank {
  display: flex;
  align-items: center;
  gap: var(--kt-space-12);
}
.kt-cmp-fine__bank a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kt-cmp-calc { margin-bottom: var(--kt-space-24); }

/* ---------- 2.5. Оценки по критериям: две шкалы на критерий ---------- */

.kt-cmp-crits { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kt-space-24); }
/* Столбец на flex, а не на grid: у частей .kt-breakdown заданы grid-area под сетку самого компонента */
.kt-cmp-crit {
  display: flex;
  flex-direction: column;
  gap: var(--kt-space-8);
  min-width: 0;
}
.kt-cmp-crit__name { font-size: var(--kt-ui-size); line-height: var(--kt-ui-lh); font-weight: var(--kt-weight-semibold); }
.kt-cmp-crit__line {
  --kt-k: 0;
  display: flex;
  align-items: center;
  gap: var(--kt-space-12);
  min-width: 0;
}
.kt-cmp-crit__bank {
  flex: none;
  width: 84px;
  font-size: var(--kt-small-size);
  line-height: 1.3;
  color: var(--kt-muted);
}
.kt-cmp-crit__line .kt-breakdown__bar { flex: 1 1 auto; min-width: 0; }
.kt-cmp-crit__line .kt-breakdown__val { flex: none; width: 40px; }
.kt-cmp-crit--total {
  padding-top: var(--kt-space-20);
  border-top: 1px solid var(--kt-line-strong);
}
.kt-cmp-crit--why > .kt-callout { margin: 0; }

/* ---------- 2.6. Кнопки обоих банков, другие сравнения ---------- */

.kt-cmp-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-16) var(--kt-gap);
}
.kt-cmp-cta > .kt-teaser { min-width: 0; }
.kt-cmp-cta__head {
  display: flex;
  align-items: center;
  gap: var(--kt-space-12);
}
.kt-cmp-cta .kt-actions { min-width: 0; }

.kt-cmp-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--kt-space-32) var(--kt-gap);
}
.kt-cmp-more > * { min-width: 0; }
.kt-cmp-more h3 { margin-bottom: var(--kt-space-12); }

/* ==========================================================================
   3. ОТ 768px
   ========================================================================== */

@media (min-width: 768px) {
  .kt-co-rating { display: grid; gap: var(--kt-space-8); }
  .kt-co-head-actions { display: grid; }
  .kt-co-passport { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-co-passport > div { padding: var(--kt-space-12) var(--kt-space-16); }
  .kt-co-calc { order: 1; }
  .kt-co-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-co-form { padding: var(--kt-space-24); }

  /* Полоса с кнопками скрыта: отступ под неё не нужен, панель сравнения возвращается */
  body:has(.kt-stickycta):not(.kt-has-bar) { padding-bottom: 0; }
  body:has(.kt-stickycta) .kt-cmpbar { display: block; }

  .kt-cmp-head { gap: var(--kt-space-24) var(--kt-gap); padding-top: var(--kt-space-16); }
  .kt-cmp-duel { gap: var(--kt-gap); }
  .kt-cmp-bank { justify-items: stretch; }
  .kt-cmp-bank > .kt-card--s,
  .kt-cmp-bank > .kt-cmp-bank__id { display: none; }
  .kt-cmp-bank > .kt-card--m { display: grid; }
  .kt-cmp-bank > .kt-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--kt-card-m-max); }

  .kt-cmp-vs .kt-vs__row--head .kt-vs__label { display: block; }
  .kt-cmp-vs__name { font-size: 17px; }
  .kt-cmp-vs__bank { gap: var(--kt-space-12); }

  .kt-cmp-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-cmp-fine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-cmp-calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: var(--kt-space-8) var(--kt-gap);
  }
  .kt-cmp-crit__bank { width: 120px; }
  .kt-cmp-crit__line .kt-breakdown__val { width: 56px; }
}

/* ==========================================================================
   4. ОТ 1200px
   ========================================================================== */

@media (min-width: 1200px) {
  .kt-co-passport { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kt-co-calc {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: var(--kt-space-8) var(--kt-gap);
  }
  .kt-co-score { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .kt-co-pods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-co-reviews { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  /* Заголовок и плитки — восемь колонок слева, вывод — четыре справа на всю высоту */
  .kt-cmp-head { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: var(--kt-space-24); }
  .kt-cmp-head__text { grid-column: 1 / span 8; grid-row: 1; }
  .kt-cmp-duel { grid-column: 1 / span 8; grid-row: 2; }
  .kt-cmp-head__verdict { grid-column: 9 / -1; grid-row: 1 / span 2; }

  /* Шесть критериев в две колонки; итог и вывод «откуда разница» — последним рядом */
  .kt-cmp-crits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kt-space-32) var(--kt-gap); }
  .kt-cmp-crit--why { justify-content: flex-end; }
  .kt-cmp-cta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-cmp-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   3. Хаб сравнения (page-sravnenie.php): выбор от двух до четырёх банков и таблица на столько же колонок.
      Таблица — тот же компонент .kt-vs / .kt-cmp-vs, что на странице пары; ячейки невыбранных банков скрыты hidden.
   ========================================================================== */

/* ---------- 3.1. Первый экран: заголовок и выбор банков ---------- */

.kt-vshead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kt-space-16);
  padding-top: var(--kt-space-8);
}
.kt-vshead > * { min-width: 0; }
.kt-vspick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--kt-space-12);
  padding: var(--kt-space-16);
  background: var(--kt-well);
  border: var(--kt-border);
}
.kt-vspick > * { min-width: 0; }
.kt-vspick__slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--kt-space-12);
}
.kt-vspick__status {
  font-size: var(--kt-small-size);
  line-height: var(--kt-small-lh);
  color: var(--kt-muted);
}
.kt-vspick__status b { color: var(--kt-ink); font-weight: var(--kt-weight-semibold); }
.kt-vspick__few { color: var(--kt-warning); }

/* ---------- 3.2. Таблица: три–четыре колонки до 1200px прокручиваются вбок внутри обёртки ---------- */

.kt-vshub__wrap { overflow-x: auto; }
.kt-vshub .kt-cmp-vs { min-width: calc(var(--kt-vs-n) * 136px + (var(--kt-vs-n) - 1) * var(--kt-space-16)); }
.kt-vshub .kt-cmp-vs .kt-vs__row--head { position: static; align-items: start; }
/* Название поля остаётся на месте, пока колонки прокручиваются вбок */
.kt-vshub .kt-vs__row:not(.kt-vs__row--head) > .kt-vs__label {
  position: sticky;
  left: 0;
  justify-self: start;
  max-width: calc(100vw - 2 * var(--kt-gutter));
}
.kt-vshub .kt-cmp-vs__group {
  position: sticky;
  left: 0;
  max-width: calc(100vw - 2 * var(--kt-gutter));
}
.kt-vshub__actions {
  justify-self: stretch;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: var(--kt-space-4);
}
.kt-vshub__total { border-top: var(--kt-line-w-2) solid var(--kt-accent); }
.kt-vshub__total .kt-vs__val { font-size: 17px; }
.kt-vshub .kt-disclosure { margin-top: var(--kt-space-16); }

@media (min-width: 768px) {
  .kt-vshead { gap: var(--kt-space-20); padding-top: var(--kt-space-16); }
  .kt-vspick { padding: var(--kt-space-20); }
  .kt-vshub .kt-cmp-vs { min-width: calc(200px + var(--kt-vs-n) * (148px + var(--kt-space-24))); }
  .kt-vshub .kt-vs__row:not(.kt-vs__row--head) > .kt-vs__label,
  .kt-vshub .kt-cmp-vs__group { position: static; max-width: none; }
  .kt-vshub .kt-vs__row:not(.kt-vs__row--head) > .kt-vs__label { justify-self: stretch; }
}

@media (min-width: 1200px) {
  .kt-vshead { padding-top: var(--kt-space-24); }
  .kt-vspick { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--kt-space-16); }
  .kt-vspick__slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kt-vshub__wrap { overflow-x: visible; }
  .kt-vshub .kt-cmp-vs { min-width: 0; }
  .kt-vshub .kt-cmp-vs .kt-vs__row--head { position: sticky; }
  .kt-vshub__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}