/* SP GROUP CARGO marketing site v1 — map.css: the hero, the Pacific route map engine UI (pm-*) and the
   #network lane board. Loaded after spg.css; every colour, font and timing comes from
   tokens.css custom properties. The map itself is drawn by assets/js/pacific.js. */

/* ================================================================= HERO == */
.sp-hero{
  --hero-h:calc(100svh - var(--sp-nav-h));
  position:relative;isolation:isolate;overflow:hidden;
  min-height:max(600px,var(--hero-h));
  display:flex;align-items:flex-start;
  background:
    radial-gradient(90% 70% at 70% 46%,color-mix(in srgb,var(--sp-info) 7%,transparent),transparent 70%),
    radial-gradient(60% 50% at 18% 88%,color-mix(in srgb,var(--sp-ocean) 4%,transparent),transparent 70%),
    var(--sp-void);
}
.sp-hero__map{position:absolute;inset:0;z-index:0}
.sp-hero__wrap{
  position:relative;z-index:2;pointer-events:none;
  padding-block:clamp(28px,5vh,76px) clamp(120px,16vh,180px);
}
.sp-hero__copy{position:relative;max-width:min(540px,42vw);pointer-events:auto}
/* the scrim: a soft, transparent pool behind the text only */
.sp-hero__copy::before{
  content:"";position:absolute;z-index:-1;inset:-18% -22% -20% -34%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sp-void) 84%,transparent) 0%,color-mix(in srgb,var(--sp-void) 62%,transparent) 52%,transparent 100%);
}
/* the kicker is a status tag on the board (bordered, like the lane codes), not a floating line of type */
.sp-hero__label{
  display:inline-flex;margin:0;padding:7px 12px 7px 10px;line-height:1.35;
  border:1px solid var(--sp-line-2);border-radius:var(--sp-r-sm);
  background:color-mix(in srgb,var(--sp-void) 72%,transparent);
}
.sp-hero__h1{
  margin:20px 0 0;
  font-family:var(--sp-display);font-weight:600;
  font-size:clamp(2.45rem,4.3vw,4.15rem);line-height:1.01;letter-spacing:var(--sp-track-display);
  color:var(--sp-ink);text-wrap:balance;
}
.sp-hero__h1a,.sp-hero__h1b{display:block}
.sp-hero__h1a{color:var(--sp-ink-2)}
.sp-hero__h1b{color:var(--sp-ink)}
.sp-hero__lead{
  margin:18px 0 0;max-width:42ch;
  font-size:clamp(1.0625rem,1.2vw,1.1875rem);line-height:1.55;color:var(--sp-ink-2);
}
.sp-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sp-hero__trust{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.45em;margin:22px 0 0;
  font-size:var(--sp-fs-small);color:var(--sp-ink-3);
}
.sp-hero__num{font-family:var(--sp-mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--sp-ink);letter-spacing:.01em}
html:lang(zh) .sp-hero__h1,html:lang(ko) .sp-hero__h1{letter-spacing:0;line-height:1.16;font-size:clamp(2.1rem,3.7vw,3.5rem)}
html:lang(vi) .sp-hero__h1{line-height:1.1;font-size:clamp(2.2rem,3.8vw,3.6rem)}
/* wide screens: the two Vietnamese sentences run one line each, so the headline block stays as short as the English one */
@media (min-aspect-ratio:10/9) and (min-width:1180px){
  html:lang(vi) .sp-hero__copy{max-width:min(660px,47vw)}
  html:lang(vi) .sp-hero__h1{font-size:clamp(2.2rem,3.05vw,3.3rem)}
}
html:lang(es) .sp-hero__h1{font-size:clamp(2.35rem,4vw,3.9rem)}
.sp-hero__nb{white-space:nowrap}

/* the hero's legend sits on the bottom edge like an operations-board status strip */
.sp-hero .pm-legend{
  left:0;right:0;bottom:0;
  padding:12px var(--sp-pad) 16px;
  justify-content:flex-end;
  border-top:1px solid var(--sp-line);
  background:linear-gradient(to top,color-mix(in srgb,var(--sp-void) 88%,transparent),color-mix(in srgb,var(--sp-void) 40%,transparent));
}
.sp-hero .pm-lg-hint{order:-1;margin-right:auto}

