/* Vaníček Elektro */

*, *::before, *::after { box-sizing: border-box; }

@font-face {
  font-family: "InstrumentSans"; src: url("pismo/instrumentsans-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "InstrumentSans"; src: url("pismo/instrumentsans-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "GeistMono"; src: url("pismo/geistmono-cislice.woff2") format("woff2");
  font-weight: 400 500; font-display: swap;
  unicode-range: U+0020-0040,U+00A0,U+00D7,U+2009,U+2013,U+202F,U+2212;
}
@font-face {
  font-family: "GeistMono"; src: url("pismo/geistmono.woff2") format("woff2");
  font-weight: 400 500; font-display: swap;
  unicode-range: U+0041-007E,U+00A1-00D6,U+00D8-00FF,U+0100-017F,U+2010-2012,U+2014-2027,U+2030,U+2032-2033,U+2039-203A,U+20AC,U+2116,U+2122;
}

/* Písmo. Mono jen na čísla. */

:root {
  --pismo:  "InstrumentSans", system-ui, -apple-system, sans-serif;
  --nadpis: "InstrumentSans", system-ui, -apple-system, sans-serif;
  --mono:   "GeistMono", ui-monospace, SFMono-Regular, monospace;

  --tma:    #141012;
  --tma2:   #1b1618;
  --panel:  #241e20;
  --papir:  #f7f4f1;
  --papir2: #ece7e2;
  --bila:   #fffdfb;

  --text:  #191315;
  --tlum:  #6a6461;   /* na papíře 5,3:1 */
  --tlumT: #a8a2a4;   /* na tmě 7,5:1 */

  --cervena:   #cc1b22;   /* z jeho loga, na papíře 5,1:1 */
  --cervena-s: #f2666b;   /* na tmě 6,2:1 */

  --linka:   rgba(25,19,21,.12);
  --linka2:  rgba(25,19,21,.26);
  --linkaT:  rgba(247,244,241,.13);
  --linkaT2: rgba(247,244,241,.3);

  --sirka: 1200px;
  --okraj: clamp(20px, 4vw, 44px);
  --plyn:  cubic-bezier(.2,.8,.2,1);

  --r-tlac: 6px;
  --r:      8px;
  --r-maly: 6px;
}

html { scroll-behavior: smooth; background: var(--papir); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--pismo);
  font-size: 17px; line-height: 1.6;
  background: var(--papir); color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 {
  margin: 0; font-family: var(--nadpis); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.08;
  text-wrap: balance;
}
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cervena); outline-offset: 3px; border-radius: 4px; }

.obal { width: 100%; max-width: var(--sirka); margin: 0 auto; padding: 0 var(--okraj); }

/* Štítek napěťové hladiny. Červená znamená vysoké napětí. */
.hladina {
  display: inline-block; font-size: 13px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.5;
  padding: 3px 10px 4px; border-radius: 4px;
  border: 1px solid var(--linka2); color: var(--tlum);
  white-space: nowrap;
}
.hladina--vn { border-color: rgba(204,27,34,.4); background: rgba(204,27,34,.07); color: var(--cervena); }
.tma .hladina { border-color: var(--linkaT2); color: #cfc9cb; }
.tma .hladina--vn { border-color: rgba(242,102,107,.45); background: rgba(242,102,107,.12); color: var(--cervena-s); }

/* Tlačítka. */
.tlac {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; font-weight: 600; font-size: 16px; letter-spacing: -.01em;
  border: 1px solid transparent; border-radius: var(--r-tlac);
  transition: background .18s var(--plyn), color .18s var(--plyn), border-color .18s var(--plyn), transform .18s var(--plyn);
}
.tlac:active { transform: translateY(1px); }
.tlac--plny { background: var(--cervena); color: #fff; }
.tlac--plny:hover { background: #ab1219; }
.tlac--duty { border-color: var(--linkaT2); color: var(--papir); }
.tlac--duty:hover { border-color: var(--papir); background: rgba(247,244,241,.1); }
.tlac--tmavy { background: var(--tma); color: var(--papir); }
.tlac--tmavy:hover { background: #000; }
.tlac--obrys { border-color: var(--linka2); color: var(--text); }
.tlac--obrys:hover { border-color: var(--text); background: rgba(25,19,21,.05); }

/* Hlavička. */
.hlava {
  position: sticky; top: 0; z-index: 60;
  background: var(--tma); color: var(--papir);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hlava__radek { display: flex; align-items: center; gap: 18px; height: 80px; }
.znacka { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
/* Pod 40 px je nápis ELEKTRO menší než 8 px a slévá se. */
.znacka img { height: 48px; width: auto; }

.nabidka { display: flex; align-items: center; gap: 26px; }
.nabidka a {
  font-size: 14.5px; font-weight: 500; color: var(--tlumT);
  transition: color .16s var(--plyn);
}
.nabidka a:hover { color: var(--papir); }

.hlava__tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  padding: 10px 20px; border-radius: var(--r-tlac); background: var(--papir); color: var(--tma);
  transition: background .16s var(--plyn);
}
.hlava__tel:hover { background: #fff; }
.hlava__tel:hover { border-color: var(--papir); background: rgba(242,241,238,.08); }

.hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: 4px; }
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--papir); position: relative; }
.hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--papir); }
.hamburger span::before { top: -6px; } .hamburger span::after { top: 6px; }

@media (max-width: 900px) {
  .hlava__radek { height: 68px; }
  .znacka img { height: 40px; }
  .znacka { flex-shrink: 0; }
  .hamburger { display: flex; }
  .nabidka {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--tma); border-bottom: 1px solid rgba(255,255,255,.1);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .26s var(--plyn), visibility 0s linear .26s;
  }
  .nabidka[data-otevreno="1"] { max-height: 340px; visibility: visible; transition-delay: 0s; }
  .nabidka a { padding: 15px var(--okraj); border-top: 1px solid rgba(255,255,255,.07); font-size: 16px; }
  .hlava__tel span { display: none; }
}
/* Na 320 px se logo, telefon a nabídka vejdou jen takhle. */
@media (max-width: 379px) {
  .hlava__radek { gap: 10px; }
  .znacka img { height: 34px; }
  .hlava__tel { padding: 10px 12px; font-size: 14px; }
}

