/* ============================================================
   ATAVUS · route · cesta koně mezi stájemi + vrstva ŽIVOST
   ------------------------------------------------------------
   Vlastní soubor, ne přílepek k a2.css · ten je na 764 řádcích
   těsně pod limitem 800, který hlídá scripts/verify-design-system.py,
   a komponenta by ho přetáhla. Načítají ho OBĚ plochy (atavus.cz
   i invest.atavus.cz), takže hlídač shody dál vidí stejný seznam
   stylů. Kdo přidá route.css jen na jednu z nich, ten hlídač shodí.
   ⛔ Do deploy manifestu patří stejně jako a2.css:
      scripts/stage-invest.sh i scripts/build-deploy-staging.sh.
   ⛔ Odkrytí spouští DVA různé enginy: engine-2.js dává třídu `in`,
      reveal.js na živé homepage dává `is-in`. Každý spouštěcí selektor
      proto nese obě varianty · kdo přidá další, musí přidat obě.
   ⛔ Běží na DVOU design systémech: a2.css (invest) i style.css (živá
      homepage varianta-a-v2.html). style.css nezná --stone, --ease-out,
      --motion-* ani --radius-lg, proto má každý takový token záložní
      hodnotu. Nová proměnná se sem smí psát jen s fallbackem.
   ============================================================ */
/* ══ route · cesta koně mezi stájemi (27. 8. 2026) ═════════════════════
   Sdílená brandová komponenta, ne vlastnictví data roomu · používá ji
   invest.atavus.cz #zazemi i atavus.cz #erwen. Proto sedí v a2.css, který
   načítají obě plochy, a ne v invest.css. Linka se kreslí od tečky k tečce
   jako konektor u značky, takže se s mřížkou nemůže rozejít.           */
.route-wrap{--route-gap:clamp(24px,3vw,48px);position:relative;margin-top:clamp(30px,3.6vw,58px);padding-top:52px}
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--route-gap)}
.stop::before{content:"";position:absolute;top:-41px;left:11px;width:calc(100% + var(--route-gap));height:1px;background:var(--line)}
.stop::after{content:"";position:absolute;top:-41px;left:11px;width:calc(100% + var(--route-gap));height:1px;background:linear-gradient(90deg,var(--brass),var(--brass-dim));transform:scaleX(0);transform-origin:left;transition:transform 620ms var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
.stop:last-child::before,.stop:last-child::after{content:none}
.route.in .stop::after,.route.is-in .stop::after{transform:scaleX(1)}
.route.in .stop:nth-child(2)::after,.route.is-in .stop:nth-child(2)::after{transition-delay:300ms}

.stop{position:relative;padding-right:clamp(0px,1vw,18px)}
.stop-mark{position:absolute;top:-52px;left:0;display:flex;width:23px;height:23px;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--brass) 42%,transparent);border-radius:50%;background:var(--deeper);transition:border-color var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1))),box-shadow var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
.stop-dot{width:7px;height:7px;border-radius:50%;background:var(--brass);transform:scale(0);transition:transform 340ms var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1))),background var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
.route.in .stop:nth-child(2) .stop-dot,.route.is-in .stop:nth-child(2) .stop-dot{transition-delay:240ms}
.route.in .stop:nth-child(3) .stop-dot,.route.is-in .stop:nth-child(3) .stop-dot{transition-delay:480ms}
.route.in .stop-dot,.route.is-in .stop-dot{transform:scale(1)}

