/*
 * Public showcase of the catalogue
 * Публичная витрина каталога
 *
 * Страницы простые и читаются из поиска: крупный заголовок, список ссылок,
 * текст. Вёрстка своя, а не панели управления, — эти страницы живут в общем
 * макете сайта.
 *
 * Цвета — токены `--pd-*` из public-theme.css, но всегда с запасным
 * значением: витрину открывают и в окне из кабинета (`_LayoutEmbedded`), где
 * темы нет. Запасное значение — тот же новый цвет, чтобы окно не
 * отличалось от витрины (вопрос В4 нового облика).
 */

.catalog-page {
    /* Место под закреплённую шапку. В окне шапки нет, и `_LayoutEmbedded`
       перекрывает отступ своим правилом. */
    padding-top: calc(var(--pd-header-h, 72px) + 48px);
    padding-bottom: 3.75rem;
}

.catalog-crumbs {
    font-size: .875rem;
    color: var(--pd-muted, #5A5F6B);
    margin-bottom: 1rem;
}

.catalog-crumbs-sep {
    margin: 0 .375rem;
    color: var(--pd-muted, #5A5F6B);
}

.catalog-crumbs-current {
    color: var(--pd-ink, #15171C);
}

.catalog-title {
    font-size: 2rem;
    margin-bottom: .75rem;
}

.catalog-subtitle {
    font-size: 1.375rem;
    margin: 2rem 0 1rem;
}

.catalog-lead {
    color: var(--pd-text, #3F4450);
    max-width: 48rem;
}

/* ---------- разделы ---------- */

.catalog-sections {
    margin-top: 1rem;
}

.catalog-section {
    display: block;
    height: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--pd-line, #E4E0D6);
    border-radius: .5rem;
    text-decoration: none;
    color: inherit;
}

.catalog-section:hover {
    border-color: var(--pd-accent, #1E4FD8);
}

.catalog-section-name {
    display: block;
    font-weight: 700;
}

.catalog-section-count {
    display: inline-block;
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--pd-muted, #5A5F6B);
}

.catalog-section-note {
    display: block;
    margin-top: .375rem;
    font-size: .875rem;
    color: var(--pd-muted, #5A5F6B);
}

/* ---------- документы ---------- */

.catalog-items {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--pd-line-soft, #EEEBE3);
}

.catalog-item {
    display: block;
    padding: .75rem .25rem;
    border-bottom: 1px solid var(--pd-line-soft, #EEEBE3);
    text-decoration: none;
    color: inherit;
}

.catalog-item:hover {
    background-color: var(--pd-accent-soft, #E6ECFB);
}

.catalog-item-title {
    display: block;
    font-weight: 600;
}

/* Строка отличия: ради неё публикация её и требует. */
.catalog-item-note {
    display: block;
    margin-top: .125rem;
    font-size: .875rem;
    color: var(--pd-muted, #5A5F6B);
}

/* ---------- карточка по умолчанию ---------- */

.catalog-default {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--pd-accent, #1E4FD8);
    border-radius: .5rem;
    background-color: var(--pd-accent-soft, #E6ECFB);
}

.catalog-default-label {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pd-accent, #1E4FD8);
}

.catalog-default-title {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    margin: .25rem 0;
    color: inherit;
    text-decoration: none;
}

.catalog-default-note {
    margin-bottom: .75rem;
    color: var(--pd-muted, #5A5F6B);
}

/* ---------- страница документа ---------- */

.catalog-card-action {
    margin: 1.5rem 0;
}

.catalog-card-note {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--pd-muted, #5A5F6B);
}

.catalog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .75rem 0;
    border-top: 1px solid var(--pd-line-soft, #EEEBE3);
    border-bottom: 1px solid var(--pd-line-soft, #EEEBE3);
    font-size: .875rem;
    color: var(--pd-muted, #5A5F6B);
}

.catalog-text {
    margin-top: 1.5rem;
    max-width: 48rem;
    line-height: 1.7;
}

/* ---------- поиск по каталогу ---------- */

.catalog-search {
    display: flex;
    gap: .5rem;
    margin: 1rem 0 1.5rem;
    max-width: 40rem;
}

.catalog-search-input {
    flex: 1 1 auto;
}

/* ---------- темы каталога ---------- */

.catalog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.catalog-tag {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .75rem;
    border: 1px solid var(--pd-line, #E4E0D6);
    border-radius: 999px;
    background: var(--pd-surface, #FFFFFF);
    color: inherit;
    text-decoration: none;
    font-size: .9375rem;
}

.catalog-tag:hover {
    border-color: var(--pd-muted, #5A5F6B);
    background: var(--pd-surface-2, #FBFAF7);
    color: inherit;
}

.catalog-tag-count {
    color: var(--pd-muted, #5A5F6B);
    font-size: .8125rem;
}

.catalog-card-tags {
    margin-top: 1.5rem;
}

/* Раздел, из которого пришла похожая карточка: она из другого места каталога,
   и без этой строки непонятно, почему она здесь. */
.catalog-item-place {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--pd-muted, #5A5F6B);
}

/* ---------- кнопки в окне ---------- */

/* На `_Layout` кнопки Bootstrap перекрашивает public-theme.css. В окне из
   кабинета темы нет, и без этих правил кнопки остались бы синими Bootstrap
   рядом с новым акцентом рамок и ссылок. */
.catalog-page .btn-primary {
    background-color: var(--pd-accent, #1E4FD8);
    border-color: var(--pd-accent, #1E4FD8);
    color: #fff;
}

.catalog-page .btn-primary:hover,
.catalog-page .btn-primary:focus,
.catalog-page .btn-primary:active {
    background-color: var(--pd-accent-hover, #163BA6);
    border-color: var(--pd-accent-hover, #163BA6);
    color: #fff;
}

.catalog-page .btn-outline-primary {
    border-color: var(--pd-accent, #1E4FD8);
    color: var(--pd-accent, #1E4FD8);
}

.catalog-page .btn-outline-primary:hover,
.catalog-page .btn-outline-primary:focus,
.catalog-page .btn-outline-primary:active {
    background-color: var(--pd-accent, #1E4FD8);
    border-color: var(--pd-accent, #1E4FD8);
    color: #fff;
}