/* ── blog 03 Filter bar — blog/sections/03-filter-bar/brief.md ──
   Figma row at page y 1130 (50 below the hero), 18px lh .94. Item centres x 303.5 / 437 / 584 / 772.5 / 944.5 / 1095.5;
   "Sort by: Latest" centred 1584 + chevron 28×16 (rotated, pointing down) @ x 1658. Active = coral + underline. */

.bl-listing { background: var(--bl-page); }
.bl-filter {
    position: relative;
    width: calc(1920 * var(--u));
    height: calc(120 * var(--u));
    margin-inline: auto;
}
.bl-filter__cats { margin: 0; padding: 0; list-style: none; }
.bl-filter__cats li, .bl-filter__sort { position: absolute; top: calc(50 * var(--u)); translate: -50% 0; }
.bl-filter__cats li:nth-child(1) { left: calc(303.5 * var(--u)); }
.bl-filter__cats li:nth-child(2) { left: calc(437 * var(--u)); }
.bl-filter__cats li:nth-child(3) { left: calc(584 * var(--u)); }
.bl-filter__cats li:nth-child(4) { left: calc(772.5 * var(--u)); }
.bl-filter__cats li:nth-child(5) { left: calc(944.5 * var(--u)); }
.bl-filter__cats li:nth-child(6) { left: calc(1095.5 * var(--u)); }
.bl-filter button, .bl-filter__sort, .bl-filter select {
    padding: 0;
    font: inherit;
    font-size: clamp(15px, .9375vw, 18px);
    line-height: .94;
    color: var(--skin-black);
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}
.bl-filter button { transition: color .2s ease; }
.bl-filter button:hover { color: var(--skin-coral); }
.bl-filter button.is-active { color: var(--skin-coral); text-decoration: underline; text-underline-offset: 3px; }

.bl-filter__sort { left: calc(1600 * var(--u)); display: flex; align-items: center; gap: .3em; }
.bl-filter select {
    appearance: none;
    padding-right: calc(28px + .7em);
    background-position: right center;
    background-size: 28px 16px;
    background-repeat: no-repeat;
}
/* chevron points down (Figma 1:1245 — the outlined polygon rotated 180°) */
.bl-filter select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'%3E%3Cpath d='M1.5 1.5h25L14 14.2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }

@media (max-width: 991.98px) {
    .bl-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; width: calc(100% - 2 * var(--skin-gutter)); height: auto; padding: 40px 0 24px; }
    .bl-filter__cats { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    .bl-filter__cats li, .bl-filter__sort { position: static; translate: none; }
    .bl-filter button, .bl-filter__sort, .bl-filter select { font-size: 16px; }
}