/* ==========================================================================
   «КредитИнформ» — добавления темы. Компоненты и раскладки — в файлах макета (tokens, base, components, page-*.css);
   здесь только то, чего в макете не было: место калькулятора на странице раздела и формы инструментов.
   ========================================================================== */

/* раздел: калькулятор стоит между чипами подборок и таблицей, на телефоне — после таблицы */
.kr-pod-calc { order: 3; margin-top: var(--kr-sp-24); }
@media (min-width: 768px) { .kr-pod-calc { order: 2; } }

/* инструмент сравнения: четыре списка банков в ряд */
.kr-cmp-form { margin-bottom: var(--kr-sp-16); }
.kr-cmp-form__slots { display: grid; gap: var(--kr-sp-12); grid-template-columns: minmax(0, 1fr); }
.kr-cmp-form__slots .kr-select, .kr-cmp-form__slots select { width: 100%; }
@media (min-width: 768px) { .kr-cmp-form__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kr-cmp-form__slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* подбор: варианты ответа переносятся */
.kr-quiz__opts { display: flex; flex-wrap: wrap; gap: var(--kr-sp-8); margin-top: var(--kr-sp-8); }
.kr-quiz__opts [hidden] { display: none; }

/* свой расчёт: поля сеткой, таблица графика под панелью */
.kr-own__fields { display: grid; gap: var(--kr-sp-12); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .kr-own__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kr-own .kr-sched__table { margin-top: var(--kr-sp-16); }

/* график ключевой ставки на её странице: крупный спарклайн на всю ширину панели */
.kr-keychart .kr-spark { width: 100%; height: auto; max-width: 480px; }

/* таблицы в тексте служебных страниц: если столбцы не помещаются на планшете, прокрутка внутри рамки */
@media (min-width: 768px) { .kr-art-table { overflow-x: auto; } }

/* приёмка: на телефоне диапазон «15,99—25,90 %» в блоке цифр шире ячейки в пол-экрана, а длинная ссылка в шапке блока
   («Раздел «Кредиты наличными»: 34 участника») шире экрана — разрешаем перенос; с планшета — как в макете, одной строкой */
.kr-stat__value { white-space: normal; }
.kr-sec__more { white-space: normal; max-width: 100%; }
.kr-sec__more svg { flex: none; }
@media (min-width: 768px) {
  .kr-stat__value, .kr-sec__more { white-space: nowrap; }
}

/* приёмка: страница 404 без хлебных крошек — заголовок не должен прилипать к линии меню; отступ как у блока крошек */
.kr-pagehead--nocrumbs { padding-top: var(--kr-sp-32); }

/* вёрстка 14.10.2026: таблица рейтинга в узкой колонке (страница банка и «банк × продукт» с боковой панелью, врезка в статье).
   С 1200px таблица по макету растягивается на ширину колонки, а у колонки «Условия» нет своей ширины — в колонке 800–940px
   она схлопывалась до 0–100px и текст шёл по букве в столбик. Здесь таблица остаётся шире колонки с прокруткой внутри рамки,
   как на 768–1199px, банк закреплён слева. */
@media (min-width: 1200px) {
  .kr-bank-layout .kr-table-wrap, .kr-art__embed .kr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kr-bank-layout .kr-table, .kr-art__embed .kr-table { min-width: 1160px; }
  .kr-bank-layout .kr-table__bank, .kr-art__embed .kr-table__bank { border-right: var(--kr-border); }
}
/* 1200–1399px: колонке «Условия» на разделе оставалось 160–240px — забираем часть у колонки банка */
@media (min-width: 1200px) and (max-width: 1399px) {
  .kr-table__th--bank { width: 228px; }
}

/* шапка тёмной панели на телефоне: длинная подпись справа (nowrap) сжимала заголовок до 40px — «РАСЧЁ/Т НА/ВАШУ/СУММ/У» */
.kr-panel__head { flex-wrap: wrap; }
.kr-panel__title { flex: 1 1 auto; min-width: min(100%, 12em); }
@media (max-width: 767px) { .kr-panel__meta { white-space: normal; } }

/* тап-зоны: сортировка в шапке таблицы и термины над таблицей были 24–28px; на сенсорных экранах (телефон, планшет) — 40px; с мышью — как в макете */
@media (pointer: coarse) { .kr-table__sort, .kr-terms__btn { min-height: 40px; } }

/* колонка «Оценка» (92px): у банков без оценки значок ⚠ стоял в строку с текстом и слово «рассчитана» вылезало
   на кнопку «На сайт». Колонка шире, значок над текстом, длинное слово переносится */
@media (min-width: 768px) {
  .kr-table__th--score { width: 108px; }
  .kr-table .kr-score--none { flex-direction: column; gap: var(--kr-sp-2); overflow-wrap: anywhere; hyphens: auto; }
}

/* страница ключевой ставки: блок графика — это .kr-board__key и .kr-keychart сразу. На телефоне график (ширина 100%)
   забирал всю вторую колонку сетки, подпись «Ключевая ставка Банка России» шла по букве в столбик, а фиксированная высота
   120px выталкивала график поверх таблицы изменений. На телефоне — подпись над графиком, высота по содержимому;
   линия графика на тёмном фоне — светлая (была тёмная по тёмному и почти не видна) */
.kr-board .kr-keychart { height: auto; border-left: 0; padding-block: var(--kr-sp-16); }
.kr-board .kr-keychart polyline { stroke: currentColor; }
.kr-board .kr-keychart .kr-spark { height: auto; aspect-ratio: 5 / 1; }
@media (max-width: 767px) {
  .kr-board__key.kr-keychart { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .kr-board__key.kr-keychart { grid-template-columns: auto minmax(0, 1fr); }
}

/* табло в боковой колонке (404, блог): на 768–1199px колонка — половина ширины (350–560px), а строки табло уже
   раскладывались в четыре колонки, как на всю ширину: название раздела и банк сжимались до 2–4 слов в строке,
   плашка «максимальная ставка» наезжала на название. Раскладка «как в узкой колонке» — с 768px, а не с 1200px */
@media (min-width: 768px) {
  .kr-board--side .kr-board__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--kr-sp-6) var(--kr-sp-12); padding: var(--kr-sp-12) var(--kr-sp-16); }
  .kr-board--side .kr-board__valwrap { min-width: var(--kr-board-val-w); }
  .kr-board--side .kr-board__who { grid-column: 1 / -1; }
  .kr-board--side .kr-board__go { display: none; }
  .kr-board--side .kr-board__flag { text-align: right; }
}