/* Articles hub (/articles) — built on the course-finder primitives in lsib-courses-page.css */

/* Quotable summary under the hero lede */
.page-hero .lsib-listing-answer{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--text);max-width:44em}

/* Filter sidebar: topic links styled like the course filters */
.filters .fh .fclear{color:var(--blue);font-size:13px;font-weight:600}
.filters .fh .fclear:hover{text-decoration:underline}
.filters .topics{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.filters .topic{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px;margin:0 -8px;font-size:15px;color:var(--text);line-height:1.35;border-left:2px solid transparent}
.filters .topic:hover{color:var(--blue);background:var(--blue-softer)}
.filters .topic.is-active{color:var(--blue);font-weight:600;background:var(--blue-soft);border-left-color:var(--blue)}
.filters .topic svg{width:14px;height:14px;flex-shrink:0}

/* Results bar: server-rendered form */
.results-bar .btn{height:48px}
.results-bar .field input[type="search"]::-webkit-search-decoration{display:none}
.chips-active .chip-remove{display:inline-flex;align-items:center;gap:8px;background:var(--blue-soft);border:1px solid #CFE0F1;color:var(--blue);font-size:13px;font-weight:600;padding:6px 10px}
.chips-active .chip-remove:hover{background:var(--crimson);border-color:var(--crimson);color:#fff}

/* Article cards: same shell as course cards */
.acgrid .ccard h3{font-size:22px}
.acgrid .ccard h3 a{color:var(--ink)}
.acgrid .ccard .subj{font-size:14px;color:var(--muted);line-height:1.45}
.acgrid .ccard .fee b{display:inline;font:600 15px/1 var(--sans);color:var(--ink)}
.acgrid .ccard .fee{font-size:13px}

/* Pager: anchor version of the catalog pager */
.catalog-pager .pg{min-width:40px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:14px;text-align:center}
.catalog-pager .pg:hover{border-color:var(--blue);color:var(--blue)}
.catalog-pager .pg[aria-current="page"]{border-color:var(--crimson);color:var(--crimson);font-weight:600}
.empty-state p{margin:0}
.empty-state a{color:var(--blue);font-weight:600;text-decoration:underline}

@media (max-width:1100px){
  .filters.open{display:block;margin-bottom:24px}
}
@media (max-width:560px){
  .results-bar .btn-red{flex:1 1 auto;justify-content:center}
}
