/* =================================================================
   Cesta oblékáním — jediný styl webu

   Nahrazuje nicepage.css (1,36 MB), nicepage.js a jQuery.
   Žádný framework, žádný JavaScript. Rozvržení stojí na CSS gridu,
   barvy, písma a rozestupy na proměnných níž.
   ================================================================= */

/* ---------- Písmo ----------
   Cormorant Garamond, uložené u webu — prohlížeč návštěvníka nikam
   nevolá. Je to variabilní písmo, proto jeden soubor pro celý rozsah
   tuční. Dva soubory kvůli znakům: české ě, š, č, ř, ž, ů, ň, ť, ď
   jsou v podmnožině latin-ext, zbytek v latin.
   Licence SIL OFL 1.1, celý text v assets/fonts/OFL.txt. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-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;
}

/* ---------- Proměnné ---------- */
:root {
  --papir:      #fbf9f6;   /* podklad stránky */
  --papir-tmav: #f4efe8;   /* tlumené pásy */
  --inkoust:    #241f1c;   /* hlavní text */
  --inkoust-2:  #5c534c;   /* doplňkový text */
  --linka:      #e2d9cd;
  --linka-tmav: #cbbca7;

  /* Barva z loga. Na papíru má kontrast 4,07:1, což na běžný text
     nestačí (AA chce 4,5), proto slouží jen na logo a ozdobné prvky. */
  --znacka:     #aa6c39;
  /* Odkazy a tlačítka mají tmavší odstín téže barvy — 5,7:1. */
  --akcent:     #8a5730;
  --akcent-tm:  #6d4426;

  --pismo-nadpis: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --pismo-text: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
                "Helvetica Neue", Arial, sans-serif;

  --sirka: 1180px;
  --mezera: clamp(3.5rem, 8vw, 7.5rem);
}

/* ---------- Základ ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--inkoust);
  font-family: var(--pismo-text);
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.0625rem);
  line-height: 1.75;
}

img { max-width: 100%; height: auto; display: block; }

/* Cormorant má nízkou střední výšku a jemné tahy, proto nadpisy
   sázíme větší než u běžné antikvy a v malých velikostech tučněji. */
h1, h2, h3 {
  font-family: var(--pismo-nadpis);
  line-height: 1.13;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--inkoust); }

:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

/* Malý prostrkaný nadhled nad nadpisem. */
.nadhled {
  margin: 0 0 1.1rem;
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--akcent);
}

/* Odkaz pro čtečky a klávesnici — normálně skrytý. */
.preskocit {
  position: absolute; left: -9999px;
  background: var(--inkoust); color: var(--papir);
  padding: 0.7rem 1.2rem; z-index: 100;
}
.preskocit:focus { left: 1rem; top: 1rem; }

.skryte {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.obal { width: 100%; max-width: var(--sirka); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.25rem); }

/* ---------- Hlavička a navigace ---------- */
.hlavicka {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 249, 246, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linka);
}

.hlavicka-obsah {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.75rem 1.5rem;
  padding-top: 0.85rem; padding-bottom: 0.85rem;
}

/* Logo je široký nápis (poměr 4,36 : 1), ne ikona. Vykresluje se
   ve svém poměru — do čtverce zmáčknuté bylo nečitelné. */
.znacka { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: inherit; }
.znacka img { width: clamp(8.5rem, 13vw, 11rem); height: auto; }
.znacka-osoba {
  color: var(--inkoust-2);
  font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase;
  padding-left: 0.9rem; border-left: 1px solid var(--linka);
}

/* Jen přímí potomci — jinak by pravidlo přebilo display: none
   u rozbalovacího seznamu a ten by byl otevřený natrvalo. */
.nav > ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; list-style: none; margin: 0; padding: 0; }

