/* Nawigacja-wąż — komponent sygnaturowy.
   Wąż jest złożony z kropów renderu: złączka STORZ po lewej, kafel korpusu powtarzany
   w poziomie, zaworek po prawej. Nie lustrzymy, nie przebarwiamy, nie rysujemy w SVG.
   Kompresja biegnie równolegle z headerem, w tym samym czasie 380 ms: 116 → 76 px.
   Brief mówił 56 px, ale przy tej wysokości etykiety przestają być czytelne
   — powód siedzi przy samym tokenie `--hose-nav-sticky-h`. */

.ff-hose {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-sticky) - 1);
  background: var(--surface-0);
  padding-block: var(--space-4) var(--space-3);
  transition: top var(--dur-4) var(--ease-standard);
}
.ff-hose.is-compressed { top: var(--sticky-header-h); }

/* Wysokosc paska trzymamy w --bar-h, bo z niej wynikaja szerokosci krancow:
   kadry PNG maja stale proporcje (storz 270/354, zawor 282/354), wiec przy kazdej
   wysokosci pasa zlacza trafiaja w to samo miejsce. */
.ff-hose__bar {
  --bar-h: var(--hose-nav-h);
  --cap-l: calc(var(--bar-h) * 0.763);   /* 270/354 */
  --cap-r: calc(var(--bar-h) * 0.856);   /* 282/354, powiekszone o kalibracje zaworu */
  position: relative;
  display: flex;
  align-items: stretch;
  /* Miejsce wtopienia kafla w metal: kafel znika przed zlaczka i przed kolnierzem
     zaworu, wiec styku dwoch kadrow nie widac. */
  --hose-seam-mask: linear-gradient(
    90deg,
    transparent calc(var(--cap-l) * 0.78),
    #000 calc(var(--cap-l) - 2px),
    #000 calc(100% - var(--cap-r)),
    transparent calc(100% - var(--cap-r) * 0.87)
  );
  height: var(--bar-h);
  transition: height var(--dur-4) var(--ease-standard);
}
.ff-hose.is-compressed .ff-hose__bar { --bar-h: var(--hose-nav-sticky-h); }

/* Krance leza pod korpusem, ktory nachodzi na krolce weza i wtapia sie w nie
   maska — inaczej w miejscu styku widac pionowa krawedz dwoch roznych kadrow. */
.ff-hose__cap {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ff-hose__cap--left { left: 0; width: var(--cap-l); }
.ff-hose__cap--right { right: 0; width: var(--cap-r); }
.ff-hose__cap img {
  height: 100%;
  width: auto;
  display: block;
}
/* Krociec zaworu jest w kadrze o 7% chudszy i wyzej niz kafel korpusu — skalujemy
   go do srednicy weza i sadzamy na tej samej osi. */
.ff-hose__cap--right img {
  height: 107.5%;
  transform: translateY(calc(var(--bar-h) * -0.008));
}

/* Kafel korpusu biegnie przez caly pasek i konczy sie miekko dokladnie tam, gdzie
   w kadrach zaczyna sie metal: 80% szerokosci zlaczki po lewej i kolnierz zaworu
   po prawej. Segmenty odsuwamy paddingiem, zeby nie wchodzily w strefe wtopienia. */
.ff-hose__list {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding-block: 0;
  padding-inline: calc(var(--cap-l) + var(--space-2)) calc(var(--cap-r) + var(--space-2));
  background-image: url("../img/hose/piece-body-tile.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  min-width: 0;
  position: relative;
  z-index: 1;
  -webkit-mask-image: var(--hose-seam-mask);
  mask-image: var(--hose-seam-mask);
}
.ff-hose__seg {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.ff-hose__seg + .ff-hose__seg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
}

/* Ikona i etykieta nie są wyśrodkowane w pasku, tylko posadzone wyżej — tak jak
   w renderze projektanta (design/assets/hose/hose-nav-desktop.png): ikona mniej
   więcej na 1/3 wysokości węża, etykieta pod nią, ze światłem przy dolnej krawędzi.
   Wyśrodkowanie zsuwa oba elementy nisko i dwuwierszowa nazwa dotyka krawędzi.

   Etykieta siedzi tuż pod ikoną, jak w renderze. Przy szerszym odstępie dwuwierszowa
   nazwa („Oświetlenie pojazdów”, „Ratownictwo medyczne”) schodziła poniżej korpusu
   węża i drugi wiersz lądował na cieniu pod nim. */
.ff-hose__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  height: 100%;
  padding-block: 20px var(--space-2);
  /* Waskie swiatlo po bokach: na segment przy osmiu kategoriach zostaje ok. 110 px,
     a najdluzsze jednoczlonowe haslo („Uprzywilejowanie”) ma 95 px. Kazde 8 px
     oddane na padding lamie je w polowie slowa. */
  padding-inline: var(--space-1);
  overflow: hidden;
  color: var(--surface-0);
  text-align: center;
  text-shadow: 0 1px 2px rgba(13, 14, 16, 0.45);
  transition: color var(--dur-1) var(--ease-standard);
}
.ff-hose__item:hover { color: var(--surface-0); }

/* Podświetla się sam wąż, nie prostokąt segmentu: światło idzie do środka i siedzi
   dokładnie na pasie korpusu z kafla (17..313 z 472 px wysokości), więc nie wychodzi
   ani na białe tło strony, ani na cień pod wężem. Warstwa leży pod ikoną i etykietą. */
.ff-hose__seg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3.6%;
  bottom: 33.7%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: var(--hose-hover-glow);
  mix-blend-mode: soft-light;
  transition: opacity var(--dur-1) var(--ease-standard);
}
.ff-hose__seg:hover::after { opacity: 1; }

