/* /getting-here: the ways of arriving as cards, a small map of where you
 * arrive, and the two banks of the river. Loaded by that page only. */

.gh-jump {
  display: grid;
  gap: var(--space-2);
}

.gh-jump__label {
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: 700;
}

.gh-map__canvas {
  height: min(52vh, 420px);
  min-height: 300px;
}

.gh-pins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.gh-pins li {
  display: grid;
  gap: 2px;
}

.gh-pin__link,
.gh-city__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}

.gh-pin__link .icon,
.gh-city__link .icon {
  width: 14px;
  height: 14px;
}

.gh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gh-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  scroll-margin-top: 96px;
}

.gh-card p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.65;
}

.gh-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.gh-card__head h2 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.gh-card p.gh-card__facts {
  color: var(--accent-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
}

.gh-card__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: auto;
}

.gh-card__links .feature__link {
  margin-top: 0;
}

.gh-show[hidden] {
  display: none;
}

.gh-cities,
.gh-airports {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gh-cities li,
.gh-airports li {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--wash);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.gh-cities strong,
.gh-airports strong {
  font-size: 0.9375rem;
}

.gh-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.gh-check .icon {
  flex: none;
  margin-top: 2px;
  color: var(--accent-ink);
}

.gh-arrive {
  scroll-margin-top: 96px;
}

.gh-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
}

.gh-side {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--wash);
}

.gh-side h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.0625rem;
  font-weight: 700;
}

.gh-side h3 .icon {
  flex: none;
  color: var(--accent-ink);
}

.gh-side p,
.gh-around p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.65;
}