/* Compact variant of the homepage .example campaign cards in styles.css.
   Content and photograph treatment come from the homepage at generation. */
.related-topics {
  --related-gap:var(--space-3);
  --related-padding:var(--space-3);
  --related-heading:clamp(1.25rem,2vw,1.5rem);
  padding-block:var(--space-4) var(--space-10);
}
.related-topics h2 { margin-bottom:var(--space-4); }
.related-topics-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--related-gap);
  align-items:stretch;
}
.related-topics .related-topic {
  min-width:0;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
}

.related-topic .example-copy { padding:var(--related-padding); }
.related-topic .example-number {
  margin-bottom:var(--space-2);
  letter-spacing:.04em;
  line-height:1.5;
}
.related-topic h3 {
  font-size:var(--related-heading);
  line-height:1.3;
  margin:0;
  text-wrap:pretty;
}
.related-topic .example-footer { padding:0 var(--related-padding) var(--related-padding); }
.related-topic .text-link {
  display:flex;
  justify-content:space-between;
  gap:var(--space-1);
  text-decoration:underline;
  text-underline-offset:.2em;
  line-height:1.5;
}
.related-topic .text-link svg { transition:transform var(--duration) var(--ease-out); }
.related-topics .related-topic-photo { display:block; width:100%; height:auto; }
.related-topic:focus-visible {
  outline:var(--focus-width) solid var(--ink);
  outline-offset:4px;
  box-shadow:0 0 0 4px var(--paper);
}
.related-topic:focus-visible .text-link { text-decoration-thickness:3px; }
@media (hover:hover) {
  .related-topic:hover .text-link { text-decoration-thickness:3px; }
  .related-topic:hover .text-link svg { transform:translateX(4px); }
}
@media (max-width:1023px) {
  .related-topics { --related-gap:var(--space-2); --related-padding:var(--space-2); }
}
@media (max-width:767px) {
  .related-topics {
    --related-gap:var(--space-3);
    --related-padding:var(--space-3);
    --related-heading:1.5rem;
    padding-bottom:var(--space-6);
  }
  .related-topics-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .related-topic .text-link svg { transition:none; transform:none; }
}
@media (forced-colors:active) {
  .related-topics .related-topic { border:2px solid LinkText; color:LinkText; }
}