/* TNA spol. s r.o. – směr A „Čtyři barvy pod jednou střechou“
   Všechny hodnoty podle weby/tna/DESIGN.md */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Rámec TNA */
  --papir: #FFFFFF;
  --tus: #000000;
  --kour: #5E5E5E;
  --kour-tma: #A6A6A6;

  /* Projekty */
  --svestka: #852768;
  --svestka-mleko: #E9D5E2;
  --slunce: #FCC048;
  --hlina: #3A2A00;
  --virosac: #A31920;
  --virosac-mleko: #F6DCDD;
  --grafit: #1D1C1A;
  --popel: #A9A49C;
  --bronz: #C19A6B;

  /* Formulář na tuši */
  --pole: #1A1A1A;
  --chyba: #FF9C9C;

  /* Aktuální barvy stránky – mění je JavaScript při scrollu (výchozí = papír) */
  --bg: #FFFFFF;
  --fg: #000000;
  --fg2: #5E5E5E;
  --btn-bg: #000000;
  --btn-fg: #FFFFFF;

  /* Písmo */
  --pismo: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --t-obri: clamp(3.4rem, 1rem + 10.5vw, 11.5rem);
  --t-h1: clamp(2.75rem, 1rem + 7.2vw, 8.5rem);
  --t-h2: clamp(2.25rem, 1.1rem + 4vw, 5rem);
  --t-h3: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  --t-perex: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  --t-text: 1.0625rem;
  --t-maly: .875rem;

  /* Mezery a mřížka */
  --m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px; --m-5: 24px; --m-6: 32px;
  --m-7: 48px; --m-8: 64px; --m-9: 96px; --m-10: 128px; --m-11: 160px;
  --okraj: clamp(1.25rem, .5rem + 3.5vw, 5rem);
  --sekce: clamp(5rem, 3rem + 7vw, 10rem);
  --sloupec-mezera: clamp(1rem, .5rem + 1.5vw, 2rem);
  --max: 1440px;
  --vyska-hlavicky: 60px;

  /* Tvary */
  --r-foto: 4px;
  --r-pole: 4px;
  --r-pilulka: 999px;
  --linka: color-mix(in srgb, currentColor 25%, transparent);

  /* Pohyb */
  --t-rychle: 200ms;
  --krivka-pruh: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 960px) {
  :root { --vyska-hlavicky: 72px; }
}

/* Barvy jednotlivých částí stránky (tokeny pro JS i pro zobrazení bez JS) */
[data-barvy="papir"]   { --t-bg: var(--papir);   --t-fg: var(--tus);   --t-fg2: var(--kour);           --t-btn-bg: var(--tus);   --t-btn-fg: var(--papir); }
[data-barvy="svestka"] { --t-bg: var(--svestka); --t-fg: var(--papir); --t-fg2: var(--svestka-mleko); --t-btn-bg: var(--papir); --t-btn-fg: var(--svestka); }
[data-barvy="slunce"]  { --t-bg: var(--slunce);  --t-fg: var(--tus);   --t-fg2: var(--hlina);          --t-btn-bg: var(--tus);   --t-btn-fg: var(--slunce); }
[data-barvy="virosac"] { --t-bg: var(--virosac); --t-fg: var(--papir); --t-fg2: var(--virosac-mleko); --t-btn-bg: var(--papir); --t-btn-fg: var(--virosac); }
[data-barvy="grafit"]  { --t-bg: var(--grafit);  --t-fg: var(--papir); --t-fg2: var(--popel);          --t-btn-bg: var(--bronz); --t-btn-fg: var(--grafit); }
[data-barvy="tus"]     { --t-bg: var(--tus);     --t-fg: var(--papir); --t-fg2: var(--kour-tma);       --t-btn-bg: var(--papir); --t-btn-fg: var(--tus); }

/* Bez JavaScriptu (nebo když se knihovny nenačtou): každá část má vlastní barvy */
html:not(.js-barvy) [data-barvy] {
  --bg: var(--t-bg); --fg: var(--t-fg); --fg2: var(--t-fg2); --btn-bg: var(--t-btn-bg); --btn-fg: var(--t-btn-fg);
  background: var(--bg);
  color: var(--fg);
}

/* Základ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--vyska-hlavicky);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--pismo);
  font-size: var(--t-text);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--fg); color: var(--bg); }

.obal {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--okraj);
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.preskocit {
  position: fixed; left: var(--m-4); top: var(--m-4); z-index: 100;
  padding: var(--m-3) var(--m-5); background: var(--tus); color: var(--papir);
  border-radius: var(--r-pilulka); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.preskocit:focus { transform: none; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Tlačítka */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--m-2);
  min-height: 52px; padding: 0 28px;
  border: 2px solid var(--btn-bg);
  border-radius: var(--r-pilulka);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-rychle) ease-out, color var(--t-rychle) ease-out, border-color var(--t-rychle) ease-out;
}
.tlacitko:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.tlacitko:active { scale: .97; }
.tlacitko--obrys { background: transparent; color: var(--fg); border-color: currentColor; }
.tlacitko--obrys:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tlacitko--maly { min-height: 40px; padding: 0 18px; font-size: .9375rem; border-width: 1.5px; }

/* Hlavička */
.hlavicka {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--vyska-hlavicky);
  background: var(--bg); color: var(--fg);
}
.hlavicka__vnitrek {
  height: 100%;
  display: flex; align-items: center; gap: var(--m-5);
}
.znacka { display: flex; align-items: center; gap: var(--m-4); margin-right: auto; text-decoration: none; padding-block: var(--m-2); }
.logo {
  font-weight: 800; font-size: 1.5rem; letter-spacing: -.04em; line-height: 1;
}
.prouzky { display: flex; align-items: center; gap: 4px; }
.prouzek { display: block; }
.prouzek span:not(.sr-only) {
  display: block; width: 6px; height: 14px; border-radius: 1px;
  background: var(--p);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent);
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
.prouzek.je-aktivni span:not(.sr-only) { width: 18px; background: var(--fg); }
.menu { display: none; }
.hlavicka__telefon { display: none; }
.menu-tlacitko {
  min-height: 40px; padding: 0 16px;
  border: 1.5px solid currentColor; border-radius: var(--r-pilulka);
  background: transparent; font-weight: 600; font-size: .9375rem; cursor: pointer;
}

@media (min-width: 960px) {
  .logo { font-size: 1.75rem; }
  .prouzek span:not(.sr-only) { width: 8px; height: 18px; }
  .prouzek.je-aktivni span:not(.sr-only) { width: 28px; }
  .menu { display: flex; gap: var(--m-6); }
  .menu a {
    font-weight: 600; text-decoration: none; padding-block: var(--m-2);
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    transition: background-size var(--t-rychle) ease-out;
  }
  .menu a:hover { background-size: 100% 2px; }
  .hlavicka__telefon { display: inline-flex; }
  .menu-tlacitko { display: none; }
}

