/* ════════════════════════════════════════════════════════════
   ITERATION 6 — финальная унификация и доработка плана владельца
   (подключается ПОСЛЕ portal-home-2026.css, перекрывает старые правила)
   
   Покрывает:
   (5)   Баннер новости приложения: 2 CTA-кнопки (.kns-slide__cta)
   (12)  Пустота перед футером: layout главной (.k-shell, .k-main)
   (14)  Курсы валют — уменьшенный размер
   (16)  Правые новости — картинки и шрифты
   (17)  Табы — высоты 36, активный со скруглением
   (20)  Цветовая система — переменные
   (21)  Единые размеры шрифтов
   (22)  Единые высоты кнопок 40/44
   ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   (20) Единая цветовая система — CSS-переменные
   ──────────────────────────────────────────────── */
:root {
    --kp-primary:        #2563EB;
    --kp-primary-hover:  #1D4ED8;
    --kp-primary-dark:   #1E40AF;
    --kp-primary-tint:   #EFF6FF;
    --kp-primary-tint-2: #DBEAFE;
    --kp-primary-line:   #93C5FD;

    --kp-ink:    #0F172A;
    --kp-ink-2:  #475569;
    --kp-ink-3:  #64748B;
    --kp-ink-4:  #94A3B8;

    --kp-border:   #E2E8F0;
    --kp-border-2: #CBD5E1;
    --kp-bg-soft:  #F8FAFC;

    --kp-success: #16A34A;
    --kp-danger:  #DC2626;
    --kp-warn:    #F59E0B;

    /* Единые высоты */
    --kp-h-btn-sm: 36px;
    --kp-h-btn-md: 40px;
    --kp-h-btn-lg: 44px;
    --kp-h-input:  48px;
    --kp-h-tab:    36px;

    /* Радиусы */
    --kp-r-sm:  8px;
    --kp-r-md:  10px;
    --kp-r-lg:  14px;
    --kp-r-xl:  16px;
}

/* ════════════════════════════════════════════════════════════
   (5) БАННЕР НОВОСТИ ПРИЛОЖЕНИЯ — CTA-кнопки
   ════════════════════════════════════════════════════════════ */
.kns-slide__media {
    display: block;
    cursor: pointer;
    text-decoration: none;
}
.kns-slide__title-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.kns-slide__title-link:hover .kns-slide__title {
    color: var(--kp-primary);
}
/* CTA-кнопки слайдера: компактные, одинаковой ширины,
   при добавлении новых (Google Play, App Store) — переносятся в новую строку */
.kns-slide__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.kns-slide__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--kp-h-btn-md);
    width: 180px;          /* одинаковая фиксированная ширина */
    flex: 0 0 180px;
    padding: 0 14px;
    border-radius: var(--kp-r-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    box-sizing: border-box;
}
.kns-slide__btn--primary {
    background: var(--kp-primary);
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}
.kns-slide__btn--primary:hover,
.kns-slide__btn--primary:focus,
.kns-slide__btn--primary:active,
.kns-slide__btn--primary:visited {
    background: var(--kp-primary-hover);
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}
.kns-slide__btn--ghost {
    background: #FFFFFF;
    color: var(--kp-primary) !important;
    border-color: var(--kp-primary-line);
}
.kns-slide__btn--ghost:hover,
.kns-slide__btn--ghost:focus {
    background: var(--kp-primary-tint);
    color: var(--kp-primary-hover) !important;
    border-color: var(--kp-primary);
}
/* YouTube-кнопка: фирменный красный YouTube #FF0000 */
.kns-slide__btn--yt {
    background: #FF0000;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.22);
}
.kns-slide__btn--yt:hover,
.kns-slide__btn--yt:focus,
.kns-slide__btn--yt:active,
.kns-slide__btn--yt:visited {
    background: #CC0000;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 0, 0, 0.32);
}
.kns-slide__btn--yt i {
    font-size: 16px;
}
/* Узкие экраны — кнопки растягиваются на всю ширину, идут в столбец */
@media (max-width: 720px) {
    .kns-slide__cta { gap: 8px; margin-top: 12px; }
    .kns-slide__btn {
        height: var(--kp-h-btn-sm);
        width: 100%;
        flex: 1 1 100%;
        padding: 0 12px;
    }
}

