/* ── Articles listing page ───────────────────────────────────── */

.list-header
{
    border-bottom: 1px solid var(--rule);
    background-color: var(--bg-alt);
}
.list-header__inner
{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-8) var(--space-8) var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-8);
}
.list-header__breadcrumb
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    color: var(--ink-4);
    margin-bottom: var(--space-3);
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.list-header__breadcrumb a { color: var(--ink-3); border-bottom: none; }
@media (hover: hover)
{
    .list-header__breadcrumb a:hover { color: var(--accent); border-bottom: none; }
}
.list-header__breadcrumb-sep { color: var(--rule-heavy); }
.list-header h1
{
    font-family: var(--font-body);
    font-size: var(--size-2xl);
    font-weight: 500;
}
.list-header__count { text-align: right; }
/* filter bar */

.filter-bar
{
    border-bottom: 1px solid var(--rule);
    background-color: var(--bg);
    position: sticky;
    top: 3.25rem;
    z-index: 90;
}
.filter-bar__inner
{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 3rem;
}
.filter-bar__tabs-wrap
{
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.filter-bar__tabs
{
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;       /* Firefox: hide scrollbar */
    padding-bottom: 0;
}
/* Webkit: hide scrollbar track/thumb but keep scroll working */
.filter-bar__tabs::-webkit-scrollbar { display: none; }
/* left/right arrows */

.filter-bar__arrow
{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 100%;
    background: linear-gradient(to right, var(--bg) 60%, transparent);
    border: none;
    color: var(--ink-3);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, color 0.15s ease;
    position: relative;
    z-index: 2;
}
.filter-bar__arrow--right
{
    background: linear-gradient(to left, var(--bg) 60%, transparent);
}
@media (hover: hover)
{
    .filter-bar__arrow:hover { color: var(--accent); }
}
@media (hover: hover)
{
    /* show arrows when hovering the whole wrap */
.filter-bar__tabs-wrap:hover .filter-bar__arrow
{
        opacity: 1;
        pointer-events: auto;
    }
}
/* hide an arrow when it is not needed (set via JS) */
.filter-bar__arrow.is-hidden
{
    opacity: 0 !important;
    pointer-events: none !important;
}
.filter-tab
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-3);
    white-space: nowrap;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-block;
}
.filter-tab.is-active
{
    color: var(--accent);
    border-bottom-color: var(--accent);
}
@media (hover: hover)
{
    .filter-tab:hover
    {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }
}
.filter-bar__search
{
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--rule);
    padding: var(--space-1) var(--space-3);
}
/* the input inside has its own outline removed, so the surrounding box shows
   the focus instead — without this a keyboard user cannot tell they are in the
   search field */
.filter-bar__search:focus-within
{
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg);
}
.filter-bar__search-icon
{
    color: var(--ink-4);
    display: flex;
    align-items: center;
}
.filter-bar__search input
{
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    color: var(--ink);
    outline: none;
    width: 200px;
}
.filter-bar__search input::placeholder { color: var(--ink-4); }
/* list body */

.list-body
{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-8) var(--space-8) 0;
}
/* article list (clean vertical list, no thumbnails) */

.article-list
{
    list-style: none;
    margin-bottom: var(--space-12);
}
.article-list__item
{
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--rule);
}
.article-list__item:first-child { padding-top: 0; }
.article-list__tags
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.article-list__title
{
    font-family: var(--font-body);
    font-size: var(--size-lg);
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: var(--space-2);
}
.article-list__title a
{
    color: var(--ink);
    border-bottom: none;
}
@media (hover: hover)
{
    .article-list__title a:hover
    {
        color: var(--accent);
        border-bottom: none;
    }
}
.article-list__excerpt
{
    font-size: var(--size-base);
    color: var(--ink-2);
    line-height: var(--lh-base);
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-list__meta
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    gap: var(--space-4);
    align-items: center;
}
.article-list__meta > span:not(.article-list__meta-sep) { color: var(--ink-2); }
.article-list__meta-sep { color: var(--rule-heavy); }




/* ── Narrow screens ──────────────────────────────────────────── */
/* the list-header and filter-bar are shared by the articles, dashboard,
   editor, and featured-picker pages, so these rules serve all of them. */

@media (max-width: 700px)
{
    /* the site header does not pin on phones, so the filter bar sticks to
       the viewport top instead of hanging 3.25rem below it */
    .filter-bar { top: 0; }

    .list-header__inner

    {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-6) var(--space-4);
    }

    .filter-bar__inner

    {
        flex-wrap: wrap;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
    }

    .filter-bar__search { width: 100%; }
    .filter-bar__search input { width: 100%; }

    .list-body { padding-left: var(--space-4); padding-right: var(--space-4); }
}