/* Úvod. Fotka přes celou plochu, text dole na přechodu. */
.uvod {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(86vh, 820px);
  background: var(--tma); overflow: hidden;
}
.uvod__pozadi { position: absolute; inset: 0; }
.uvod__pozadi img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 42%; }
/* Stožáry: na širokém displeji ořez hlavně zdola, ať zůstane vršek stožáru i slunce. */
.uvod--stozary .uvod__pozadi img { object-position: 50% 15%; }
/* Fotka je dole sama tmavá, stačí slabší přechod, ať zůstane barva oblohy. */
.uvod--stozary .uvod__pozadi::after {
  background:
    linear-gradient(to top, rgba(10,8,9,.85) 0%, rgba(10,8,9,.62) 30%, rgba(10,8,9,.22) 60%, rgba(10,8,9,0) 82%),
    linear-gradient(to right, rgba(10,8,9,.55) 0%, rgba(10,8,9,.12) 46%, rgba(10,8,9,0) 70%);
}
.uvod__pozadi::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,8,9,.95) 0%, rgba(10,8,9,.84) 30%, rgba(10,8,9,.38) 60%, rgba(10,8,9,0) 84%),
    linear-gradient(to right, rgba(10,8,9,.62) 0%, rgba(10,8,9,.18) 46%, rgba(10,8,9,0) 74%);
}
.uvod__obal {
  position: relative; z-index: 1; width: 100%; color: var(--papir);
  padding-top: clamp(160px, 26vh, 280px);
  padding-bottom: clamp(40px, 5vw, 66px);
}