.stop-when{display:block;margin-bottom:14px;color:var(--brass-text,var(--brass-bright,#C6A24B));font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.7}
.stop-where{color:var(--cream);font-family:var(--display);font-size:clamp(22px,1.9vw,27px);font-weight:300;line-height:1.2;letter-spacing:var(--tracking-display-md,-.01em)}
/* ⛔ V anglické mutaci se „Training with Miloslav Příhoda · Všetice"
   lámalo tak, že na druhém řádku zůstalo samotné „· Všetice" (63 px),
   na 360 px dokonce samotný oddělovač na vlastním řádku (6 px).
   Nezlomitelná mezera drží oddělovač u města, nowrap drží město celé
   a vyvažování rozdělí zbytek nadpisu rovnoměrně. */
.stop-city{display:block;margin-top:5px;color:var(--stone,var(--cream3,#B0A99F));font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.stop-where{text-wrap:balance}
.stop p{margin-top:14px;color:var(--cream2);font-size:16px;line-height:1.72;max-width:520px}
.stop-src{margin-top:16px;color:var(--stone,var(--cream3,#B0A99F));font-size:10px;letter-spacing:.05em;text-transform:uppercase;text-wrap:balance;opacity:.62;transition:opacity var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1))),color var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}

@media (hover:hover){
  .stop:hover .stop-mark{border-color:var(--brass);box-shadow:0 0 0 5px color-mix(in srgb,var(--brass) 12%,transparent)}
  .stop:hover .stop-dot{background:var(--brass-bright)}
  .stop:hover .stop-src{opacity:1;color:var(--brass-text,var(--brass,#A78237))}
}

@media (max-width:860px){
  .route-wrap{padding-top:0;padding-left:38px}
  .route{grid-template-columns:1fr;gap:44px}
  .route-wrap{margin-top:clamp(22px,4vw,34px)}
  .stop::before,.stop::after{top:14px;left:-27px;width:1px;height:calc(100% + 44px)}
  .stop::after{background:linear-gradient(180deg,var(--brass),var(--brass-dim));transform:scaleY(0);transform-origin:top}
  .route.in .stop::after,.route.is-in .stop::after{transform:scaleY(1)}
  .stop{padding-right:0}
  .stop-mark{top:2px;left:-38px}
  /* strop 520 px platí i tady · na 768 px šel řádek na 91 znaků (audit-vady 2. 9. 2026) */
}

.stop:focus-within .stop-mark{border-color:var(--brass)}

/* ══ ŽIVOST · sdílené stavy (27. 8. 2026) ══════════════════════════════
   Filip 27. 8.: „hover efekty tam úplně taky nejsou". Platí pro obě plochy,
   proto tady a ne v invest.css. Každý stav 200-300 ms, hover jen pod
   @media (hover:hover), klávesnice vidí totéž přes :focus-visible.      */
/* ── Manifestové sloupce · mosazná linka pod štítkem ───────────────── */
.manifest-grid .col .lbl{position:relative;padding-bottom:9px;transition:color var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
.manifest-grid .col .lbl::after{content:"";position:absolute;bottom:0;left:0;width:26px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1))),width var(--motion-scene,480ms) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
.manifest-grid .col.drawn .lbl::after{transform:scaleX(1)}
@media (hover:hover){
  .manifest-grid .col:hover .lbl{color:var(--brass)}
  .manifest-grid .col:hover .lbl::after{width:58px}
}


/* ── Karty s fotkou (reporting, tým) · obraz se hne, ne jen stín ────── */
.phil .p-photo{overflow:hidden;border-radius:var(--radius-lg,20px)}
.phil .p-photo img{transition:transform 640ms var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
.phil .p h3{transition:color var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
@media (hover:hover){
  .phil .p:hover .p-photo img{transform:scale(1.05)}
  .phil .p:hover h3{color:var(--brass-text,var(--brass,#A78237))}
}


/* ── Štítky v heru · jediná plocha, které přechod fakt chyběl ───────── */
.tag{transition:border-color var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1))),color var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
.tag::before{transition:transform var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1))),background var(--motion-standard,var(--dur,240ms)) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
@media (hover:hover){
  .tag:hover{border-color:color-mix(in srgb,var(--brass) 72%,transparent);color:var(--cream)}
  .tag:hover::before{transform:scale(1.5);background:var(--brass-bright)}
}


/* ── Fotopás · obraz dýchá, popiska se zvedne ───────────────────────── */
.photo-band{overflow:hidden}
.photo-band img{transition:transform 760ms var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
.photo-band .pb-cap{transition:transform var(--motion-scene,480ms) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
@media (hover:hover){
  .photo-band:hover img{transform:scale(1.035)}
  .photo-band:hover .pb-cap{transform:translateY(-6px)}
}


/* ── Zastávky cesty · adresa dostane podtrh ─────────────────────────── */
.stop-where{position:relative;display:inline-block;background-image:linear-gradient(var(--brass),var(--brass));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size var(--motion-scene,480ms) var(--ease-out,var(--ease,cubic-bezier(.16,1,.3,1)))}
@media (hover:hover){.stop:hover .stop-where{background-size:100% 1px}}


.manifest-grid .col:focus-within .lbl{color:var(--brass)}

@media (prefers-reduced-motion:reduce){
  .phil .p-photo img,.photo-band img,.photo-band .pb-cap,.stop::after{transition:none}
  .stop::after{transform:none}
  .stop-where{background-size:0 1px}
}

/* ── story-route · cesta uvnitř příběhu na homepage ───────────────────
   Data room má cestu jako samostatnou sekci, homepage ji nese uvnitř
   Erwenina bloku · potřebuje proto vlastní hlavičku a odstup, ne novou
   komponentu.                                                          */
.story-route{margin-top:clamp(56px,6vw,92px);padding-top:clamp(34px,3.4vw,48px);border-top:1px solid var(--line)}
.story-route-h{color:var(--cream);font-family:var(--display);font-size:clamp(24px,2.4vw,34px);font-weight:300;line-height:1.16;letter-spacing:var(--tracking-display-md,-.01em)}
.story-route-lead{max-width:60ch;margin-top:14px;color:var(--cream2);font-size:17px;line-height:1.75}