/* 友链采访：与文章列表一致的细底线与轻移反馈，分类复用资源区的滑块。 */
#friends[data-connections-ui="ready"] .section-heading { align-items: flex-start; }
#friends[data-connections-ui="ready"] .section-heading > div:first-child { min-width: 0; }
#friends .connection-tabs { flex-shrink: 0; margin-top: 0; }
#friends .connection-panels { min-height: 0; }
#friends .connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--connection-rows, 1), minmax(104px, auto));
  grid-auto-flow: column;
  gap: 0 36px;
}
#friends .connection-grid[hidden],
#friends .connection-card[hidden],
#friends .connection-pagination[hidden] { display: none !important; }
#friends .connection-grid > .connection-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  grid-template-areas: "title arrow" "description arrow";
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  min-width: 0;
  min-height: 104px;
  padding: 21px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  transition: transform .24s ease, color .24s ease;
}
#friends .connection-card .connection-type { display: none; }
:root #friends .connection-grid > .connection-card > h3 {
  grid-area: title;
  width: auto;
  min-width: 0;
  margin: 0;
  translate: none;
  font: 400 22px/1.5 var(--serif);
  overflow-wrap: anywhere;
}
:root #friends .connection-grid > .connection-card > p {
  grid-area: description;
  width: auto;
  margin: 0;
  translate: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--muted);
  overflow-wrap: anywhere;
}
#friends .connection-grid > .connection-card > span:last-child:not(.connection-type) {
  grid-area: arrow;
  justify-self: end;
  align-self: center;
  font-size: 15px;
  color: var(--muted);
}
:root #friends #connection-awards > .connection-card > h3 { white-space: nowrap; }
#friends .connection-card:focus-visible { outline-offset: 4px; }
#friends a.connection-card:is(:hover, :focus-visible) {
  color: var(--accent);
  transform: translateX(4px);
}
#friends a.connection-card:is(:hover, :focus-visible) > span:last-child:not(.connection-type) { color: var(--accent); }
#friends .connection-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}
#friends .connection-pagination button {
  min-height: 36px;
  padding: 7px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
}
#friends .connection-pagination button:disabled { opacity: .4; cursor: default; }
#friends .connection-pagination button:enabled:hover { color: var(--accent); }
@media (min-width: 761px) and (max-width: 1100px) {
  :root #friends #connection-awards > .connection-card > h3 { font-size: clamp(14px, 1.8vw, 20px); }
}
@media (max-width: 760px) {
  #friends[data-connections-ui="ready"] .section-heading { flex-wrap: wrap; gap: 16px; }
  #friends .connection-tabs { margin-left: auto; }
  #friends .connection-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  #friends .connection-grid > .connection-card { padding: 19px 6px; column-gap: 10px; }
  :root #friends .connection-grid > .connection-card > h3 { font-size: 20px; }
  :root #friends #connection-awards > .connection-card > h3 { font-size: 16px; }
}
@media (max-width: 560px) {
  #friends .connection-grid > .connection-card { min-height: 100px; padding: 20px 4px; }
  :root #friends #connection-awards > .connection-card > h3 { font-size: clamp(14px, 4vw, 18px); }
}
@media (prefers-reduced-motion: reduce) {
  #friends .connection-card { transition: none; }
  #friends a.connection-card:is(:hover, :focus-visible) { transform: none; }
}