/* AsKrs Content Bridge — related posts, source box and dates.
   Deliberately theme-agnostic: only the tokens the AsKrs theme exposes, with
   plain fallbacks so the second site renders correctly before it is themed. */

.acb-sources,
.acb-related {
  max-width: var(--askrs-measure, 780px);
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--askrs-border, #e8e8eb);
}

.acb-sources__title,
.acb-related__title-h {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--askrs-muted, #6b6b70);
  margin: 0 0 14px;
}

/* ------------------------------------------------------------- sources --- */

.acb-sources__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.acb-source {
  font-size: 14.5px;
  line-height: 1.6;
  /* A list item is not an inline link, so it takes the 24px minimum target. */
  min-height: 24px;
  padding-block: 2px;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 10px;
  align-items: baseline;
}
.acb-source__no {
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--askrs-muted, #6b6b70);
}
.acb-source__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acb-source__hint { color: var(--askrs-muted, #6b6b70); font-size: 13px; word-break: break-all; }
.acb-source a {
  color: var(--askrs-accent, #0b5fa5);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  /* A long citation URL must wrap rather than widen the page. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.acb-source__meta { font-size: 13px; color: var(--askrs-muted, #6b6b70); }

/* ------------------------------------------------------------- related --- */

.acb-related__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.acb-related__item { margin: 0; }
/* Stacked, the same shape as a card in an archive.
   These thumbnails used to be 78x56. Nothing on these sites is a photograph —
   every picture is a document, a table or a flow chart — and a document scaled
   to 78px wide is a grey smudge: two related posts read as empty rectangles
   next to their headlines. At the column's full width the headline inside the
   picture is legible, and the reader sees the same card they clicked on the
   archive. */
.acb-related__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.acb-related__thumb {
  width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: left top; display: block;
  margin-bottom: 9px;
  border: 1px solid var(--askrs-border, #e8e8eb);
  border-radius: var(--askrs-radius, 8px);
  background: var(--askrs-bg-soft, #f7f8fa);
}
.acb-related__text { min-width: 0; }
.acb-related__cat {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--askrs-accent, #0b5fa5); margin-bottom: 3px;
}
.acb-related__title {
  display: block; font-size: 15px; font-weight: 600; line-height: 1.45;
  letter-spacing: -0.018em; color: var(--askrs-ink, #171719);
}
.acb-related__link:hover .acb-related__title {
  text-decoration: underline; text-underline-offset: 0.16em;
}

/* --------------------------------------------------------------- dates --- */

.acb-dates { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.acb-date--updated { font-weight: 600; color: var(--askrs-ink, #171719); }
.acb-date__sep { color: var(--askrs-border, #e8e8eb); }

@media (max-width: 560px) {
  /* One column on a phone, so a stacked card would put four full-width
     pictures between the end of the article and the footer. Side by side
     keeps the list scannable, and 104px is wide enough to read the headline
     inside the picture where 78px was not. */
  .acb-related__list { grid-template-columns: 1fr; gap: 14px; }
  .acb-related__link {
    display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: start;
  }
  .acb-related__link:has(> .acb-related__text:only-child) { grid-template-columns: 1fr; }
  .acb-related__thumb { margin-bottom: 0; }
  .acb-sources, .acb-related { margin-top: 32px; }
}

/* ------------------------------------------------------- cross-site --- */
/* Post-level sibling-site suggestion. Visually quieter than related posts
   so it reads as a pointer, not a second recommendation block. */

.acb-xsite {
  max-width: var(--askrs-measure, 780px);
  margin: 32px auto 0;
  padding: 16px 18px;
  background: var(--askrs-bg-soft, #f7f8fa);
  border: 1px solid var(--askrs-border, #e8e8eb);
  border-radius: var(--askrs-radius, 6px);
}
.acb-xsite__title {
  font-size: 13px; font-weight: 650; letter-spacing: -0.01em;
  color: var(--askrs-muted, #6b6b70); margin: 0 0 10px;
}
.acb-xsite__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.acb-xsite__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; text-decoration: none; }
.acb-xsite__badge {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--askrs-accent, #0b5fa5);
  border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px;
}
.acb-xsite__anchor {
  font-size: 15px; font-weight: 600; line-height: 1.5;
  color: var(--askrs-ink, #171719);
  text-decoration: underline; text-underline-offset: 0.16em;
}
.acb-xsite__link:hover .acb-xsite__anchor { color: var(--askrs-accent, #0b5fa5); }
.acb-xsite__context { font-size: 13.5px; line-height: 1.6; color: var(--askrs-muted, #6b6b70); margin: 5px 0 0; }