/* Related pages and keep-reading guides (src/related-pages.tsx, src/related-guides.tsx). Loaded by both components
   (link rel=stylesheet), so it applies on every V3 page, ported or not. Scoped to .nx; tokens only. */

.nx .gen-related, .nx .gen-guides { padding: var(--space-16) 0; border-top: 1px solid var(--line); }
.nx .gen-related .container, .nx .gen-guides .container { padding: 0 40px; }
.nx .related__title { margin: 0; font: 600 clamp(26px, 3.2vw, 36px)/1.15 var(--font-sans); letter-spacing: -0.03em; color: var(--ink); }
.nx .related__group { margin-top: var(--space-8); }
.nx .related__label { margin: 0; font: 600 15px/1.4 var(--font-sans); color: var(--muted); }

/* Link list: the prototype's more pattern (three columns, arrow at the end of each row) */
.nx .related__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); border-top: 1px solid var(--line); }
.nx .related__list li { min-width: 0; }
.nx .related__list a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 44px; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.nx .related__list a strong { font: 600 16px/1.35 var(--font-sans); }
.nx .related__list a .nx-icon { flex: none; transition: transform var(--duration-base) var(--ease-emphasized); }
.nx .related__list a:hover { color: var(--indigo-text); }
.nx .related__list a:hover .nx-icon { transform: translateX(4px); }
.nx .related__list a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Keep reading: guide cards */
.nx .related__cards { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.nx .related__cards li { min-width: 0; }
.nx .related__card { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: var(--space-8); border-radius: var(--radius-xl); background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform var(--duration-base) var(--ease-emphasized), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.nx .related__card strong { font: 600 19px/1.3 var(--font-sans); letter-spacing: -0.015em; }
.nx .related__card span { font-size: 15px; line-height: 1.6; color: var(--muted); }
.nx .related__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: var(--line-strong); }
.nx .related__card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.nx .related__more { margin: var(--space-8) 0 0; }

@media (max-width: 960px) {
  .nx .related__list, .nx .related__cards { grid-template-columns: minmax(0, 1fr); }
  .nx .related__list { column-gap: 0; }
}

@media (max-width: 720px) {
  .nx .gen-related, .nx .gen-guides { padding: var(--space-12) 0; }
  .nx .gen-related .container, .nx .gen-guides .container { padding: 0 16px; }
  .nx .related__card { padding: var(--space-6); }
}

/* Case study cards: the cover screenshot sits flush at the top of the card (src/related-case-studies.tsx, src/case-study-page.tsx). */
.nx .related__card--cover { padding: 0; overflow: hidden; }
.nx .related__thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--line); background: var(--surface); }
.nx .related__card--cover .related__text { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-8) var(--space-8); }
@media (max-width: 720px) { .nx .related__card--cover .related__text { padding: var(--space-6); } }
.nx .related__card--cover .related__text { color: var(--ink); font-size: inherit; line-height: inherit; }
.nx .related__card--cover .related__text > span { font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }