/* Primary and secondary stories form one card at every viewport width. */
@layer institutional {

  .page-shell .news-page .news-pair-standalone { display: none !important; }
  .page-shell .news-page .news-index-entry.news-pair {
    --news-item-surface: transparent;
    min-width: 0;
    background: var(--news-card-surface);
    border-radius: var(--radius-ui);
  }

  html[lang] .page-shell .news-page .news-pair > .news-index-item.news-pair-primary {
    border-radius: var(--radius-ui) var(--radius-ui) 0 0 !important;
  }

  .page-shell .news-page .news-pair-secondary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: var(--news-related-surface);
    border-radius: 0 0 var(--radius-ui) var(--radius-ui);
    color: var(--ink, #172c3b);
    text-decoration: none;
  }

  .page-shell .news-page .news-pair-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: #ccd4db;
  }

  .page-shell .news-page .news-pair-secondary h3 {
    min-width: 0;
    margin: 0;
  }

  .page-shell .news-page .news-pair-thumbnail {
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-ui);
  }

  .page-shell .news-page .news-pair-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .page-shell .news-page .news-pair-secondary:focus-visible {
    outline: none !important;
    outline-offset: 3px;
  }

  @media (hover: hover)  {
    .page-shell .news-page .news-pair-secondary:hover h3 { color: #426c85; }
  }

}

/* Related news retains an excerpt in the same reading column as its title. */
@layer institutional {
  .page-shell .news-page .news-pair-copy { grid-column: 1; grid-row: 1; min-width: 0; }
  .page-shell .news-page .news-pair-secondary { align-items: start; }
  .page-shell .news-page .news-pair-secondary .news-pair-thumbnail { grid-column: 2; grid-row: 1; align-self: start; }
  .page-shell .news-page .news-pair-copy :is(h3, p) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 2lh;
  }
  /* Secondary news is intentionally a one-line preview, not a full heading. */
  .page-shell .news-page .news-pair-copy h3 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1;
    max-height: 1lh !important;
    text-overflow: ellipsis;
  }
  .page-shell .news-page .news-pair-copy p { margin: 6px 0 0; color: #5f6e79; }

}
@layer typography {
  html[lang] .page-shell .news-page .news-pair-copy p {
    font-family: var(--site-font-body);
    font-size: 14px !important;
    font-weight: var(--en-weight-copy, 400) !important;
    line-height: 1.6 !important;
  }
}

@layer typography {

  html[lang] .page-shell .news-page .news-pair-secondary h3 {
    font-family: var(--site-font-body);
    font-size: 17px !important;
    font-weight: var(--en-weight-copy, 400) !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
  }
}

@layer institutional {
  .page-shell .news-page .news-pair-secondary[data-text-only] { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 681px) and (orientation: landscape)  {
    .page-shell .news-page .news-pair-secondary { padding: 20px 28px; grid-template-columns: minmax(0, 1fr) 72px; }
    .page-shell .news-page .news-pair-secondary::before { left: 28px; right: 28px; }
  }
  html[lang] .page-shell .news-page .news-pair:has(> .news-pair-secondary[data-search-hidden]) > .news-pair-primary { border-radius: var(--radius-ui) !important; }
  .news-page .news-pair:has(> .news-pair-primary[data-search-hidden]) > .news-pair-secondary { border-radius: var(--radius-ui); }
  .news-page .news-pair:has(> .news-pair-primary[data-search-hidden]) > .news-pair-secondary::before { display: none; }
}

/* Desktop related stories: a compact reading row below the main article. */
@layer institutional {
  @media (min-width: 681px) and (orientation: landscape)  {
    .page-shell .news-page .news-pair-secondary {
      grid-template-columns: minmax(0, 1fr) 128px;
      column-gap: 28px;
      min-height: 0;
      box-sizing: border-box;
      padding: 20px 28px;
    }
    .page-shell .news-page .news-pair-copy p { max-width: 88ch; }
    .page-shell .news-page .news-pair-secondary[data-text-only] {
      grid-template-columns: minmax(0, 1fr) 16px;
      min-height: 68px;
    }
    .page-shell .news-page .news-pair-secondary h3 { grid-column: 1; grid-row: 1; }
    .page-shell .news-page .news-pair-secondary[data-text-only] h3 { grid-column: 1; }
    .page-shell .news-page .news-pair-thumbnail {
      grid-column: 2;
      grid-row: 1;
      width: 128px;
      aspect-ratio: 3 / 2;
      border-radius: var(--radius-ui);
    }
    .page-shell .news-page .news-pair-secondary:not([data-text-only])::after { display: none; }
    .page-shell .news-page .news-pair-secondary::after {
      content: "→";
      grid-column: -2;
      grid-row: 1;
      align-self: center;
      color: #71838f;
      font: 400 16px/1 var(--site-font-body);
    }
  }
}
@layer typography {
  @media (min-width: 681px) and (orientation: landscape)  {
    html[lang] .page-shell .news-page .news-pair-secondary h3 {
      font-size: 18px !important;
      font-weight: var(--en-weight-emphasis, 500) !important;
      line-height: 1.5 !important;
    }
    html[lang] .page-shell .news-page .news-pair-copy p {
      font-size: 15px !important;
      line-height: 1.65 !important;
    }
    @media (hover: hover) and (pointer: fine)  {
      html[lang] .page-shell .news-page .news-pair-secondary:hover h3 {
        color: #426c85 !important;
      }
    }
    html[lang] .page-shell .news-page .news-pair-secondary:focus-visible h3 {
      color: #426c85 !important;
    }
  }
}
