/* ============================================================
   Knowledge article page — reading layout
   The grammar of a newsroom article page (modelled on the Reuters
   article page the owner named): one centred reading column that
   carries the head and the body, a byline row under the dek, the
   lead picture below the byline, uppercase in-body section heads,
   and the topic terms at the end of the article. The trust and
   conversion modules around the column — public sources, related
   records, the article's own next step — keep the site's section
   grammar. Colours and type come from tokens.css; .eyebrow,
   .section-heading, .nz-chip, .nz-grid, .nz-card and the buttons
   are global. Local prefix: nz-kn-.
   ============================================================ */

.nz-kn {
  overflow-x: clip;
}

/* ---- Head: the article head, centred at reading width ---- */
.nz-kn-hero {
  padding: 44px 0 30px;
}

.nz-kn-head {
  max-width: 700px;
  margin: 0 auto;
}

.nz-kn-head__title {
  margin: 12px 0 0;
  font-size: 2.3rem;
  line-height: 1.22;
}

/* The approval line under the title — a green check with bold small text,
   one sentence maintained in the shared site-information record. */
.nz-kn-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

/* The mark leans slightly for a hand-drawn feel. The ring is lighter than
   the check and stays open at the top right — the gap the check breaks
   through on its way out of the circle. */
.nz-kn-badge__icon {
  flex: 0 0 auto;
  color: var(--green-dark);
  transform: rotate(-8deg);
}

.nz-kn-badge__ring {
  stroke: var(--green);
}

.nz-kn-badge__check {
  stroke: var(--green-dark);
}

.nz-kn-head__dek {
  margin: 20px 0 0;
  color: var(--gray-text);
  font-size: 1.13rem;
  line-height: 1.65;
}

.nz-kn-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 22px 0 0;
  padding: 14px 0 18px;
  border-top: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
  font-size: 13.5px;
}

.nz-kn-byline__author {
  color: var(--color-ink);
  font-weight: 600;
}

.nz-kn-byline__date,
.nz-kn-byline__reader {
  color: var(--gray-text);
}

.nz-kn-byline__date::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 18px;
  border-radius: 50%;
  background: var(--gray-line);
  vertical-align: 3px;
}

.nz-kn-head__media {
  margin: 28px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.nz-kn-head__img {
  display: block;
  width: 100%;
  height: auto;
}

.nz-kn-head__cap {
  padding: 10px 2px 0;
  color: var(--gray-text);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .nz-kn-hero {
    padding: 28px 0 22px;
  }

  .nz-kn-head__title {
    font-size: 1.72rem;
  }

  .nz-kn-head__dek {
    font-size: 1.05rem;
  }
}

/* ---- The article: the same centred column, set for long-form reading ---- */
.nz-kn-body {
  padding: 0 0 78px;
}

.nz-kn-article {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.07rem;
  line-height: 1.8;
}

.nz-kn-article > p:first-child {
  margin-top: 26px;
}

.nz-kn-article > *:last-child {
  margin-bottom: 0;
}

.nz-kn-article p {
  margin: 1.2em 0 0;
}

/* In-body section heads take the newsroom treatment: small caps as anchors,
   ink instead of the brand colour, so the article reads as text first. */
.nz-kn-article h2 {
  margin: 2.4em 0 0;
  color: var(--color-ink);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
}

.nz-kn-article h3 {
  margin: 1.9em 0 0;
  color: var(--color-ink);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.4;
}

.nz-kn-article h4 {
  margin: 1.6em 0 0;
  font-size: 1.02rem;
}

.nz-kn-article a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nz-kn-article ul,
.nz-kn-article ol {
  margin: 1.2em 0 0;
  padding-left: 1.4em;
}

.nz-kn-article li + li {
  margin-top: 0.45em;
}

.nz-kn-article li::marker {
  color: var(--green);
  font-weight: 600;
}

.nz-kn-article blockquote {
  margin: 1.8em 0 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--green);
  color: var(--gray-text);
}

.nz-kn-article blockquote p {
  margin: 0;
}

.nz-kn-article hr {
  margin: 2.2em 0 0;
  border: 0;
  border-top: 1px solid var(--gray-line);
}

.nz-kn-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.nz-kn-article code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gray-bg);
  font-size: 0.9em;
}

/* Comparison and checklist articles lean on tables, so tables get the same
   care as the section cards elsewhere. */
.nz-kn-article table {
  width: 100%;
  margin: 1.9em 0 0;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  font-size: 0.92rem;
  line-height: 1.55;
  overflow: hidden;
}

.nz-kn-article th,
.nz-kn-article td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--gray-line);
  text-align: left;
  vertical-align: top;
}

