/* ==========================================================================
   Insights listing — the only styles that /news does not already provide.

   news.css does all the heavy lifting (hero, grid, cards, pagination, loader)
   and is loaded first; this file adds the category link row that replaces the
   /news dropdown, and nothing else. Keeping it separate means /news keeps
   rendering from an unmodified news.css.

   Every colour below comes from the custom properties news.css declares on
   .sc-news, so the two sections stay in step if the palette changes.
   ========================================================================== */

/* The row of category links sits in the toolbar's first grid column, where
   /news puts its dropdown, so the toolbar layout is unchanged. */
.sc-news__cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.sc-news__cat {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--sc-border);
  border-radius: 999px;
  background: #fff;
  color: var(--sc-blue);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sc-news__cat:hover,
.sc-news__cat:focus-visible {
  border-color: var(--sc-cyan);
  background: var(--sc-soft);
  color: var(--sc-blue-dark);
  text-decoration: none;
}

.sc-news__cat:focus-visible {
  outline: 2px solid var(--sc-cyan);
  outline-offset: 2px;
}

/* The category currently being viewed. aria-current carries the same meaning
   for assistive tech; the class is what paints it. */
.sc-news__cat.is-active {
  border-color: var(--sc-blue);
  background: var(--sc-blue);
  color: #fff;
}

.sc-news__cat.is-active:hover,
.sc-news__cat.is-active:focus-visible {
  border-color: var(--sc-blue-dark);
  background: var(--sc-blue-dark);
  color: #fff;
}

/* "← All Insights" under a category heading. */
.sc-news__hero .sc-news__intro a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
}

.sc-news__hero .sc-news__intro a:hover {
  border-bottom-color: #fff;
}

/* The links wrap freely, so on narrow screens let them use the full row rather
   than being squeezed into the dropdown's old column width. */
@media (max-width: 900px) {
  .sc-news__cats {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-news__cat {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   "Not released" badge.

   Shown only to a signed-in viewer, on a post whose publish_release is still
   in the future. The public never sees these posts at all — the listing query
   filters them out and the article answers 404 — so the badge exists to
   explain why a signed-in editor can see something the site cannot.

   Amber rather than the grey of the status badges: this is a state that will
   resolve by itself on the release date, not a problem to fix.
   -------------------------------------------------------------------------- */
.sc-news__status-badge.sc-news__status-unreleased,
.sc-post__status-badge.sc-post__status-unreleased {
  background: #b25e06;
  color: #fff;
}

/* The detail page renders its badge inline with the By/Published/Read Time
   run, where the surrounding text is larger. */
.sc-post__status-badge.sc-post__status-unreleased {
  font-size: 11px;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Editable intro under the hero title (one Concrete area per category). It
   sits on the dark hero, so block content is re-coloured to read on navy. */
.sc-news__cms-intro {
  max-width: 760px;
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
}

/* Spacing lives on the content, so an unused area adds no gap to the hero. */
.sc-news__cms-intro > :first-child {
  margin-top: 18px;
}

.sc-news__cms-intro h2,
.sc-news__cms-intro h3,
.sc-news__cms-intro h4,
.sc-news__cms-intro p,
.sc-news__cms-intro li {
  color: inherit;
}

.sc-news__cms-intro p:last-child {
  margin-bottom: 0;
}

.sc-news__cms-intro a {
  color: #fff;
  text-decoration: underline;
}