/* ---- insights.css ---- */
/*
  Insights (immersive redesign): the index at /insights and, once an
  article's text is migrated, its own page at /insights/<slug>/. The list
  itself is the ReportRow block (blocks.css); this file holds the topic
  filter, the featured lead and the reading layout.
*/

/* ---- Topic filter. Without JavaScript it is not shown and every entry
   shows. The js/no-js class is set before first paint, so the filter takes
   its space from the start rather than pushing the list down. ---- */

.insights-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-block-end: var(--space-l);
}

.insights-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.no-js .insights-filter {
  display: none;
}

.insights-filter .pill {
  border-color: var(--theme-rule);
  background: transparent;
  color: var(--theme-fg);
}

.insights-filter .pill:hover {
  border-color: var(--theme-fg);
}

.insights-filter .pill[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.insights-count:empty {
  display: none;
}

.insight[hidden] {
  display: none;
}

.featured-title {
  max-inline-size: var(--measure-title);
  font-size: min(var(--step-4), var(--display-cap));
  font-stretch: calc(var(--wdth-display) * 1%);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
}

.featured-link {
  color: inherit;
  text-decoration-line: none;
}

.featured-link:hover,
.featured-link:focus-visible {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-hover);
}

/* ---- Newsletter (off for launch: site.newsletter) ---- */

.newsletter-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.newsletter-row {
  --cluster-space: var(--space-2xs);

  flex-wrap: nowrap;
  align-items: stretch;
}

.newsletter-row .input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.newsletter-row .button {
  flex: none;
}

.newsletter-form .form-status {
  max-inline-size: var(--form-max);
}

@media (width >= 48rem) {
  .newsletter-note {
    grid-column: 1 / 4;
  }

  .newsletter-wrap {
    grid-column: 4 / 10;
  }
}

/* ---- A migrated article ---- */

/* ---- An article ---- */

.page > .article {
  grid-column: full;
}

.article-header {
  padding-block: var(--hero-pad-top) var(--space-xl);
  border-block-end: var(--rule-hair) solid var(--theme-rule);
}

.article-header-inner,
.article-body {
  inline-size: min(100% - 2 * var(--page-margin), var(--narrow-max));
  margin-inline: auto;
}

.article-header-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.article-title {
  font-size: min(var(--step-3), var(--h1-cap));
  font-stretch: calc(var(--wdth-display) * 1%);
  font-weight: var(--weight-display);
  hyphens: manual;
  text-wrap: pretty; /* five lines and more: "balance" can leave the last word alone */
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-start: var(--space-s);
  border-block-start: var(--rule-hair) solid var(--theme-rule);
  font-family: var(--font-structural);
  font-size: var(--step--1);
}

.article-body {
  padding-block: var(--space-2xl) var(--space-section);
}

.article-body :is(h2, h3) {
  margin-block-start: var(--space-l);
}

.article-body h2 {
  font-size: var(--step-2);
}

/* ---- Article images: the cover published with each article ---- */

.featured-media,
.article-cover {
  overflow: hidden;
  border-radius: var(--radius-card);
}

.featured-media img,
.article-cover img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.article-cover {
  inline-size: min(100% - 2 * var(--page-margin), var(--content-max));
  margin: var(--space-xl) auto 0;
}

.article-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block: var(--space-m);
}

.article-figure img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-1);
  background: var(--paper-raised);
}