/*
 * Content Hub (ArticleListingPage) — staged CSS additions.
 *
 * Deliberately NOT merged into the compiled wwwroot/assets/css/main.css:
 * that file is a build output of the lmcu-fe repo and would be clobbered by
 * the next FE rebuild. These rules live here until they are ported back into
 * lmcu-fe's source SCSS (see docs/superpowers/specs/2026-07-30-article-listing-lmcu-fe-changes.md,
 * not committed — docs/ is gitignored) and folded into main.css properly.
 *
 * Loaded from _Layout.cshtml AFTER main.css so it cascades last.
 */

/* --- Load-more (article-filter.js) -------------------------------------- *
 * Mirrors the existing .mlo-results .mlo-card-hidden rule
 * (wwwroot/assets/css/main.css ~21892) for the content-hub results grid.
 * article-filter.js toggles this class on .result-col items past the first
 * batch of 9.
 */
.result-col-hidden {
  display: none;
}

/* --- Filter chip <a> parity with <button> -------------------------------- *
 * The content-hub filter chips render as <a class="btn btn-primary"> (see
 * _ArticleFilter.cshtml), but main.css only styles <button> chips inside
 * .article-filter .filters-wrapper .btn-grid (main.css:20511, :20528 active,
 * :20534 hover). Without these rules the <a> chips fall through to two
 * generic Bootstrap-adjacent rules instead:
 *   - the mint "generic CTA" rule `a.btn-primary { color: #003865 !important; }`
 *     (main.css:16076-16081), and
 *   - Bootstrap's `.btn-primary.active` (main.css:6403), specificity (0,2,0),
 *     which sets a mid-blue background with no matching text-color override —
 *     the mint rule's !important #003865 text then sits on that blue
 *     background at under 4.5:1 contrast.
 *
 * These rules extend the same button treatment to <a>, using the same
 * selector shape (.article-filter .filters-wrapper .btn-grid a[.state]) so
 * they inherit the same specificity as the existing button rules —
 * (0,3,1) base / (0,4,1) active & hover — comfortably ahead of both
 * `a.btn-primary` (0,1,1) and Bootstrap's `.btn-primary.active` (0,2,0).
 * !important is required on `color` in every state here because the mint
 * rule above sets `color` with !important, and only a higher-specificity
 * !important declaration can win against another !important declaration.
 */
.article-filter .filters-wrapper .btn-grid a {
  -moz-border-radius: 36px;
  -webkit-border-radius: 36px;
  border-radius: 36px;
  background: #ffffff;
  border: 1px solid #004EA8;
  color: #004EA8 !important;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 12px 24px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.article-filter .filters-wrapper .btn-grid a.active {
  background: #004EA8;
  color: #ffffff !important;
  border-color: #004EA8 !important;
}
.article-filter .filters-wrapper .btn-grid a:hover {
  background: #004EA8;
  color: #ffffff !important;
  border-color: #004EA8 !important;
}