/* assets/css/v2/pages-lists.css — Listing pages of the news skin: /articles, /category/{slug}, /categories (heading, filter bar, pager, tiles, empty state)
   keywords: listing, archive, pager, pagination 44px, category tiles, search form, empty state, no ads
   Needs tokens-news, base, components-cards, chrome-home, pages-home. Cards and breadcrumbs come from components-cards.css. */

.ls-head { padding-block: var(--sp-5) var(--sp-4); border-block-end: var(--rule); }
.ls-head h1 { font-size: var(--fs-h1); line-height: 1.15; overflow-wrap: anywhere; }
.ls-head p { max-inline-size: 60ch; margin-block-start: var(--sp-3); color: var(--c-muted); font-size: var(--fs-lg); }

.ls-tools { display: grid; gap: var(--sp-4); padding-block: var(--sp-5); }
.chip.is-active { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.ls-search { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ls-search input[type="search"] { flex: 1 1 220px; min-inline-size: 0; min-block-size: 48px; padding-inline: var(--sp-4); border: 2px solid var(--c-text); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); }
.ls-count { margin-block-end: var(--sp-4); color: var(--c-muted); }
/* phones: one scrolling row, so the height cannot change when the web font replaces the fallback (CLS) */
@media (max-width: 767px) {
  .ls-tools .hm-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-block-end: var(--sp-1); -webkit-overflow-scrolling: touch; }
  .ls-tools .hm-chips li { flex: none; }
}
@media (min-width: 1024px) { .ls-tools { grid-template-columns: 1fr minmax(320px, 420px); align-items: start; } }

/* ---- pager ---- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); margin-block: var(--sp-7) var(--sp-5); }
.pager ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.pager a, .pager span, .pager .gap { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; padding-inline: var(--sp-3); border: 2px solid var(--c-text); border-radius: var(--radius); color: var(--c-text); font-weight: var(--fw-strong); text-decoration: none; }
.pager .gap { border-color: transparent; }
.pager a:hover { background: var(--c-text); color: var(--c-bg); }
.pager .is-current { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.pager-step { padding-inline: var(--sp-4); }

/* ---- categories page ---- */
.ct-grid { display: grid; gap: var(--sp-4); margin-block: var(--sp-5); list-style: none; grid-template-columns: minmax(0, 1fr); }
.ct-tile { position: relative; padding: var(--sp-4) var(--sp-5); border: 2px solid var(--c-text); border-radius: var(--radius); }
.ct-tile:hover { border-color: var(--c-brand); }
.ct-tile h2 { font-size: var(--fs-h3); }
.ct-tile h2 a { color: var(--c-text); text-decoration: none; }
.ct-tile h2 a::after { content: ""; position: absolute; inset: 0; }   /* whole tile is the link */
.ct-tile h2 a:focus-visible { outline: none; }
.ct-tile h2 a:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.ct-count { margin-block-start: var(--sp-1); color: var(--c-brand); font-weight: var(--fw-strong); }
.ct-desc { margin-block-start: var(--sp-2); color: var(--c-muted); }
@media (min-width: 600px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- empty state ---- */
.ls-empty { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-6) var(--sp-5); margin-block: var(--sp-5); background: var(--c-surface); border-inline-start: 8px solid var(--c-brand); }
.ls-empty h2 { flex: 1 1 100%; font-size: var(--fs-h3); }
.ls-empty p { flex: 1 1 100%; max-inline-size: 60ch; color: var(--c-muted); }