/* Design podle sablony Royal, pisma a listovani po strankach z puvodniho webu
   (Calluna na nadpisy a tlacitka, HelveticaNeue Light na text). */

:root {
  --cerna: #000;
  --bila: #fff;
  --seda: #cfcfcf;
  --tlumena: #8d8d8d;
  --linka: rgba(255,255,255,0.16);
  --okraj: clamp(20px, 3vw, 44px);
  --max: 1600px;
  /* okraj, ktery na velmi sirokych monitorech drzi obsah ve sloupci --max */
  --hrana: max(var(--okraj), calc((100vw - var(--max)) / 2 + var(--okraj)));
  --text: 'HelveticaNeueLTPro-Lt', 'Helvetica Neue', Arial, sans-serif;
  --nadpis: 'Calluna-Semibold', Georgia, serif;
  --serif: 'callunaregular', Georgia, serif;
  --tucne: 'Calluna-Bold', Georgia, serif;
  /* svetle spodni strany podle masak-partner.com */
  --uhel: #0a0a0a;
  --papir: #f9f9f9;
  --carka: #e4e4e4;
  --sedy: #767676;
  --popis: #555;
  --zlata: #c8a96a;
  --hladce: cubic-bezier(.25,.1,.25,1);
}

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

/* Stejne jako puvodni web: neroluje okno, ale kontejner #stranka. Na mobilu
   jinak adresni radek pri kazdem posunu meni vysku okna a stranky by pod
   prstem nedosedaly presne. */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--cerna);
  color: var(--bila);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#stranka {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
#stranka::-webkit-scrollbar { display: none; }
/* Na dotyku listuje JavaScript (viz royal.js) a snap by se s nim pral. */
#stranka.tah { scroll-snap-type: none; scroll-behavior: auto; }
/* Telefon od O nas dolu: normalni rolovani prstem, bez listovani po stranach. */
#stranka.volne { scroll-snap-type: none; }
.zamceno #stranka { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: normal; }
p, figure, blockquote, dl, dd { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--bila); outline-offset: 3px; }

.sirka { width: 100%; padding-left: var(--hrana); padding-right: var(--hrana); }

.nadtitul {
  font-family: var(--text);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 18px;
}
h1, h2 { font-family: var(--nadpis); line-height: 1.06; letter-spacing: -0.005em; }
h2 { font-size: clamp(32px, 3.2vw, 48px); }

/* Tlacitka: tvar ze sablony, pismo jako puvodni odkazy (Calluna Bold, verzalky) */
.tlacitka { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 18px;
  background: var(--bila);
  color: var(--cerna);
  border: 1px solid var(--bila);
  font-family: var(--tucne);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s;
}
.btn:hover { background: transparent; color: var(--bila); }
.btno { background: transparent; color: var(--bila); border-color: rgba(255,255,255,0.75); }
.btno:hover { background: var(--bila); color: var(--cerna); border-color: var(--bila); }

.tecka {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: #7fd18b;
  flex: none;
}
/* Pulz jako zvetsujici se kruh (jen transform a opacity) – stejny vzhled jako drive
   pres box-shadow, ale prohlizec ho nemusi v kazdem snimku znovu malovat. */
.tecka::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(127,209,139,0.55);
  animation: tep 2.2s infinite;
}
@keyframes tep {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(3.286); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}


/* ---------- Hlavicka: logo uprostred jako na puvodnim webu ---------- */
.hlava {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 0;
}
.logo {
  position: fixed;
  top: 40px;
  left: 50%;
  width: 206px;
  height: 75px;
  margin-left: -103px;
  z-index: 3;
}
.logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* tesny tmavy lem + mekky stin: logo je citelne i proti svetle obloze */
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6)) drop-shadow(0 0 5px rgba(0,0,0,0.35)) drop-shadow(0 2px 16px rgba(0,0,0,0.4));
}
.menu {
  position: fixed;
  top: 40px; left: 0; right: 0;
  height: 40px;
  padding: 0 var(--hrana);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.menulevo, .menupravo { display: flex; align-items: center; gap: 24px; pointer-events: auto; }
.menulevo a, .menupravo > a:not(.btn) {
  font-family: var(--tucne);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 1px rgba(0,0,0,0.7), 0 0 4px rgba(0,0,0,0.45), 0 1px 12px rgba(0,0,0,0.5);
  transition: opacity .2s;
}
.menulevo a:hover, .menupravo > a:not(.btn):hover { opacity: 0.6; }
.menusite { display: flex; gap: 14px; }
.menusite a { display: block; width: 16px; height: 16px; transition: opacity .2s; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5)); }
.menusite a:hover { opacity: 0.55; }
.menusite svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.jazyk { border: 1px solid rgba(255,255,255,0.8); padding: 3px 9px 2px; }
.menu .btn { height: 32px; padding: 0 14px; font-size: 12px; }
.burger { display: none; position: fixed; top: 22px; right: calc(var(--okraj) - 8px); z-index: 4; width: 44px; height: 44px; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--bila); box-shadow: 0 0 8px rgba(0,0,0,0.4); transition: transform .3s, top .3s; }
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
.menuotevrene .burger span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menuotevrene .burger span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }


