/* Non-critical CSS for the Byte Brief home/archive/category chrome.
   The critical above-the-fold styles (variables, top bar, subnav, card
   skeleton) stay inlined in templates/base_site.html <style>; this
   file holds the rest, loaded with media="print" onload="this.media='all'"
   trick so it doesn't block first paint (Phase 4.4).

   Sections:
   - Footer chrome
   - Pagination chrome
   - Responsive (980px and 560px breakpoints) — these need to be
     in the same cascade to override base rules, so we load them
     non-render-blocking.
*/

footer.bb-footer {
  border-top: 1px solid var(--bb-line);
  padding: 28px 0 36px;
  color: var(--bb-muted);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer.bb-footer a { margin-left: 18px; }
footer.bb-footer a:first-child { margin-left: 0; }
footer.bb-footer a:hover { color: var(--bb-accent); text-decoration: none; }

.bb-pagination {
  border-top: 1px solid var(--bb-line);
  padding-top: 24px;
  margin-bottom: 32px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.bb-pagination a {
  padding: 6px 12px;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  font-weight: 500;
}
.bb-pagination a:hover {
  border-color: var(--bb-accent);
  color: var(--bb-accent);
  text-decoration: none;
}
.bb-pagination span { color: var(--bb-muted); }

@media (max-width: 980px) {
  .bb-topbar { grid-template-columns: 1fr auto 1fr; gap: 12px; }
  .bb-wordmark { font-size: 28px; }
  .bb-pill .bb-label { display: none; }
  .bb-subnav {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 18px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .bb-subnav::-webkit-scrollbar { display: none; }
  .bb-shell { padding: 0 20px; }
}
@media (max-width: 560px) {
  .bb-topbar-left .bb-pill:not(:first-child) { display: none; }
  .bb-btn-sign { display: none; }
}