/* ============================================================
   Trei Surse — topic page specific styles
   Builds on top of css/main.css (.story-card), css/homepage.css
   (shared chrome) and css/story.css (.story-back, .bias-bar).
   Adds only what's specific to the topic page: topic header,
   story list, and a compact bias-bar variant for story cards.
   ============================================================ */

/* ---- topic header ---- */
.topic-header {
    padding-bottom: 28px;
}

.topic-header__breadcrumb {
    margin: 0 0 10px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.topic-header__title {
    margin: 0 0 10px;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.topic-header__meta {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

/* ---- story list ---- */
.story-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.story-card {
    display: block;
}

.story-card .bias-bar {
    height: 6px;
    margin: 0 0 14px;
}

/* ---- responsive ---- */
@media (max-width: 768px) {
    .topic-header__title {
        font-size: 1.6rem;
    }
}