/* Mobilní menu */
.mobilni-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--tus); color: var(--papir);
  display: flex; flex-direction: column;
  padding: var(--m-3) var(--okraj) var(--m-7);
  overflow-y: auto;
}
.mobilni-menu[hidden] { display: none; }
.mobilni-menu__hlava { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--vyska-hlavicky) - 12px); }
.mobilni-menu__zavrit {
  min-height: 40px; padding: 0 16px; border: 1.5px solid currentColor; border-radius: var(--r-pilulka);
  background: transparent; color: inherit; font-weight: 600; cursor: pointer;
}
.mobilni-menu__odkazy { margin-top: var(--m-7); display: grid; gap: var(--m-2); }
.mobilni-menu__odkazy a {
  display: flex; align-items: center; gap: var(--m-4);
  font-size: clamp(2rem, 1.2rem + 4vw, 2.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15;
  text-decoration: none; padding-block: var(--m-1);
}
.mobilni-menu__odkazy a i { width: 10px; height: 28px; border-radius: 1px; background: var(--p); flex: none; }
.mobilni-menu__oddel { height: 1px; background: var(--linka); margin-block: var(--m-5); }
.mobilni-menu__kontakt { margin-top: auto; padding-top: var(--m-7); display: grid; gap: var(--m-2); font-size: 1.25rem; font-weight: 600; }
.mobilni-menu__kontakt a { text-decoration: none; }

/* Úvod */
.uvod {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--vyska-hlavicky) + clamp(1.5rem, .5rem + 4vh, 4rem));
  padding-bottom: clamp(1.25rem, .5rem + 2.5vw, 2.5rem);
}
/* Název firmy je součástí h1 (vyhledávače), vypadá jako malý řádek nad nadpisem */
.uvod__firma { display: block; margin-bottom: var(--m-4); color: var(--fg2); font-weight: 600; font-size: .9375rem; line-height: 1.5; letter-spacing: 0; }
.uvod__nadpis {
  margin-top: 0;
  font-size: var(--t-h1); font-weight: 800; line-height: .98; letter-spacing: -.04em;
}
.uvod__nadpis .radek { display: block; }
.uvod__perex {
  margin-top: var(--m-6);
  max-width: 34ch;
  font-size: var(--t-perex); line-height: 1.4; letter-spacing: -.01em;
}
.pruhy {
  margin-top: var(--m-8);
  display: grid; gap: var(--m-2);
}
.pruh {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--m-4);
  min-height: 104px; padding: var(--m-4);
  border-radius: var(--r-foto);
  background: var(--p-bg); color: var(--p-fg);
  text-decoration: none; overflow: hidden;
}
.pruh__text { display: grid; gap: 2px; }
.pruh__nazev { font-size: 1.625rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.pruh__popis { font-size: .9375rem; line-height: 1.35; }
.pruh__domena { font-size: .8125rem; font-weight: 600; opacity: .85; margin-top: var(--m-1); }
.pruh__domena--bronz { color: var(--bronz); opacity: 1; }
.pruh__foto {
  width: 88px; height: 72px; border-radius: 3px; overflow: hidden; align-self: center;
}
.pruh__foto img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 720px) {
  .uvod__perex { max-width: 40ch; }
  .pruhy { grid-template-columns: repeat(2, 1fr); margin-top: auto; padding-top: var(--m-8); }
  .pruh { min-height: clamp(180px, 20vh, 260px); }
}

@media (min-width: 960px) {
  .uvod__hlava {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sloupec-mezera);
    align-items: end;
  }
  .uvod__nadpis { grid-column: 1 / 9; }
  .uvod__perex { grid-column: 9 / 13; margin-top: 0; max-width: none; padding-bottom: .6em; }
  .pruhy {
    margin-top: auto; padding-top: var(--m-8);
    display: flex; gap: var(--m-3);
    height: clamp(240px, 44vh, 440px);
  }
  .pruhy > li {
    flex: 1 1 0; min-width: 0;
    transition: flex-grow .6s var(--krivka-pruh);
  }
  .pruh {
    height: 100%;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0;
  }
  .pruh__foto {
    position: relative; flex: 1 1 auto; width: auto; height: auto; border-radius: 0;
    align-self: stretch;
    opacity: 0;
    transition: opacity .6s var(--krivka-pruh);
  }
  .pruh__foto img { position: absolute; inset: 0; scale: 1.06; transition: scale .9s var(--krivka-pruh); }
  .pruh__text { padding: var(--m-5); }
  .pruh__nazev { font-size: clamp(1.5rem, .8rem + 1.4vw, 2.25rem); }
  .pruh__popis { font-size: 1rem; }
  .pruhy > li:hover, .pruhy > li:focus-within { flex-grow: 1.8; }
  .pruh:hover .pruh__foto, .pruh:focus-visible .pruh__foto { opacity: 1; }
  .pruh:hover .pruh__foto img, .pruh:focus-visible .pruh__foto img { scale: 1; }
  .pruh:focus-visible { outline-color: var(--fg); }
}

