/* Related content: "Keep exploring" on the tools, country, passport and English visa pages, "Put it to use" under blog posts and
   "Next for you" (#next) on the home page. Markup: scripts/site-related.mjs (static picks) and related.js (the reranked, per-visitor ones).
   Loaded by every generated page and by index.html. Uses blog.css tokens when present, with fallbacks for the home page. */
.rel-list { --rel-line: var(--line, rgba(2, 13, 27, 0.16)); --rel-soft: var(--soft, rgba(2, 13, 27, 0.06)); --rel-soft-2: var(--soft-2, rgba(2, 13, 27, 0.035)); --rel-muted: var(--muted, #465260); --rel-fg: var(--fg, #041122);
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rel-list a { display: flex; align-items: center; gap: 14px; height: 100%; box-sizing: border-box; padding: 10px 16px 10px 10px; border: 1px solid var(--rel-line); border-radius: 20px; background: var(--rel-soft-2); color: var(--rel-fg); text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .25s ease; }
.rel-list a:hover { background: var(--rel-soft); border-color: rgba(2, 13, 27, 0.3); color: var(--rel-fg); transform: translateY(-2px); }
.rel-media { flex: none; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: #041122; color: #d8d8cb; display: grid; place-items: center; }
.rel-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rel-media svg { width: 28px; height: 28px; }
.rel-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rel-kind { font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--rel-muted); }
.rel-title { font-weight: 500; font-size: 17px; line-height: 1.3; text-wrap: balance; }
.rel-blurb { font-size: 14.5px; line-height: 1.45; color: var(--rel-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A pick made for this visitor (their passport, the guide they were reading): the lime tile says "this one is about you". */
.rel-list a[data-rel-p] .rel-media { background: #c6f24e; color: #020d1b; }
.more .rel-h { margin-top: 48px; }

/* Home page: "Next for you" (#next), right under the travel tools, so it borrows their section rhythm with less top padding. */
.rel-next { padding-top: 0; }
.rel-next[hidden] { display: none; }
.rel-next .rel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .rel-next .rel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rel-list, .rel-next .rel-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rel-list a { transition: none; }
  .rel-list a:hover { transform: none; }
}