/* Napěťové hladiny jako jeden pásek dělený linkami. */
.uvod__stitek {
  display: inline-flex; flex-wrap: wrap; align-items: stretch;
  border: 1px solid rgba(247,244,241,.34); border-radius: 6px;
  background: rgba(10,8,9,.55); overflow: hidden;
}
.uvod__stitek span {
  padding: 7px 14px 8px; font-size: 13.5px; font-weight: 600;
  color: #eae5e6; border-left: 1px solid rgba(247,244,241,.22);
}
.uvod__stitek span:first-child { border-left: 0; }
.uvod__stitek span.je-vn { color: #ff9195; }

.uvod h1 { margin-top: 24px; font-size: clamp(32px, 4.5vw, 56px); max-width: 18ch; }
.uvod__perex { margin-top: 20px; font-size: clamp(16.5px, 1.4vw, 18.5px); color: #d7d2d3; max-width: 50ch; }
.uvod__tlacitka { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

@media (max-width: 760px) {
  /* Mobil: fotka v celém poměru 4:3, text pod ní. */
  .uvod { display: block; min-height: 0; }
  .uvod__pozadi { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .uvod__pozadi img { object-position: 50% 50%; }
  /* Výřez 4:3 z 16:9: slunce celé, velkému stožáru se ořízne jen kraj ramen. */
  .uvod--stozary .uvod__pozadi img { object-position: 62% 50%; }
  .uvod__pozadi::after {
    background: linear-gradient(to top, var(--tma) 0%, rgba(10,8,9,.6) 18%, rgba(10,8,9,0) 42%);
  }
  .uvod__obal { margin-top: -44px; padding-top: 0; padding-bottom: 34px; }
}

/* Pás s parametry. */
.parametry { background: var(--papir2); border-bottom: 1px solid var(--linka); }
.parametry__mriz { display: grid; grid-template-columns: repeat(4, 1fr); }
.parametry__pol { padding: 26px 22px; border-left: 1px solid var(--linka); }
.parametry__pol:first-child { border-left: 0; padding-left: 0; }
.parametry__cislo { font-family: var(--nadpis); font-size: clamp(21px, 2.4vw, 28px); font-weight: 650; letter-spacing: -.035em; }
.parametry__co { margin-top: 5px; font-size: 14px; color: var(--tlum); }
@media (max-width: 760px) {
  .parametry__mriz { grid-template-columns: 1fr 1fr; }
  .parametry__pol { padding: 20px 16px; border-top: 1px solid var(--linka); }
  .parametry__pol:first-child, .parametry__pol:nth-child(3) { border-left: 0; padding-left: 0; }
  .parametry__pol:nth-child(-n+2) { border-top: 0; }
}

/* O firmě. */
.firma__mriz { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.firma h2 { font-size: clamp(27px, 3.4vw, 40px); }
.firma__perex { margin-top: 22px; font-size: 17.5px; color: var(--text); max-width: 48ch; }
.firma__perex + .firma__perex { margin-top: 16px; font-size: 16.5px; color: var(--tlum); }

/* Letopočty pod sebou na svislé lince. */
.letopocty { border-left: 1px solid var(--linka2); padding-left: 24px; }
.letopocet { position: relative; padding-bottom: 22px; }
.letopocet:last-child { padding-bottom: 0; }
.letopocet::before {
  content: ""; position: absolute; left: -28px; top: 7px;
  width: 7px; height: 7px; background: var(--cervena);
}
.letopocet__rok { font-size: 15px; font-weight: 700; color: var(--cervena); }
.letopocet__co { margin-top: 3px; font-size: 15.5px; }

.firma__obraz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.firma__podnadpis { margin-top: 34px; font-size: 18px; }
.firma__zadavatele { margin-top: 14px; border-top: 1px solid var(--linka); }
.firma__zadavatel { padding: 14px 0; border-bottom: 1px solid var(--linka); }
.firma__zadavatel b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.firma__zadavatel span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--tlum); }
@media (max-width: 860px) { .firma__mriz { grid-template-columns: 1fr; } }

/* Obecný oddíl. */
.oddil { padding: clamp(64px, 8vw, 116px) 0; }
.oddil--tma { background: var(--tma); color: var(--papir); }
.oddil--sedy { background: var(--papir2); }
.oddil__hlava { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 62px); }
.oddil__hlava h2 { font-size: clamp(27px, 3.4vw, 40px); }
.oddil__hlava p { margin-top: 20px; font-size: 18px; color: var(--tlum); max-width: 54ch; }
.oddil--tma .oddil__hlava p { color: var(--tlumT); }

/* Co děláme */
.prace__polozka {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 320px);
  grid-template-rows: auto auto;
  gap: 0 clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-top: 1px solid var(--linka);
}
.prace__polozka:last-child { border-bottom: 1px solid var(--linka); }

.prace__cislo {
  grid-column: 1; grid-row: 1;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  color: var(--cervena); padding-top: 5px;
}

.prace__text { grid-column: 2; grid-row: 2; padding-top: 12px; }
.prace__hlavicka { grid-column: 2 / 4; grid-row: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.prace__text h3 { font-size: clamp(20px, 2.1vw, 26px); }
.prace__text p { margin-top: 12px; color: var(--tlum); font-size: 16.5px; max-width: 54ch; }

/* Výčet činností jako řádek oddělený tečkami. */
.prace__seznam { margin-top: 14px; font-size: 15px; color: var(--text); }
.prace__seznam li { display: inline; }
.prace__seznam li:not(:last-child)::after { content: "\00a0·"; color: var(--linka2); }

.prace__obraz { grid-column: 3; grid-row: 2; padding-top: 12px; }
.prace__obraz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-maly); }
.prace__popiska { margin-top: 9px; font-size: 13px; color: var(--tlum); }

@media (max-width: 860px) {
  .prace__polozka { grid-template-columns: 38px minmax(0, 1fr); gap: 0 18px; }
  .prace__hlavicka { grid-column: 2; flex-direction: column; gap: 10px; align-items: flex-start; }
  .prace__obraz { grid-column: 2; grid-row: 3; margin-top: 20px; max-width: 420px; }
}

/* Technika. */
.techno__mriz { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.techno__obrazy { display: grid; gap: 10px; }
.techno__obrazy img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-maly); }
.techno h2 { font-size: clamp(26px, 3.2vw, 38px); }
.techno p { margin-top: 20px; color: var(--tlum); max-width: 50ch; }
.techno__tabulka { margin-top: 30px; border-top: 1px solid var(--linka2); }
.techno__radek { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--linka); font-size: 15.5px; }
.techno__radek dt { color: var(--tlum); }
.techno__radek dd { margin: 0; font-family: var(--mono); font-weight: 500; text-align: right; }
.techno__cena { margin-top: 24px; font-size: 15.5px; color: var(--tlum); }
.techno__cena b { color: var(--text); font-family: var(--mono); font-weight: 500; }
@media (max-width: 860px) { .techno__mriz { grid-template-columns: 1fr; } }