/* ════════════════════════════════════════════════════════════
   (12) ПУСТОТА ПЕРЕД ФУТЕРОМ — закрываем финальным CTA-блоком
   ════════════════════════════════════════════════════════════ */
/* Главная — три колонки. Правый sticky-сайдбар может быть длиннее центра →
   между концом ленты и футером может образоваться серое пространство.
   Решение: в центральную колонку добавляется .k-feed-final-cta (для гостей),
   который заполняет это пространство и одновременно усиливает воронку. */

.k-feed-final-cta {
    margin-top: 32px;
    padding: 36px 28px;
    border-radius: var(--kp-r-xl);
    background:
        radial-gradient(circle at 100% 0%, rgba(37,99,235,0.10), transparent 50%),
        linear-gradient(180deg, #FFFFFF 0%, var(--kp-primary-tint) 100%);
    border: 1px solid var(--kp-primary-line);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.k-feed-final-cta__ic {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--kp-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}
.k-feed-final-cta__h {
    font-size: 22px;
    font-weight: 800;
    color: var(--kp-ink);
    letter-spacing: -0.015em;
    margin: 0 0 10px;
}
.k-feed-final-cta__tx {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--kp-ink-2);
    margin: 0 auto 20px;
    max-width: 540px;
}
.k-feed-final-cta__btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.k-feed-final-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--kp-h-btn-lg);
    padding: 0 22px;
    border-radius: var(--kp-r-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.k-feed-final-cta__btn--primary {
    background: var(--kp-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}
.k-feed-final-cta__btn--primary:hover {
    background: var(--kp-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38);
}
.k-feed-final-cta__btn--ghost {
    background: #FFFFFF;
    color: var(--kp-primary);
    border-color: var(--kp-primary-line);
}
.k-feed-final-cta__btn--ghost:hover {
    background: var(--kp-primary-tint);
    border-color: var(--kp-primary);
}
@media (max-width: 600px) {
    .k-feed-final-cta { padding: 26px 18px; margin-top: 22px; }
    .k-feed-final-cta__h { font-size: 18px; }
    .k-feed-final-cta__tx { font-size: 13.5px; }
    .k-feed-final-cta__btn { width: 100%; }
}

/* Центральная колонка должна стремиться занять высоту grid-строки, чтобы CTA-блок
   реально оказывался у нижней границы (а не висел сразу после ленты).
   ВАЖНО: только на десктопе, где есть боковые колонки и виден разрыв.
   На мобиле (≤1100px, k-col-l уже скрыта; ≤900px, k-col-r тоже скрыта) — это лишний flex. */
@media (min-width: 1101px) {
    .k-grid { align-items: stretch; }
    .k-col-l, .k-col-r {
        align-self: start; /* sticky-сайдбары по-прежнему начинаются сверху */
    }
    main.k-main, .k-col-c {
        display: flex;
        flex-direction: column;
    }
    .k-feed-final-cta { margin-top: auto; }
}

/* ════════════════════════════════════════════════════════════
   (14) КУРСЫ ВАЛЮТ — компактнее
   ════════════════════════════════════════════════════════════ */
.k-cbr-hd { margin-bottom: 10px; }
.k-cbr-title { font-size: 13px; }
.k-cbr-date  { font-size: 11px; }
.k-cbr-list  { gap: 9px; }
.k-cbr-row   { gap: 10px; }
.k-cbr-flag  {
    width: 30px; height: 30px;
    border-radius: 8px;
    font-size: 13px;
}
.k-cbr-flag--jpy::after { width: 11px; height: 11px; }
.k-cbr-code  { font-size: 13px; }
.k-cbr-name  { font-size: 10.5px; margin-top: 1px; }
.k-cbr-val   { font-size: 13.5px; }
.k-cbr-chg   { font-size: 11px; }

/* ════════════════════════════════════════════════════════════
   (16) ПРАВЫЕ НОВОСТИ — крупнее картинки и компактнее заголовки
   ════════════════════════════════════════════════════════════ */
.k-snews     { gap: 11px; }
.k-snews-img {
    width: 52px; height: 52px;
    border-radius: 8px;
}
.k-snews-img > img { border-radius: 7px; }
.k-snews-title {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--kp-ink);
    /* ограничиваем 3 строками */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.k-snews-date { font-size: 10.5px; margin-top: 3px; }

/* ════════════════════════════════════════════════════════════
   (17) ТАБЫ под синим CTA-блоком — единая высота и стиль
   ════════════════════════════════════════════════════════════ */
.k-tabs {
    padding: 4px;
    border-radius: var(--kp-r-sm);
    gap: 2px;
}
.k-tab {
    height: var(--kp-h-tab);
    padding: 0 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--kp-ink-2);
    display: inline-flex;
    align-items: center;
}
.k-tab:hover {
    background: var(--kp-primary-tint);
    color: var(--kp-primary);
}
.k-tab.active {
    background: var(--kp-primary);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}

/* ════════════════════════════════════════════════════════════
   (21) ЕДИНЫЕ РАЗМЕРЫ ШРИФТОВ — заголовки секций
   ════════════════════════════════════════════════════════════ */
/* Главные секции (.k-card-title, .k-card h2) */
.k-card-title,
.k-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--kp-ink);
    letter-spacing: -0.01em;
}
.k-card h3,
.k-panel h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--kp-ink);
}