/* ============================================================ MAP (pm-*) == */
.pm-stage{overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.pm-layer{position:absolute;left:0;top:0;display:block;pointer-events:none}
.pm-layer--fx{pointer-events:auto}

/* ports: real buttons over the canvas (keyboard + screen readers); the label rides beside the marker */
.pm-ports{position:absolute;inset:0;z-index:3;pointer-events:none}
.pm-port{
  position:absolute;left:0;top:0;width:0;height:0;padding:0;margin:0;border:0;background:none;
  font:inherit;color:var(--sp-ink);cursor:pointer;pointer-events:auto;
  opacity:0;transition:opacity var(--sp-t) var(--sp-ease);
}
.pm-port.is-in{opacity:1}
.pm-port.is-off{visibility:hidden}
.pm-port__hit{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%}
.pm-port__txt{
  position:absolute;display:flex;flex-direction:column;gap:1px;white-space:nowrap;line-height:1.15;pointer-events:auto;
  text-shadow:0 0 3px var(--sp-void),0 0 8px var(--sp-void),0 0 14px var(--sp-void);
}
.pm-port--l .pm-port__txt{right:13px;top:-13px;align-items:flex-end;text-align:right}
.pm-port--r .pm-port__txt{left:13px;top:-13px;align-items:flex-start}
.pm-port--t .pm-port__txt{bottom:12px;left:0;transform:translateX(-50%);align-items:center;text-align:center}
.pm-port--b .pm-port__txt{top:12px;left:0;transform:translateX(-50%);align-items:center;text-align:center}
.pm-port__code{font-family:var(--sp-mono);font-size:12px;font-weight:500;letter-spacing:.05em;color:var(--sp-ink);font-variant-numeric:tabular-nums}
.pm-port__city{font-family:var(--sp-sans);font-size:11.5px;color:var(--sp-ink-3)}
.pm-port:hover .pm-port__code,.pm-port[aria-pressed="true"] .pm-port__code{color:var(--sp-red)}
.pm-port:focus{outline:none}
.pm-port:focus-visible .pm-port__hit{outline:2px solid var(--sp-red);outline-offset:1px}
.pm-port:focus-visible .pm-port__code{color:var(--sp-red)}
.pm-stage.is-pinned .pm-port:not([aria-pressed="true"]) .pm-port__city{opacity:.7}
.pm-compact .pm-port__city{display:none}
.pm-compact .pm-port__code{font-size:10.5px}
.pm-compact .pm-port__hit{left:-18px;top:-18px;width:36px;height:36px}

/* lane / port card */
.pm-card{
  position:absolute;left:0;top:0;z-index:6;
  width:max-content;min-width:220px;max-width:min(300px,calc(100% - 20px));
  padding:13px 15px 14px;border-radius:var(--sp-r);
  background:color-mix(in srgb,var(--sp-panel) 95%,transparent);
  border:1px solid var(--sp-line-2);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.78);
  color:var(--sp-ink-2);font-size:13.5px;line-height:1.4;
  pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity var(--sp-t-fast) var(--sp-ease),visibility 0s linear var(--sp-t-fast);
}
.pm-card.is-on{opacity:1;visibility:visible;transition:opacity var(--sp-t-fast) var(--sp-ease)}
.pm-card.is-interactive{pointer-events:auto}
.pm-card.is-pop{animation:pm-pop .24s var(--sp-ease-snap)}
@keyframes pm-pop{from{opacity:0;scale:.965}to{opacity:1;scale:1}}
.pm-card__head{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;color:var(--sp-ink-3)}
.pm-card__mode{font-family:var(--sp-display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sp-ink-2)}
html:lang(zh) .pm-card__mode,html:lang(ko) .pm-card__mode{letter-spacing:0}
.pm-card__via{margin-left:auto;padding-left:10px;white-space:nowrap}
.pm-card__od{
  display:flex;align-items:baseline;gap:9px;margin:0;
  font-family:var(--sp-mono);font-weight:500;font-size:20px;letter-spacing:.03em;color:var(--sp-ink);
}
.pm-card__ar{color:var(--sp-red);font-family:var(--sp-sans)}
.pm-card__name{margin:4px 0 0;color:var(--sp-ink-2)}
.pm-card__dl{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--sp-line);display:grid;gap:5px}
.pm-card__dl div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.pm-card__dl dt{font-size:11.5px;color:var(--sp-ink-4);text-transform:uppercase;letter-spacing:.06em;font-family:var(--sp-display);font-weight:600}
html:lang(zh) .pm-card__dl dt,html:lang(ko) .pm-card__dl dt{letter-spacing:0}
.pm-card__dl dd{margin:0;text-align:right;color:var(--sp-ink-2)}
.pm-card__tt{font-family:var(--sp-mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--sp-ink)}
.pm-card__tt.is-quote{font-family:var(--sp-sans);font-weight:400;color:var(--sp-ink-3)}
.pm-card__cap{margin:10px 0 6px;padding-top:9px;border-top:1px solid var(--sp-line);font-family:var(--sp-display);font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sp-ink-4)}
.pm-card__lanes{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pm-card__lanes button,.pm-card__lane{
  display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;width:100%;
  min-height:30px;padding:3px 6px;margin:0 -6px;border:0;border-radius:var(--sp-r-sm);background:none;
  font:inherit;color:var(--sp-ink-2);text-align:left;cursor:pointer;
  transition:background-color var(--sp-t-fast) var(--sp-ease);
}
.pm-card__lane{cursor:default}
.pm-card__lanes button:hover{background:var(--sp-panel-2)}
.pm-card__lane-od{font-family:var(--sp-mono);font-size:13px;color:var(--sp-ink)}
.pm-card__lane-tt{font-family:var(--sp-mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--sp-ink-2);white-space:nowrap}
.pm-card__lane-tt.is-quote{font-family:var(--sp-sans);color:var(--sp-ink-4)}
.pm-card__cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:13.5px;font-weight:600;color:var(--sp-ink);
}
.pm-card__cta svg{width:14px;height:14px;color:var(--sp-red);transition:transform var(--sp-t) var(--sp-ease-snap)}
.pm-card__cta:hover svg{transform:translateX(3px)}
.pm-ico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;flex:none}
.pm-ico svg{width:15px;height:15px}
.pm-ico--ocean{color:var(--sp-ocean);background:color-mix(in srgb,var(--sp-ocean) 14%,transparent)}
.pm-ico--air{color:var(--sp-air);background:color-mix(in srgb,var(--sp-air) 14%,transparent)}
.pm-ico--road{color:var(--sp-road);background:color-mix(in srgb,var(--sp-road) 12%,transparent)}
.pm-dot{width:9px;height:9px;flex:none}
.pm-dot--o{border-radius:50%;background:var(--sp-ocean);box-shadow:0 0 0 3px color-mix(in srgb,var(--sp-ocean) 25%,transparent)}
.pm-dot--g{border:1.5px solid var(--sp-ink);background:transparent}