/* Realizace v řadách podle napětí. Šířka fotky = --r × modul.
   Modul podle nejdelší řady na úvodu (4,45 modulu). */
.rady { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 3.4vw, 44px); container-type: inline-size; }
.rada { display: flex; gap: 14px; align-items: flex-start; --u: calc((100cqi - 4 * 14px) / 4.45); }
.rada__fotky { display: contents; }
.dil { flex: 0 1 calc(var(--r) * var(--u)); min-width: 0; }
.rada__uvod { flex: 1 1 11rem; min-width: 0; }
.dil img {
  width: 100%; aspect-ratio: var(--r); object-fit: cover;
  border-radius: var(--r-maly); background: var(--papir2);
  transition: opacity .24s var(--plyn);
}
a.dil:hover img, .foto:hover img { opacity: .88; }
.dil__popis { display: block; padding-top: 11px; font-size: 15px; line-height: 1.35; }
.dil__popis b { display: block; font-weight: 650; letter-spacing: -.01em; }
.dil__popis span { display: block; margin-top: 3px; font-size: 14px; color: var(--tlum); }
a.dil:hover .dil__popis b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.rada__uvod { align-self: stretch; padding-right: clamp(16px, 3vw, 40px); }
.rada__uvod h2 { font-size: clamp(27px, 3.4vw, 40px); }
.rada__uvod p { margin-top: 18px; color: var(--tlum); max-width: 40ch; }
.rada__odkaz {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px;
  font-weight: 600; color: var(--cervena);
  text-decoration: underline 1px rgba(204,27,34,.35); text-underline-offset: 5px;
}
.rada__odkaz:hover { text-decoration-color: currentColor; }

/* Dlouhá čísla (22/0,4) mají širší desku, --s srovná velikost. */
.deska { --s: 1; container-type: inline-size; scroll-margin-top: 92px; }
.deska--dlouha { --s: .8; }
.deska__plocha {
  aspect-ratio: var(--r, .8); padding: calc(10cqi * var(--s)) calc(9cqi * var(--s));
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--tma); color: var(--papir); border-radius: var(--r-maly);
  letter-spacing: 0; line-height: 1;
}
.deska__cislo { font-size: calc(30cqi * var(--s)); font-weight: 700; line-height: .9; letter-spacing: -.04em; }
.deska__kv { margin-top: calc(2cqi * var(--s)); font-size: calc(15cqi * var(--s)); font-weight: 700; letter-spacing: -.02em; }
.deska__co { margin-top: calc(7cqi * var(--s)); font-size: max(13px, calc(7.5cqi * var(--s))); font-weight: 500; line-height: 1.25; color: var(--tlumT); }
.deska--vvn .deska__plocha { background: var(--cervena); }
.deska--vvn .deska__co { color: #fff; }

/* Stránka Realizace: deska vlevo, vedle zakázky. */
.urovne { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 7vw, 96px); }
.uroven {
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 0 clamp(20px, 3vw, 40px); align-items: start;
}
.uroven > .deska { position: sticky; top: 92px; --s: 1; }
.uroven .deska__plocha { aspect-ratio: 4 / 5; }
.uroven .deska__cislo { font-size: 46px; }
/* Krátká řada nechá místo volné, dlouhá se zmenší. */
.uroven__zakazky { container-type: inline-size; }
.zakazka .rada { --u: calc((100cqi - 3 * 14px) / 3.3); }
.zakazka { scroll-margin-top: 92px; }
.zakazka + .zakazka { margin-top: clamp(36px, 4.4vw, 56px); padding-top: clamp(36px, 4.4vw, 56px); border-top: 1px solid var(--linka); }
.zakazka h3 { font-size: clamp(20px, 2.1vw, 25px); }
.zakazka__kde { margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--tlum); }
.zakazka__popis { margin: 12px 0 22px; max-width: 62ch; }
.foto { display: block; padding: 0; cursor: zoom-in; border-radius: var(--r-maly); }
.foto:focus-visible { outline-offset: 2px; }

/* Mobil: deska jako pás, fotky se posouvají do strany. */
@media (max-width: 900px) {
  .rada { display: block; }
  .rada__uvod { padding: 0 0 26px; }
  .deska { container-type: normal; margin-bottom: 10px; }
  .deska__plocha {
    aspect-ratio: auto; padding: 13px 16px;
    flex-direction: row; align-items: baseline; gap: 7px;
  }
  .deska__cislo, .uroven .deska__cislo { font-size: 32px; }
  .deska__kv { margin: 0; font-size: 19px; }
  .deska__co { margin: 0 0 0 auto; padding-left: 10px; font-size: 14px; text-align: right; }
  .rada__fotky {
    display: flex; gap: 10px;
    margin: 0 calc(-1 * var(--okraj)); padding: 0 var(--okraj);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--okraj);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .rada__fotky::-webkit-scrollbar { display: none; }
  /* Max 59vw, aby byla vidět i další fotka. */
  .rada__fotky .dil { flex: 0 0 calc(var(--r) * min(270px, 59vw)); scroll-snap-align: start; }
  .dil__popis { font-size: 14px; }

  .uroven { display: block; }
  .uroven > .deska { position: static; margin-bottom: 26px; }
  .uroven .deska__plocha { aspect-ratio: auto; }
  .zakazka__popis { margin-bottom: 18px; }
}

