/* 01.fitness – SEKCE vybaveni (karusel). Převzato z home2/gear-belt.css, h3 → .gear-title (hierarchie nadpisů). */
/* ============================================================
   01.fitness — pás vybavení „showroom"
   Bílá scéna. Aktivní kus stojí velký uprostřed před obrysovým číslem
   (stejný jazyk jako obrysové „01.FITNESS" v heru), sousedi ustupují –
   malí, odbarvení, na stejné podlaze. Skokový posun: krok → výdrž.
   Všechny rozměry jdou přes --k (desktop 1, tablet .78, mobil .56).
   ============================================================ */

/* sekce má stejný boční padding jako ostatní (8.8 %) → hlavička i popis jsou zarovnané;
   jen .gear-viewport se záporným okrajem vytáhne skoro ke kraji sekce (pruh s obrázky přes celou šířku) */
.gear-section { background: #fff; padding: 58px 8.8% 66px; }
.gear-belt { position: relative; --k: 1; --big: 1.16; }   /* --big = zvětšení aktivního stroje */

/* --- hlavička: leží PŘES horní okraj scény, stroj k ní vyjíždí --- */
.gear-head {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  pointer-events: none;
}
.gear-head > * { pointer-events: auto; }
.gear-head .eyebrow { font-size: 18px; }
.gear-head .gear-title { font-size: 34px; line-height: 1; color: var(--ink); margin-top: 8px; }
.gear-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.gear-nav button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid #25232329; background: #fff; color: var(--ink);
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.gear-nav button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gear-nav button:active { transform: scale(.92); }

/* --- scéna --- (bez okrajové masky – sousedi se ořežou natvrdo o okraj) */
.gear-viewport {
  position: relative; height: calc(520px * var(--k)); overflow: hidden;
  margin-inline: -8.8%;   /* vytáhne pruh z paddingu sekce zpět skoro ke kraji (zbývá ~1,5 %) */
}

/* obrysové číslo kusu za strojem – dvě vrstvy, prolínají se */
.gear-num {
  position: absolute; left: 0; right: 0; bottom: calc(22px * var(--k)); height: 1em;
  font-family: Manrope, Arial, sans-serif; font-weight: 800; font-size: calc(450px * var(--k));
  line-height: 1; letter-spacing: -.045em; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(37,35,35,.16);
  pointer-events: none; user-select: none;
}
.gear-num > span {
  position: absolute; left: 0; right: 0; bottom: 0; white-space: nowrap;
  opacity: 0; transform: translateY(.03em) scale(.97);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.gear-num > span.is-current { opacity: 1; transform: none; }
.gear-num > span.is-out { opacity: 0; transform: translateY(-.03em) scale(1.02); transition-duration: .35s; }

.gear-floor { display: none; }   /* podlahová linka odebrána na přání */

/* --- řada strojů --- */
.gear-track {
  position: absolute; left: 50%; bottom: calc(50px * var(--k)); margin: 0; padding: 0; list-style: none;
  display: flex; align-items: flex-end; gap: calc(50px * var(--k));
  transition: transform .7s cubic-bezier(.66,.03,.22,1);
  will-change: transform;
}
/* skok o délku seznamu při zacyklení – bez přechodů i uvnitř, jinak si dvojčata prohodí zvětšení a blikne to */
.gear-track.no-anim, .gear-track.no-anim .gear-item img, .gear-track.no-anim .gear-item::after { transition: none; }

.gear-item {
  flex: 0 0 calc(260px * var(--k)); width: calc(260px * var(--k)); height: calc(400px * var(--k));
  position: relative; display: flex; align-items: flex-end; justify-content: center; cursor: pointer;
}
.gear-item.is-active { cursor: default; }
.gear-item img {
  height: calc(var(--h, 300px) * var(--k) * var(--big)); width: auto; max-width: none;
  transform-origin: 50% 100%; transform: scale(.55);
  opacity: .4; filter: grayscale(.85) drop-shadow(0 0 0 rgba(28,24,20,0));
  transition: transform .7s cubic-bezier(.22,.9,.24,1), opacity .5s ease, filter .5s ease;
}
.gear-item.is-active img {
  transform: translateY(calc(-8px * var(--k))) scale(1);
  opacity: 1; filter: grayscale(0) drop-shadow(0 22px 22px rgba(28,24,20,.22));
}
.gear-item:hover:not(.is-active) img { opacity: .6; }
/* kontaktní stín na podlaze */
.gear-item::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 76%; height: 18px;
  transform: translateX(-50%) scaleX(.5);
  background: radial-gradient(ellipse at center, rgba(28,24,20,.55) 0%, rgba(28,24,20,0) 70%);
  opacity: .18; transition: opacity .5s ease, transform .7s cubic-bezier(.22,.9,.24,1);
  pointer-events: none;
}
.gear-item.is-active::after { opacity: .42; transform: translateX(-50%) scaleX(.9); }

/* --- popis: dvě vrstvy, nikdy prázdno --- */
.gear-info { position: relative; min-height: 112px; margin-top: 18px; text-align: center; max-width: 600px; margin-inline: auto; }
.gear-layer {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(9px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2,.8,.2,1);
}
.gear-layer.is-current { opacity: 1; transform: none; }
.gear-layer.is-out { opacity: 0; transform: translateY(-7px); transition-duration: .3s; }
.gear-kicker { display: block; font-size: 10px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent-text); }
.gear-name { display: block; margin-top: 10px; font-family: var(--heading); font-weight: 800; font-size: 25px; line-height: 1.15; color: var(--ink); letter-spacing: .2px; }
.gear-note { margin: 9px 0 0; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--muted); }
.gear-note:empty { display: none; }

