/* ============================================================
   JETPARTNER — sdílený úvod „Technika, na které stavíme“ (panely v CSS 3D)
   Používá technika.html (úvod) i index.html (kompaktní banner + 4 karty). JS: tk-hero.js.
   Pozadí = tmavá šedomodrá webu (--cell z style.css), žádná jiná „černá“.
   ============================================================ */
/* ---------- 2) ÚVOD — panely v CSS 3D ----------
   --u = měřítko (1 px návrhu při 1440 px šířky). --rx/--ry = natočení za kurzorem,
   --sp = průběh scrollu 0–1, --sh = posun lesku. Nastavuje tk-hero.js. */
.tk-hero {
  --u: clamp(.5px, .07vw, 1.12px);
  --rx: 0deg; --ry: 0deg; --sp: 0; --sh: 0;
  position: relative; overflow: hidden; color: #fff;
  height: clamp(540px, calc(100svh - var(--hdr-h)), 820px);
  --gx: 50%; --gy: 46%;
  background:
    radial-gradient(44% 46% at var(--gx) var(--gy), rgba(150,168,184,.17), rgba(15,25,35,0) 72%),
    var(--cell);
}
.tk-hero-stage { position: absolute; inset: 0; perspective: calc(1500 * var(--u)); perspective-origin: 50% 30%; }
.pv-group {
  position: absolute; left: 50%; top: 20%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform:
    translateY(calc(var(--sp) * 70 * var(--u)))
    rotateX(calc(var(--rx) + var(--sp) * 7deg))
    rotateY(var(--ry));
}
.pv {
  position: absolute; display: block;
  background: #0b0d10; border: 1px solid #2a3137;
  box-shadow: 0 calc(60 * var(--u)) calc(120 * var(--u)) rgba(4,8,12,.7), 0 0 0 1px rgba(190,198,204,.05);
}
/* levý panel: menší, dál, natočený k divákovi pravou hranou */
.pv-l {
  width: calc(300 * var(--u)); height: calc(620 * var(--u));
  left: calc(-352 * var(--u)); top: calc(135 * var(--u));
  transform: translateZ(calc(-60 * var(--u))) rotateY(34deg);
}
/* pravý panel: vyšší, vpředu, natočený opačně */
.pv-r {
  width: calc(330 * var(--u)); height: calc(740 * var(--u));
  left: calc(-10 * var(--u)); top: 0;
  transform: rotateY(-24deg);
}
/* sklo: tmavé články, mezery mezi nimi, půlení článků a pohyblivý lesk */
.pv-glass {
  position: absolute; inset: calc(6 * var(--u));
  background:
    linear-gradient(112deg, rgba(255,255,255,0) calc(30% + var(--sh) * 1%), rgba(255,255,255,.075) calc(44% + var(--sh) * 1%), rgba(255,255,255,0) calc(58% + var(--sh) * 1%)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 35%),
    linear-gradient(transparent calc(50% - 1px), rgba(86,98,110,.55) calc(50% - 1px), rgba(86,98,110,.55) 50%, transparent 50%),
    linear-gradient(rgba(62,72,82,.34) 1px, transparent 1px) 0 0 / 100% calc(100% / 20),
    linear-gradient(90deg, rgba(62,72,82,.5) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%,
    linear-gradient(180deg, #0d1115 0%, #06080a 60%, #040506 100%);
  box-shadow: inset 0 0 0 1px #15191d;
}
/* světelná hrana: horní hrana a jedna boční, nejjasnější v rohu */
.pv i { position: absolute; display: block; pointer-events: none; }
.pv-rim-t { top: -1px; height: 1.5px; left: 0; right: 0; }
.pv-rim-s { top: 0; width: 1.5px; height: 70%; }
.pv-flare { width: calc(90 * var(--u)); height: calc(90 * var(--u)); top: calc(-45 * var(--u)); background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, rgba(255,255,255,0)); mix-blend-mode: screen; }
.pv-l .pv-rim-t { background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.25) 40%, rgba(255,255,255,0) 85%); box-shadow: 0 0 8px rgba(255,255,255,.35); }
.pv-l .pv-rim-s { left: -1px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.2) 45%, rgba(255,255,255,0)); box-shadow: 0 0 8px rgba(255,255,255,.3); }
.pv-l .pv-flare { left: calc(-45 * var(--u)); }
.pv-r .pv-rim-t { background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,.25) 40%, rgba(255,255,255,0) 85%); box-shadow: 0 0 8px rgba(255,255,255,.35); }
.pv-r .pv-rim-s { right: -1px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.2) 45%, rgba(255,255,255,0)); box-shadow: 0 0 8px rgba(255,255,255,.3); }
.pv-r .pv-flare { right: calc(-45 * var(--u)); }
/* spodek jeviště se ztrácí do tmy */
.tk-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, rgba(15,25,35,0), var(--cell) 88%); pointer-events: none;
}