/* Oprávnění. */
.opravneni__mriz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.opravneni__pol { background: var(--bila); border: 1px solid var(--linka); border-radius: var(--r); padding: clamp(24px, 3vw, 34px); }
.opravneni__pol h3 { font-size: 18px; letter-spacing: -.02em; }
.opravneni__pol p { margin-top: 10px; font-size: 15px; color: var(--tlum); }
.opravneni__pol .hladina { margin-bottom: 14px; }
@media (max-width: 1000px) { .opravneni__mriz { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .opravneni__mriz { grid-template-columns: 1fr; } }

/* Údaje pro zadavatele. */
.udaje__mriz { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); }
.udaje__list { margin: 0; }
.udaje__radek {
  display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 20px;
  padding: 15px 0; border-top: 1px solid var(--linka); align-items: baseline;
}
.udaje__list:first-child .udaje__radek:first-child,
.udaje__list:last-child .udaje__radek:first-child { border-top: 1px solid var(--linka2); }
.udaje__radek dt { font-size: 15.5px; color: var(--tlum); }
.udaje__radek dd { margin: 0; font-size: 16.5px; }
.udaje__radek dd b { font-weight: 700; }
.udaje__radek dd a { border-bottom: 1px solid var(--linka2); }
.udaje__pod { margin-top: 30px; font-size: 15.5px; color: var(--tlum); max-width: 74ch; }
.udaje__pod a { color: var(--cervena); border-bottom: 1px solid rgba(204,27,34,.35); }
@media (max-width: 820px) {
  .udaje__mriz { grid-template-columns: 1fr; }
  .udaje__list:last-child .udaje__radek:first-child { border-top: 1px solid var(--linka); }
}

/* Kariéra. */
.mista { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.misto { display: flex; flex-direction: column; background: var(--bila); border: 1px solid var(--linka2); border-radius: var(--r-maly); padding: clamp(26px, 3.4vw, 40px); }
.misto > .hladina { align-self: flex-start; }
.misto__tlac { align-self: flex-start; margin-top: auto; }
.misto .misto__co:last-of-type { margin-bottom: 32px; }
.misto h3 { font-size: clamp(20px, 2.4vw, 25px); }
.misto__mzda { margin-top: 18px; font-family: var(--mono); font-size: clamp(20px, 2.3vw, 25px); font-weight: 500; color: var(--text); letter-spacing: -.02em; }
.misto__mzda span { display: block; margin-top: 6px; font-family: var(--pismo); font-weight: 400; font-size: 15px; color: var(--tlum); letter-spacing: 0; }
.misto__co { margin-top: 24px; }
.misto__co h4 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--cervena); }
.misto__co li { position: relative; padding-left: 18px; font-size: 15.5px; color: var(--text); margin-bottom: 5px; line-height: 1.5; }
.misto__co li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 1px; background: var(--cervena); }
@media (max-width: 820px) { .mista { grid-template-columns: 1fr; } }

/* Kontakt. */
.kontakt__mriz { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.kontakt h2 { font-size: clamp(27px, 3.4vw, 40px); }
.kontakt__perex { margin-top: 20px; color: var(--tlum); max-width: 46ch; }
.kontakt__velke { margin-top: 32px; display: grid; gap: 14px; }
.kontakt__velke a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--nadpis); font-size: clamp(23px, 2.9vw, 33px); font-weight: 650; letter-spacing: -.025em; transition: color .16s var(--plyn); }
.kontakt__velke a:hover { color: var(--cervena); }
.kontakt__udaje { border-top: 1px solid var(--linka2); }
.kontakt__radek { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--linka); font-size: 15.5px; }
.kontakt__radek dt { font-size: 15px; color: var(--tlum); padding-top: 1px; }
.kontakt__radek dd { margin: 0; }
.kontakt__radek dd a { border-bottom: 1px solid var(--linka2); }
@media (max-width: 820px) { .kontakt__mriz { grid-template-columns: 1fr; } .kontakt__radek { grid-template-columns: 110px 1fr; gap: 12px; } }

