/* Zámečnictví Jizera · DESIGN.md §6-§7. Two grounds: zinc (light) and antracit (coated). */
:root {
  --ocel: #15181C;
  --antracit: #373D41;
  --antracit-hluboky: #2B3033;
  --zinek: #C7CBCF;
  --zinek-svetly: #E3E6E8;
  --zinek-tmavy: #A9AEB3;
  --zinek-sev: #8E9499;
  --papir: #EEF0F1;
  --inkoust: #1C2024;
  --inkoust-mekky: #4A5158;
  --nabeh-slama: #D9A441;
  --nabeh-fial: #7B4F8E;
  --nabeh-modr: #2F5F8F;
  --nabeh: linear-gradient(90deg, var(--nabeh-slama), var(--nabeh-fial), var(--nabeh-modr));
  --linka: rgba(28, 32, 36, .14);
  --linka-svetla: rgba(255, 255, 255, .12);

  --f-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body: "Golos Text", "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", Consolas, monospace;

  --hlavicka-v: 72px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --sekce: clamp(4rem, 11vh, 8rem);
  --kontejner: 1280px;
  --p: 0; /* scroll progress, set by JS for the header gauge */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--inkoust);
  background: var(--papir);
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 800; line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: .02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.kontejner { max-width: var(--kontejner); margin-inline: auto; padding-inline: var(--pad); }
.mono, .hero-meta, .foto-popis, .deska-meta, .pozn-ukazka, .rez-pozn, .postup-dovetek, .realizace-pozn, .koty text, .pole-pozn, .formular-vysledek, .menu-pata { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .01em; }

:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--papir), 0 0 0 4px var(--nabeh-modr); }
.preskocit { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .5rem .75rem; background: var(--antracit); color: var(--zinek-svetly); }
.preskocit:focus { top: 1rem; }

/* ---------- plates: a piece on the sheet (zinc) / a coated piece (antracit) ---------- */
.plat { background: var(--zinek-svetly); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(28, 32, 36, .22); }

/* ---------- buttons ---------- */
.tl {
  position: relative; display: inline-block; isolation: isolate;
  padding: .85rem 1.6rem; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; line-height: 1;
  color: var(--zinek-svetly); background: var(--antracit); border: 0; border-radius: 2px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.tl::after { /* M6: the tempering colours spread along the bottom edge on hover */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--nabeh); transform: scaleX(0); transform-origin: left; z-index: 1;
}
.tl:hover::after, .tl:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) { .tl::after { transition: transform .35s cubic-bezier(.4, 0, .2, 1); } }

