/* ============================================================
   Interaktivní schéma „Co v domě instalujeme“ – VZT divize
   Používá proměnné z style.css (--primary, --dark, --text …).
   Vykresluje js/vzt-schema.js do <div class="vs" data-vs-lang="cs|en|de">.
   ============================================================ */
.vs{
  --oda:#2f9e5b;--sup:#e0533d;--eta:#e3a51c;--eha:#8a5a3c;--ref:#b87333;
  --hw:#d6453b;--cw:#2f7fd0;--cond:#5aa9d6;
  --ground:#e7eee6;--slab:#c9ccd0;--floor:#e3d3b8;--tile:#dce5ea;--tech:#d3d8dc;
  --wall:#f1eee8;--wall-2:#e4e0d8;--cut:#3a4048;--edge:rgba(15,23,42,.45);
  --glass:#bcd8ee;--unit:#f7f8f9;--unit-2:#dfe3e7;
  margin-top:0;
}
.vs :focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.vs button{font:inherit;color:inherit}

.vs-modes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px}
.vs-mode{border:1px solid var(--border);background:var(--white);border-radius:999px;padding:7px 16px;font-weight:600;font-size:.95rem;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,background .2s}
.vs-mode i{width:10px;height:10px;border-radius:50%;display:inline-block}
.vs-mode:hover{border-color:var(--primary)}
.vs-mode[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff}

.vs-app{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;text-align:left}
@media (max-width:960px){.vs-app{grid-template-columns:minmax(0,1fr)}}
.vs-stage{min-width:0;display:flex;flex-direction:column;gap:14px}
.vs-scene{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 2px 16px rgba(0,0,0,.06);position:relative;overflow:hidden}
.vs-svg{display:block;width:100%;height:auto}
.vs-hint{position:absolute;left:16px;top:12px;font-size:.85rem;line-height:1.4;color:var(--text-light);pointer-events:none;max-width:60%}
.vs-swipe{display:none}
.vs-legend{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 16px;border-top:1px solid var(--border);font-size:.85rem;color:var(--text-light)}
.vs-legend span{display:inline-flex;align-items:center;gap:6px}
.vs-legend b{display:inline-block;width:18px;height:5px;border-radius:3px}
@media (max-width:600px){
  .vs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .vs-svg{width:700px;max-width:none}
  .vs-hint{display:none}
  .vs-swipe{display:block;font-size:.85rem;color:var(--text-light);padding:8px 16px 0}
}