/* Patička. */
.pata { background: #0c0d0f; color: var(--tlumT); padding-top: clamp(48px, 6vw, 72px); }
.pata__mriz { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 44px; }
.pata__znacka img { height: 56px; width: auto; }
.pata__znacka p { margin-top: 18px; font-size: 14.5px; max-width: 32ch; }
.pata__nadpis { font-size: 14px; font-weight: 650; color: var(--papir); margin-bottom: 14px; }
.pata__odkazy li { margin-bottom: 8px; font-size: 14.5px; }
.pata__odkazy a:hover { color: var(--papir); }
.pata__odkazy b { display: block; font-weight: 600; color: var(--papir); }
.pata__odkazy--velke a { font-weight: 650; font-size: 18px; color: var(--papir); }
@media (max-width: 880px) { .pata__mriz { grid-template-columns: 1fr 1fr; gap: 30px; } .pata__znacka { grid-column: 1 / -1; } }

.pata__pruh { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 14px; }
.pata__radek { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.pata__radek a { color: var(--papir); border-bottom: 1px solid var(--linkaT2); }

/* Lišta na mobilu. */
.lista {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; gap: 10px;
  padding: 10px var(--okraj) calc(10px + env(safe-area-inset-bottom));
  background: var(--tma); border-top: 1px solid rgba(255,255,255,.12);
  transform: translateY(105%); transition: transform .26s var(--plyn);
}
.lista[data-vidno="1"] { transform: none; }
.lista .tlac { flex: 1; padding: 13px 10px; font-size: 15px; }
@media (max-width: 760px) { .lista { display: flex; } body { padding-bottom: 0; } }

/* Lupa. Fotka vlevo, vedle box se zakázkou. Na mobilu box pod fotkou. */
.lupa {
  position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: #0a0b0d; opacity: 0; visibility: hidden;
  transition: opacity .2s var(--plyn), visibility 0s linear .2s;
  overscroll-behavior: contain;
}
.lupa[data-otevreno="1"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.lupa__vrch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px var(--okraj); color: var(--papir); }
.lupa__pocet { font-family: var(--mono); font-size: 13px; }
.lupa__telo {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px;
  min-height: 0; padding: 0 var(--okraj) var(--okraj);
}
.lupa__stred { position: relative; min-height: 0; }
.lupa__stred img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lupa__box {
  align-self: center; display: flex; flex-direction: column;
  padding: 26px 26px 22px; border-radius: var(--r-maly);
  background: var(--tma2); border: 1px solid var(--linkaT); color: var(--papir);
}
.lupa__nazev { font-size: 22px; line-height: 1.2; }
.lupa__kde { margin-top: 8px; font-size: 14.5px; font-weight: 500; color: var(--tlumT); }
.lupa__text { margin-top: 16px; font-size: 15.5px; line-height: 1.55; color: #ddd8d9; }
.lupa__sipky { display: flex; gap: 10px; margin-top: 24px; }
.lupa__zavrit, .sip { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--linkaT2); color: var(--papir); flex: none; }
.lupa__zavrit:hover, .sip:hover { background: rgba(255,255,255,.1); }
@media (max-width: 760px) {
  .lupa__telo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
  .lupa__box { align-self: stretch; padding: 18px 18px 16px; }
  .lupa__nazev { font-size: 18px; }
  .lupa__text { margin-top: 10px; font-size: 14.5px; }
  .lupa__sipky { margin-top: 14px; }
}

/* Najetí zdola. */
@media (prefers-reduced-motion: no-preference) {
  .js .vjezd { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--plyn), transform .55s var(--plyn); }
  .js .vjezd[data-videt="1"] { opacity: 1; transform: none; }
}

/* Podstránky */

/* Záhlaví podstránky. */
.zahlavi {
  padding: clamp(44px, 5.5vw, 78px) 0 clamp(34px, 4vw, 52px);
  border-bottom: 1px solid var(--linka2);
}
.zahlavi h1 { font-size: clamp(30px, 4vw, 50px); max-width: 20ch; }
.zahlavi__perex { margin-top: 20px; font-size: clamp(16.5px, 1.4vw, 18.5px); color: var(--tlum); max-width: 56ch; }
.zahlavi__zpet {
  display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 8px;
  font-size: 15px; color: var(--cervena);
}
.zahlavi__zpet::before { content: "← "; }
.zahlavi__zpet:hover { text-decoration: underline 1px; text-underline-offset: 4px; }

/* Položka soupisu, podtržení při najetí. */
a.prace__polozka { color: inherit; }
.prace__dal {
  display: inline-block; margin-top: 14px;
  font-size: 15px; font-weight: 600; color: var(--cervena);
}
.prace__dal::after {
  content: ""; display: block; height: 1px; margin-top: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--plyn);
}
a.prace__polozka:hover .prace__dal::after { transform: scaleX(1); }
a.prace__polozka:hover .prace__obraz img { opacity: .9; }
.prace__obraz img { transition: opacity .24s var(--plyn); }