.nav a {
  display: block; padding: 0.3rem 0;
  color: var(--inkoust-2); text-decoration: none;
  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.nav a:hover { color: var(--inkoust); }
.nav a[aria-current="page"] {
  color: var(--inkoust);
  box-shadow: inset 0 -2px 0 var(--znacka);
}

/* Podmenu služeb. Bez JavaScriptu — otevírá se přejetím myší
   i klávesovým fokusem. Na mobilu (níž) je rozbalené natrvalo. */
.ma-podmenu { position: relative; }

.podmenu {
  position: absolute; left: -1.1rem; top: 100%;
  display: none;
  min-width: 15.5rem;
  background: var(--papir);
  border: 1px solid var(--linka);
  box-shadow: 0 14px 32px rgba(36, 31, 28, 0.1);
  padding: 0.5rem 0;
  flex-direction: column; gap: 0;
  list-style: none; margin: 0;
}
.ma-podmenu:hover > .podmenu,
.ma-podmenu:focus-within > .podmenu { display: flex; }

.podmenu a {
  padding: 0.45rem 1.2rem; white-space: nowrap;
  font-size: 0.78rem;
}
.podmenu a[aria-current="page"] { box-shadow: none; color: var(--akcent); }

/* ---------- Tlačítka ---------- */
/* Hranaté, s prostrkaným textem — drží se stejné logiky jako logo. */
.tlacitko {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  background: var(--akcent); color: #fff;
  border: 1px solid var(--akcent);
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tlacitko:hover { background: var(--akcent-tm); border-color: var(--akcent-tm); color: #fff; }

.tlacitko--obtah { background: transparent; color: var(--inkoust); border-color: var(--linka-tmav); }
.tlacitko--obtah:hover { background: var(--inkoust); border-color: var(--inkoust); color: var(--papir); }

/* ---------- Úvodní blok ---------- */
/* Text vedle fotky. Fotka je na výšku, takže se nemusí roztahovat
   přes celou šířku a zůstává ostrá. */
.uvod { padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); }

.uvod-mrizka { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.uvod-text h1 { margin-bottom: 0.35em; }

.uvod-podnadpis {
  font-family: var(--pismo-nadpis);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.45;
  color: var(--inkoust-2);
  max-width: 26ch;
  margin-bottom: 2.25rem;
}

.uvod-odkazy { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }

.uvod-foto { margin: 0; }
.uvod-foto img { width: 100%; }

@media (min-width: 56rem) {
  .uvod-mrizka { grid-template-columns: 1fr 24rem; }
  .uvod-foto { justify-self: end; }
}

/* ---------- Záhlaví podstránky ---------- */
.zahlavi {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--linka);
}
.zahlavi h1 { margin-bottom: 0.3em; max-width: 30ch; }
.zahlavi-podnadpis {
  color: var(--inkoust-2); font-size: 1.12rem;
  max-width: 58ch; margin: 0;
}

/* ---------- Pásy obsahu ---------- */
.pas { padding: var(--mezera) 0; }
.pas--tlumeny { background: var(--papir-tmav); }

/* Vlasová linka nad nadpisem sekce místo rámečků kolem obsahu. */
.pas > .obal > h2 {
  max-width: 30ch;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linka-tmav);
}

.pas-uvod { max-width: 58ch; color: var(--inkoust-2); margin-bottom: 0; }
.pas > .obal > h2 + .mrizka,
.pas > .obal > .pas-uvod + .mrizka { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pas-vice { margin-top: clamp(2rem, 4vw, 3rem); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Mřížka ---------- */
.mrizka { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.mrizka--dve { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.mrizka--tri { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* ---------- Karty ---------- */
/* Bez rámečků. Obsah drží vlasová linka nahoře, která při přejetí
   zesílí firemní barvou — nic se nehýbe a nic neposkakuje. */
.karta {
  padding-top: 1.4rem;
  border-top: 1px solid var(--linka-tmav);
  transition: border-color 0.2s ease;
}
.karta:hover { border-top-color: var(--znacka); }

.karta h3 { margin-bottom: 0.45em; }
.karta h3 a { text-decoration: none; color: inherit; }
.karta:hover h3 a { color: var(--akcent); }
.karta p { color: var(--inkoust-2); }

.karta-cena {
  margin-top: 1em;
  font-family: var(--pismo-nadpis); font-size: 1.15rem; font-weight: 600;
  color: var(--inkoust);
}

.karta-vice {
  margin-top: 1.1em;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.karta-vice a { text-decoration: none; border-bottom: 1px solid var(--linka-tmav); padding-bottom: 2px; }
.karta-vice a:hover { border-bottom-color: var(--akcent); }

/* ---------- Dress code ---------- */
/* Název vlevo, popis vpravo — jako slovníkové heslo. */
.dresscode {
  display: grid;
  gap: 0.4rem 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--linka);
}
.dresscode:first-of-type { border-top-color: var(--linka-tmav); }

.dresscode h3 {
  font-family: var(--pismo-text);
  font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600;
  color: var(--akcent);
  margin: 0.2rem 0 0;
}
.dresscode p { color: var(--inkoust-2); margin: 0; }

.dresscode-poznamky {
  margin: 0.9em 0 0; padding-left: 1.1rem;
  color: var(--inkoust-2); font-size: 0.95rem;
}
.dresscode-poznamky li + li { margin-top: 0.45em; }

@media (min-width: 48rem) {
  .dresscode { grid-template-columns: 9rem 1fr; }
  .dresscode h3 { margin-top: 0.35rem; }
  /* Poznámky jsou třetí prvek mřížky, takže by samy spadly zpátky
     do úzkého sloupce s názvem. Patří pod text. */
  .dresscode-poznamky { grid-column: 2; }
}

/* Dress code není mřížka karet, ale seznam — ruší se sloupce. */
.mrizka--seznam { display: block; }

/* ---------- O mně: text a fotka ---------- */
.dvojice { display: grid; gap: clamp(2rem, 4vw, 3.75rem); align-items: start; }

@media (min-width: 60rem) {
  .dvojice { grid-template-columns: 21rem 1fr; }
  .dvojice-foto { position: sticky; top: 7rem; }
}

.citat {
  margin: 1.75rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid var(--linka-tmav);
  font-family: var(--pismo-nadpis); font-size: 1.35rem; line-height: 1.4;
  color: var(--inkoust);
}
.citat p { margin: 0; }

.dvojice-text p { max-width: 66ch; }

.kontakt-seznam {
  list-style: none; margin: 2.25rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid var(--linka-tmav);
  font-family: var(--pismo-nadpis); font-size: 1.2rem;
}
.kontakt-seznam li + li { margin-top: 0.4rem; }

/* ---------- Detail služby ---------- */
.sluzba { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }

@media (min-width: 60rem) {
  .sluzba { grid-template-columns: 1fr 18rem; }
  .sluzba-panel { position: sticky; top: 7rem; }
}

/* Číslované kroky. Čísla dělá CSS, v HTML je čistý seznam. */
.kroky { list-style: none; margin: 0; padding: 0; counter-reset: krok; }

.kroky li {
  counter-increment: krok;
  position: relative;
  padding: 0 0 1.9rem 4rem;
  color: var(--inkoust-2);
}
.kroky li::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute; left: 0; top: -0.15rem;
  font-family: var(--pismo-nadpis); font-size: 1.7rem;
  color: var(--znacka);
}
.kroky li:last-child { padding-bottom: 0; }

.sluzba-panel { padding-top: 1.5rem; border-top: 2px solid var(--inkoust); }
.sluzba-panel h2 { font-size: 1.6rem; margin-bottom: 0.6em; padding: 0; border: 0; }

.parametry { margin: 0 0 1.75rem; }
.parametry dt {
  color: var(--inkoust-2);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.parametry dd {
  margin: 0 0 0.9rem;
  font-family: var(--pismo-nadpis); font-size: 1.3rem; font-weight: 600;
}

.panel-nadpis {
  margin: 2rem 0 0.8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linka);
  font-family: var(--pismo-text);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--inkoust-2);
}
.panel-seznam { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.panel-seznam li + li { margin-top: 0.45rem; }
.panel-seznam a { text-decoration: none; color: var(--inkoust-2); }
.panel-seznam a:hover { color: var(--akcent); text-decoration: underline; }

/* ---------- Ceník ---------- */
/* Tabulka se na úzkém displeji posouvá uvnitř svého obalu,
   stránka sama vodorovně neroluje. */
.tabulka-obal { overflow-x: auto; }

.cenik { width: 100%; border-collapse: collapse; min-width: 34rem; }

.cenik th, .cenik td {
  padding: 1.25rem 1.5rem 1.25rem 0;
  text-align: left; vertical-align: baseline;
  border-bottom: 1px solid var(--linka);
}
.cenik thead th {
  font-family: var(--pismo-text); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--inkoust-2);
  border-bottom-color: var(--inkoust);
  padding-bottom: 0.85rem;
}
.cenik tbody th { font-weight: 400; font-size: 1.15rem; }
.cenik tbody th a { text-decoration: none; color: inherit; }
.cenik tbody th a:hover { color: var(--akcent); text-decoration: underline; }
.cenik tbody tr:last-child th, .cenik tbody tr:last-child td { border-bottom: 0; }
.cenik td { color: var(--inkoust-2); }
.cenik td:nth-child(2) {
  font-family: var(--pismo-nadpis); font-size: 1.3rem; font-weight: 600;
  color: var(--inkoust); white-space: nowrap;
  /* Cormorant sází číslice minuskové (různě vysoké), což je krásné
     ve větě, ale ve sloupci se ceny nezarovnají. Tady tedy verzálkové
     a stejně široké. */
  font-variant-numeric: lining-nums tabular-nums;
}

.poznamka { margin-top: 2rem; color: var(--inkoust-2); font-size: 0.95rem; max-width: 58ch; }

/* ---------- Kontakt ---------- */
/* Obal zůstává v plné šířce — je vystředěný, takže zúžením by se
   obsah odsadil a nelícoval by s nadpisem. Zužuje se až seznam. */
.kontakt-velky { max-width: 42rem; }

.kontakt-velky { list-style: none; margin: 0; padding: 0; }
.kontakt-velky li {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--linka);
  transition: border-color 0.2s ease;
}
.kontakt-velky li:first-child { border-top: 1px solid var(--linka-tmav); }
.kontakt-velky li:hover { border-bottom-color: var(--znacka); }
.kontakt-velky a {
  font-family: var(--pismo-nadpis);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  text-decoration: none; color: var(--inkoust);
}
.kontakt-velky a:hover { color: var(--akcent); }

.kontakt-popis {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--inkoust-2);
}

/* ---------- Výzva k akci ---------- */
/* Tmavý pás — jediné výrazně kontrastní místo na stránce. */
.vyzva { background: var(--inkoust); color: var(--papir); padding: var(--mezera) 0; }
/* Totéž tady — šířku drží nadpis a odstavec, ne obal. */
.vyzva h2 { color: #fff; padding: 0; border: 0; max-width: 22ch; }
.vyzva p { color: rgba(251, 249, 246, 0.78); font-size: 1.1rem; max-width: 44ch; }
.vyzva-odkazy { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.25rem; }
.vyzva .tlacitko:not(.tlacitko--obtah) { background: var(--papir); color: var(--inkoust); border-color: var(--papir); }
.vyzva .tlacitko:not(.tlacitko--obtah):hover { background: #fff; border-color: #fff; }
.vyzva .tlacitko--obtah { color: var(--papir); border-color: rgba(251, 249, 246, 0.42); }
.vyzva .tlacitko--obtah:hover { background: var(--papir); border-color: var(--papir); color: var(--inkoust); }

/* ---------- Patička ---------- */
.paticka { border-top: 1px solid var(--linka); padding: 3.25rem 0 2.5rem; }

.paticka-slogan {
  font-family: var(--pismo-nadpis); font-size: 1.35rem; line-height: 1.4;
  max-width: 34ch; margin: 0 0 1.75rem;
}

.paticka-kontakt {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 2.25rem;
  font-family: var(--pismo-nadpis); font-size: 1.15rem;
}

.paticka-copy {
  color: var(--inkoust-2); margin: 0;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Typografické jemnosti ---------- */
/* Nadpisy se lámou vyváženě, aby na posledním řádku nezůstalo
   jedno osamocené slovo. Dlouhé odstavce se dělí podle českých
   pravidel — jazyk je určený v <html lang="cs">. */
h1, h2, h3, .zahlavi-podnadpis, .pas-uvod, .paticka-slogan, .uvod-podnadpis, .citat {
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

.dvojice-text p { hyphens: auto; }

/* Odkaz na místo v téže stránce nesmí skončit pod lepkavou hlavičkou. */
:target { scroll-margin-top: 7rem; }

::selection { background: var(--znacka); color: #fff; }

/* ---------- Úzké displeje ---------- */
@media (max-width: 47.99rem) {
  .hlavicka { position: static; }

  .hlavicka-obsah { flex-direction: column; align-items: flex-start; }

  .znacka-osoba { padding-left: 0.75rem; }

  .nav { width: 100%; }

  /* Na mobilu leží menu na řádku a zalomí se. Ve sloupci zabíralo
     pět položek pod sebou zbytečně mnoho místa. */
  .nav > ul { flex-direction: row; flex-wrap: wrap; gap: 0.15rem 1.15rem; width: 100%; }
  .nav > ul > li > a { padding: 0.4rem 0; }

  /* Rozbalovací seznam služeb se na dotyku nedá otevřít přejetím
     myší. Rozbalený natrvalo ale zabíral dvě třetiny první
     obrazovky, takže nadpis stránky byl na kratších telefonech pod
     okrajem. Na mobilu se proto neukazuje — všech sedm služeb je
     vypsaných na stránce /sluzby/, kam odkaz „Služby" vede. */
  .podmenu { display: none; }

  /* Fotka v úvodu je na mobilu nad textem zbytečně vysoká. */
  .uvod-foto img { max-height: 60vh; width: auto; }
  .uvod-foto { display: flex; justify-content: center; }
}

/* ---------- Vypnuté animace ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Tisk ---------- */
@media print {
  .hlavicka, .paticka, .vyzva, .preskocit, .karta-vice,
  .panel-nadpis, .panel-seznam, .uvod-odkazy, .uvod-foto { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  .pas { padding: 1.5rem 0; }
}