/* SVG */
.vs .sys,.vs .spot{transition:opacity .25s}
.vs-svg[data-mode="vzt"] .s-ac,.vs-svg[data-mode="vzt"] .s-tc,
.vs-svg[data-mode="ac"] .s-vzt,.vs-svg[data-mode="ac"] .s-tc,
.vs-svg[data-mode="tc"] .s-vzt,.vs-svg[data-mode="tc"] .s-ac{opacity:.1}
.vs-svg[data-mode="vzt"] .spot.s-ac,.vs-svg[data-mode="vzt"] .spot.s-tc,
.vs-svg[data-mode="ac"] .spot.s-vzt,.vs-svg[data-mode="ac"] .spot.s-tc,
.vs-svg[data-mode="tc"] .spot.s-vzt,.vs-svg[data-mode="tc"] .spot.s-ac{opacity:0;pointer-events:none}
.vs .duct{fill:none;stroke-linecap:round;stroke-linejoin:round}
.vs .duct-o{fill:none;stroke:rgba(15,23,42,.35);stroke-linecap:round;stroke-linejoin:round}
.vs .flow{fill:none;stroke:rgba(255,255,255,.95);stroke-width:2;stroke-linecap:round;stroke-dasharray:1.5 11}
.vs .ghost{fill:rgba(120,130,140,.07);stroke:rgba(15,23,42,.35);stroke-width:1;stroke-dasharray:6 4}
.vs .ceil{fill:none;stroke:rgba(15,23,42,.25);stroke-width:1;stroke-dasharray:3 4}
.vs .room{font:600 11px "Titillium Web",Arial,sans-serif;fill:#7b8794;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.vs .spot{cursor:pointer}
.vs .spot circle.dot{stroke:#fff;stroke-width:2.5;transition:r .15s}
.vs .spot circle.ring{fill:none;stroke-width:2;opacity:0}
.vs .spot text{font:700 11px "Titillium Web",Arial,sans-serif;fill:#fff;pointer-events:none}
.vs .spot:hover circle.dot,.vs .spot:focus-visible circle.dot{r:16}
.vs .spot.on circle.dot{fill:var(--dark)!important;r:16}
.vs .spot.on circle.ring{opacity:1}
.vs .spot:focus{outline:none}
@media (max-width:600px){.vs .spot circle.dot{r:15}.vs .spot:hover circle.dot,.vs .spot.on circle.dot{r:17}.vs .spot text{font-size:12.5px}}
.vs .hl{fill:none;stroke:var(--primary);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s;pointer-events:none}
.vs .hl-halo{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none}
.vs .hl.on{opacity:1}.vs .hl-halo.on{opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .vs .flow{animation:vsflow 1.1s linear infinite}
  @keyframes vsflow{to{stroke-dashoffset:-12.5}}
  .vs .spot.on circle.ring{animation:vspulse 1.8s ease-out infinite}
  @keyframes vspulse{0%{r:16;opacity:.9}100%{r:28;opacity:0}}
}

/* seznam pod schématem */
.vs-groups{display:flex;flex-direction:column;gap:10px}
.vs-grp{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:start}
@media (max-width:600px){.vs-grp{grid-template-columns:minmax(0,1fr)}}
.vs-grp h3{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-light);padding-top:8px;display:flex;gap:8px;align-items:center;margin:0;hyphens:auto;overflow-wrap:anywhere}
.vs-grp h3 i{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.vs-chips{display:flex;flex-wrap:wrap;gap:6px}
.vs-chip{border:1px solid var(--border);background:var(--white);border-radius:6px;padding:5px 11px;font-size:.9rem;line-height:1.4;cursor:pointer;display:inline-flex;gap:7px;align-items:baseline;text-align:left}
.vs-chip b{color:var(--primary-dark)}
.vs-chip:hover{border-color:var(--primary)}
.vs-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.vs-chip[aria-pressed="true"] b{color:#fff}

/* karta */
.vs-card{min-width:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 2px 16px rgba(0,0,0,.06);padding:22px;display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(var(--header-h,70px) + 16px)}
@media (max-width:960px){.vs-card{position:static}}
.vs-tag{align-self:flex-start;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;color:#fff}
.vs-card h3{font-size:1.4rem;margin:0}
.vs-card dl{margin:0;display:flex;flex-direction:column;gap:10px}
.vs-card dt{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light)}
.vs-card dd{margin:2px 0 0;font-size:.97rem}
.vs-do{background:var(--primary-light);border-left:4px solid var(--primary);border-radius:0 var(--radius) var(--radius) 0;padding:10px 14px;font-size:.95rem}
.vs-do strong{color:var(--dark)}
.vs-meta{font-size:.85rem;color:var(--text-light);margin:0}
.vs-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.vs-acts .btn{padding:10px 20px;font-size:.95rem}
.vs-acts .btn-outline{color:var(--dark);border-color:var(--dark)}
.vs-acts .btn-outline:hover{background:var(--dark);color:#fff}
.vs-nav{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding-top:12px;margin-top:2px}
.vs-nav button{background:none;border:0;color:var(--primary-dark);font-weight:600;cursor:pointer;padding:4px 0;text-align:left;line-height:1.35}
.vs-nav button:last-child{text-align:right}
.vs-note{margin:14px 0 0;font-size:.85rem;color:var(--text-light);text-align:center}