/* ---------- Carky vpravo (strankovani) jako na puvodnim webu ---------- */
.pag {
  position: fixed;
  top: 50%;
  right: 80px;
  width: 40px;
  margin-top: -90px;
  z-index: 90;
  transition: opacity .4s ease, visibility 0s linear 0s;
}
.pag.pryc { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
a.paga {
  display: block;
  width: 20px;
  height: 22px;
  margin: 0 0 20px auto;
  border-top: 3px solid var(--bila);
  transition: width .5s;
}
a.paga:last-child { margin-bottom: 0; }
a.paga:hover, a.paga.pags { width: 40px; }


/* ---------- Slidy ---------- */
.snapbod { height: 0; scroll-snap-align: start; }
.slide {
  /* Sticky = kazda dalsi stranka prijede pres predchozi, jako na puvodnim webu. */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}
@media (hover: none) and (pointer: coarse), (max-width: 820px) {
  .slide { position: relative; }
}


/* ---------- Uvod: logo a text jako na puvodnim webu ---------- */
.uvod { display: flex; align-items: center; justify-content: center; text-align: center; }
.uvodfoto { position: absolute; inset: 0; }
.uvodvrstva { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; }
.uvodvrstva img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.06); transition: transform 8s ease-out; }
.uvodvrstva.uvodon { opacity: 1; }
.uvodvrstva.uvodon img { transform: scale(1); }
.uvodfoto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0) 190px), radial-gradient(ellipse 54% 52% at 50% 50%, rgba(0,0,0,0.56), rgba(0,0,0,0.36) 65%, rgba(0,0,0,0.22)); }
.uvodtext {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 900px;
  padding: 145px 40px 120px;
}
.uvod .nadtitul { padding-bottom: 14px; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.85), 0 1px 20px rgba(0,0,0,0.9); }
.uvod h1 {
  font-size: 100px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 0 3px rgba(0,0,0,0.45), 0 2px 28px rgba(0,0,0,0.7);
  padding-bottom: 40px;
}
.uvodpopis {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 0 3px rgba(0,0,0,0.75), 0 0 10px rgba(0,0,0,0.6), 0 1px 16px rgba(0,0,0,0.85);
  max-width: 560px;
  margin: 0 auto;
}
.novinka {
  position: absolute;
  z-index: 2;
  left: var(--hrana);
  bottom: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 9px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--text);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color .25s, color .25s;
}
.novinka:hover { background: var(--bila); color: var(--cerna); }
/* Tecky dole uprostred jako na puvodnim webu; tlacitko je vetsi nez tecka, aby se dalo trefit */
.uvodtecky { position: absolute; z-index: 2; left: 50%; bottom: 25px; transform: translateX(-50%); display: flex; filter: drop-shadow(0 0 2px rgba(0,0,0,0.35)); }
.uvodtecka { position: relative; width: 14px; height: 24px; }
.uvodtecka::before {
  content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background-color .3s, transform .3s;
}
.uvodtecka:hover::before { background: rgba(255,255,255,0.6); }
.uvodtecka.uvodteckaon::before { background: #fff; transform: scale(1.3); }


/* ---------- Projekty ---------- */
.projekt { display: flex; align-items: center; justify-content: center; text-align: center; }
.projektfoto { position: absolute; inset: 0; }
.projektfoto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
.projekt.vidi .projektfoto img { transform: scale(1); }
/* Zadne plosne ztmaveni. Tmavne horni okraj (za logem a menu, v rozich jako vinetace),
   siroky mekky prechod za textem uprostred (bez viditelne hrany) a lehce spodni hrana. */
.projektfoto::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 340px 130px at 50% 76px, rgba(0,0,0,0.28), rgba(0,0,0,0)),
    radial-gradient(ellipse 38% 210px at 0 0, rgba(0,0,0,0.3), rgba(0,0,0,0)),
    radial-gradient(ellipse 38% 210px at 100% 0, rgba(0,0,0,0.3), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.34) 50px, rgba(0,0,0,0.18) 100px, rgba(0,0,0,0.06) 160px, rgba(0,0,0,0) 220px),
    radial-gradient(ellipse 50% 38% at 50% 53%, rgba(0,0,0,0.44) 0, rgba(0,0,0,0.38) 35%, rgba(0,0,0,0.22) 65%, rgba(0,0,0,0.07) 86%, rgba(0,0,0,0) 100%),
    linear-gradient(to top, rgba(0,0,0,0.2) 0, rgba(0,0,0,0) 22%);
}
.projekttext { position: relative; z-index: 2; max-width: 760px; padding: 120px var(--okraj) 80px; }
.projekt h2 { font-size: clamp(38px, 4.6vw, 72px); text-shadow: 0 0 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.35), 0 0 24px rgba(0,0,0,0.3), 0 4px 40px rgba(0,0,0,0.45); }
.stav {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 6px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--tucne); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 20px;
}
.misto { margin-top: 16px; color: rgba(255,255,255,0.92); font-family: var(--tucne); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 0 1px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6), 0 0 16px rgba(0,0,0,0.6); }
.claim { font-family: var(--serif); margin: 20px auto 0; max-width: 580px; color: #fff; font-size: 19px; line-height: 1.55; text-shadow: 0 0 2px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.6), 0 0 18px rgba(0,0,0,0.55), 0 0 40px rgba(0,0,0,0.3); }
.projekttext .tlacitka { justify-content: center; margin-top: 30px; }
.projekttext .btno { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.8); }
.projekttext .btno:hover { background: var(--bila); border-color: var(--bila); }


