/* Destination page and /destinations. Shared entity components live in ship.css. */

.ports { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.port {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.35em 0.4em 0.35em 0.9em; border-radius: var(--radius-pill);
  background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink);
  font-size: var(--step--1); font-weight: 600; text-decoration: none;
}
.port--link:hover { border-color: var(--amber); box-shadow: var(--shadow-s); text-decoration: none; }
.port__n {
  min-width: 1.9em; padding: 0.15em 0.5em; border-radius: var(--radius-pill); text-align: center;
  font-size: var(--step--2); font-weight: 700; color: #fff; background: var(--harbour);
}
.port--quiet { color: var(--muted); font-weight: 500; padding-right: 0.9em; border-style: dashed; background: transparent; }
.ports__note { margin-top: var(--s-4); }

.callers { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.caller {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); align-items: center; height: 100%;
  padding: var(--s-3); border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--paper);
  color: inherit; text-decoration: none; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.caller:hover { border-color: var(--line-strong); box-shadow: var(--shadow-s); text-decoration: none; }
.caller__img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--line-strong); }
.caller__img--blank { display: block; background: repeating-radial-gradient(circle, var(--paper-alt) 0 6px, var(--line) 7px 8px); }
.caller__text { display: grid; min-width: 0; }
.caller__title { font: 700 var(--step-1)/1.2 var(--font-display); color: var(--ink); }
.caller:hover .caller__title { color: var(--cyan-ink); }
.caller__meta { font-size: var(--step--1); color: var(--muted); }