/* legend */
.pm-legend{
  position:absolute;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-size:12px;line-height:1.3;color:var(--sp-ink-3);pointer-events:none;
  text-shadow:0 0 4px var(--sp-void),0 0 10px var(--sp-void);
  opacity:0;transition:opacity var(--sp-t-slow) var(--sp-ease) .3s;
}
.pm-stage.is-live .pm-legend,.pm-stage.is-ready .pm-legend{opacity:1}
.pm-lg{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pm-lg i{display:inline-block;flex:none}
.pm-lg--ocean i{width:18px;height:2px;background:var(--sp-ocean)}
.pm-lg--air i{width:18px;height:2px;background:repeating-linear-gradient(90deg,var(--sp-air) 0 4px,transparent 4px 7px)}
.pm-lg--road i{width:18px;height:2px;background:repeating-linear-gradient(90deg,var(--sp-road) 0 2px,transparent 2px 5px)}
.pm-lg--o i{width:8px;height:8px;border-radius:50%;background:var(--sp-ocean)}
.pm-lg--g i{width:8px;height:8px;border:1.5px solid var(--sp-ink)}
.pm-lg-meta{display:inline-flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sp-mono);font-size:11px;letter-spacing:.02em;color:var(--sp-ink-4)}
.pm-lg-illus::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;vertical-align:1px;background:var(--sp-warn)}
.pm-lg-hint{font-size:12px;color:var(--sp-ink-3)}
.pm-lg-hint::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:1px;border:1.5px solid var(--sp-red);border-radius:50%}
.pm-stage.is-hot .pm-lg-hint,.pm-stage.is-pinned .pm-lg-hint{opacity:.5}