/* ---------- Spodni strany ---------- */
/* Svetly vzhled podle masak-partner.com: bila a svetle seda plocha, velke
   tenke titulky, drobne popisky verzalkami, vlasove linky, cerna tlacitka.
   Pisma zustavaji puvodni (HelveticaNeue Light a Calluna). */
/* Kazda strana je aspon na vysku okna a dosedne horni hranou. Kdyz je obsah
   vyssi nez okno (telefon), da se v ni rolovat a dosedne se az na jejim konci. */
.strana {
  position: relative;
  min-height: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 150px 0 70px;
  background: #fff;
  color: var(--uhel);
}
.onas2, .media, .konec { background: var(--papir); }
.strana :focus-visible { outline-color: var(--uhel); }

/* Zahlavi strany: stitek s linkou a velky tenky titulek */
.zahlavi { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(28px, 4.6vh, 48px); }
.stitek {
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--sedy); margin-bottom: 16px;
}
.stitek::before { content: ''; width: 24px; height: 1px; background: #ccc; }
.zahlavi h2 { font-family: var(--text); font-size: clamp(40px, 5.4vw, 84px); line-height: 0.98; letter-spacing: -0.03em; }
.zahlavipravo { max-width: 420px; text-align: right; }
.zahlavipravo p { font-size: 14px; line-height: 1.6; color: var(--popis); }
.zahlavipravo .podtrzeny { margin-top: 14px; }
.zahlavipravo .podtrzeny::after { content: ' \2192'; font-family: var(--text); }

.dvasloupce { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.velky { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; max-width: 560px; }

/* Cerne tlacitko a podtrzeny odkaz jako na masak-partner.com */
.odkazy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 32px; }
.cerne, .podtrzeny { font-family: var(--tucne); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; }
.cerne {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 26px;
  background: var(--uhel); color: #fff;
  transition: background-color .3s var(--hladce);
}
.cerne::after { content: '\2192'; font-family: var(--text); transition: transform .3s var(--hladce); }
.cerne:hover { background: var(--zlata); }
.cerne:hover::after { transform: translateX(3px); }
.podtrzeny { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid currentColor; transition: opacity .2s; }
.podtrzeny:hover { opacity: 0.55; }

/* Cisla jako "Uznani nasi prace": velka tenka cisla, svisle linky */
.cisla { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 560px; margin-top: clamp(32px, 5.4vh, 56px); border-top: 1px solid var(--carka); border-bottom: 1px solid var(--carka); }
.cisla > div { padding: 24px 0 22px 24px; border-left: 1px solid var(--carka); }
.cisla > div:first-child { padding-left: 0; border-left: 0; }
.cisla dt { font-family: var(--text); font-size: clamp(36px, 3.4vw, 54px); line-height: 1; letter-spacing: -0.03em; }
.cisla dd { margin-top: 12px; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sedy); }

