/* ============================================================
   UNBIAS REVIEW — Category archive (/[category])
   Reuses components.css editorial modules; adds archive head,
   sub-category chips, sort, and a paginated post grid.
   Ported onto unbias-* class names; every rule scoped under
   .unbias-arc. Built on the Unbias tokens (tokens.css).
   ============================================================ */

/* money / savings green (parity with store/dsx roots) */
.unbias-arc{ --save:#0F8A5B; --save-tint:#E6F5EE; }

/* content container — constrain + center like the site chrome (max 1200) */
.unbias-arc .unbias-arc-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}

/* Neutralize a rogue host theme reset.css that paints every <button> magenta
   (#CC3366 border + hover/focus background) and forces white-space:nowrap, and
   colors every <a> magenta. Our scoped rules below re-style the elements we own. */
.unbias-arc button{appearance:none;-webkit-appearance:none;border:0;border-radius:0;background-color:transparent;color:inherit;font:inherit;white-space:normal;cursor:pointer;}
.unbias-arc a{color:inherit;}
/* Re-assert every filled control's own background on :hover/:focus so Hello
   theme reset.css ([type=button]:hover{background:#CC3366}, specificity 0,2,0)
   can't tie+win by load order. These are 0,3,0 so they always win. */
.unbias-arc .unbias-fchip:hover,.unbias-arc .unbias-fchip:focus{background:#fff;color:var(--ink);}
.unbias-arc .unbias-fchip.active:hover,.unbias-arc .unbias-fchip.active:focus{background:var(--ink-deep);color:#fff;}

/* ---------- archive head ---------- */
.unbias-arc .unbias-arc-head{padding:30px 0 4px;border-bottom:1px solid var(--border);}
.unbias-arc .unbias-arc-head .kick{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-text);}
.unbias-arc .unbias-arc-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5.5vw,44px);letter-spacing:-.02em;margin-top:8px;}
.unbias-arc .unbias-arc-head .sub{font-size:15.5px;line-height:1.6;color:var(--text-muted);margin-top:10px;max-width:64ch;}
.unbias-arc .unbias-arc-stats{display:flex;gap:18px;flex-wrap:wrap;margin:16px 0 18px;font-size:13px;font-weight:600;color:var(--text-muted);}
.unbias-arc .unbias-arc-stats .st{display:inline-flex;align-items:center;gap:6px;}
.unbias-arc .unbias-arc-stats .st svg{width:15px;height:15px;color:var(--teal-text);}

/* ---------- sub-category chips + sort (sticky) ---------- */
.unbias-arc .unbias-arc-filterbar{position:sticky;top:var(--unbias-sticky-top);z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  padding:12px 0;border-bottom:1px solid var(--border);}
.unbias-arc .unbias-arc-filterbar .bar{display:flex;align-items:center;gap:14px;}
.unbias-arc .unbias-arc-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;}
.unbias-arc .unbias-arc-chips::-webkit-scrollbar{display:none;}
.unbias-arc .unbias-arc-sort{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-muted);}
.unbias-arc .unbias-arc-sort select{font-family:var(--font-ui);font-size:13.5px;font-weight:700;color:var(--ink);
  border:1.5px solid var(--border);border-radius:var(--r-pill);padding:8px 12px;background:#fff;cursor:pointer;}
.unbias-arc .unbias-arc-sort select:focus{outline:2px solid var(--teal);outline-offset:1px;}

/* filter chip (fchip is not loaded site-wide — define a scoped copy here,
   matching the store-page chip exactly) */
.unbias-arc .unbias-fchip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none;
  font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:var(--r-pill);
  border:1.5px solid var(--border);background:#fff;color:var(--ink);transition:all .14s ease;cursor:pointer;}
.unbias-arc .unbias-fchip .cnt{font-size:11px;font-weight:800;background:var(--surface-alt);color:var(--text-muted);padding:1px 7px;border-radius:var(--r-pill);}
.unbias-arc .unbias-fchip:hover{border-color:var(--teal);}
.unbias-arc .unbias-fchip.active{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff;}
.unbias-arc .unbias-fchip.active .cnt{background:rgba(255,255,255,.18);color:#fff;}

/* ---------- grid section ---------- */
.unbias-arc .unbias-arc-grid-sec{padding:26px 0 8px;}
.unbias-arc .unbias-arc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 26px;}
.unbias-arc .unbias-arc-grid .unbias-card.is-hidden{display:none;}
.unbias-arc .unbias-arc-count{font-size:13px;font-weight:600;color:var(--text-subtle);margin-bottom:16px;}

/* empty state */
.unbias-arc .unbias-arc-empty{display:none;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;text-align:center;color:var(--text-muted);}
.unbias-arc .unbias-arc-empty.show{display:flex;}
.unbias-arc .unbias-arc-empty svg{width:34px;height:34px;color:var(--text-subtle);}
.unbias-arc .unbias-arc-empty b{font-family:var(--font-display);font-size:17px;color:var(--ink);}
.unbias-arc .unbias-arc-empty p{font-size:14px;margin:0;}

/* load more */
.unbias-arc .unbias-arc-more{display:flex;justify-content:center;margin:26px 0 8px;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .unbias-arc .unbias-arc-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){
  .unbias-arc .unbias-arc-head{padding:20px 0 4px;}
  .unbias-arc .unbias-arc-grid{grid-template-columns:1fr 1fr;gap:22px 16px;}
  .unbias-arc .unbias-arc-sort span{display:none;}      /* keep just the select */
}
@media (max-width:480px){
  .unbias-arc .unbias-arc-grid{grid-template-columns:1fr;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .unbias-arc .unbias-fchip{transition:none;}
}