/* ---------- header ---------- */
.hlavicka {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--hlavicka-v);
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); padding-inline: var(--pad);
  color: var(--inkoust); background: transparent;
}
.hlavicka::before { /* the zinc strip that appears once the sheet has scrolled away */
  content: ""; position: absolute; inset: 0; background: var(--zinek-svetly); border-bottom: 1px solid var(--linka); opacity: 0; z-index: -1;
}
.hlavicka.je-pevna::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .hlavicka::before { transition: opacity .3s ease; } }
.znacka { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.znacka-obor { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.znacka-jmeno { font-family: var(--f-display); font-weight: 900; font-size: 1.75rem; letter-spacing: .04em; }
.vrstvy { width: 84px; height: 21px; flex: none; }
.vrstvy [class$="-pod"] { fill: none; stroke: var(--zinek-sev); stroke-width: .6; }
.vrstva { transform-origin: 0 0; }
.vrstva-ocel  { fill: var(--ocel);     transform: scaleX(clamp(0, calc(var(--p) * 3), 1)); }
.vrstva-zinek { fill: var(--zinek);    transform: scaleX(clamp(0, calc(var(--p) * 3 - 1), 1)); }
.vrstva-barva { fill: var(--antracit); transform: scaleX(clamp(0, calc(var(--p) * 3 - 2), 1)); }
.nav { display: flex; gap: clamp(.9rem, 2vw, 1.75rem); margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: .95rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--inkoust); }
.nav a.je-aktivni { border-image: var(--nabeh) 1; border-bottom: 2px solid; }
.tl--hlavicka { padding: .6rem 1.1rem; font-size: 1rem; }
.pozn-ukazka { color: var(--inkoust-mekky); text-decoration: none; border-bottom: 1px dotted currentColor; }
.burger { display: none; }

/* ---------- hero: the sheet ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end;
  color: var(--inkoust); overflow: hidden; isolation: isolate;
}
.plech { position: absolute; inset: 0; z-index: -1; background: var(--zinek); }
.zinek-svg, .zinek-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zinek-canvas { display: none; }
.hero.je-zivy .zinek-canvas { display: block; }
.hero.je-zivy .zinek-svg { visibility: hidden; }
.hero-obsah { position: relative; width: 100%; max-width: var(--kontejner); margin-inline: auto; padding: calc(var(--hlavicka-v) + 2rem) var(--pad) clamp(2.5rem, 7vh, 4.5rem); }
.hero-jmeno {
  font-size: clamp(3.5rem, 11vw, 9.5rem); font-weight: 900; letter-spacing: .02em; color: var(--antracit);
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .28), 0 1px 0 rgba(0, 0, 0, .38);
  display: flex; flex-direction: column;
}
.hero-obor { font-family: var(--f-body); font-weight: 500; font-size: clamp(.8rem, 1.2vw, 1rem); letter-spacing: .28em; text-transform: uppercase; text-shadow: none; margin-bottom: .35em; margin-left: .15em; }
.hero-veta { max-width: 34ch; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.35; margin: 1.25rem 0 .75rem; font-weight: 500; }
.hero-meta { color: var(--inkoust-mekky); margin-bottom: 1.5rem; }
.tl--hero { font-size: 1.3rem; padding: 1rem 2rem; }

/* entrance: only with JS + no-preference (html.anim), then .hero.je-hotovo releases the copy */
.anim .hero-obsah > * { opacity: 0; transform: translateY(14px); }
.anim .hero.je-hotovo .hero-obsah > * { animation: usadit .55s cubic-bezier(.2, .7, .2, 1) both; }
.anim .hero.je-hotovo .hero-jmeno { animation-delay: 0s; }
.anim .hero.je-hotovo .hero-veta { animation-delay: .12s; }
.anim .hero.je-hotovo .hero-meta { animation-delay: .22s; }
.anim .hero.je-hotovo .tl--hero { animation-delay: .3s; }
@keyframes usadit { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- S2 · pieces on the sheet ---------- */
.sluzby { padding-block: var(--sekce); }
.kusy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.kus {
  grid-column: span 2; position: relative; padding: clamp(1.25rem, 2.5vw, 2rem); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
  color: var(--inkoust); isolation: isolate; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(28, 32, 36, .3), 0 0 0 1px var(--linka);
}
.kus--siroky { grid-column: span 4; }
.kus-plech { position: absolute; inset: 0; z-index: -1; background: var(--zinek); }
.kus-plech svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kus-plech polygon { transform-box: view-box; }
.kus p { margin: 0; max-width: 40ch; font-size: 1rem; line-height: 1.45; }
.pikto { width: clamp(96px, 10vw, 132px); height: auto; margin-bottom: auto; color: var(--antracit); }
/* M3: the panel crystallizes once when reached (JS adds .je-z-lazne), cells grow from their own seed */
.anim .kus polygon { transform: scale(.15); transform-origin: var(--ox) var(--oy); opacity: 0; }
.anim .kus.je-z-lazne polygon { animation: krystal .9s cubic-bezier(.3, .6, .3, 1) calc(var(--d) * .9s) both; }
@keyframes krystal { from { transform: scale(.15); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.kus:hover .kus-plech svg { filter: brightness(1.05); }

/* ---------- S3 · cross-section + steps ---------- */
.postup { padding-block: var(--sekce); background: var(--zinek-svetly); border-top: 1px solid var(--linka); border-bottom: 1px solid var(--linka); }
.postup-mrizka { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.rez-svg { width: 100%; height: auto; display: block; }
.rez-barva { fill: var(--antracit); }
.rez-zinek { fill: var(--zinek); }
.rez-ocel { fill: var(--ocel); }
.rez-duty { fill: var(--zinek-svetly); }
.koty path { fill: none; stroke: var(--inkoust-mekky); stroke-width: 1; }
.koty text { fill: var(--inkoust-mekky); font-size: 12px; }
.kresba { fill: none; stroke: url(#nabeh-grad); stroke-width: 3; }
.rez-pozn { color: var(--inkoust-mekky); margin-top: 1rem; max-width: 48ch; }
.kroky { list-style: none; margin: 0; padding: 0; counter-reset: krok; display: grid; gap: clamp(1.25rem, 3vh, 2rem); padding-top: clamp(0px, 8vh, 6.5rem); }
.kroky li { position: relative; padding-left: 3.25rem; border-top: 1px solid var(--linka); padding-top: 1rem; }
.kroky li::before { counter-increment: krok; content: counter(krok, decimal-leading-zero); position: absolute; left: 0; top: 1.05rem; font-family: var(--f-mono); font-size: .8125rem; color: var(--inkoust-mekky); }
.kroky h3 { margin-bottom: .35rem; }
.kroky p { margin: 0; max-width: 44ch; }
.postup-dovetek { grid-column: 1 / -1; color: var(--inkoust-mekky); margin-top: 1rem; }

/* ---------- S4 · realizace: the coated state ---------- */
.realizace { position: relative; padding-block: var(--sekce); color: var(--zinek-svetly); background: var(--antracit); isolation: isolate; }
.realizace::before { /* M5: the coat spreads from the top edge once reached */
  content: ""; position: absolute; inset: 0; background: var(--antracit); z-index: -1; transform-origin: top;
}
.realizace { background: var(--zinek); }
.anim .realizace::before { transform: scaleY(0); }
.anim .realizace.je-nalakovana::before { transform: scaleY(1); transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
.realizace :focus-visible { box-shadow: 0 0 0 2px var(--antracit), 0 0 0 4px var(--nabeh-slama); }
.realizace-pozn { color: var(--zinek-tmavy); margin: -1rem 0 1.75rem; }
.filtr { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.chip {
  font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .02em; padding: .45rem .8rem; cursor: pointer;
  color: var(--zinek-svetly); background: transparent; border: 1px solid var(--linka-svetla); border-radius: 2px;
}
.chip:hover { border-color: var(--zinek-tmavy); }
.chip.je-aktivni { color: var(--ocel); background: var(--zinek-svetly); border-color: var(--zinek-svetly); box-shadow: inset 0 -3px 0 0 var(--nabeh-fial); }
.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.foto { margin: 0; }
.foto--vysoke { grid-column: span 2; }
.foto[hidden] { display: none; }
.foto-tl {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--antracit-hluboky);
  border-radius: 2px; box-shadow: inset 0 0 0 6px var(--antracit-hluboky); position: relative;
}
.foto-tl::after { /* the coat stops at the cut: one zinc edge */ content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--zinek); }
.foto-tl img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1px; padding: 6px; }
.foto--vysoke .foto-tl img { aspect-ratio: 3 / 2; }
.foto-tl:hover img { filter: brightness(1.06); }
.foto-popis { margin: .5rem 0 0; color: var(--zinek-tmavy); }
.foto-popis span { color: var(--zinek-sev); }

/* ---------- S5 · o firmě: a plate on the coated ground ---------- */
.firma { padding-block: 0 var(--sekce); color: var(--zinek-svetly); background: var(--antracit); }
.deska { max-width: 64ch; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--antracit-hluboky); border-radius: 2px; border-left: 3px solid var(--zinek); }
.deska h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); margin-bottom: 1rem; }
.deska-meta { color: var(--zinek-tmavy); margin-top: 1.25rem; }
.deska-meta a { color: var(--zinek-svetly); }

/* ---------- S6 · kontakt: back on zinc ---------- */
.kontakt { padding-block: var(--sekce); background: var(--papir); border-top: 1px solid var(--linka); }
.kontakt-mrizka { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.kontakt-uvod p { max-width: 36ch; }
.kontakt-mail { font-family: var(--f-mono); font-size: .9375rem; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.pole { display: grid; gap: .35rem; }
.pole--cele { grid-column: 1 / -1; }
.pole label { font-weight: 500; font-size: .95rem; }
.pole-pozn { color: var(--inkoust-mekky); font-weight: 400; margin-left: .35rem; }
.pole input, .pole textarea {
  font: inherit; color: var(--inkoust); padding: .7rem .85rem; border: 0; border-radius: 0; background: var(--zinek-svetly);
  box-shadow: inset 0 1px 0 rgba(28, 32, 36, .22), inset 0 -1px 0 rgba(255, 255, 255, .8), 0 0 0 1px var(--linka);
}
.pole input[type="file"] { padding: .5rem .6rem; font-family: var(--f-mono); font-size: .8125rem; }
.pole input:focus-visible, .pole textarea:focus-visible { box-shadow: 0 0 0 1px var(--linka), 0 0 0 3px var(--nabeh-modr); }
.formular-chyba { grid-column: 1 / -1; margin: 0; color: #8C2E2E; font-size: .95rem; }
.tl--odeslat { justify-self: start; }
.formular-vysledek { grid-column: 1 / -1; margin: 0; padding: .85rem 1rem; background: var(--zinek-svetly); border-left: 3px solid var(--nabeh-modr); }

/* ---------- footer ---------- */
.paticka { padding: 2.5rem 0; color: var(--inkoust-mekky); background: var(--zinek-svetly); border-top: 1px solid var(--linka); font-size: .9rem; }
.paticka p { max-width: 70ch; }
.paticka-kredit { margin-top: .75rem; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(21, 24, 28, .94); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1200px, 100%); }
.lightbox img { max-height: 78vh; width: auto; max-width: 100%; margin-inline: auto; border-radius: 2px; }
.lightbox figcaption { font-family: var(--f-mono); font-size: .8125rem; color: var(--zinek-tmavy); text-align: center; margin-top: .75rem; }
.lightbox-zavrit { position: absolute; top: 1rem; right: 1rem; font: inherit; font-family: var(--f-mono); color: var(--zinek-svetly); background: transparent; border: 1px solid var(--linka-svetla); padding: .5rem .8rem; cursor: pointer; }

/* ---------- mobile menu ---------- */
.menu { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 50; background: var(--antracit); color: var(--zinek-svetly); padding: calc(var(--hlavicka-v) + 1rem) var(--pad) 2rem; display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: .25rem; margin-top: 1rem; }
.menu nav a { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 11vw, 4rem); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; line-height: 1.05; padding: .35rem 0; border-bottom: 1px solid var(--linka-svetla); }
.menu-zavrit { position: absolute; top: 1.1rem; right: var(--pad); font: inherit; font-family: var(--f-mono); color: var(--zinek-svetly); background: transparent; border: 1px solid var(--linka-svetla); padding: .5rem .8rem; cursor: pointer; }
.menu-pata { margin-top: auto; color: var(--zinek-tmavy); }
.menu-pata a { color: var(--zinek-svetly); }
body.menu-otevrene { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .kus, .kus--siroky { grid-column: span 3; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .foto--vysoke { grid-column: span 2; }
  .postup-mrizka, .kontakt-mrizka { grid-template-columns: 1fr; }
  .kroky { padding-top: 0; }
}
@media (max-width: 767px) {
  :root { --hlavicka-v: 60px; }
  .nav, .tl--hlavicka, .pozn-ukazka, .vrstvy { display: none; }
  .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; margin-left: auto; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; }
  .burger span { display: block; width: 26px; height: 2px; background: currentColor; margin-inline: auto; }
  .hero-obsah { padding-bottom: 2.5rem; }
  .hero-jmeno { font-size: clamp(4.2rem, 24vw, 6rem); }
  .kus, .kus--siroky { grid-column: 1 / -1; min-height: 240px; }
  .galerie { grid-template-columns: 1fr; }
  .foto--vysoke { grid-column: auto; }
  .formular { grid-template-columns: 1fr; }
}
@media (max-height: 560px) { .hero { min-height: 0; padding-top: var(--hlavicka-v); } }