@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 11.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   11. LINK ROWS — curated external links (reverts)
   ============================================================ */

.link-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-md) var(--space-sm);
  border-bottom: var(--border-hairline);
  transition: var(--transition-colour);
}

.link-row:first-child {
  border-top: var(--border-hairline);
}

.link-row:hover {
  background-color: var(--colour-bg-band);
}

.link-row__body {
  display: grid;
  gap: var(--space-3xs);
}

.link-row__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--colour-heading);
  margin: 0;
}

.link-row__title a {
  color: inherit;
}

.link-row__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.link-row:hover .link-row__title a {
  color: var(--colour-link-hover);
}

.link-row__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
  max-width: var(--measure-wide);
}

.link-row__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
}

.link-row__domain {
  font-variant-numeric: tabular-nums;
}

/* The outbound arrow, lifting on hover. */
.link-row__arrow {
  grid-row: 1 / -1;
  grid-column: 2;
  align-self: center;
  font-size: var(--text-xl);
  color: var(--burgundy-200);
  line-height: var(--leading-flat);
  transition: transform var(--duration-base) var(--ease-out), var(--transition-colour);
}

.link-row:hover .link-row__arrow {
  color: var(--burgundy-600);
  transform: translate(var(--space-3xs), calc(var(--space-3xs) * -1));
}

.link-group {
  margin-bottom: var(--space-2xl);
}

/* The first group clears the introductory note above it. */
.note + .link-group {
  margin-top: var(--space-2xl);
}

.link-group__head {
  margin-bottom: var(--space-md);
}

.link-group__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2xs);
}

.link-group__note {
  margin: 0;
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
  max-width: var(--measure-wide);
}