/* Kapitoly projektů */
.kapitola {
  padding-block: var(--sekce);
}
.kapitola__hlava { margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 6rem); }
.kapitola__domena { font-weight: 600; color: var(--fg2); font-size: .9375rem; }
.kapitola__domena span { margin-left: var(--m-3); }
.kapitola__nazev {
  margin-top: var(--m-3);
  font-size: var(--t-obri); font-weight: 800; line-height: .9; letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.kapitola__podtitul {
  margin-top: var(--m-5);
  font-size: var(--t-h3); font-weight: 600; line-height: 1.15; letter-spacing: -.015em;
  max-width: 38ch;
}
.kapitola__telo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m-4) var(--sloupec-mezera);
}
.kapitola__text { grid-column: 1 / -1; grid-row: 2; margin-block: var(--m-6) var(--m-7); }
.kapitola__logo { height: 44px; width: auto; margin-bottom: var(--m-6); }
.kapitola__logo-odkaz { display: block; width: fit-content; margin-bottom: var(--m-6); border-radius: 4px; transition: opacity .2s; }
.kapitola__logo-odkaz .kapitola__logo { margin-bottom: 0; }
.kapitola__logo-odkaz:hover { opacity: .75; }
.kapitola__logo--siroke { height: 30px; }
.kapitola__logo--catinn { height: 72px; }
.perex { font-size: var(--t-perex); line-height: 1.4; letter-spacing: -.01em; max-width: 40ch; }
.fakta { margin-top: var(--m-6); border-top: 1px solid var(--linka); max-width: 62ch; }
.fakta li { padding-block: var(--m-3); border-bottom: 1px solid var(--linka); }
.kapitola__kde { margin-top: var(--m-5); color: var(--fg2); }
.kapitola__kde b { color: var(--fg); font-weight: 600; }
.kapitola__text .tlacitko { margin-top: var(--m-6); }

.foto { position: relative; overflow: hidden; border-radius: var(--r-foto); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--a { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 3 / 2; }
.foto--b { grid-column: 1 / 2; grid-row: 3; aspect-ratio: 4 / 5; }
.foto--c { grid-column: 2 / 3; grid-row: 3; aspect-ratio: 4 / 5; align-self: end; }
.foto--d { grid-column: 1 / -1; grid-row: 4; aspect-ratio: 3 / 2; }
.foto__popisek {
  position: absolute; left: var(--m-2); bottom: var(--m-2);
  padding: 2px 8px; border-radius: 2px;
  background: var(--grafit); color: var(--popel);
  font-size: .75rem; line-height: 1.5;
}

@media (min-width: 960px) {
  .kapitola__hlava { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sloupec-mezera); align-items: end; }
  .kapitola__domena, .kapitola__nazev { grid-column: 1 / -1; }
  .kapitola__podtitul { grid-column: 1 / 7; }
  .kapitola__telo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sloupec-mezera);
    row-gap: clamp(1.5rem, .5rem + 2vw, 3rem);
  }
  .kapitola__text {
    grid-column: 1 / 6; grid-row: 1 / span 3;
    position: sticky; top: calc(var(--vyska-hlavicky) + var(--m-7));
    align-self: start; margin: 0;
  }
  .foto--a { grid-column: 7 / 13; grid-row: 1; }
  .foto--b { grid-column: 7 / 10; grid-row: 2; margin-top: clamp(2rem, 6vw, 7rem); }
  .foto--c { grid-column: 10 / 13; grid-row: 2; aspect-ratio: 4 / 3; align-self: start; }
  .foto--c.foto--vysoka { aspect-ratio: 4 / 5; }
  .foto--d { grid-column: 8 / 13; grid-row: 3; }
}