.nz-kn-article th {
  background: var(--gray-bg);
  color: var(--color-ink);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nz-kn-article tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 650px) {
  .nz-kn-article table,
  .nz-kn-article thead,
  .nz-kn-article tbody,
  .nz-kn-article tr,
  .nz-kn-article td {
    display: block;
  }

  .nz-kn-article thead {
    display: none;
  }

  .nz-kn-article tr {
    margin-top: 12px;
    border: 1px solid var(--gray-line);
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
  }

  .nz-kn-article td {
    border-bottom: 1px solid var(--gray-line);
  }
}

/* ---- Topics: the terms close the article, the way a newsroom page does ---- */
.nz-kn-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-line);
}

.nz-kn-topics__label {
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nz-kn-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Sources: the public rows of the record ---- */
.nz-kn-source-list {
  max-width: 780px;
  margin: 36px 0 0;
  padding: 4px 20px;
  border: 1px solid var(--gray-line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: var(--white);
  list-style: none;
}

.nz-kn-source {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 3px 22px;
  padding: 11px 0;
}

.nz-kn-source + .nz-kn-source {
  border-top: 1px solid var(--gray-line);
}

.nz-kn-source__type {
  padding-top: 2px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nz-kn-source__title {
  font-size: 14.5px;
  line-height: 1.65;
}

.nz-kn-source__title a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .nz-kn-source-list {
    padding: 2px 16px;
  }

  .nz-kn-source {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 10px 0;
  }
}

/* ---- Related records: the article's Read-next groups ---- */
.nz-kn-relatedgroup + .nz-kn-relatedgroup {
  margin-top: 40px;
}

.nz-kn-relatedgroup__title {
  margin: 0 0 18px;
  color: var(--blue);
  font-size: 1.12rem;
}

/* ---- The article's own next step: the blue band ---- */
/* A real blue band — the background rule was missing, which left the white
   heading invisible on the white page. The copy sits left and the action
   balances it on the right, the same flex grammar as the closing quote band
   (site.css .quote-inner), so the row reads as one offer instead of a column
   with dead space beside it. */
.nz-kn-section--blue {
  background: var(--blue);
}

.nz-kn-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.nz-kn-next__copy {
  max-width: 700px;
}

.nz-kn-section--blue h2,
.nz-kn-section--blue .eyebrow {
  color: var(--white);
}

.nz-kn-section--blue h2 {
  margin-bottom: 0;
  max-width: 26ch;
  font-size: 1.7rem;
  line-height: 1.3;
}

.nz-kn-next__text {
  margin: 12px 0 0;
  max-width: 52ch;
  color: var(--blue-soft);
  font-size: 15px;
  line-height: 1.6;
}

.nz-kn-section--blue .button {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 940px) {
  .nz-kn-next {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }

  .nz-kn-section--blue .button {
    width: 100%;
  }
}

/* ---- Section rhythm for the banded modules ---- */
.nz-kn-section {
  padding: 72px 0;
}

.nz-kn-section--soft {
  background: var(--gray-bg);
}

@media (max-width: 760px) {
  .nz-kn-section {
    padding: 48px 0;
  }

  .nz-kn-body {
    padding-bottom: 52px;
  }
}

/* ---- Left rail: the equipment and the application groups float beside the
   article on viewports wide enough for a gutter. The reading column stays
   centred — the rail lives in the left third of the container and sticks
   under the header while the article scrolls. Below 1280px the rail does not
   exist and the same groups render in the bottom section. ---- */
.nz-kn-railgroup__label {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nz-kn-railgroup__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-kn-raillink {
  display: block;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  overflow: hidden;
}

.nz-kn-raillink__body {
  display: block;
  padding: 11px 14px 12px;
}

/* The equipment card leads with the record's own picture, same as the cards
   in the bottom section; an equipment record without a picture falls back to
   the plain text card. */
.nz-kn-raillink__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--gray-line);
  background: var(--gray-bg);
}

.nz-kn-raillink__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nz-kn-raillink__type {
  display: block;
  margin-bottom: 3px;
  color: var(--gray-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nz-kn-raillink__title {
  display: block;
  color: var(--color-ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.nz-kn-raillink:hover {
  border-color: var(--blue);
}

.nz-kn-raillink:hover .nz-kn-raillink__title {
  color: var(--blue);
}

@media (min-width: 1280px) {
  .nz-kn-body__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 700px) minmax(0, 1fr);
    column-gap: 48px;
  }

  .nz-kn-rail {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    width: min(100%, 264px);
  }

  /* The rail stops below the pinned stack — the 38px blue bar plus the 80px
     header — and keeps the 24px of air it had below the header alone. */
  .nz-kn-rail__inner {
    position: sticky;
    top: 142px;
    display: grid;
    gap: 26px;
  }

  .nz-kn-article {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
  }

  /* The groups the rail carries leave the bottom section on the wide
     viewports, so no card is listed twice on one screen. */
  .nz-kn-relatedgroup--inrail,
  .nz-kn-section--railonly {
    display: none;
  }
}

@media (max-width: 1279.98px) {
  .nz-kn-rail {
    display: none;
  }
}