/* ============================================================
   map.css — Carta nautica: la rotta si disegna da sola quando
   entra in viewport (animazione a tempo, NON scroll-jacked) e un
   mezzo la percorre. Tema LIGHT. UNA sola rotta.
   Tutto il moto è guidato da una variabile di progresso: --p (0→1),
   pilotata via requestAnimationFrame da js/map-itinerary.js.
   ============================================================ */

.routes {
  position: relative;
  padding-block: var(--space-section);
}
.routes__inner { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.4rem); }

/* eyebrow SEMPRE sopra il titolo (stack), anche con titoli corti: niente
   affiancamento incoerente tra rotte lunghe/corte. */
.routes__hud-top { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.routes__hud-top h2 { font-size: var(--fs-h2); }

/* —— Tab itinerari (scegli la crociera, la mappa si refresha) ———— */
.itin-tabs { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.itin-tabs[hidden] { display: none; }
.itin-tab {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-min); font-weight: 700; color: var(--text-dim);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.itin-tab .ico { width: 1.05rem; height: 1.05rem; color: var(--accent); transition: color var(--t-fast); }
.itin-tab:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); }
.itin-tab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--c-gold-soft), var(--c-gold));
  border-color: var(--c-gold);
  color: var(--c-navy-900);
  box-shadow: var(--glow-gold);
}
.itin-tab[aria-selected="true"] .ico { color: var(--c-navy-900); }

/* da desktop: heading + tab centrati (come la mappa e lo slider sotto) */
@media (min-width: 760px) {
  .routes__hud-top { align-items: center; text-align: center; }
  .itin-tabs { justify-content: center; }
}

/* la carta */
.chart-wrap { position: relative; display: grid; place-items: center; }
.seamap {
  width: min(94vw, 760px);
  height: auto;
  overflow: visible;
  border-radius: var(--r-lg);
  /* "mare" chiaro appena tintato di teal */
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c-teal) 9%, var(--c-cloud)), var(--c-cloud));
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}

/* —— Graticola & coste —————————————————————————————————————— */
.chart-grid line { stroke: color-mix(in srgb, var(--c-teal) 16%, transparent); stroke-width: 0.6; }
.coast--mass { stroke: none; fill: color-mix(in srgb, var(--c-ink) 9%, var(--c-paper)); }
.coast { fill: color-mix(in srgb, var(--c-ink) 7%, var(--c-paper)); stroke: color-mix(in srgb, var(--c-teal-deep) 40%, transparent); stroke-width: 1; }
.coast-label { fill: var(--text-faint); font: 700 17px/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; }

/* —— Rotte ————————————————————————————————————————————————— */
.route-track {
  fill: none;
  stroke: color-mix(in srgb, var(--c-teal-deep) 38%, transparent);
  stroke-width: 2;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
.route-progress {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;            /* pathLength="1" → normalizzato 0..1 */
  stroke-dashoffset: calc(1 - var(--p));
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--c-teal) 55%, transparent));
}

/* —— Il mezzo che viaggia ———————————————————————————————————————
   Posizione + rotazione impostate via attributo `transform` dal JS
   (getPointAtLength): niente offset-path → robusto cross-browser. */
.vehicle[hidden] { display: none; }
.vehicle path  { fill: var(--c-gold); stroke: var(--c-gold-deep); stroke-width: 0.6; filter: drop-shadow(0 1px 5px color-mix(in srgb, var(--c-gold) 75%, transparent)); }
.vehicle circle { fill: color-mix(in srgb, var(--c-gold) 35%, transparent); }

/* —— Porti / destinazioni ——————————————————————————————————— */
.port { cursor: default; }
.port__halo { fill: var(--c-teal); opacity: 0; transform-box: fill-box; transform-origin: center; }
.port__dot  { fill: var(--c-cloud); stroke: var(--c-teal-deep); stroke-width: 2.5; transition: fill var(--t-med), stroke var(--t-med), r var(--t-med); }
/* Nomi-porto: unità SVG, quindi scalano con la mappa. Più grandi del default
   e MOLTO più grandi da mobile (la carta è renderizzata molto più piccola). */