/* O firmě */
.o-firme { padding-block: var(--sekce) var(--m-9); }
.o-firme__zapis { margin-top: var(--m-4); color: var(--fg2); }
.o-firme__mrizka { display: grid; gap: var(--m-6); }
.o-firme__nadpis { font-size: var(--t-h2); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.o-firme__text { display: grid; gap: var(--m-5); max-width: 62ch; }
.o-firme__text p:first-child { font-size: var(--t-perex); line-height: 1.4; letter-spacing: -.01em; }
.citat {
  margin-top: clamp(4rem, 2rem + 6vw, 9rem);
  padding-top: var(--m-6);
  border-top: 2px solid var(--fg);
}
.citat p {
  font-size: clamp(2rem, 1rem + 4vw, 5.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -.04em;
  max-width: 18ch;
}
.citat__prouzky { display: flex; gap: 6px; margin-bottom: var(--m-6); }
.citat__prouzky i { display: block; width: 10px; height: 34px; border-radius: 1px; background: var(--p); }

@media (min-width: 960px) {
  .o-firme__mrizka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sloupec-mezera); }
  .o-firme__hlava { grid-column: 1 / 6; }
  .o-firme__text { grid-column: 7 / 13; }
  .citat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sloupec-mezera); }
  .citat__prouzky { grid-column: 1 / 3; }
  .citat p { grid-column: 3 / 13; }
}

/* Kontakt */
.kontakt { padding-block: var(--sekce) var(--m-9); }
.kontakt__mrizka { display: grid; gap: var(--m-8); }
.kontakt__nadpis { font-size: var(--t-h2); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.kontakt__uvod { margin-top: var(--m-5); max-width: 40ch; font-size: var(--t-perex); line-height: 1.4; }
.kontakt__hlavni { margin-top: var(--m-6); display: grid; gap: var(--m-1); }
.kontakt__hlavni a {
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15;
  text-decoration: none; justify-self: start;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat;
  transition: background-size var(--t-rychle) ease-out;
}
.kontakt__hlavni a:hover { background-size: 100% 3px; }
.kontakt__adresa { margin-top: var(--m-5); color: var(--fg2); font-style: normal; }
.kontakt__blok { margin-top: var(--m-7); }
.kontakt__pozn { color: var(--fg2); margin-bottom: var(--m-4); }
.kontakt__blok h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin-bottom: var(--m-4); }
.udaje { display: grid; grid-template-columns: max-content 1fr; gap: var(--m-2) var(--m-5); border-top: 1px solid var(--linka); padding-top: var(--m-4); }
.udaje dt { color: var(--fg2); }
.udaje dd { font-weight: 600; }
.projekty-odkazy { display: grid; gap: var(--m-2); border-top: 1px solid var(--linka); padding-top: var(--m-4); }
.projekty-odkazy a { display: inline-flex; align-items: center; gap: var(--m-3); text-decoration: none; padding-block: 2px; }
.projekty-odkazy a b { font-weight: 600; }
.projekty-odkazy a span { color: var(--fg2); }
.projekty-odkazy a i { width: 8px; height: 18px; border-radius: 1px; background: var(--p); flex: none; }
.projekty-odkazy a:hover b { text-decoration: underline; text-underline-offset: 3px; }

.formular { display: grid; gap: var(--m-5); align-content: start; }
.formular__nadpis { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.pole { display: grid; gap: var(--m-2); }
.pole label { font-weight: 600; font-size: .9375rem; }
.pole label span { color: var(--fg2); font-weight: 400; }
.pole input, .pole textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--pole); color: var(--papir);
  border: 1px solid color-mix(in srgb, var(--papir) 35%, transparent); border-radius: var(--r-pole);
  font-size: 1rem; line-height: 1.5;
}
.pole textarea { min-height: 150px; resize: vertical; }
.pole input:focus-visible, .pole textarea:focus-visible { outline: 2px solid var(--papir); outline-offset: 1px; border-color: var(--papir); }
.pole[data-chyba] input, .pole[data-chyba] textarea { border-color: var(--chyba); }
.pole__chyba { color: var(--chyba); font-size: .875rem; }
.pole__chyba:empty { display: none; }
.formular__dvojice { display: grid; gap: var(--m-5); }
.formular__skryte { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__poznamka { color: var(--fg2); font-size: var(--t-maly); }
.formular__stav { font-weight: 600; }
.formular__stav:empty { display: none; }
.formular .tlacitko { justify-self: start; }

@media (min-width: 720px) {
  .formular__dvojice { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .kontakt__mrizka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sloupec-mezera); }
  .kontakt__info { grid-column: 1 / 7; }
  .formular { grid-column: 8 / 13; padding-top: var(--m-3); }
}