/* --- ukazatel pozice: segmenty + číslo --- */
.gear-progress { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.gear-dots { display: flex; gap: 6px; }
.gear-dots button {
  width: 20px; height: 3px; border-radius: 2px; padding: 0; background: #25232326;
  transition: width .35s cubic-bezier(.2,.8,.2,1), background .3s;
}
.gear-dots button:hover { background: #25232366; }
.gear-dots button.is-active { width: 38px; background: var(--accent); }
.gear-count { font-family: var(--heading); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; color: var(--ink); opacity: .5; }

/* --- tablet --- */
@media (min-width: 761px) and (max-width: 1250px) {
  .gear-section { padding: 48px 8.8% 56px; }
  .gear-belt { --k: .78; }
  .gear-head .gear-title { font-size: 28px; }
  .gear-name { font-size: 22px; }
}

/* --- mobil: hlavička v toku nad scénou --- */
@media (max-width: 760px) {
  .gear-section { padding: 42px 8% 48px; }        /* jako ostatní sekce na mobilu */
  .gear-belt { --k: .56; }
  .gear-viewport { margin-inline: -8%; }          /* pruh skoro ke kraji i na mobilu */
  .gear-head { position: static; align-items: center; margin-bottom: 8px; }
  .gear-head .eyebrow { font-size: 16px; }
  .gear-head .gear-title { font-size: 24px; margin-top: 6px; }
  .gear-nav button { width: 36px; height: 36px; font-size: 14px; }
  .gear-track { gap: 28px; }
  .gear-item { flex-basis: 146px; width: 146px; }
  .gear-info { min-height: 118px; max-width: 330px; margin-top: 12px; }
  .gear-name { font-size: 18px; }
  .gear-note { font-size: 11px; }
  .gear-dots { gap: 3px; }
  .gear-dots button { width: 8px; }                 /* 17 kusů + počítadlo se vejde na 390 px */
  .gear-dots button.is-active { width: 18px; }
  .gear-count { white-space: nowrap; }
}

/* --- omezený pohyb: bez posunů a automatu, jen šipky --- */
@media (prefers-reduced-motion: reduce) {
  .gear-track, .gear-item img, .gear-item::after, .gear-layer, .gear-num > span, .gear-dots button { transition: none !important; }
}

/* --- bez JS: pás jde posouvat ručně, popis prvního stroje je vyplněný na serveru --- */
.no-js .gear-viewport{overflow-x:auto;overflow-y:hidden}
.no-js .gear-track{left:0;padding:0 40px}
.no-js .gear-item img{transform:scale(.8);opacity:1;filter:none}
/* placeholder fotky (chybějící fotka stroje) */
.gear-item.je-placeholder img{opacity:.35}
.gear-item.je-placeholder.is-active img{opacity:.6}