.port__name { fill: var(--text-dim); font: 700 22px/1 var(--font-body); letter-spacing: 0.04em; transition: fill var(--t-med); }

/* un porto si "accende" quando la rotta l'ha superato (toggle dal JS) */
.port.lit .port__dot  { fill: var(--c-gold); stroke: var(--c-gold-deep); r: 7; }
.port.lit .port__name { fill: var(--text); }
.port.lit .port__halo { animation: port-ping 1.6s var(--ease-out) infinite; }

.port--home .port__dot { stroke: var(--c-gold-deep); }

/* —— HUD: caption + meter (decorativi) ——————————————————————— */
.routes__hud-bottom { display: grid; gap: 0.9rem; min-height: 3.5rem; max-width: min(94vw, 760px); margin-inline: auto; width: 100%; }
.leg-caption { display: flex; align-items: center; gap: 0.7rem; min-height: 1.8em; font-size: var(--fs-lead); color: var(--text); }
.leg-caption[hidden] { display: none; }
.leg-caption .pin-ico { width: 1.3rem; height: 1.3rem; color: var(--accent-gold); flex: 0 0 auto; }
.leg-caption [data-caption-text] { font-weight: 700; }

/* —— Journey slider: l'utente "naviga" la rotta trascinando ——————— */
.journey { display: flex; align-items: center; gap: 0.85rem; }
.journey__edge {
  font-size: var(--fs-min); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.journey__range {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 8px; border-radius: var(--r-pill); cursor: pointer;
  /* la parte già percorsa si riempie via --p (teal→oro) */
  background: var(--line);
  background-image: linear-gradient(90deg, var(--c-teal-deep), var(--c-gold));
  background-size: calc(var(--p, 0) * 100%) 100%;
  background-repeat: no-repeat;
}
.journey__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* pomello (la "nave") — Webkit + Firefox */
.journey__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--c-gold) 62%);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(20,35,63,0.35), var(--glow-gold);
  cursor: grab; transition: transform var(--t-fast) var(--ease-out);
}
.journey__range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.14); }
.journey__range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--c-gold) 62%);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(20,35,63,0.35);
  cursor: grab;
}
.journey__range::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: transparent; }

.journey__hint { text-align: center; font-size: var(--fs-min); color: var(--text-dim); margin-top: 0.1rem; }

/* —— Visibilità etichette porti per itinerario ——————————————— */
.itin-ports.labels-active .port__name { opacity: 0; transition: opacity var(--t-med); }
.itin-ports.labels-active .port.active .port__name { opacity: 1; }
.port.active .port__dot { r: 7; }

/* ============================================================
   Mobile (≤600px): la carta è piccola e gli edge dello slider
   sono nomi-porto lunghi → su una riga sola sbordavano (slider
   tagliato). Qui: slider a tutta larghezza, i due edge sotto
   (partenza a sx / ritorno a dx). E declutter delle label porti:
   anche le rotte `labels:"all"` mostrano SOLO il porto attivo,
   che segue il pomello mentre si trascina — niente nomi tagliati
   ai bordi. La PRECISIONE del drag (1000 step) resta invariata.
   ============================================================ */
@media (max-width: 600px) {
  .journey {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "range range"
      "start end";
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.5rem;
  }
  .journey__range { grid-area: range; width: 100%; }
  .journey [data-journey-start] { grid-area: start; justify-self: start; }
  .journey [data-journey-end]   { grid-area: end;   justify-self: end; text-align: right; }
  .journey__edge { white-space: normal; line-height: 1.25; }

  /* solo il porto attivo (segue la nave) → niente etichette tagliate */
  .itin-ports.labels-all .port__name { opacity: 0; transition: opacity var(--t-med); }
  .itin-ports.labels-all .port.active .port__name { opacity: 1; }
  /* la carta è renderizzata ~metà che da desktop: compensa ingrandendo molto */
  .port__name { font-size: 42px; }
}