/*
 * Сторінка «Кредитування»
 *
 * Зібрана з готового: .phero (main.css), .feature-list, .steps, .medallion
 * (ui.css) і глобальна CTA. Своє тут — панель банку й дві колонки в ній.
 *
 * Чергування фонів: герой (subtle) → панелі банків на canvas → CTA-final (фото).
 */

.kr-banks {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
.kr-banks__inner {
    display:        flex;
    flex-direction: column;
    gap:            32px;
}

/* ── Панель банку ───────────────────────────────────────────────────────── */
.kr-bank {
    display:        flex;
    flex-direction: column;
    gap:            36px;
    padding:        44px;
    background:     var(--bg-elevated);
    border:         1px solid var(--gold-line-soft);
    border-radius:  4px;
}

.kr-bank__header {
    padding-bottom: 28px;
    border-bottom:  1px solid var(--gold-line-soft);
}
/* Логотипи банків приходять із власним фоном і кольорами — підкладка
   потрібна, інакше темні знаки зникають на темній панелі. */
.kr-bank__logo {
    display:       inline-flex;
    align-items:   center;
    padding:       14px 22px;
    background:    var(--white);
    border-radius: var(--radius);
}
.kr-bank__logo-img {
    display:    block;
    width:      auto;
    max-width:  100%;
    height:     34px;
    object-fit: contain;
}
.kr-bank__name {
    margin:         0;
    color:          var(--text-primary);
    font-size:      28px;
    line-height:    36px;
    font-weight:    600;
    letter-spacing: .56px;
}

/* ── Дві колонки умов ───────────────────────────────────────────────────── */
.kr-bank__cols {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   36px 48px;
}
.kr-bank__col {
    display:        flex;
    flex-direction: column;
    gap:            18px;
    /* Обмеження довжини рядка — те саме, що в .prose. У двох колонках воно
       не працює (колонка й так ~571px = 71 знак), але щойно колонки
       складаються в одну, перелік розтягується на всю панель: заміряно
       99 знаків на 900px і 89 на 768. Комфортна межа — 60-75. */
    max-width:      58ch;
}
.kr-bank__col-title {
    margin:         0;
    color:          var(--gold-text);
    font-size:      13px;
    font-weight:    700;
    line-height:    18px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

/* ── Як отримати ────────────────────────────────────────────────────────── */
.kr-bank__how {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    padding-top:    32px;
    border-top:     1px solid var(--gold-line-soft);
}

.kr-bank__note {
    margin:  0;
    color:   var(--text-muted);
}

/* ── Адаптація ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .kr-banks       { padding: 80px 0; }
    .kr-banks__inner { gap: 24px; }
    .kr-bank        { padding: 32px; gap: 30px; }
    .kr-bank__cols  { gap: 30px 36px; }
}

/* 900px — той самий поріг, що всюди: нижче ~400px на колонку перелік
   умов ламає рядок по 3-4 слова. */
@media (max-width: 900px) {
    .kr-bank__cols { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .kr-banks      { padding: 64px 0; }
    .kr-bank       { padding: 24px; gap: 26px; }
    .kr-bank__how  { padding-top: 24px; gap: 20px; }
    .kr-bank__name { font-size: 23px; line-height: 30px; }
}

@media (max-width: 480px) {
    .kr-banks         { padding: 48px 0; }
    .kr-bank          { padding: 20px; }
    .kr-bank__logo-img { height: 28px; }
}