/*
 * catalog.css — стили компонента <riskprof-catalog>.
 * Блоки 1–3 перенесены из <style> Vue-компонентов (CategoryTree.vue, Courses.vue) без изменений
 * и ограничены селектором .riskprof-catalog (тот же визуальный результат, без влияния на чужие страницы).
 * Блок 4 — плашка двухступенчатого пейджинга (ТЗ §3.4).
 */

/* ---- CategoryTree.vue ---- */
.riskprof-catalog .listPage__check .fa-li {
    top: 0;
    color: var(--theme-color-red);
}

.riskprof-catalog .link-collapse-default {
    color: #6c757d !important;
}

.riskprof-catalog .h4 > a {
    color: black !important;
}

/* ---- Courses.vue ---- */
.riskprof-catalog .carousel-item {
    height: 450px;
}

.riskprof-catalog .top-course-img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
    cursor: pointer;
    height: 450px;
}

/* ---- Кнопка «Показать все (N)» / «Свернуть» (ТЗ §3.4) ----
   Внешний вид даёт .our-botton (+ .our-botton-sm) из темы; здесь только центрирование и ширина. */
.riskprof-catalog .rpc-show-all {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 15px auto;
    text-align: center;
}

.riskprof-catalog .rpc-show-all:hover {
    text-decoration: none;
}

/* ---- Состояние ошибки/пустого результата ---- */
.riskprof-catalog .onBackground {
    min-height: 80px;
}

/* ---- Скелетон-заглушки на время загрузки (шаблонов и данных) ----
   Геометрия повторяет карточку курса (card-categories: шапка 56%, br-1, card-body),
   цвета — из темы: полосы #e3e8f0 на фоне --color-background, блик белым. */
.riskprof-catalog .rpc-skel {
    position: relative;
    overflow: hidden;
    background: #e3e8f0;
    border-radius: .5rem;
}

.riskprof-catalog .rpc-skel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
    animation: rpc-skel-sweep 1.4s ease-in-out infinite;
}

@keyframes rpc-skel-sweep {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .riskprof-catalog .rpc-skel::after {
        animation: none;
    }
}

/* скелетон-карточка: шапка-«картинка» и строки текста/кнопок */
.riskprof-catalog .rpc-skel--img {
    border-radius: 1rem 1rem 0 0;
}

.riskprof-catalog .rpc-skel--line {
    height: 14px;
    margin-bottom: 10px;
}

.riskprof-catalog .rpc-skel--line:last-child {
    margin-bottom: 0;
}

.riskprof-catalog .rpc-skel--short {
    width: 40%;
}

.riskprof-catalog .rpc-skel--btn {
    height: 31px;
    width: 45%;
    border-radius: .25rem;
}

/* скелетон дерева категорий (левая колонка) */
.riskprof-catalog .rpc-skel-tree-line {
    height: 14px;
    margin-bottom: 14px;
}

/* ---------- Окночный рендер (план 2026-10-05, шаг 5) ---------- */

/* Геометрия карточки не зависит от момента загрузки изображения: шапка с обложкой
 * имеет постоянное соотношение сторон, картинка вписывается с обрезкой (object-fit).
 * До загрузки изображения и после него карточка занимает один и тот же размер —
 * ёмкость экрана для окна рендера стабильна, прыжков вёрстки нет. */
.riskprof-catalog .card-categories__header {
    aspect-ratio: 3 / 2;
    min-height: 0;
    overflow: hidden;
}
.riskprof-catalog .card-categories__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Спейсер под невизуализированный хвост списка: держит высоту страницы по полному
 * вектору, чтобы прокрутка доставала до границы окна и окно догружалось. */
.riskprof-catalog [data-rpc-window-spacer] {
    width: 100%;
}