/* ════════════════════════════════════════════════════════════
   (22) ЕДИНЫЕ ВЫСОТЫ КНОПОК
   ════════════════════════════════════════════════════════════ */
.k-btn {
    height: var(--kp-h-btn-md);
    padding: 0 16px;
    border-radius: var(--kp-r-sm);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    white-space: nowrap;
}
.k-btn--sm  { height: var(--kp-h-btn-sm); padding: 0 12px; font-size: 13px; }
.k-btn--lg  { height: var(--kp-h-btn-lg); padding: 0 20px; font-size: 15px; }
.k-btn--primary {
    background: var(--kp-primary);
    color: #FFFFFF;
}
.k-btn--primary:hover { background: var(--kp-primary-hover); }
.k-btn--ghost {
    background: #FFFFFF;
    color: var(--kp-ink);
    border-color: var(--kp-border);
}
.k-btn--ghost:hover { border-color: var(--kp-primary); color: var(--kp-primary); }

/* Кнопка «Войти» в шапке (вторичная) */
.k-header .k-btn--secondary,
.k-header .k-btn--ghost {
    height: var(--kp-h-btn-md);
    border: 1px solid #D8E2F0;
    background: #FFFFFF;
    color: var(--kp-ink);
}
.k-header .k-btn--secondary:hover,
.k-header .k-btn--ghost:hover {
    border-color: var(--kp-primary);
    color: var(--kp-primary);
}

/* Кнопка «Найти на платформе» (в поиске) */
.k-search button[type="submit"],
.k-search-btn {
    min-height: var(--kp-h-input);
    border-radius: 0 var(--kp-r-md) var(--kp-r-md) 0;
}

/* ════════════════════════════════════════════════════════════
   МИНОРНЫЕ ФИКСЫ ВНЕШНЕГО ВИДА
   ════════════════════════════════════════════════════════════ */
/* Карточки категорий — единый радиус 14px и unified hover */
.k-cat-tile {
    border-radius: var(--kp-r-lg);
    transition: all .15s ease;
}
.k-cat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
    border-color: var(--kp-primary-line);
}

/* Footer-ссылка «Поддержка» в шапке/футере — единый цвет */
.k-help-text { color: var(--kp-ink-2); }
.k-help-text:hover { color: var(--kp-primary); }

/* ════════════════════════════════════════════════════════════
   «Часто ищут» — теги ЗАГЛАВНЫМИ
   ════════════════════════════════════════════════════════════ */
.k-hero-chip {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   ШАПКА — навигация по центру
   ════════════════════════════════════════════════════════════ */
.k-header-inner {
    justify-content: space-between;
}
.k-nav {
    justify-content: center;
    gap: 20px;
}
/* На промежуточных экранах (где места уже мало, но меню ещё помещается)
   уменьшаем gap, чтобы ничего не "съезжало" */
@media (max-width: 1280px) {
    .k-nav { gap: 14px; }
}