/* ============================================================
   JETPARTNER — návrh D, podstránka Technika Victron
   Staví na style.css (tokeny, hlavička, patička, rail-grid, pill).
   1 základ · 2 úvod · 3 schéma · 4 produkty · 5 z realizace
   6 poznámka + CTA · 7 responzivita · 8 reduced motion
   Závazné: žádné zaoblené rohy.
   ============================================================ */

/* ---------- 1) ZÁKLAD ---------- */
.page-tk main { padding-top: var(--hdr-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.page-tk *, .page-tk *::before, .page-tk *::after { border-radius: 0; }

.tk-h2 {
  font-family: var(--f-disp); font-weight: 300; font-stretch: 100%;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.015em;
  padding-top: 12px;
}

/* ---------- 3) SCHÉMA ---------- */
.tk-schema { position: relative; background: var(--cell); border-top: 1px solid var(--line-d); color: #E8ECEF; padding: 0 0 88px; }
.tk-schema::before {
  content: ""; position: absolute; top: 0; height: 132px; width: 1px; background: var(--line-d);
  left: calc(max(0px, (100% - var(--maxw)) / 2) + var(--pad) + var(--rail) - 1px);
}
.tk-schema > .rail-grid { padding-top: 64px; }
.tk-schema .rail { color: var(--alu); padding-top: 22px; }
.tk-schema-head { padding-left: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tk-legend { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--alu); padding-bottom: 6px; }
.tk-legend span { display: inline-block; width: 28px; height: 0; border-top: 2px dashed var(--orange); }
.tk-legend .lg-data { border-top: 1px dashed var(--alu-2); margin-left: 14px; }

.tk-schema-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: stretch;
  margin-top: 40px;
}
.tk-figure { border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); padding: 28px 0; }
.sch { width: 100%; height: auto; overflow: visible; }
.sch-v { display: none; }

.sch .dot { fill: rgba(190,198,204,.22); }
.sch .wires path { fill: none; stroke: rgba(190,198,204,.26); stroke-width: 1.2; }
.sch .fl {
  fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: butt; stroke-dasharray: 6 12;
  animation: tkFlow 1.1s linear infinite; transition: opacity .3s;
}
@keyframes tkFlow { to { stroke-dashoffset: -18; } }
.sch .data path { fill: none; stroke: var(--alu-2); stroke-width: 1.1; stroke-dasharray: 2 4; transition: opacity .3s, stroke .3s; }
.sch .w-t { fill: var(--alu-2); font-family: var(--f-text); font-size: 11.5px; letter-spacing: .02em; }

.sch .nd { transition: opacity .3s; }
.sch .box { fill: #111C26; stroke: rgba(190,198,204,.55); stroke-width: 1.2; transition: stroke .2s, fill .2s; }
.sch .thin { fill: none; stroke: rgba(190,198,204,.4); stroke-width: 1; }
.sch .cell { fill: none; stroke: rgba(190,198,204,.45); }
.sch .fill { fill: var(--orange); opacity: .8; }
.sch .bus { stroke: var(--alu); stroke-width: 3; }
.sch .t-n { fill: #fff; font-family: var(--f-disp); font-weight: 500; font-size: 16px; letter-spacing: .01em; }
.sch .t-s { fill: var(--alu); font-family: var(--f-text); font-size: 12.5px; }
.sch .t-dim { fill: var(--alu-2); }
.sch .nd-plain .box { fill: rgba(17,28,38,.6); stroke: rgba(190,198,204,.3); }
.sch .nd-plain .t-n { fill: var(--alu); font-weight: 400; }
.sch .nd-jp .box { stroke: rgba(240,88,28,.55); }

/* prvky Victron = odkazy */
.sch a.nd { cursor: pointer; outline: none; }
.sch a.nd:hover .box, .sch a.nd:focus-visible .box, .sch .nd.is-on .box { stroke: var(--orange); stroke-width: 2; fill: #1A2530; }
.sch a.nd:focus-visible .box { stroke: #fff; stroke-dasharray: 4 3; }
.sch a.nd-link:hover .t-n, .sch a.nd-link:focus-visible .t-n { fill: #fff; }
/* zvýraznění: ostatní ustoupí */
.has-active .sch .fl:not(.is-rel) { opacity: .18; }
.has-active .sch .data path:not(.is-rel) { opacity: .3; }
.has-active .sch .data path.is-rel { stroke: var(--alu); stroke-width: 1.4; }
.has-active .sch .nd:not(.is-on):not(.is-rel) { opacity: .45; }

/* panel s produktem */
.tk-peek { border-left: 1px solid var(--line-d); padding: 0 0 0 28px; display: flex; flex-direction: column; }
.tk-peek-hint { font-size: 13px; color: var(--alu-2); padding: 14px 0 16px; border-bottom: 1px solid var(--line-d); }
.peek { padding-top: 24px; }
.peek[hidden] { display: none; }
.peek img { width: 100%; height: 190px; object-fit: contain; object-position: left bottom; }
.peek img.peek-shot { object-fit: cover; object-position: left top; border: 6px solid var(--bar); height: 170px; }
.peek h3 { font-family: var(--f-disp); font-weight: 500; font-size: 21px; line-height: 1.2; margin-top: 22px; color: #fff; }
.peek p { font-size: 15px; line-height: 1.5; color: rgba(232,236,239,.72); margin-top: 8px; }
.js .peek { animation: tkPeek .35s var(--ease); }
@keyframes tkPeek { from { opacity: 0; } }

/* ---------- 4) PRODUKTY ---------- */
.tk-prod > .rail-grid:first-child { padding-top: 96px; padding-bottom: 104px; }
.tk-prod:target .rail { color: var(--orange); }
.tk-prod .rail { padding-top: 24px; }

.prod { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.prod-h {
  font-family: var(--f-disp); font-weight: 300; font-stretch: 112%;
  font-size: clamp(32px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -.018em; max-width: 14ch;
  padding-top: 12px;
}
.prod-what { font-size: 17.5px; line-height: 1.55; margin-top: 20px; max-width: 44ch; }

.params { display: grid; grid-template-columns: 1fr 1fr; margin-top: 36px; border-top: 1px solid var(--line-l); }
.params div { padding: 16px 20px 18px 0; border-bottom: 1px solid var(--line-l); }
.params div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line-l); padding-right: 0; }
.params dt { font-size: 13.5px; color: var(--ink-2); }
.params dd { font-family: var(--f-disp); font-weight: 400; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }

.why { margin-top: 32px; }
.why h3 { font-family: var(--f-disp); font-weight: 500; font-size: 16px; letter-spacing: .01em; }
.why p { font-size: 15.5px; color: var(--ink-2); margin-top: 6px; max-width: 52ch; }

/* vyřezaný objekt na světlém pozadí; spodní linka = „podlaha“ výkresu s koncovými značkami */
.prod-stage {
  position: relative; height: clamp(340px, 36vw, 560px);
  display: grid; place-items: center;
  background: radial-gradient(58% 48% at 50% 55%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%);
}
.prod-stage::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 9px;
  border: 1px solid var(--line-l); border-top: 0;
}
.prod-stage img { position: absolute; inset: 0; margin: auto; max-width: 90%; max-height: 86%; width: auto; height: auto; object-fit: contain; }
.prod-stage-tall { height: clamp(440px, 46vw, 680px); }
.tk-prod-s .prod-stage { height: clamp(300px, 30vw, 460px); }
.tk-prod-s .prod-stage img { max-width: 76%; }

/* Cerbo GX + GX Touch 50: dva objekty přes sebe */
.prod-stage-duo { display: block; }
.prod-stage-duo img { max-width: none; max-height: none; inset: auto; margin: 0; }
.prod-stage-duo .duo-a { left: 4%; bottom: 10%; width: 76%; }
.prod-stage-duo .duo-b { right: 3%; top: 8%; width: 50%; filter: drop-shadow(0 24px 30px rgba(15,25,35,.22)); }

/* VRM: snímek dispečinku místo produktu */
.prod-wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.prod-shot img { width: 100%; height: auto; border: 8px solid var(--cell); background: var(--cell); }
.prod-shot figcaption { font-size: 13px; color: var(--ink-2); margin-top: 10px; }

/* Quattro — vedlejší zmínka pod MultiPlus-II */
.tk-prod > .rail-grid + .rail-grid { padding-bottom: 88px; margin-top: -40px; }
.alt { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 28px; align-items: center; border-top: 1px solid var(--line-l); padding-top: 24px; max-width: 720px; }
.alt img { height: 150px; width: 100%; object-fit: contain; }
.alt h3 { font-family: var(--f-disp); font-weight: 500; font-size: 19px; line-height: 1.25; }
.alt p { font-size: 15px; color: var(--ink-2); margin-top: 6px; max-width: 52ch; }

/* ---------- 5) Z REALIZACE ---------- */
.tk-wall > .rail-grid:first-child { padding-top: 96px; }
.tk-wall > .rail-grid:last-child { padding-top: 48px; padding-bottom: 104px; }
.tk-wall .lead { max-width: 60ch; }
.wall-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wall-main { grid-row: span 2; }
.wall-grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.wall-grid figcaption { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; }
.wall-grid figcaption .textlink { margin: 0 0 0 12px; font-size: 13.5px; }
/* bez fotek klienta: hlavní fotka sama, rozumně velká */
.wall-grid:not(:has(.wall-slot)) { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.wall-grid:not(:has(.wall-slot)) img { aspect-ratio: 3 / 2; object-position: center 30%; }
.rail-grid > * { min-width: 0; }

/* ---------- 6) POZNÁMKA + CTA ---------- */
.tk-note > .rail-grid { padding-top: 22px; padding-bottom: 40px; }
.tk-note p { font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 80ch; }
.tk-cta { padding: 112px 0 124px; }
.tk-cta-h { font-size: clamp(38px, 5vw, 80px); max-width: 16ch; }
.tk-cta .contact-row { gap: 12px; }

.foot nav a[aria-current="page"] { color: #fff; }

/* ---------- 7) RESPONZIVITA ---------- */
@media (max-width: 1180px) {
  .prod { gap: 40px; }
  .tk-schema-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; }
  .peek img { height: 150px; }
}

@media (max-width: 900px) {
  .tk-schema::before { display: none; }
  .tk-schema .rail { border-color: var(--line-d); }
  .tk-schema-head { padding-left: 0; }
  .tk-schema > .rail-grid { padding-top: 48px; }
  .tk-schema { padding-bottom: 56px; }
  .tk-schema-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; }
  .tk-peek { border-left: 0; padding: 0; }
  .tk-peek .peek { display: none; }
  .tk-peek-hint { border-bottom: 0; padding: 14px 0 0; }

  .tk-prod > .rail-grid:first-child { padding-top: 56px; padding-bottom: 64px; }
  .prod, .prod-wide { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .prod-stage { order: -1; height: clamp(240px, 64vw, 380px); margin-bottom: 16px; }
  .prod-stage-tall { height: clamp(320px, 92vw, 520px); }
  .tk-prod-s .prod-stage { height: clamp(220px, 56vw, 320px); }
  .prod-shot { order: -1; margin-bottom: 20px; }
  .prod-h { font-size: clamp(30px, 8.2vw, 40px); }
  .prod-what { font-size: 16.5px; }
  .params dd { font-size: 21px; }
  .tk-prod > .rail-grid + .rail-grid { margin-top: -24px; padding-bottom: 56px; }

  .tk-wall > .rail-grid:first-child { padding-top: 56px; }
  .tk-wall > .rail-grid:last-child { padding-top: 28px; padding-bottom: 64px; }
  .wall-grid { grid-template-columns: minmax(0, 1fr); }
  .wall-main { grid-row: auto; }
  .wall-grid figcaption .textlink { display: table; margin: 6px 0 0; }

  .tk-cta { padding: 80px 0 88px; }
  .tk-cta .contact-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 700px) {
  .sch-h { display: none; }
  .sch-v { display: block; max-width: 400px; margin: 0 auto; }
  .sch-v .t-n { font-size: 15px; }
  .sch-v .t-s { font-size: 12px; }
  .tk-figure { padding: 20px 0; }
}

@media (max-width: 420px) {
  .params { grid-template-columns: 1fr; }
  .params div:nth-child(even) { padding-left: 0; border-left: 0; }
  .params div { padding: 12px 0 14px; }
  .alt { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .alt img { height: 110px; }
}

/* ---------- 8) REDUCED MOTION: toky stojí (čárkování zůstává jako značka směru) ---------- */
@media (prefers-reduced-motion: reduce) {
  .sch .fl { animation: none; }
  .js .peek { animation: none; }
}

/* ---------- 9) KOMPAKTNÍ ÚVOD: pod ním hned vidět karty komponent ----------
   Úvod zabírá zhruba polovinu obrazovky; nadpisový blok „Čtyři díly…“ nad kartami
   je jen pro čtečky (úvod říká totéž), takže karty začínají hned pod úvodem. */
.page-tk .tk-hero { height: clamp(360px, 48svh, 480px); --u: clamp(.42px, .052vw, .82px); --gy: 40%; }
.page-tk .tk-hero .pv-group { top: 14%; }
.page-tk .tk-hero-copy { top: 30%; }
.page-tk .tk-h1 { font-size: clamp(34px, 4.4vw, 68px); }
.page-tk .tk-hero-copy p { margin-top: 16px; }
.page-tk .tech > .rail-grid:first-child {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.page-tk .tech .objects { margin-top: 0; border-top: 0; }
.page-tk .tech { padding-top: 40px; }
@media (max-width: 900px) {
  .page-tk .tk-hero { height: clamp(340px, 52svh, 440px); }
  .page-tk .tk-hero-copy { top: 26%; }
  .page-tk .tech { padding-top: 28px; }
}