/* TPK Article Nav — global component (List line, 2026-09-26).
 * Desktop rules mirror the .tpk-tech-image-scoped block in
 * tpk-article-image-v34.css (L453-539) so the image family keeps its
 * exact look while blog text / news families and legacy fragments get
 * the same navigation. Adds mobile stacking (v34 has none) and the
 * is-empty placeholder used by the dynamic renderer.
 * Scoped rules in the family sheets (0,2,0) outrank the global ones
 * (0,1,0) by design: they carry identical declarations, so the override
 * is invisible; the mobile block uses !important for the same reason. */

.tpk-article-nav {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 34px;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.tpk-article-nav-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  transition: color .25s ease;
}
.tpk-article-nav-link.is-next {
  justify-content: flex-end;
  text-align: right;
}
.tpk-article-nav-link.is-empty {
  pointer-events: none;
}
.tpk-article-nav-copy {
  min-width: 0;
  max-width: 330px;
}
.tpk-article-nav-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.tpk-article-nav-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.48;
  font-weight: 600;
  transition: color .25s ease;
}
.tpk-article-nav-arrow {
  flex: 0 0 17px;
  margin-top: 17px;
  color: var(--muted);
  transition: transform .95s var(--ease),color .25s ease;
  display: inline-block;
  width: 17px;
  height: 17px;
  vertical-align: middle;
}
.tpk-article-nav-link:hover .tpk-article-nav-title,
.tpk-article-nav-link:focus-visible .tpk-article-nav-title {
  color: var(--green);
}
.tpk-article-nav-link:hover .tpk-article-nav-label,
.tpk-article-nav-link:focus-visible .tpk-article-nav-label {
  color: var(--green-mid);
}
.tpk-article-nav-link:hover .tpk-article-nav-arrow,
.tpk-article-nav-link:focus-visible .tpk-article-nav-arrow {
  color: var(--green);
}
.tpk-article-nav-link.is-prev:hover .tpk-article-nav-arrow,
.tpk-article-nav-link.is-prev:focus-visible .tpk-article-nav-arrow {
  transform: translateX(-4px);
}
.tpk-article-nav-link.is-next:hover .tpk-article-nav-arrow,
.tpk-article-nav-link.is-next:focus-visible .tpk-article-nav-arrow {
  transform: translateX(4px);
}
@media (max-width:760px) {
  /* !important: the image family sheet scopes identical desktop rules at
   * .tpk-tech-image .tpk-article-nav (0,2,0) and loads after this file;
   * only !important wins the stacking override there. It also beats the
   * legacy v34 mobile rule that hid the (hand-pasted) nav on phones —
   * the dynamic nav is a feature, so it stays visible and stacks. */
  .tpk-article-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 34px !important;
    padding-top: 20px !important;
  }
  .tpk-article-nav .tpk-article-nav-link.is-next {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .tpk-article-nav .tpk-article-nav-link.is-next .tpk-article-nav-arrow {
    margin-left: auto;
  }
  .tpk-article-nav .tpk-article-nav-link.is-empty {
    display: none !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .tpk-article-nav-arrow {
    transition: none;
  }
}