/* ==========================================================================
   kredity — главная (front-page.php). Только раскладка страницы:
   компоненты лежат в components.css и здесь не переопределяются.
   ========================================================================== */

/* Первый экран: заголовок, строка «что здесь», табло и калькулятор */
.kr-hero { padding-top: var(--kr-sp-20); }
.kr-hero__head { display: grid; gap: var(--kr-sp-8); margin-bottom: var(--kr-sp-16); }
.kr-hero__lead { color: var(--kr-text-muted); }
.kr-hero__lead .kr-num { color: var(--kr-text); }
.kr-hero__jump { justify-self: start; gap: var(--kr-sp-4); }   /* на телефоне и планшете рейтинг ниже первого экрана — ведём к нему сразу */
.kr-hero__grid { display: grid; gap: var(--kr-gap); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.kr-hero__grid > * { min-width: 0; }

/* Рейтинг стоит вплотную к первому экрану */
.kr-home-rating { margin-top: var(--kr-sp-32); scroll-margin-top: var(--kr-sp-16); }
.kr-home-rating .kr-tabs { margin-bottom: var(--kr-sp-4); }

/* «Что стоит за максимальной ставкой»: две колонки фактов на подложке */
.kr-home-max { grid-template-columns: minmax(0, 1fr); gap: var(--kr-sp-24); padding: var(--kr-sp-16); }
.kr-home-max__col { min-width: 0; }
.kr-home-max__list { margin-top: var(--kr-sp-8); border-top: var(--kr-border-strong); }
.kr-home-max__item { padding: var(--kr-sp-12) 0; border-bottom: var(--kr-border-strong); }
.kr-home-max__bank { font-size: var(--kr-fs-ui); font-weight: var(--kr-fw-semibold); color: var(--kr-text); text-decoration: none; margin-right: auto; }
.kr-home-max__bank:hover { color: var(--kr-accent); text-decoration: underline; text-decoration-thickness: 1px; }
.kr-home-max__foot { font-size: var(--kr-fs-cond); line-height: 1.5; color: var(--kr-text-muted); max-width: 110ch; }

.kr-home-rate-note { margin-top: var(--kr-sp-16); max-width: 1040px; }

/* Свежие статьи: первая крупно, рядом три строки */
.kr-home-blog { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.kr-home-blog > * { min-width: 0; }
.kr-home-blog__lead .kr-post { border-top: var(--kr-border); }

@media (min-width: 768px) {
  .kr-hero { padding-top: var(--kr-sp-24); }
  .kr-home-max { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--kr-sp-24); }
  .kr-home-max__foot { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .kr-hero { padding-top: var(--kr-sp-16); }               /* табло и калькулятор целиком входят в первый экран 1440×900 */
  .kr-hero__head { margin-bottom: var(--kr-sp-12); }
  .kr-hero__lead { max-width: none; }
  .kr-hero__jump { display: none; }
  .kr-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .kr-home-rating { margin-top: var(--kr-sp-40); }
  .kr-home-blog { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--kr-gap); }
  .kr-home-blog__lead .kr-post { height: 100%; align-content: start; border-bottom: 0; padding-right: var(--kr-sp-24); border-right: var(--kr-border); }
}