.ff-hose__icon { flex: 0 0 auto; }

/* Przy ośmiu kategoriach na segment zostaje ~130 px, a „Ratownictwo medyczne”
   się tam nie mieści. Pozwalamy na dwie linie zamiast ucinać nazwę wielokropkiem —
   nazwa kategorii musi być czytelna w całości. */
.ff-hose__label {
  font-family: var(--font-condensed);
  font-size: var(--label-sm-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-sm-ls);
  text-transform: uppercase;
  line-height: 1.15;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

/* W stanie skompresowanym ikona staje obok etykiety. Środkujemy nie w prostokącie
   segmentu, tylko na korpusie węża — dolna 1/3 kadru to cień, nie wąż. */
.ff-hose.is-compressed .ff-hose__item {
  justify-content: center;
  gap: var(--space-1);
  padding-block: 0 calc(var(--bar-h) * 0.3);
}
.ff-hose.is-compressed .ff-hose__icon { font-size: 20px !important; }
.ff-hose.is-compressed .ff-hose__label {
  font-size: var(--label-sm-size);
  -webkit-line-clamp: 1;
}

.ff-hose__seg.is-active::after {
  background: var(--hose-active-glow);
  opacity: 1;
}
.ff-hose__seg.is-active .ff-hose__item { font-weight: 700; }

/* Przebłysk ciśnienia wody na aktywnym segmencie — 2400 ms, liniowo. */
.ff-hose__pressure {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 65%
  );
  mix-blend-mode: soft-light;
  opacity: 0;
}
.ff-hose__seg.is-active .ff-hose__pressure {
  opacity: 1;
  animation: ff-pressure var(--dur-water) linear infinite;
}

@keyframes ff-pressure {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.ff-hose__hint {
  margin: var(--space-2) 0 0;
  font-family: var(--font-condensed);
  font-size: var(--label-sm-size);
  letter-spacing: var(--label-sm-ls);
  text-transform: uppercase;
  color: var(--ink-400);
  text-align: center;
}
.ff-hose.is-compressed .ff-hose__hint { display: none; }

.ff-hose__item:focus-visible {
  outline: var(--border-w-strong) solid var(--surface-0);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .ff-hose__seg.is-active .ff-hose__pressure { animation: none; opacity: 0.25; }
}

/* Ponizej 1100 px osiem segmentow nie miesci sie juz w pasku: na segment zostaje
   mniej niz 90 px, a najdluzsze haslo ma 95 px i lamie sie w polowie slowa. Pasek
   przechodzi wtedy w przewijany w poziomie, z segmentami o stalej szerokosci. */
@media (max-width: 1099px) {
  .ff-hose { padding-block: var(--space-3); }
  /* Na 64 px korpus weza konczyl sie wyzej, niz zaczynala sie etykieta — nazwy
     kategorii ladowaly pod wezem, bialym tekstem na bialym tle, czyli nie bylo ich
     widac wcale. Pasek musi byc na tyle wysoki, zeby ikona i dwuwierszowa nazwa
     zmiescily sie na samym korpusie. */
  .ff-hose__bar { --bar-h: 96px; }
  .ff-hose__item { padding-block: var(--space-2) 0; }
  .ff-hose__icon { font-size: 22px !important; }
  .ff-hose__list { overflow-x: auto; scrollbar-width: none; }
  .ff-hose__list::-webkit-scrollbar { display: none; }
  /* Szerokosc segmentu pod najdluzsze haslo — lista i tak przewija sie w poziomie,
     wiec lepiej dolozyc piksele niz lamac slowo w polowie. */
  .ff-hose__seg { flex: 0 0 120px; }
  .ff-hose__hint { display: none; }
}