/* Shared category navigation for the column index, archives, and article metadata. */
.column-listing-intro { padding-bottom: 0; }
.column-listing-intro .section-note { max-width: 54em; margin-top: 18px; }
.column-listing-content { padding-top: 36px; }
.column-category-description > * + * { margin-top: 12px; }
.column-category-navigation { margin-bottom: 38px; }
.column-category-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.column-category-list li { max-width: 100%; min-width: 0; }
.column-category-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 9px 17px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); background: var(--white); font-size: 13px; font-weight: 650; line-height: 1.7; text-align: center; overflow-wrap: anywhere; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.column-category-link:hover { border-color: #ce0714; color: #ce0714; background: #fff3f2; }
.column-category-link[aria-current="page"] { border-color: #ce0714; color: var(--white); background: #ce0714; }
.column-category-link:focus-visible, .article-category-links a:focus-visible { outline: 3px solid #ce0714; outline-offset: 3px; }
.article-category-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.article-category-links a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 7px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-soft); background: var(--white); font-size: 11px; font-weight: 650; line-height: 1.7; overflow-wrap: anywhere; }
.article-category-links a:hover { border-color: #ce0714; color: #ce0714; background: #fff3f2; }

@media (max-width: 640px) {
  .column-listing-content { padding-top: 28px; }
  .column-category-navigation { margin-bottom: 28px; }
  .column-category-list { gap: 8px; }
  .column-category-link { padding-inline: 12px; font-size: 12px; }
  .article-category-links { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .column-category-link { transition: none; }
}