.onasfoto { overflow: hidden; background: #f2f2f2; }
.onasfoto img { width: 100%; height: min(calc(100vh - 230px), 660px); min-height: 280px; object-fit: cover; }
.onasportret img { object-position: 50% 30%; filter: grayscale(1); }

/* Pilire jako "O atelieru": cislo, nazev, popis, mezi nimi vlasova linka */
.pilire { border-bottom: 1px solid var(--carka); }
.pilir { padding: clamp(16px, 2.6vh, 24px) 0; border-top: 1px solid var(--carka); }
.pilircislo { display: block; font-size: 11px; letter-spacing: 0.2em; color: var(--sedy); margin-bottom: 8px; }
.pilir h3 { font-family: var(--text); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -0.01em; }
.pilir p { margin-top: 6px; font-size: 15px; line-height: 1.65; color: var(--popis); max-width: 520px; }

/* Citaty */
.citatyobsah { max-width: 600px; }
.citatyvrstvy { display: grid; }
.citat { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
.citat.citaton { opacity: 1; visibility: visible; transition: opacity .6s; }
.citat blockquote { font-family: var(--text); font-size: clamp(22px, 2.1vw, 32px); line-height: 1.38; letter-spacing: -0.015em; }
.citat figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--carka); }
.citat figcaption strong { font-family: var(--tucne); font-weight: normal; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.citat figcaption span { color: var(--sedy); font-size: 13px; }
.citatytecky { display: flex; gap: 8px; margin: -10px 0 18px; }
.citattecka { position: relative; width: 28px; height: 20px; }
.citattecka::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: #d6d6d6; transition: background-color .3s; }
.citattecka-on::before { background: var(--uhel); }

/* Media: bile karty na svetle sede jako "Aktualni zakazky" */
.mediamrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.clanek { display: flex; flex-direction: column; background: #fff; transition: box-shadow .4s var(--hladce); }
.clanek:hover { box-shadow: 0 22px 44px -28px rgba(0,0,0,0.28); }
.clanekfoto { display: block; overflow: hidden; }
.clanekfoto img { width: 100%; height: min(calc(100vh - 570px), 300px); min-height: 180px; object-fit: cover; transition: transform 1.2s var(--hladce); }
.clanek:hover .clanekfoto img { transform: scale(1.04); }
.clanektelo { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 24px 26px 26px; }
.clanekstitek { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sedy); }
.claneknadpis { margin-top: 10px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.35; }
.clanekodkaz { margin-top: auto; padding-top: 20px; font-family: var(--tucne); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.clanekodkaz::after { content: ' \2192'; font-family: var(--text); }

/* Dalsi prace ateliéru — jen doplnek, ne hlavni obsah. Vzhled podle sekce
   Reference na masak-partner.com: mrizka 3:2, popisek vyjede pri najeti mysi. */
.ateliermrizka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.atelierkarta { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #f2f2f2; }
.atelierkarta img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9); transition: transform .8s var(--hladce), filter .8s var(--hladce); }
.atelierinfo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 22px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 55%, transparent 100%);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--hladce), transform .45s var(--hladce);
}
.ateliertag { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.ateliernazev { display: flex; justify-content: space-between; gap: 12px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.2; letter-spacing: -0.01em; }
.ateliernazev::after { content: '\2192'; opacity: 0.7; transform: translateX(-6px); transition: transform .3s; }
.atelierkarta:hover img { transform: scale(1.06); filter: brightness(0.45); }
.atelierkarta:hover .atelierinfo { opacity: 1; transform: none; }
.atelierkarta:hover .ateliernazev::after { transform: none; }
/* Na dotyku neni najeti mysi — nazev je videt rovnou, jen nenapadne. */
@media (hover: none) {
  .atelierinfo { opacity: 1; transform: none; padding: 12px 12px; }
  .ateliertag { display: none; }
  .ateliernazev { font-size: 14px; }
  .ateliernazev::after { display: none; }
}

/* Kontakt: bila karta jako na masak-partner.com, vedle ni tmava karta
   s dluhopisy (styl ocenenych projektu), dole cerna paticka. */
.konec { justify-content: flex-start; padding-bottom: 0; }
.konecobsah { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(40px, 6vh, 70px); }
.kontaktradek { align-items: stretch; }
.kontaktkarta { background: #fff; border: 1px solid var(--carka); padding: clamp(28px, 3vw, 40px); }
.kontaktfirma { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sedy); margin-bottom: 26px; }
.kontaktudaje > div + div { margin-top: 20px; }
.kontaktudaje dt { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sedy); margin-bottom: 6px; }
.kontaktudaje dd { font-size: 16px; line-height: 1.6; }
.kontaktudaje a { transition: opacity .2s; }
.kontaktudaje a:hover { opacity: 0.55; }
.kontaktic { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--carka); font-size: 13px; color: var(--sedy); }
.kontaktsite { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.kontaktsite a { font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--popis); padding-bottom: 2px; border-bottom: 1px solid #ccc; transition: color .2s, border-color .2s; }
.kontaktsite a:hover { color: var(--uhel); border-color: var(--uhel); }

.dluhopiskarta { position: relative; display: flex; min-height: 340px; overflow: hidden; background: #111; color: #fff; }
.dluhopiskarta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: transform 1.2s var(--hladce), opacity .6s var(--hladce); }
.dluhopiskarta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.05) 100%); }
.dluhopiskarta:hover > img { transform: scale(1.04); opacity: 0.9; }
.dluhopistext { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(28px, 3vw, 40px); }
.zlatystitek { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--zlata); border: 1px solid rgba(200,169,106,0.55); background: rgba(200,169,106,0.12); padding: 6px 10px 5px; margin-bottom: 18px; }
.dluhopiskarta h3 { font-family: var(--text); font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
.dluhopispopis { margin-top: 12px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 420px; }
.dluhopiskarta .btn { margin-top: 24px; }
.tmave :focus-visible { outline-color: #fff; }

.pata { background: var(--uhel); color: rgba(255,255,255,0.4); }
.patadole { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; padding-top: 34px; padding-bottom: 34px; }
.patafirma { display: flex; align-items: center; gap: 24px; }
.patalogo { height: 34px; width: auto; }
.patafirma p { font-size: 12px; line-height: 1.7; }
.patafirma a { color: rgba(255,255,255,0.7); transition: color .2s; }
.patafirma a:hover { color: #fff; }
.patamenu { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.patamenu a { font-family: var(--tucne); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); transition: color .2s; }
.patamenu a:hover { color: #fff; }

/* Kdyz je pod hlavickou svetla strana, menu a logo ztmavnou. */
.svetle:not(.menuotevrene) .logo img { filter: invert(1); }
.svetle:not(.menuotevrene) .menulevo a,
.svetle:not(.menuotevrene) .menupravo > a:not(.btn),
.svetle:not(.menuotevrene) .menusite a { color: var(--uhel); text-shadow: none; filter: none; }
.svetle:not(.menuotevrene) .jazyk { border-color: rgba(0,0,0,0.7); }
.svetle:not(.menuotevrene) .menu .btn { background: var(--uhel); color: #fff; border-color: var(--uhel); }
.svetle:not(.menuotevrene) .menu .btn:hover { background: transparent; color: var(--uhel); }
.svetle:not(.menuotevrene) .burger span { background: var(--uhel); box-shadow: none; }
/* Pas pod hlavickou: kdyz stranka nestoji na zacatku svetle strany (telefon,
   kde se spodkem roluje volne), aby text neprejizdel pod logem. Barvu bere ze strany pod nim. */
.hlava::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: 130px;
  background: var(--pasbarva, #fff);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility 0s .25s;
  pointer-events: none;
}
.pas:not(.menuotevrene) .hlava::before { opacity: 1; visibility: visible; transition: opacity .25s; }
.logo img, .burger span, .menulevo a, .menupravo > a, .menusite a { transition: opacity .2s, color .3s, filter .3s, background-color .3s, border-color .3s; }

/* Sipky v lupe */
.sipka { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.4); position: relative; transition: border-color .2s, background-color .2s; }
.sipka:hover { border-color: var(--bila); background: rgba(255,255,255,0.08); }
.sipka::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-left: 1px solid var(--bila); border-bottom: 1px solid var(--bila);
  transform: translate(-30%, -50%) rotate(45deg);
}
.sipkavpravo::before { transform: translate(-70%, -50%) rotate(-135deg); }


/* ---------- Panel projektu ----------
   Jako detail projektu na masak-partner.com: vlevo velka fotka s nahledy,
   vpravo bily sloupec s textem a udaji. Na telefonu pod sebou. */
.panel {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex;
  background: #111;
  opacity: 0;
  transition: opacity .35s ease;
}
.panel.otevreno { opacity: 1; }
.pgal { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #111; }
.pgalscena { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.pgalobraz, .pgalpozadi { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fotka na vysku nebo panorama se ukaze cela, za ni rozmazany nahled. */
.pgalpozadi { top: -40px; left: -40px; width: calc(100% + 80px); height: calc(100% + 80px); filter: blur(24px) brightness(0.5); opacity: 0; transition: opacity .4s; }
.pgalcele .pgalpozadi { opacity: 1; }
.pgalcele .pgalobraz { object-fit: contain; }
.pgalnaskok { animation: pgalnaskok .5s ease; }
@keyframes pgalnaskok { from { opacity: 0.2; } to { opacity: 1; } }
.pgalzvetsit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: zoom-in; }
.pgalzvetsit::after {
  content: '';
  position: absolute; right: 20px; bottom: 20px;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.2'%3E%3Cpath d='M1 5V1h4M11 1h4v4M15 11v4h-4M5 15H1v-4'/%3E%3C/svg%3E") center / 14px no-repeat;
  opacity: 0;
  transition: opacity .3s;
}
.pgalscena:hover .pgalzvetsit::after, .pgalzvetsit:focus-visible::after { opacity: 1; }
.pgal .sipka { position: absolute; z-index: 2; top: 50%; margin-top: -20px; background: rgba(0,0,0,0.22); }
.pgal .sipka:hover { background: rgba(0,0,0,0.45); }
.pgalvlevo { left: 20px; }
.pgalvpravo { right: 20px; }
.pgalcislo { position: absolute; z-index: 2; left: 22px; bottom: 20px; font-size: 11px; letter-spacing: 0.22em; color: rgba(255,255,255,0.88); text-shadow: 0 1px 6px rgba(0,0,0,0.7); pointer-events: none; }
.pgalerie { position: relative; flex: none; display: flex; gap: 6px; padding: 10px; background: #0a0a0a; overflow-x: auto; scrollbar-width: none; }
.pgalerie::-webkit-scrollbar { display: none; }
.pfoto { position: relative; flex: none; display: block; width: 108px; height: 72px; background: #1a1a1a; opacity: 0.45; transition: opacity .25s; }
.pfoto:first-child { margin-left: auto; }
.pfoto:last-child { margin-right: auto; }
.pfoto:hover { opacity: 0.85; }
.pfoto img { width: 100%; height: 100%; object-fit: cover; }
.pfoto.pfotoon { opacity: 1; }
.pfoto.pfotoon::after { content: ''; position: absolute; inset: 0; border: 1px solid #fff; }
.pinfo {
  position: relative; flex: none;
  width: clamp(380px, 32vw, 500px);
  display: flex; flex-direction: column;
  background: #fff; color: var(--uhel);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 76px 48px 44px;
  transform: translateX(28px);
  transition: transform .6s var(--hladce);
}
.panel.otevreno .pinfo { transform: none; }
.ptelo { margin-bottom: 40px; }
.pstitek { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #767676; margin-bottom: 14px; }
.pinfo h2 { font-size: clamp(30px, 2.6vw, 42px); color: var(--uhel); }
.pstav { display: flex; align-items: center; gap: 9px; width: fit-content; margin-top: 18px; padding: 7px 12px 6px; border: 1px solid var(--carka); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--popis); }
.panellead { margin-top: 24px; font-family: var(--serif); font-size: clamp(18px, 1.35vw, 20px); line-height: 1.55; color: var(--uhel); }
.ptext { margin-top: 16px; font-size: 14.5px; line-height: 1.75; color: var(--popis); }
.pstitekmezi { margin: 34px 0 0; }
.etapy { margin-top: 10px; border-top: 1px solid var(--carka); }
.etapa { display: grid; grid-template-columns: 36px 1fr; padding: 14px 0 15px; border-bottom: 1px solid var(--carka); }
.etapanum { grid-row: span 2; font-family: var(--nadpis); font-size: 19px; line-height: 1.2; color: #c4c4c4; }
.etapa h3 { font-family: var(--tucne); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.6; }
.etapa p { margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: var(--popis); }
.etapaaktivni .etapanum { color: var(--uhel); }
.pmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: auto; padding-top: 28px; border-top: 1px solid var(--carka); }
.pmeta > div { min-width: 0; }
.pmetasiroky { grid-column: 1 / -1; }
.pmeta dt { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #767676; margin-bottom: 5px; }
.pmeta dd { font-size: 14px; line-height: 1.5; color: var(--uhel); }
.pinfo .tlacitka { margin-top: 30px; }
.pinfo .btn { background: var(--uhel); color: #fff; border-color: var(--uhel); }
.pinfo .btn:hover { background: transparent; color: var(--uhel); }
.pinfo .btno { background: transparent; color: var(--uhel); border-color: rgba(0,0,0,0.3); }
.pinfo .btno:hover { background: var(--uhel); color: #fff; border-color: var(--uhel); }
.pinfo :focus-visible { outline-color: var(--uhel); }

.zavri { position: fixed; top: 12px; right: calc(var(--hrana) - 10px); z-index: 5; width: 44px; height: 44px; }
.zavri::before, .zavri::after { content: ''; position: absolute; top: 50%; left: 11px; right: 11px; height: 1px; background: var(--bila); transition: transform .3s; }
.zavri::before { transform: rotate(45deg); }
.zavri::after { transform: rotate(-45deg); }
.zavri:hover::before { transform: rotate(135deg); }
.zavri:hover::after { transform: rotate(45deg); }
.panel .zavri { top: 14px; right: 22px; }
.panel .zavri::before, .panel .zavri::after { background: var(--uhel); }


/* ---------- Lupa ---------- */
.lupa { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.96); opacity: 0; transition: opacity .3s; }
.lupa.otevreno { opacity: 1; }
.lupaobraz { position: absolute; top: 70px; left: 80px; width: calc(100% - 160px); height: calc(100% - 140px); object-fit: contain; }
.lupa .sipka { position: absolute; top: 50%; margin-top: -20px; }
.lupavlevo { left: 20px; }
.lupavpravo { right: 20px; }
.lupacislo { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: 0.2em; color: var(--seda); }



/* ---------- Odkryvani ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].vidi { opacity: 1; transform: none; }
.js .projekttext [data-reveal]:nth-child(2) { transition-delay: .08s; }
.js .projekttext [data-reveal]:nth-child(3) { transition-delay: .16s; }
.js .projekttext [data-reveal]:nth-child(4) { transition-delay: .24s; }
.js .projekttext [data-reveal]:nth-child(5) { transition-delay: .32s; }
.js .mediamrizka [data-reveal]:nth-child(2) { transition-delay: .1s; }
.js .mediamrizka [data-reveal]:nth-child(3) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  #stranka { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .uvodvrstva img, .projektfoto img { transform: none !important; transition: none; }
  .tecka::after { animation: none; opacity: 0; }
  .pinfo { transform: none; transition: none; }
  .pgalnaskok { animation: none; }
}


/* ---------- Responzivita (breakpointy uvodu podle puvodniho webu) ---------- */
@media (max-width: 1300px) {
  .uvod h1 { font-size: 80px; padding-bottom: 32px; }
  .uvodpopis { font-size: 21px; }
}
@media (max-width: 1180px) {
  .menusite { display: none; }
  .menulevo, .menupravo { gap: 18px; }
  .pag { right: 40px; }
}
@media (max-width: 1024px) {
  .uvod h1 { font-size: 68px; }
  .uvodpopis { font-size: 20px; }
}

@media (max-width: 900px) {
  .logo { top: 26px; width: 160px; height: 58px; margin-left: -80px; }
  .burger { display: block; }
  .menu {
    top: 0; bottom: 0; height: auto;
    background: var(--uhel);
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    pointer-events: auto;
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility 0s .3s;
  }
  .menuotevrene .menu { opacity: 1; visibility: visible; transition: opacity .3s; }
  .menulevo, .menupravo { flex-direction: column; gap: 22px; }
  .menulevo a, .menupravo > a:not(.btn) { font-family: var(--nadpis); font-size: 28px; letter-spacing: 0; text-transform: none; text-shadow: none; }
  .menupravo > a.jazyk { font-family: var(--tucne); font-size: 14px; letter-spacing: 0.12em; display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 44px; padding: 1px 14px 0; }
  .menusite { display: flex; gap: 24px; }
  .menusite a { box-sizing: content-box; width: 22px; height: 22px; padding: 11px; margin: -11px; }
  .menu .btn { height: 44px; font-size: 13px; padding: 0 22px; }
  .pag { display: none; }
  .hlava::before { height: 98px; }
  .projektfoto::after {
    background:
      radial-gradient(ellipse 260px 110px at 50% 55px, rgba(0,0,0,0.28), rgba(0,0,0,0)),
      radial-gradient(ellipse 40% 160px at 100% 0, rgba(0,0,0,0.26), rgba(0,0,0,0)),
      linear-gradient(to bottom, rgba(0,0,0,0.46) 0, rgba(0,0,0,0.28) 50px, rgba(0,0,0,0.12) 100px, rgba(0,0,0,0) 180px),
      radial-gradient(ellipse 80% 32% at 50% 52%, rgba(0,0,0,0.44) 0, rgba(0,0,0,0.38) 35%, rgba(0,0,0,0.22) 65%, rgba(0,0,0,0.07) 86%, rgba(0,0,0,0) 100%),
      linear-gradient(to top, rgba(0,0,0,0.2) 0, rgba(0,0,0,0) 22%);
  }

  .zahlavi { flex-direction: column; align-items: flex-start; gap: 18px; }
  .zahlavipravo { text-align: left; max-width: 560px; }
  .dvasloupce { grid-template-columns: 1fr; }
  .onasportret { order: -1; }
  .onas2 .onasfoto { order: 2; }
  .velky, .cisla, .citatyobsah { max-width: none; }
  .onasfoto img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .onasportret img { aspect-ratio: 4 / 5; max-height: 72vh; }
  .mediamrizka { grid-template-columns: 1fr 1fr; }
  .mediamrizka .clanek:last-child { grid-column: span 2; }
  .clanekfoto img { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
  .mediamrizka .clanek:last-child .clanekfoto img { aspect-ratio: 16 / 9; }
  .dluhopiskarta { min-height: 400px; }
  /* Panel projektu na telefonu: fotka nahore, pod ni text; roluje cely panel. */
  .panel { display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fff; }
  .pgalscena { flex: none; height: min(76vw, 62vh); min-height: 230px; }
  .pgalerie { gap: 5px; padding: 7px; }
  .pfoto { width: 76px; height: 50px; }
  .pinfo { width: auto; overflow: visible; padding: 30px 22px 48px; transform: none; transition: none; }
  .pinfo h2 { font-size: 34px; }
  .panellead { font-size: 18px; }
  .ptext { font-size: 15px; }
  .ptelo { margin-bottom: 32px; }
  .pinfo .tlacitka .btn { flex: 1 1 auto; justify-content: center; height: 46px; }
  .panel .zavri { top: 10px; right: 10px; border-radius: 50%; background: rgba(0,0,0,0.45); }
  .panel .zavri::before, .panel .zavri::after { background: #fff; left: 13px; right: 13px; }
  .pgal .sipka { top: auto; bottom: 12px; margin-top: 0; background: rgba(0,0,0,0.35); }
  .pgalvlevo { left: auto; right: 58px; }
  .pgalvpravo { right: 12px; }
  .pgalcislo { left: 16px; bottom: 24px; }
  .pgalzvetsit::after { display: none; }
  .lupaobraz { left: 10px; width: calc(100% - 20px); }
  .lupa .sipka { top: auto; bottom: 14px; margin-top: 0; }
  .strana { padding-top: 120px; }
  .ateliermrizka { grid-template-columns: repeat(2, 1fr); }

  /* Telefon: vsechno, na co se tuka, aspon ~44 px (vzhled stejny, jen vetsi plocha pro prst) */
  .btn { height: 44px; }
  .uvodtecky { bottom: 15px; }
  .uvodtecka { width: 22px; height: 44px; }
  .uvodtecka::before { left: 8px; top: 19px; }
  .citatytecky { margin: -22px 0 6px; }
  .citattecka { height: 44px; }
  .citattecka::before { top: 21px; }
  .podtrzeny, .kontaktsite a, .kontaktudaje dd a { position: relative; }
  .podtrzeny::before, .kontaktsite a::before { content: ''; position: absolute; left: -6px; right: -6px; top: -13px; bottom: -11px; }
  .kontaktudaje dd a::before { content: ''; position: absolute; left: -4px; right: -4px; top: -5px; bottom: -5px; }
  .patamenu { gap: 0 24px; }
  .patamenu a { display: inline-block; padding: 12px 0; }
}

/* Telefon na sirku: menu ve dvou sloupcich vedle sebe, jinak se nevejde na vysku */
@media (max-width: 900px) and (max-height: 500px) {
  .menu { flex-direction: row; align-items: center; gap: 0 72px; padding-top: 56px; overflow-y: auto; }
  .menulevo, .menupravo { gap: 12px; }
  .menulevo a, .menupravo > a:not(.btn) { font-size: 24px; }
}

@media (max-width: 600px) {
  body { font-size: 14.5px; }
  .uvodtext { padding: 120px 10px 110px; width: 100%; }
  .uvod h1 { font-size: 42px; padding-bottom: 20px; white-space: normal; }
  .uvod .nadtitul { font-size: 10px; letter-spacing: 0.22em; padding-bottom: 8px; }
  .uvodpopis { font-size: 16px; line-height: 1.5; }
  .novinka { left: 50%; top: 104px; bottom: auto; transform: translateX(-50%); white-space: nowrap; font-size: 10px; padding: 12px 14px 11px; }
  .projekttext { padding-top: 100px; }
  .projekt h2 { font-size: 36px; }
  .claim { font-size: 16.5px; }
  .zahlavi { margin-bottom: 24px; }
  .zahlavi h2 { font-size: 42px; }
  .cisla > div { padding-left: 14px; }
  .cisla dt { font-size: 34px; }
  .cisla dd { font-size: 10.5px; letter-spacing: 0.08em; }
  .mediamrizka { grid-template-columns: 1fr; gap: 16px; }
  .mediamrizka .clanek:last-child { grid-column: auto; }
  .mediamrizka .clanek:last-child .clanekfoto img { aspect-ratio: 3 / 2; }
  .kontaktkarta { padding: 26px 22px; }
  .dluhopiskarta { min-height: 440px; }
  .patadole { flex-direction: column; align-items: flex-start; }
  .patafirma { flex-direction: column; align-items: flex-start; gap: 14px; }
  .atelier { padding-bottom: 30px; }
}
@media (max-width: 360px) {
  .uvod h1 { font-size: 38px; }
}

@media (max-height: 620px) and (min-width: 601px) {
  .uvod h1 { font-size: 60px; padding-bottom: 20px; }
  .uvodtext { padding-top: 120px; padding-bottom: 90px; }
  .claim { display: none; }
}

/* Nizsi notebooky: spodni strany se vejdou na jednu obrazovku. */
@media (max-height: 820px) and (min-width: 901px) {
  .strana { padding-top: 118px; padding-bottom: 44px; }
  .konec { padding-bottom: 0; }
  .zahlavi { margin-bottom: 24px; }
  .stitek { margin-bottom: 12px; }
  .zahlavi h2 { font-size: clamp(40px, 4.4vw, 64px); }
  .velky { font-size: 17px; }
  .odkazy { margin-top: 24px; }
  .cisla { margin-top: 28px; }
  .cisla > div { padding-top: 16px; padding-bottom: 14px; }
  .cisla dt { font-size: clamp(32px, 2.8vw, 44px); }
  .pilir p { font-size: 14px; line-height: 1.55; }
  .kontaktkarta, .dluhopistext { padding: 26px 30px; }
  .kontaktudaje > div + div { margin-top: 14px; }
  .kontaktic { margin-top: 16px; padding-top: 14px; }
  .konecobsah { padding-bottom: 32px; }
  .patadole { padding-top: 24px; padding-bottom: 24px; }
}