/* ============================================================
   Страница тега (/tags/{slug}/) и список тегов (/tags/).

   Лента смешанная, и полоски разных типов нарочно различаются по
   структуре: строка журнала (.journal-entry, из journal.css) — самая
   низкая; материал — выше, с иконкой типа слева; курс и лекция — ещё
   выше, с обложкой курса в начале. Токены, .card, .tag, .badge — из
   journal.css, он подключается раньше.
   ============================================================ */

/* ===== Шапка страницы тега ===== */
.tp-head { padding: 2rem 0 1rem; }
.tp-head h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; margin: .2rem 0; }
.tp-head h1 .tp-head__hash { color: var(--accent, var(--color-muted)); font-weight: 400; }
.tp-head__count { font-size: .95rem; color: var(--color-body); }

/* ===== Панель: фильтр по типу и сортировка ===== */
.tp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}
.tp-filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.tp-chip {
    font: inherit;
    font-size: .85rem;
    padding: .3rem .8rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-body);
    cursor: pointer;
    transition: .15s background, .15s color, .15s border-color;
}
.tp-chip:hover { border-color: var(--color-it); color: var(--color-it); }
.tp-chip.is-active { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.tp-chip__n { font-size: .75rem; opacity: .7; margin-left: .15rem; }

.tp-sort { font-size: .85rem; color: var(--color-muted); display: inline-flex; align-items: center; gap: .5rem; }
.tp-sort select {
    font: inherit;
    font-size: .85rem;
    padding: .3rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-card);
    color: var(--color-text);
}

/* ===== Лента ===== */
.tp-list { display: flex; flex-direction: column; gap: .6rem; }
.tp-item[hidden] { display: none; }
/* Строка журнала внутри ленты — как на главной, ничего не переопределяем */

/* Общая полоска для материала, курса, лекции: слева иконка или обложка,
   в середине текст, справа теги */
.tp-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .8rem 1rem;
    position: relative;            /* для «растянутой» ссылки заголовка */
    min-width: 0;
}
.tp-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.tp-row__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    color: var(--accent, var(--color-muted));
}
.tp-row__title { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.tp-row__title a { color: inherit; }
/* Растянутая ссылка: клик в любом месте полоски ведёт по ссылке
   заголовка, а теги (z-index выше) остаются самостоятельными ссылками */
.tp-row__title a::after { content: ''; position: absolute; inset: 0; }
.tp-row:hover .tp-row__title a { color: var(--accent, var(--color-it)); }
.tp-row__subtitle { font-size: .9rem; color: var(--color-muted); }
.tp-row__snippet { font-size: .95rem; color: var(--color-body); }
.tp-row__meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    color: var(--color-muted);
    margin-top: .15rem;
}
.tp-row__lock { font-size: .8rem; opacity: .6; }
.tp-row__tags {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: flex-end;
    max-width: 40%;
    position: relative;
    z-index: 1;
}
.tp-row--muted { opacity: .6; }

/* Материал: иконка типа в начале */
.tp-row--material .tp-row__icon { font-size: 1.5rem; line-height: 1.2; flex-shrink: 0; width: 2rem; text-align: center; }

/* Курс и лекция: обложка курса в начале, полоска заметно выше */
.tp-row--course, .tp-row--lecture { border-left-width: 6px; padding: 1rem 1.1rem; }
.tp-row__cover {
    flex: 0 0 140px;
    height: 84px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--accent-soft, var(--color-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
.tp-row__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-row--course .tp-row__title { font-size: 1.15rem; }

/* ===== Облако тегов ===== */
.tp-cloud { display: flex; flex-direction: column; gap: 1rem; }
.tp-cloud__group { display: flex; align-items: baseline; gap: 1rem; }
.tp-cloud__cat {
    flex: 0 0 5rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent, var(--color-muted));
}
.tp-cloud__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tp-cloud__tag { font-size: .7rem; padding: .2rem .7rem; }
.tp-cloud__tag.is-current { outline: 2px solid var(--accent, var(--color-muted)); outline-offset: 1px; }
.tp-cloud__n { margin-left: .35rem; opacity: .6; font-weight: 400; }

.tp-others { margin-top: 3rem; }

/* ===== Адаптив ===== */
@media (max-width: 768px) {
    .tp-toolbar { flex-direction: column; align-items: stretch; }
    .tp-row { flex-wrap: wrap; }
    .tp-row__tags { max-width: 100%; justify-content: flex-start; flex-basis: 100%; }
    .tp-row__cover { flex-basis: 100%; height: 140px; }
    .tp-cloud__group { flex-direction: column; gap: .4rem; }
}