/* Patička */
.paticka { padding-block: var(--m-7) var(--m-8); font-size: var(--t-maly); }
.paticka__mrizka { display: grid; gap: var(--m-6); padding-top: var(--m-6); border-top: 1px solid var(--linka); }
.paticka .znacka { margin: 0; }
.paticka__udaje { color: var(--fg2); max-width: 70ch; }
.paticka__projekty { display: grid; gap: var(--m-1); }
.paticka__projekty a { text-decoration: none; }
.paticka__projekty a:hover { text-decoration: underline; text-underline-offset: 3px; }
.paticka__copy { color: var(--fg2); }
@media (min-width: 960px) {
  .paticka__mrizka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sloupec-mezera); align-items: start; }
  .paticka .znacka { grid-column: 1 / 3; }
  .paticka__udaje { grid-column: 3 / 8; }
  .paticka__projekty { grid-column: 9 / 12; }
  .paticka__copy { grid-column: 12 / 13; text-align: right; }
}

/* Omezený pohyb */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .pruhy > li:hover, .pruhy > li:focus-within { flex-grow: 1; }
}

/* Lenis (plynulý scroll) – pravidla z lenis.css 1.3.26 */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Úvod čeká na animaci (jen počítač, nastavuje skript v <head>, pojistka 3 s) */
.uvod-ceka .uvod__firma,
.uvod-ceka .uvod__nadpis .radek,
.uvod-ceka .uvod__perex,
.uvod-ceka .pruhy > li { opacity: 0; }

/* Dokument (zásady zpracování osobních údajů) – stejná typografie jako web, bez animací */
.dokument-hlavicka {
  display: flex; align-items: center; justify-content: space-between; gap: var(--m-5);
  min-height: var(--vyska-hlavicky); padding-block: var(--m-3);
  border-bottom: 1px solid var(--linka);
}
.dokument { padding-block: var(--m-8) var(--m-9); max-width: calc(68ch + 2 * var(--okraj)); margin-inline: 0; }
.dokument h1 { font-size: var(--t-h2); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.dokument__platnost { margin-top: var(--m-4); color: var(--fg2); font-weight: 600; font-size: .9375rem; }
.dokument__perex { margin-top: var(--m-5); font-size: var(--t-perex); line-height: 1.4; letter-spacing: -.01em; }
.dokument h2 { margin-top: var(--m-8); font-size: var(--t-h3); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.dokument p, .dokument ul { margin-top: var(--m-4); }
.dokument ul { display: grid; gap: var(--m-3); padding-left: 1.2em; list-style: disc; }
.dokument b { font-weight: 600; }
.dokument a:not(.tlacitko) { text-underline-offset: 3px; }
.dokument__zpet { margin-top: var(--m-8) !important; }
.dokument-paticka { padding-block: var(--m-6) var(--m-8); border-top: 1px solid var(--linka); color: var(--fg2); font-size: var(--t-maly); }
.paticka__udaje a { color: var(--fg); text-underline-offset: 3px; }
.formular__poznamka a { text-underline-offset: 3px; }
@media (min-width: 960px) {
  .dokument { margin-left: max(0px, calc((100vw - var(--max)) / 2)); }
}

/* Zalamování bez osamocených slov */
h1, h2, h3, .kapitola__podtitul, .citat p, .pruh__popis { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* Telefon na šířku – nižší obrazovka, menší nadpisy */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
  :root {
    --t-h1: clamp(2.25rem, 1rem + 4.2vw, 3.6rem);
    --t-obri: clamp(2.75rem, 1rem + 6vw, 5.25rem);
  }
}

/* Velký tablet na výšku (počítačové rozvržení) – vyšší pruhy, ať pod úvodem nezůstává prázdné místo */
@media (min-width: 960px) and (orientation: portrait) {
  .pruhy { height: clamp(240px, 40vh, 600px); }
}