/* Related guides and tools.
   In-content links from the pages Google crawls most (home, sourcing calendar,
   regulations, Safety Gate alerts, tariff tracker) to the posts and tools it
   had not crawled yet. Self-contained, because the homepage does not load
   page-polish.css, and built only on the shared design tokens so it follows
   light mode with the rest of the page. The block carries data-l10n="omit":
   translated pages leave it out instead of showing it in English. */
.related-links {
   padding: clamp(56px, 7vw, 88px) 0;
   border-top: 1px solid var(--border-dark);
}
.related-links__inner {
   max-width: 1080px;
   margin: 0 auto;
   padding: 0 24px;
}
.related-links__eyebrow {
   margin: 0 0 12px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--gold-text, var(--gold));
}
.related-links__title {
   margin: 0 0 28px;
   max-width: 30ch;
   font-size: clamp(24px, 3.2vw, 33px);
   font-weight: 700;
   line-height: 1.2;
   color: var(--text-bright);
   text-wrap: balance;
}
.related-links__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
   gap: 16px;
   margin: 0;
   padding: 0;
   list-style: none;
}
.related-links__card {
   display: flex;
   flex-direction: column;
   gap: 8px;
   height: 100%;
   padding: 20px 20px 22px;
   border: 1px solid var(--border-mid);
   border-radius: var(--radius-lg, 14px);
   background: var(--bg-card);
   color: inherit;
   text-decoration: none;
   transition: border-color .2s ease, transform .2s ease;
}
.related-links__card:hover { border-color: var(--gold); transform: translateY(-2px); }
.related-links__card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.related-links__kind {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--gold-text, var(--gold));
}
.related-links__name {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.35;
   color: var(--text-bright);
}
.related-links__desc {
   font-size: 14px;
   line-height: 1.6;
   color: var(--text-mid);
}
.related-links__more { margin: 24px 0 0; font-size: 15px; }
.related-links__more a {
   color: var(--gold-text, var(--gold));
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-color: rgba(240, 165, 30, .38);
}
.related-links__more a:hover { text-decoration-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
   .related-links__card { transition: none; }
   .related-links__card:hover { transform: none; }
}