/* phone bottom sheet (appended to <body> by pacific.js) */
.pm-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  max-height:min(64vh,520px);overflow:auto;overscroll-behavior:contain;
  padding:10px 20px calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--sp-panel);border-top:1px solid var(--sp-line-2);border-radius:var(--sp-r-lg) var(--sp-r-lg) 0 0;
  box-shadow:0 -20px 44px -18px rgba(0,0,0,.8);
  color:var(--sp-ink-2);font-size:14.5px;line-height:1.45;
  transform:translateY(104%);visibility:hidden;
  transition:transform var(--sp-t) var(--sp-ease),visibility 0s linear var(--sp-t);
}
.pm-sheet.is-open{transform:none;visibility:visible;transition:transform var(--sp-t) var(--sp-ease-snap)}
.pm-sheet__bar{width:38px;height:4px;margin:0 auto 10px;border-radius:2px;background:var(--sp-line-2)}
.pm-sheet__x{
  position:absolute;right:10px;top:8px;display:grid;place-items:center;width:40px;height:40px;
  border:0;border-radius:var(--sp-r-sm);background:none;color:var(--sp-ink-2);cursor:pointer;
}
.pm-sheet__x svg{width:16px;height:16px}
.pm-sheet .pm-card__head{padding-right:44px}
.pm-sheet .pm-card__od{font-size:22px}
.pm-sheet .pm-card__lanes button{min-height:44px}
.pm-sheet .pm-card__cta{min-height:44px;margin-top:8px}

/* ============================================================== NETWORK == */
.sp-net__grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,2.4vw,32px);align-items:start;
}
.sp-net__mapcol{position:sticky;top:calc(var(--sp-nav-h) + 20px)}
.sp-net__map{
  position:relative;height:clamp(400px,56vh,540px);
  border:1px solid var(--sp-line-2);border-radius:var(--sp-r-lg);
  background:
    radial-gradient(80% 70% at 60% 45%,color-mix(in srgb,var(--sp-info) 6%,transparent),transparent 72%),
    var(--sp-void);
}
.sp-net__map .pm-legend{left:14px;right:14px;bottom:12px;gap:6px 14px;font-size:11.5px}
.sp-net__map .pm-lg--o,.sp-net__map .pm-lg--g,.sp-net__map .pm-lg-utc{display:none}
.sp-net__map .pm-lg-hint{display:none}

.sp-net__board{min-width:0}
.sp-net__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.sp-net__cap{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  font-family:var(--sp-display);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sp-ink-3);
}
.sp-net__cap::before{content:"";width:6px;height:6px;background:var(--sp-red)}
html:lang(zh) .sp-net__cap,html:lang(ko) .sp-net__cap{letter-spacing:0}
.sp-net__all{
  min-height:34px;padding:0 12px;border:1px solid var(--sp-line-2);border-radius:var(--sp-r-sm);background:none;
  font:inherit;font-size:13px;color:var(--sp-ink-2);cursor:pointer;
  transition:color var(--sp-t-fast) var(--sp-ease),border-color var(--sp-t-fast) var(--sp-ease);
}
.sp-net__all:hover{color:var(--sp-ink);border-color:var(--sp-ink-4)}
.sp-net__cols{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;padding:0 14px 8px;
  border-bottom:1px solid var(--sp-line-2);
  font-family:var(--sp-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sp-ink-4);
}
html:lang(zh) .sp-net__cols,html:lang(ko) .sp-net__cols{letter-spacing:0}
.sp-net__cols span:last-child{text-align:right}
.sp-net__list{list-style:none;margin:0;padding:0}
.sp-net__list li{border-bottom:1px solid var(--sp-line)}
.sp-net__row{
  position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-rows:auto auto;
  column-gap:14px;row-gap:2px;align-items:center;width:100%;padding:11px 14px;
  border:0;background:none;font:inherit;color:var(--sp-ink-2);text-align:left;cursor:pointer;
  transition:background-color var(--sp-t-fast) var(--sp-ease);
}
.sp-net__row::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--sp-red);
  transform:scaleY(0);transition:transform var(--sp-t) var(--sp-ease-snap);
}
.sp-net__row:hover{background:color-mix(in srgb,var(--sp-panel) 55%,transparent)}
.sp-net__row.is-on{background:color-mix(in srgb,var(--sp-panel) 70%,transparent)}
.sp-net__row[aria-pressed="true"]{background:var(--sp-panel)}
.sp-net__row.is-on::before,.sp-net__row[aria-pressed="true"]::before{transform:scaleY(1)}
.sp-net__row:focus-visible{outline-offset:-2px}
.sp-net__mode{grid-row:1 / span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--sp-r-sm)}
.sp-net__mode svg{width:19px;height:19px}
.sp-net__mode--ocean{color:var(--sp-ocean);background:color-mix(in srgb,var(--sp-ocean) 13%,transparent)}
.sp-net__mode--air{color:var(--sp-air);background:color-mix(in srgb,var(--sp-air) 13%,transparent)}
.sp-net__mode--road{color:var(--sp-road);background:color-mix(in srgb,var(--sp-road) 11%,transparent)}
.sp-net__od{display:flex;align-items:baseline;gap:8px;min-width:0;font-family:var(--sp-mono);font-weight:500;font-size:15px;letter-spacing:.03em;color:var(--sp-ink)}
.sp-net__ar{color:var(--sp-ink-4);font-family:var(--sp-sans)}
.sp-net__row.is-on .sp-net__ar,.sp-net__row[aria-pressed="true"] .sp-net__ar{color:var(--sp-red)}
.sp-net__tt{grid-column:3;grid-row:1;justify-self:end;font-family:var(--sp-mono);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;color:var(--sp-ink);white-space:nowrap}
.sp-net__tt.is-quote{font-family:var(--sp-sans);font-weight:400;font-size:13px;color:var(--sp-ink-4)}
.sp-net__sub{grid-column:2 / span 2;grid-row:2;min-width:0;font-size:13px;line-height:1.4;color:var(--sp-ink-3)}
/* place names and the routing never split mid-name; lines break at the arrow or at the dot */
.sp-net__sub > span:not(.sp-net__dot){white-space:nowrap}
.sp-net__dot{display:inline-block;margin:0 .5em;color:var(--sp-ink-4)}
.sp-net__note{margin:14px 0 0;padding-left:14px;font-size:13px;line-height:1.5;color:var(--sp-ink-4)}

