/* News & Insights listing. Loads only with template-news-insights.php.
 *
 * Hero         hero-capability.css (page fields, or the filtered capability's)
 * Filter bar   filter-bar.css, flush under the hero like the tab bar
 * Grid         .hlb-card-grid in news-card.css, compact cards, 3 up at 900+
 * Pagination   pagination.css
 */

/* Also in capability.css and capability-landing.css. Move to tokens.css. */
.hlb-cap-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hlb-news {
  background: var(--hlb-white);
}

.hlb-news-results {
  position: relative;
  padding: 32px var(--hlb-gutter) 112px;
  transition: opacity .2s ease;
}

/* While a filter change loads. A light dip only: the cards themselves do the
   moving once the new results land (news-filters.js). */
.hlb-news-results.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Cards leaving the grid: copies pinned where they were, fading out while
   the cards that stay glide to their new places. */
.hlb-news-ghost {
  position: absolute;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}

.hlb-news-results .hlb-card-grid__item {
  position: relative;
  z-index: 1;
}

/* The hero cross-fade: the incoming hero sits over the outgoing one. */
.hlb-cap-hero.is-incoming {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

.hlb-news-results__inner {
  width: 100%;
  max-width: var(--hlb-container);
  margin-inline: auto;
}

.hlb-news-results__inner:focus,
#hlb-news-results-title:focus {
  outline: none;
}

/* Status: Clear All Filters left (comp), count right. */
.hlb-news-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  min-height: 24px;
  margin: 0 0 40px;
}

.hlb-news-status {
  --hlb-link-fg: var(--hlb-navy);
}

.hlb-news .hlb-news-status__clear {
  font: 400 12px/1.4 var(--hlb-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hlb-news .hlb-news-status__count {
  margin: 0 0 0 auto;
  font: 400 13px/1.4 var(--hlb-font-body);
  color: var(--hlb-slate);
}

/* Empty. */
.hlb-news-empty {
  padding: 56px 0 24px;
  text-align: center;
}

.hlb-news .hlb-news-empty__title {
  margin: 0 0 20px;
  font: 400 20px/28px var(--hlb-font-body);
  color: var(--hlb-ink);
}

.hlb-news .hlb-news-empty__action {
  margin: 0;
}

@media (max-width: 699px) {
  .hlb-news-results {
    padding-top: 24px;
    padding-bottom: 72px;
  }

  .hlb-news-status {
    margin-bottom: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hlb-news-results {
    transition: none;
  }
}