/* Stránka jednoho okruhu. Text vlevo, fotka a shrnutí vpravo. */
.vypis__mriz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.vypis__blok + .vypis__blok { margin-top: 32px; }
.vypis__blok h2 { font-size: clamp(20px, 2.1vw, 25px); }
.vypis__blok p { margin-top: 12px; color: var(--tlum); max-width: 58ch; }
.vypis__obraz { margin: 0; }
.vypis__obraz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-maly); }
.vypis__shrnuti { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linka2); }
.vypis__shrnuti:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vypis__stitek { margin-bottom: 14px; }
.vypis__seznam li { padding: 9px 0; border-bottom: 1px solid var(--linka); font-size: 15.5px; }
.vypis__seznam li:last-child { border-bottom: 0; }
@media (max-width: 860px) { .vypis__mriz { grid-template-columns: 1fr; } }


/* Aktivní položka nabídky. */
.nabidka a[aria-current="page"] { color: var(--papir); }

/* Karty míst na podstránkách. */
.misto h2 { font-size: clamp(20px, 2.4vw, 25px); margin-top: 14px; }
.misto__co h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--cervena); }

/* Hodnocení. Hvězdy jsou maska, šířka podle známky. */
.hodnoceni { border-top: 1px solid var(--linka); background: var(--bila); }
.hodnoceni__obal { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(28px, 5vw, 72px); padding-top: 30px; padding-bottom: 30px; }
.hodnoceni h2 { font-size: 17px; letter-spacing: -.01em; margin-right: auto; }
.hodnoceni__pol { display: flex; align-items: center; gap: 14px; }
.hodnoceni__cislo { font-size: clamp(26px, 2.6vw, 32px); font-weight: 650; letter-spacing: -.035em; line-height: 1; }
.hodnoceni__zdroj { display: block; margin-top: 5px; font-size: 14px; color: var(--tlum); }
.hodnoceni__pol:hover .hodnoceni__zdroj { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.hvezdy {
  display: block; width: 92px; height: 17px;
  background: linear-gradient(to right, var(--cervena) var(--podil), var(--linka2) var(--podil));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L10 14.8l-5.9 3.3 1.3-6.6L.5 6.9l6.6-.8z'/%3E%3C/svg%3E") 0 0 / 18.4px 17px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L10 14.8l-5.9 3.3 1.3-6.6L.5 6.9l6.6-.8z'/%3E%3C/svg%3E") 0 0 / 18.4px 17px repeat-x;
}
@media (max-width: 620px) { .hodnoceni h2 { width: 100%; } }

/* 404: jednopólové schéma, přípojnice je doména, vývody stránky.
   Hledaná adresa je rozepnutý vývod. */
.porucha {
  background: var(--tma); color: var(--papir);
  padding: clamp(52px, 7vw, 96px) 0 clamp(60px, 8vw, 110px);
}
.porucha h1 { font-size: clamp(32px, 4.6vw, 58px); max-width: 16ch; }
.porucha__perex { margin-top: 20px; max-width: 54ch; font-size: clamp(16.5px, 1.4vw, 18.5px); color: var(--tlumT); }
.porucha__perex a { color: var(--papir); border-bottom: 1px solid var(--linkaT2); white-space: nowrap; }
.porucha__perex a:hover { border-color: var(--papir); }

.schema { margin: clamp(48px, 6vw, 80px) 0 0; }
.schema__pripojnice { font: 500 13px/1 var(--mono); letter-spacing: 0; color: var(--tlumT); padding-bottom: 12px; }
.schema__vyvody {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  border-top: 3px solid var(--papir);
}
.schema__vyvod {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--tlumT); transition: color .18s var(--plyn);
}
.schema__spinac {
  width: 32px; height: 96px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.schema__spinac circle { fill: currentColor; stroke: none; }
.schema__mrtve { stroke: var(--linkaT2); stroke-dasharray: 3 5; }
.schema__nazev { margin-top: 14px; font-size: 15.5px; font-weight: 600; color: var(--papir); line-height: 1.25; }
.schema__adresa {
  margin-top: 6px; max-width: 100%; padding: 0 6px;
  font: 400 12.5px/1.3 var(--mono); color: var(--tlumT);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.schema__vyvod:hover, a.schema__vyvod:focus-visible { color: var(--cervena-s); }
a.schema__vyvod:hover .schema__adresa, a.schema__vyvod:focus-visible .schema__adresa { color: var(--cervena-s); }
.schema__vyvod--vypnuto { color: var(--cervena-s); }
.schema__vyvod--vypnuto .schema__nazev { color: var(--cervena-s); }

/* Mobil: schéma na výšku. */
@media (max-width: 760px) {
  .schema__vyvody { grid-template-columns: 1fr; border-top: 0; border-left: 3px solid var(--papir); }
  .schema__vyvod {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto;
    align-items: center; text-align: left; column-gap: 14px; padding: 6px 0;
  }
  /* Otočená značka, záporné okraje vrátí výšku na 32 px. */
  .schema__spinac { grid-row: 1 / 3; justify-self: center; margin: -32px 0; transform: rotate(-90deg); }
  .schema__nazev { margin-top: 0; align-self: end; }
  .schema__adresa { margin-top: 2px; padding: 0; align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .schema__vyvod, .lista, .nabidka { transition: none; } }

/* Přeskočení navigace, vidět jen při fokusu. */
.preskok {
  position: absolute; left: var(--okraj); top: 10px; z-index: 100;
  padding: 12px 18px; border-radius: var(--r-tlac);
  background: var(--papir); color: var(--tma); font-weight: 600;
  transform: translateY(-160%);
}
.preskok:focus { transform: none; }

/* Rozcestník je na stránce Co děláme o úroveň výš, vypadá stejně. */
.prace__hlavicka h2 { font-size: 1.17em; }

.mista__pozn { margin-top: 24px; font-size: 15px; color: var(--tlum); max-width: 62ch; }

@media print {
  .vjezd { opacity: 1 !important; transform: none !important; }
  .hlava, .lista, .lupa, .preskok { display: none; }
}

/* Úpravy podle kontroly taste-skill (zkušební verze). */

/* Tlumený text tmavší, 7:1 místo 5,3:1. */
:root { --tlum: #55504d; }

/* Nadpis úvodu na dva řádky (na mobilu se tři nevyhneme). Bez štítků nad ním. */
.uvod h1 { margin-top: 0; max-width: 30ch; }

/* Bez vlasových linek: oddělují mezera a tón plochy. */
.hlava, .parametry, .hodnoceni, .zahlavi, .pata__pruh, .lista { border: 0; }
.parametry__pol, .parametry__pol:first-child { border: 0; }
@media (max-width: 760px) { .parametry__pol { border: 0; } }
.firma__zadavatele, .firma__zadavatel { border: 0; }
.firma__zadavatel { padding: 10px 0; }
.vypis__shrnuti { border: 0; }
.vypis__seznam li { border: 0; padding: 6px 0; }
.zakazka + .zakazka { border: 0; padding-top: 0; }
/* Osa letopočtů jako plný pruh, ne linka. */
.letopocty { border-left: 3px solid var(--papir2); }
.letopocet::before { left: -29px; }

/* Okruhy prací bez čísel 01 až 05 a bez linek mezi řádky. */
.prace__polozka {
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  border: 0; padding: clamp(30px, 3.6vw, 48px) 0;
}
.prace__polozka:last-child { border: 0; }
.prace__polozka + .prace__polozka { margin-top: clamp(8px, 1.4vw, 20px); }
.prace__text { grid-column: 1; }
.prace__hlavicka { grid-column: 1 / 3; }
.prace__obraz { grid-column: 2; }
@media (max-width: 860px) {
  .prace__polozka { grid-template-columns: minmax(0, 1fr); }
  .prace__hlavicka, .prace__text, .prace__obraz { grid-column: 1; }
}

/* Plochy podle výplně, ne obrysu. */
.hladina, .tma .hladina { border: 0; background: var(--papir2); color: var(--text); }
.hladina--vn, .tma .hladina--vn { border: 0; }
.tma .hladina { background: var(--panel); color: #e4dfe0; }
.opravneni__pol, .misto { border: 0; }
.misto { background: var(--bila); }

/* Drobný text větší, odstavce kratší. */
.letopocet__co, .udaje__pod, .kontakt__radek, .vypis__seznam li, .techno__radek { font-size: 16.5px; }
.udaje__pod { max-width: 62ch; }

/* Nadpis podstránky výraznější a nejvýš na dva řádky. */
.zahlavi h1 { font-size: clamp(30px, 4.8vw, 60px); max-width: 26ch; }

/* Tablet: fotka okruhu zůstane vpravo vedle textu, ať stránka nestojí mimo střed. */
@media (min-width: 641px) and (max-width: 860px) {
  .prace__polozka { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 0 24px; }
  .prace__hlavicka { grid-column: 1 / 3; flex-direction: row; align-items: baseline; }
  .prace__obraz { grid-column: 2; grid-row: 2; margin-top: 0; max-width: none; }
}

/* Realizace: nadpis nad řadami. */
.realizace__hlava { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(34px, 4vw, 52px); }
.realizace__hlava h2 { font-size: clamp(27px, 3.4vw, 40px); }
.realizace__hlava p { color: var(--tlum); max-width: 52ch; }
.realizace__hlava .rada__odkaz { grid-column: 2; margin-top: 0; justify-self: start; }
@media (max-width: 760px) {
  .realizace__hlava { grid-template-columns: 1fr; }
  .realizace__hlava .rada__odkaz { grid-column: 1; }
}
.deska--dlouha { --s: .68; }
/* Každá řada vyplní šířku. Fotky v ní mají stejnou výšku a celý obsah,
   šířka podle tvaru fotky (--r). */
@media (min-width: 901px) {
  .rady .rada .dil, .rada__mezera { flex: var(--r) 1 0; min-width: 0; }
}
.rada__mezera { display: block; }
@media (max-width: 900px) { .rada__mezera { display: none; } }