/*
 * Seabound Journeys — port graph
 * ==================================================================
 * The link layer that makes an embarkation port behave like a hub the
 * way a cruise-line page hubs its ships: a tiered list of the
 * destinations that port actually serves, the lines that sail from it,
 * and the reciprocal "sails from" block on every destination page and
 * shore-excursion guide.
 *
 * Every link it renders is written into the HTML at build time from
 * port-data/relationships.json, not injected at runtime — these are
 * monetized pages whose internal link graph has to be visible to a
 * crawler, not just to a browser running JavaScript.
 *
 * Scoped sjp-*. Colours come from whichever page family is hosting it:
 * the embarkation pages and the shore-excursion guides define different
 * token sets, so every custom property below carries a fallback and the
 * block reads as native on either.
 */

.sjp-hub{margin:26px 0 8px}

.sjp-tier{margin-bottom:26px}
.sjp-tier:last-child{margin-bottom:0}
.sjp-tier-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-bottom:6px;
}
.sjp-tier-k{
  font-family:"Space Mono",monospace;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-text, var(--px-accent-ink, #8A6224));
  margin:0;font-weight:700;
}
.sjp-tier-n{
  font-family:"Space Mono",monospace;font-size:11px;
  color:var(--muted,#5b6b6b);
  background:var(--paper,#F7F3EC);
  border:1px solid var(--paper-2,#DEDBD3);
  border-radius:999px;padding:1px 8px;
}
.sjp-tier-d{
  font-size:14px;line-height:1.55;color:var(--muted,#5b6b6b);
  margin:0 0 12px;max-width:66ch;
}

.sjp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
}
.sjp-dest{
  position:relative;
  background:#fff;
  border:1px solid var(--paper-2,#DEDBD3);
  border-radius:12px;
  padding:13px 15px 12px;
  display:flex;flex-direction:column;gap:3px;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sjp-dest:hover{
  border-color:var(--sea,#12525E);
  box-shadow:0 10px 24px -18px rgba(10,40,46,.5);
  transform:translateY(-2px);
}
.sjp-dest-n{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:16px;font-weight:600;line-height:1.25;
  color:var(--ink,#12262A);
}
/* The whole card is clickable through the stretched primary link, which
   keeps the markup free of nested anchors while still giving the
   secondary link its own hit area. */
.sjp-dest-n a{color:inherit;text-decoration:none}
.sjp-dest-n a::after{content:"";position:absolute;inset:0;border-radius:12px}
.sjp-dest-n a:focus-visible{outline:none}
.sjp-dest-n a:focus-visible::after{outline:2px solid var(--sea,#12525E);outline-offset:2px}
.sjp-dest-m{
  font-family:"Space Mono",monospace;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted,#5b6b6b);
}
.sjp-dest-note{
  font-size:12.5px;line-height:1.5;color:var(--muted,#5b6b6b);
  margin:4px 0 0;
}
.sjp-dest-links{
  display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px;
  position:relative;z-index:1;
}
.sjp-dest-links a{
  font-family:"Space Mono",monospace;font-size:11.5px;font-weight:700;
  color:var(--sea,#12525E);text-decoration:none;
}
.sjp-dest-links a:hover{text-decoration:underline;text-underline-offset:3px}
.sjp-dest-links a:focus-visible{outline:2px solid var(--sea,#12525E);outline-offset:2px;border-radius:3px}
.sjp-dest.is-thin{background:var(--paper,#F7F3EC)}

/* --- lines that sail from a port ---------------------------------- */
/* Replaces the plain .linechip text with a link to that line's own
   guide. Lines with no guide page on the site stay as plain chips
   rather than getting a link that goes nowhere. */
a.linechip{
  text-decoration:none;color:inherit;display:block;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
a.linechip:hover{
  border-color:var(--sea,#12525E);transform:translateY(-1px);
  box-shadow:0 8px 18px -14px rgba(10,40,46,.5);
}
a.linechip:focus-visible{outline:2px solid var(--sea,#12525E);outline-offset:2px}
/* The arrow is positioned rather than floated: a floated one dropped to a
   second line whenever the line name wrapped ("Royal Caribbean
   International"), and flex would have broken Jacksonville's chips, which
   carry a nested season note as a second child. */
a.linechip{position:relative;padding-right:30px}
a.linechip::after{
  content:"\2192";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  opacity:.45;font-family:"Space Mono",monospace;
}
a.linechip:hover::after{opacity:.8}
.linechip.is-plain{opacity:.82}

/* --- reciprocal "sails from" band --------------------------------- */
/* Sits on destination pages and shore-excursion guides. Deliberately
   outside the numbered section spine and the sticky jump nav, so adding
   it doesn't renumber a page or change its in-page navigation. */
.sjp-from{
  max-width:920px;margin:34px auto 0;padding:0 24px;box-sizing:border-box;
}
.sjp-from-in{
  background:var(--paper,#F7F3EC);
  border:1px solid var(--paper-2,#DEDBD3);
  border-radius:14px;padding:20px 22px 20px;
}
.sjp-from-k{
  font-family:"Space Mono",monospace;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass-text, var(--px-accent-ink, #8A6224));
  margin:0 0 6px;font-weight:700;
}
.sjp-from-h{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:19px;font-weight:600;line-height:1.28;margin:0 0 6px;
  color:var(--ink,#12262A);
}
.sjp-from-d{
  font-size:14px;line-height:1.6;color:var(--muted,#5b6b6b);
  margin:0 0 14px;max-width:64ch;
}
.sjp-from-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px;
}
.sjp-port{
  position:relative;background:#fff;
  border:1px solid var(--paper-2,#DEDBD3);
  border-radius:11px;padding:12px 14px;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.sjp-port:hover{
  border-color:var(--sea,#12525E);transform:translateY(-2px);
  box-shadow:0 10px 22px -18px rgba(10,40,46,.5);
}
.sjp-port-n{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:15px;font-weight:600;color:var(--ink,#12262A);line-height:1.25;
}
.sjp-port-n a{color:inherit;text-decoration:none}
.sjp-port-n a::after{content:"";position:absolute;inset:0;border-radius:11px}
.sjp-port-n a:focus-visible{outline:none}
.sjp-port-n a:focus-visible::after{outline:2px solid var(--sea,#12525E);outline-offset:2px}
.sjp-port-m{
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted,#5b6b6b);display:block;margin-top:3px;
}
.sjp-port-x{
  display:block;margin-top:7px;position:relative;z-index:1;
  font-family:"Space Mono",monospace;font-size:11px;font-weight:700;
  color:var(--sea,#12525E);text-decoration:none;
}
.sjp-port-x:hover{text-decoration:underline;text-underline-offset:3px}
.sjp-from-foot{
  font-size:12.5px;line-height:1.55;color:var(--muted,#5b6b6b);
  margin:13px 0 0;
}
.sjp-from-foot a{color:var(--sea,#12525E)}

@media (max-width:640px){
  .sjp-from{padding:0 18px}
  .sjp-from-in{padding:16px 16px 17px}
  .sjp-grid,.sjp-from-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .sjp-dest,.sjp-port,a.linechip{transition:none}
  .sjp-dest:hover,.sjp-port:hover,a.linechip:hover{transform:none}
}
@media print{
  .sjp-dest:hover,.sjp-port:hover{transform:none;box-shadow:none}
}