.tk-hero-copy {
  position: absolute; left: 0; right: 0; top: 36%; z-index: 2;
  padding: 0 var(--pad); text-align: center;
}
.tk-h1 {
  font-family: var(--f-disp); font-weight: 500; font-stretch: 100%;
  font-size: clamp(38px, 5.2vw, 82px); line-height: 1.02; letter-spacing: -.02em;
  text-shadow: 0 2px 40px rgba(0,0,0,.65);
}
.tk-hero-copy p {
  max-width: 50ch; margin: 22px auto 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.78);
  text-shadow: 0 1px 20px rgba(0,0,0,.8);
}

/* ---------- BANNER NA HLAVNÍ STRÁNCE (kompaktní) + 4 KARTY ----------
   Banner: text vlevo v mřížce kolejnice, panely vpravo. Deska s kartami (světlý papír)
   zajíždí o --lap do spodku banneru, panely „stojí“ za ní → jeden celek. */
.tk-sec { position: relative; background: var(--paper); --lap: 112px; padding-bottom: 48px; border-bottom: 1px solid var(--line-l); }
.tk-hero-banner {
  --u: clamp(.4px, .042vw, .62px); --gx: 74%; --gy: 40%;
  height: calc(var(--lap) + clamp(300px, 25vw, 380px));
}
.tk-hero-banner .pv-group { left: 74%; top: 36px; }
.tk-hero-banner::after { height: 46%; }
.tk-hero-banner .tk-hero-copy {
  top: clamp(44px, 4.6vw, 72px); left: 0; right: 0; margin: 0 auto; text-align: left;
}
.tk-hero-banner .tk-hero-copy .rail { color: var(--alu); padding-top: 22px; margin: 0; max-width: none; font-size: 13px; text-shadow: none; }
.tk-hero-banner .rail-grid > :last-child { padding-left: 40px; }
.tk-hero-banner .tk-h1 { font-weight: 300; font-size: clamp(34px, 3.9vw, 58px); max-width: 12ch; text-shadow: 0 2px 30px rgba(15,25,35,.7); padding-top: 12px; }
.tk-hero-banner .tk-hero-copy p { margin: 18px 0 0; max-width: 44ch; font-size: 16px; }
.tk-hero-cta { margin-top: 30px; }
.tk-hero-banner .tk-hero-cta { margin-top: 24px; }

.tk-cards { position: relative; z-index: 2; margin-top: calc(-1 * var(--lap)); }
.tk-cards .objects { margin-top: 0; border-top: 0; background: var(--paper); box-shadow: 0 -24px 48px -28px rgba(15,25,35,.45); }
.tk-cards .objects > .obj { padding: 0; }
.tk-cards .obj-stage { height: clamp(200px, 19vw, 280px); margin-bottom: 22px; grid-template: 100% / 100%; }
.tk-cards .obj-stage img { justify-self: center; align-self: center; }
/* celá karta = odkaz */
.obj-a { display: flex; flex-direction: column; height: 100%; padding: 28px 24px 30px; color: inherit; }
.obj-a:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.obj-a h3 { font-size: 18px; }
.obj-a p { font-size: 14px; }
.obj-more {
  align-self: flex-start; margin-top: auto; padding-top: 18px;
  font-weight: 500; font-size: 14px; line-height: 1.3;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px; transition: color .25s;
}
.obj.is-hot .obj-more, .obj-a:focus-visible .obj-more { color: var(--orange); }
/* klávesnice: stejná odezva jako najetí myší */
.obj:has(.obj-a:focus-visible) { background-color: rgba(255,255,255,.38); }
.obj:has(.obj-a:focus-visible) .obj-stage { --lift: -14px; --sc: 1.05; }
.obj:has(.obj-a:focus-visible) h3::after { width: 56px; }
.tk-hero .pill-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.tk-hero .pill-ghost:hover { border-color: #fff; }

@media (max-width: 1180px) {
  .tk-cards .objects > .obj { padding: 0; border-top: 0; }
  .tk-cards .objects > .obj:nth-child(n+3) { border-top: 1px solid var(--line-l); }
  .tk-cards .obj-stage { height: clamp(200px, 26vw, 280px); }
}
@media (max-width: 900px) {
  .tk-hero { height: clamp(500px, 72svh, 640px); }
  .tk-sec { --lap: 56px; padding-bottom: 24px; }
  .tk-hero-banner { height: calc(var(--lap) + 440px); --gx: 70%; --gy: 62%; }
  .tk-hero-banner .tk-hero-copy { top: 40px; }
  .tk-hero-banner .rail-grid > :last-child { padding-left: 0; }
  .tk-hero-banner .rail { border-color: var(--line-d); }
  .tk-hero-banner .pv-group { left: 72%; top: 250px; }
  .tk-hero-banner .tk-hero-copy p { font-size: 15.5px; max-width: 34ch; }
  .obj-a { padding: 20px 14px 24px; }
  .tk-cards .obj-stage { height: 190px; margin-bottom: 14px; }
  .obj-a h3 { font-size: 16px; }
  .obj-a p { font-size: 13.5px; }
  .tk-hero-copy { top: 34%; }
  .tk-hero-copy p { font-size: 15.5px; }
}
@media (max-width: 700px) {
  .tk-hero { --u: .56px; }
  .pv-group { top: 15%; }
  .tk-hero-banner { --u: .42px; }
}