@media (max-width:1023px),(max-aspect-ratio:10/9){
  .sp-net__grid{grid-template-columns:minmax(0,1fr)}
  .sp-net__mapcol{position:sticky;top:var(--sp-nav-h);z-index:2;margin-inline:calc(var(--sp-pad) * -1)}
  .sp-net__map{height:clamp(240px,58vw,440px);border-radius:0;border-inline:0}
}
@media (max-width:560px){
  .sp-net__row{padding:11px 10px;column-gap:12px}
  .sp-net__cols{padding-inline:10px;gap:12px}
  .sp-net__od{font-size:14px}
  .sp-net__sub{font-size:12.5px}
  .sp-net__sub > .sp-net__dot{display:none}
  .sp-net__sub > span:last-child{display:block}
  .sp-net__map .pm-legend{left:12px;right:12px;bottom:8px;font-size:11px;gap:4px 12px}
  .sp-net__map .pm-lg-meta{font-size:10.5px}
}

/* =========================================================== RESPONSIVE == */
/* portrait tablets: headline on top, the map spreads below it */
@media (max-aspect-ratio:10/9),(max-width:760px){
  .sp-hero{min-height:0}
  .sp-hero__copy{max-width:640px}
  .sp-hero__wrap{padding-block:clamp(36px,6vh,72px) clamp(360px,60vw,620px)}
}
/* phones: the map band sits on top, the headline below it */
@media (max-width:640px){
  /* the map band: tall enough that the route map, not the headline, owns the top of the first screen */
  .sp-hero{min-height:0;display:block;--hero-band:clamp(272px,80vw,340px)}
  .sp-hero__wrap{padding-block:var(--hero-band) 56px}
  .sp-hero__copy{max-width:none}
  .sp-hero__copy::before{inset:-6% -10% -8% -10%}
  .sp-hero__h1{font-size:clamp(2.2rem,10.4vw,2.75rem);margin-top:16px}
  html:lang(zh) .sp-hero__h1,html:lang(ko) .sp-hero__h1{font-size:clamp(1.9rem,8.6vw,2.4rem)}
  html:lang(vi) .sp-hero__h1{font-size:clamp(2rem,9vw,2.5rem)}
  .sp-hero__lead{font-size:1rem;margin-top:16px}
  .sp-hero__cta{margin-top:24px}
  .sp-hero__cta .sp-btn{flex:1 1 100%}
  .sp-hero .pm-legend{
    top:calc(var(--hero-band) - 62px);bottom:auto;left:0;right:0;padding:0 var(--sp-pad);
    justify-content:flex-start;gap:4px 14px;border-top:0;background:none;font-size:11px;
  }
  .sp-hero .pm-lg--o,.sp-hero .pm-lg--g,.sp-hero .pm-lg-utc,.sp-hero .pm-lg-hint{display:none}
  .sp-hero .pm-lg-meta{font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  .pm-port,.pm-card,.pm-legend,.pm-sheet,.sp-net__row,.sp-net__row::before{transition:none!important;animation:none!important}
  .pm-card.is-pop{animation:none}
}