/* ==========================================================================
   Fonty – hostované lokálně (ne z Google CDN)

   Variabilní woff2, subset latin + latin-ext, osa váhy 400–700.
   Jeden soubor pokryje všechny použité řezy.
   Licence obou fontů: SIL Open Font License 1.1 – viz fonty/OFL-*.txt
   ========================================================================== */

@font-face {
  font-family: "EB Garamond";
  src: url("fonty/eb-garamond.woff2") format("woff2-variations"),
       url("fonty/eb-garamond.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonty/source-sans-3.woff2") format("woff2-variations"),
       url("fonty/source-sans-3.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Pedikúra – základní styly
   Barvy: světlá bílá + "light coffee" (dva odstíny dřeva)
   Fonty: EB Garamond (nadpisy) + Source Sans 3 (text)
   ========================================================================== */

:root {
  /* Barvy – uprav podle loga, až přijde */
  --bila:        #FDFCFA;
  --bila-teplá:  #F6F1EA;
  --coffee-svetla: #D9C3A5;
  --coffee:        #B9926B;
  --coffee-tmava:  #7E5F41;   /* ztmaveno kvuli kontrastu 4.5:1 i na teple bile */
  --coffee-stred:  #A9835B;   /* ramecky a obrysy – min. 3:1 */
  --text:        #2F2823;
  --text-slaby:  #6E635A;
  --linka:       #E8DFD4;

  /* Typografie */
  --font-nadpis: "EB Garamond", Georgia, serif;
  --font-text:   "Source Sans 3", -apple-system, "Segoe UI", sans-serif;

  /* Rozměry */
  --sirka:  1180px;
  --radius: 4px;
}

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

html {
  scroll-behavior: smooth;
  /* Hlavička je sticky, bez tohohle by skok na kotvu (#obsah, #kontakt)
     přistál pod ní a začátek sekce by zůstal schovaný. */
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;   /* iOS na šířku jinak zvětšuje text sám */
}

body {
  margin: 0;
  background: var(--bila);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 18px;          /* větší základ kvůli čitelnosti */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--coffee-tmava); }

.obal {
  width: 100%;
  max-width: var(--sirka);
  margin: 0 auto;
  /* Jen vodorovné. Hero má na stejném prvku i třídu .hero-text,
     která řídí svislé odsazení. Kdyby obojí psalo zkratku `padding`,
     přebíjely by se. */
  padding-inline: 24px;
}

/* ---------- Typografie ---------- */

h1, h2, h3 {
  font-family: var(--font-nadpis);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.35rem; }

.nadpis-oko {                    /* malý popisek nad nadpisem */
  font-family: var(--font-text);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coffee-tmava);
  margin-bottom: 12px;
}

.perex { font-size: 1.1rem; color: var(--text-slaby); max-width: 62ch; }

/* ---------- Tlačítka ---------- */

.tlacitko {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.tlacitko-hlavni {
  background: var(--coffee-tmava);
  color: #fff;
}
.tlacitko-hlavni:hover { background: #664B33; transform: translateY(-1px); }

.tlacitko-vedlejsi {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--coffee-stred);
}
.tlacitko-vedlejsi:hover {
  background: var(--coffee-tmava);
  border-color: var(--coffee-tmava);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- Přístupnost ---------- */

/* viditelný focus pro klávesnici */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
iframe:focus-visible {
  outline: 3px solid var(--coffee-tmava);
  outline-offset: 3px;
  border-radius: 2px;
}
/* na tmavém pozadí musí být obrys světlý, jinak zanikne */
.hero :focus-visible,
.reference :focus-visible,
.paticka :focus-visible { outline-color: #fff; }

/* hlavní obsah po přeskočení nemá blikat obrysem při kliknutí myší */
main:focus { outline: none; }

/* skok na obsah – schovaný, dokud na něj uživatel nepřijde tabulátorem */
.preskocit {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: var(--coffee-tmava);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.preskocit:focus { top: 12px; }

/* text jen pro odečítače obrazovky */
.jen-pro-odecitac {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Hlavička ---------- */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 252, 250, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linka);
}

.hlavicka-obsah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 90px;
}

.logo {
  font-family: var(--font-nadpis);
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--text);
  line-height: 1.05;
}
.logo span {
  display: block;
  margin-top: 7px;
  font-family: var(--font-text);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-slaby);
}

.menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  text-decoration: none;
  color: var(--text);
  font-size: 1rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--coffee-tmava); }

.menu-prepinac {                  /* hamburger jen na mobilu */
  display: none;
  background: none;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 10px 14px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}


/* ---------- Parallax: pozadí se posouvá pomaleji než stránka ----------

   Skript nastavuje na sekci proměnnou --posun (v pixelech), CSS ji jen
   přeloží na posun fotky. Bez JavaScriptu, u starých prohlížečů nebo při
   zapnutém omezení pohybu se prostě nic neposouvá a web vypadá jako dřív.

   Rychlost se ladí v skript.js konstantami HERO_RYCHLOST a SEKCE_ROZSAH.
   Přesahy (inset) tady musí odpovídat: hero potřebuje nahoře o něco víc,
   než je HERO_RYCHLOST (efekt běží už od horní hrany stránky, tedy i přes
   výšku hlavičky); sekce nahoře i dole aspoň polovinu SEKCE_ROZSAH.
   Skript má navíc pojistku, která posun na velikost přesahu ořízne.     */

.je-parallax .hero-foto,
.je-parallax.reference::before {
  transform: translate3d(0, var(--posun, 0px), 0);
  will-change: transform;
}

/* Reference: fotka na pozadí potřebuje stejný přesah jako hero. */
.je-parallax.reference::before { inset: -18% 0 -18% 0; }

/* Kdo si vypnul animace v systému, nedostane ani tohle. */
@media (prefers-reduced-motion: reduce) {
  .je-parallax .hero-foto,
  .je-parallax.reference::before {
    transform: none;
    will-change: auto;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background: var(--bila-teplá);
  overflow: hidden;
}

.hero-foto {
  position: absolute;
  /* Fotka je vyšší než hero a přesahuje nahoru. Ten přesah je zásoba,
     ze které se čerpá při posunu (viz .je-parallax níž) – proto nikdy
     nevznikne prázdný pruh, ať uživatel odroluje kamkoli. */
  inset: -38% 0 0 0;
  /* Fotka se vybírá podle šířky okna, viz blok "Responzivní fotky" níž.
     Tady je jen výchozí, nejmenší varianta pro telefon.
     Fallback bez image-set() první: prohlížeč, který nezná zápis s type(),
     by jinak zůstal úplně bez fotky. */
  /* ZKOUŠKA: fotka provozovny místo stock fotky.
     Návrat k původní: smazat čtyři řádky níž a odkomentovat blok pod nimi.
     Totéž je potřeba udělat i ve dvou media dotazech na konci souboru
     a v preloadu v index.html. */
  background-image: url("obrazky/hero-studio-900.jpg");
  background-image: image-set(
      url("obrazky/hero-studio-900.webp") type("image/webp"),
      url("obrazky/hero-studio-900.jpg")  type("image/jpeg"));
  /* Původní stock fotka:
  background-image: url("obrazky/hero-900.jpg");
  background-image: image-set(
      url("obrazky/hero-900.webp") type("image/webp"),
      url("obrazky/hero-900.jpg")  type("image/jpeg"));
  */
  background-position: 64% 62%;
  background-size: cover;
  background-repeat: no-repeat;
  /* fotka je sama o sobě dost teplá – tlumíme, ne přitápíme */
  filter: saturate(0.72) sepia(0.02) contrast(1.04);
}

.hero-zavoj {                     /* závoj – ladí fotku do palety a zajistí čitelnost textu */
  position: absolute;
  inset: 0;
  background:
    /* sjednocení – neutrálnější, ať to netáhne do oranžova */
    linear-gradient(160deg, rgba(74,64,55,.26) 0%, rgba(38,32,26,.34) 100%),
    /* ztmavení zleva, kde leží text */
    linear-gradient(96deg,
      rgba(32,24,17,.86) 0%,
      rgba(32,24,17,.74) 28%,
      rgba(32,24,17,.46) 50%,
      rgba(32,24,17,.16) 72%,
      rgba(32,24,17,.04) 100%);
}

.hero-text {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 620px;
  padding-block: 90px;
}
.hero-text h1 { color: #fff; }
.hero-text p { font-size: 1.15rem; color: rgba(255,255,255,.90); }


.hero-akce { display: flex; flex-wrap: wrap; gap: 14px; }

/* světlá varianta vedlejšího tlačítka – na tmavém heru */
.hero-akce .tlacitko-vedlejsi {
  color: #fff;
  border-color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
}
.hero-akce .tlacitko-vedlejsi:hover {
  background: #fff;
  border-color: #fff;
  color: var(--text);
}

/* ---------- Sekce ---------- */

.sekce { padding: 96px 0; }
.sekce-teplá { background: var(--bila-teplá); }
.sekce-teplá .kontakt-ikona { background: var(--bila); }

.sekce-hlava { max-width: 640px; margin-bottom: 48px; }
.sekce-hlava-stred { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Karty služeb ---------- */

.mrizka-3 {
  display: grid;
  /* min() drží mřížku uvnitř i na úzkých telefonech, viz komentář
     u .mrizka-2 v prodejna.html */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
}

.karta {
  background: var(--bila);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.karta:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(140, 106, 74, .10);
}
.karta h3 { margin-bottom: 10px; }
.karta p { margin: 0; color: var(--text-slaby); font-size: 1rem; }

/* ---------- Pás se zaměřením (zarostlé nehty) ---------- */

.pas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}
.pas-foto {
  /* Poměr stran řídí sama fotka (16:9). Pevné aspect-ratio je pryč,
     jinak by se fotka ořízla na 4:3 a přišla by o kraje místnosti. */
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.pas-foto picture, .pas-foto img { display: block; width: 100%; height: auto; }

/* ---------- Ukázky práce (kazuistiky) ---------- */

.pripad {
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bila);
}
.pripad-fotky { display: grid; grid-template-columns: 1fr 1fr; }
.pripad-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
/* Podklad zůstává, prosvítá jen tam, kde fotka ještě není. */
.pripad-foto.pred { background: #A98763; }
.pripad-foto.po   { background: #C9A87F; }

.pripad-foto picture, .pripad-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Popisek Před a Po leží na fotce. Tmavý podklad kvůli kontrastu,
   fotky nohou jsou světlé a bílý text by na nich zanikl. */
.pripad-foto figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(58,45,32,.72);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.pripad-text { padding: 30px; }
.pripad-text h3 { margin-bottom: 12px; }
.pripad-text p  { font-size: 1rem; color: var(--text-slaby); }

/* ---------- Reference ---------- */

.reference {
  position: relative;
  padding: 96px 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background: #2B221A;
}
.reference::before {                /* fotka na pozadí */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("obrazky/reference-900.jpg");
  background-image: image-set(
      url("obrazky/reference-900.webp") type("image/webp"),
      url("obrazky/reference-900.jpg")  type("image/jpeg"));
  background-position: center;
  background-size: cover;
  filter: saturate(0.45) sepia(0.28);
}
.reference::after {                 /* tmavý závoj – hlavní páka na čitelnost */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgba(120,90,60,.42) 0%, rgba(30,24,18,.40) 100%),
    rgba(28,22,16,.72);
}
.reference > .obal {
  position: relative;
  z-index: 1;
  max-width: 1600px;             /* zbytek webu má 1180 – tady záměrně víc */
  padding-inline: 5vw;
}
.reference h2 { color: #fff; margin-bottom: 40px; }

.reference-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 90px;                     /* velké mezery = krajní citáty jdou k okrajům */
}
/* jeden výrok přes celou šířku (místo mřížky referencí) */
.reference-vyrok {
  max-width: 900px;
  margin: 0 auto;
}
.reference-vyrok .nadpis-oko { color: var(--coffee-svetla); }
.reference-vyrok h2 { margin-bottom: 28px; }
.reference-vyrok blockquote {
  margin: 0;
  font-family: var(--font-nadpis);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.45;
  color: rgba(255,255,255,.95);
  text-wrap: balance;
}
.reference-vyrok blockquote::before { content: "\201E"; }
.reference-vyrok blockquote::after  { content: "\201C"; }
.reference-vyrok cite {
  display: block;
  margin-top: 22px;
  font-family: var(--font-text);
  font-style: normal;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--coffee-svetla);
}
.reference-akce { margin-top: 34px; }
.reference-akce .tlacitko {
  color: #fff;
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.08);
}
.reference-akce .tlacitko:hover { background: #fff; border-color: #fff; color: var(--text); }

.uvozovky {
  font-family: var(--font-nadpis);
  font-size: 2.8rem;
  line-height: 1;
  color: var(--coffee-svetla);
  margin-bottom: 12px;
}
.reference blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255,255,255,.93);
  text-wrap: balance;
}
.reference cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-weight: 700;
  color: var(--coffee-svetla);
}

/* ---------- Loga (členství, značky) ---------- */

.loga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.logo-clenstvi {
  display: grid;
  place-items: center;
  width: 210px;
  padding: 10px;
  opacity: .85;
}
.logo-clenstvi img { max-height: 96px; width: auto; object-fit: contain; }

/* Řada značek.
   Loga mají hodně různé poměry stran, od 8,8:1 (Podopharm) po 2,2:1 (3TO).
   Kdyby dostala stejnou výšku, opticky by se rozešla. Výšky níž jsou proto
   spočítané tak, aby všechna měla přibližně stejnou plochu.
   SVG dědí barvu z .znacky (fill="currentColor"), PNG jsou už černá. */

.znacky {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 34px 52px;
  color: var(--text);
}
.znacky img, .znacky svg {
  display: block;
  width: auto;
  height: var(--v);
  opacity: .78;
}
.znacka-podopharm     { --v: 27px; }
.znacka-allpresan     { --v: 45px; }
.znacka-svorto        { --v: 38px; }
.znacka-3to           { --v: 46px; }
.znacka-peter-legwood { --v: 38px; }

@media (max-width: 600px) {
  .znacky { gap: 26px 36px; }
  .znacky img, .znacky svg { height: calc(var(--v) * 0.82); }
}

/* ---------- Dárkový poukaz ---------- */

.poukaz {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: center;
  background: var(--bila-teplá);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 50px;
}
/* Dvě podoby poukazu pod sebou. Obrázky mají mírně jiný poměr stran,
   proto se nezarovnávají na pevnou výšku, jen na stejnou šířku. */
.poukaz-nahledy {
  display: grid;
  gap: 22px;
}
.poukaz-nahled {
  margin: 0;
}
.poukaz-nahled img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--linka);
}
.poukaz-nahled figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-slaby);
}

/* ---------- Kontakt ---------- */

.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.kontakt-radek {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.kontakt-ikona {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bila-teplá);
  border: 1px solid var(--linka);
  color: var(--coffee-tmava);
}
.kontakt-ikona svg { width: 20px; height: 20px; }
.kontakt-telo { min-width: 0; padding-top: 2px; }
.kontakt-radek dt {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-slaby);
  margin-bottom: 6px;
}
.kontakt-radek dd { margin: 0; font-size: 1.15rem; }
.kontakt-radek dd a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--coffee-stred); }
.kontakt-radek dd a:hover { color: var(--coffee-tmava); }


/* ---------- Mapa: náhled, který se načte až na kliknutí ----------
   Iframe Google Maps nastavuje cookies dřív, než návštěvník cokoli odklikne.
   Tenhle mezikrok to odsune až za jeho souhlas – a cookie lišta odpadá. */

.mapa-plocha {
  /* Není absolutně poziciovaná, takže výška vychází z obsahu a nic se
     neořízne ani na úzkém sloupci. min-height drží tvar, když je obsahu málo. */
  display: grid;
  min-height: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bila-teplá);
  border: 1px solid var(--linka);
}

.mapa-nahled {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 40px 28px;
  /* náznak plánu ulic – jen dvě vrstvy čar, žádný obrázek ke stažení */
  background-color: var(--bila-teplá);
  background-image:
    linear-gradient(var(--linka) 1px, transparent 1px),
    linear-gradient(90deg, var(--linka) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-position: center;
}
.mapa-nahled .spendlik { color: var(--coffee-tmava); line-height: 0; margin-bottom: 10px; }
.mapa-nahled .spendlik svg { width: 38px; height: 38px; }
.mapa-nahled .adresa {
  font-family: var(--font-nadpis);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}
.mapa-nahled .vysvetleni {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-slaby);
  max-width: 32ch;
  margin: 6px 0 18px;
}
.mapa-nahled .tlacitko { font-size: 0.95rem; padding: 12px 24px; }
.mapa-odkazy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin: 18px 0 0;
  font-size: 0.92rem;
}

/* Načtená mapa drží pevný poměr stran, ať nikde netrčí. */
.mapa-plocha iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 380px;
  border: 0;
  display: block;
}

/* ---------- Patička ---------- */

.paticka {
  background: #2F2823;
  color: rgba(255,255,255,.75);
  padding: 60px 0 34px;
  font-size: 0.95rem;
}
.paticka-obsah {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}
.paticka h2 { color: #fff; font-size: 1.1rem; }
.paticka a { color: rgba(255,255,255,.75); text-decoration: none; }
.paticka a:hover { color: #fff; }
.paticka ul { list-style: none; margin: 0; padding: 0; }
.paticka li { margin-bottom: 8px; }

.socialni { display: flex; gap: 14px; margin-top: 16px; }
.socialni a {
  width: 44px; height: 44px;       /* velký cíl pro prst */
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .2s ease, border-color .2s ease;
}
.socialni a:hover { background: var(--coffee-tmava); border-color: var(--coffee-tmava); }
.socialni svg { width: 20px; height: 20px; fill: currentColor; }

.paticka-spodek {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 22px;
  font-size: 0.85rem;
  color: rgba(255,255,255,.68);
}

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
  .pas, .kontakt, .poukaz { grid-template-columns: 1fr; gap: 34px; }
  .poukaz { padding: 32px; }
  .sekce { padding: 70px 0; }

  .reference { padding: 64px 0; }
  .reference > .obal { padding-inline: 24px; }
  .reference-mrizka { gap: 40px; }

  .menu-prepinac { display: block; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bila);
    border-bottom: 1px solid var(--linka);
    padding: 8px 24px 20px;
  }
  .menu.otevreno { display: flex; }
  .menu li { display: block; }
  .menu a {
    /* Bez display:block zůstane odkaz inline. Svislé odsazení by se
       neprojevilo a spodní linka by se kreslila těsně pod text
       místo přes celou šířku položky. */
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--linka);
  }
  .menu li:last-child a { border-bottom: none; }
  .hlavicka-obsah { position: relative; }
}

/* ---------- Ohled na uživatele, kteří nechtějí animace ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Patička: spodní řádek + podpis autora ---------- */

.paticka-radek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.paticka-radek .autor {
  color: rgba(255,255,255,.72);
  letter-spacing: 0.04em;
}
.paticka-radek .autor a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--coffee);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.paticka-radek .autor a:hover { color: var(--coffee-svetla); border-color: var(--coffee-svetla); }

/* ---------- Karty produktů s fotkou (prodejna) ---------- */

.karta-foto {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.karta-foto .obrazek {
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, #E6D6C0, #C9A87F);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.9);
  font-size: 0.82rem;
  text-align: center;
  padding: 16px;
}
.karta-foto .telo { padding: 28px 26px; }
.karta-foto h3 { margin-bottom: 10px; }
.karta-foto p { margin: 0; color: var(--text-slaby); font-size: 1rem; }


/* ---------- Stránka 404 ---------- */

.chyba {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 90px 0;
}
.chyba .cislo {
  font-family: var(--font-nadpis);
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  color: var(--coffee-svetla);
  margin-bottom: 10px;
}
.chyba .perex { margin: 0 auto 34px; }
.chyba-odkazy {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Otevírací doba s více řádky – oddělit dny a zvýraznit, kdy je zavřeno. */
.doba-mezera { display: inline-block; margin-top: 10px; }
.doba-zavreno {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--text-slaby);
}


/* ==========================================================================
   Tablet a mobil, dolaďovací vrstva

   Hlavní zlom je 900 px (menu do hamburgeru, dvousloupce na jeden).
   Tady jsou dorovnané věci, na které jeden zlom nestačí.
   ========================================================================== */

/* ---------- Tablet na šířku, 901 až 1100 px ----------
   Dvousloupcové pásy tu ještě drží, ale mezera 60 px z desktopu ukrajuje
   z obsahu víc, než je zdrávo. */
@media (min-width: 901px) and (max-width: 1100px) {
  .pas { gap: 40px; }
  .kontakt { gap: 36px; }
  .sekce { padding: 80px 0; }
  .menu { gap: 20px; }
}

/* ---------- Do 900 px ---------- */
@media (max-width: 900px) {
  /* Parallax na dotykových zařízeních pryč. Mobilní prohlížeče při rolování
     schovávají adresní řádek, mění výšku okna a fotka kvůli tomu poskakuje.
     Bez přesahu má navíc fotka lepší výřez a nemusí se překreslovat tolik. */
  .je-parallax .hero-foto,
  .je-parallax.reference::before { transform: none; will-change: auto; }
  .hero-foto { inset: 0; }
  .reference::before { inset: 0; }

  .hlavicka-obsah { min-height: 72px; }
  html { scroll-padding-top: 86px; }

  /* Rozbalené menu se na telefonu na šířku nevešlo celé a nedalo se dorolovat. */
  .menu.otevreno {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .hero { min-height: 0; }
  .hero-text { padding-block: 64px; }
}

/* ---------- Telefon, do 600 px ---------- */
@media (max-width: 600px) {
  .sekce { padding: 56px 0; }
  .sekce-hlava { margin-bottom: 32px; }
  .hero-text { padding-block: 52px; }
  .hero-text p { font-size: 1.05rem; }

  /* Tlačítka přes celou šířku. Na úzkém displeji se dvě vedle sebe stejně
     nevejdou a půlka řádku zůstane prázdná. */
  .hero-akce, .kontakt-akce, .chyba-odkazy { flex-direction: column; align-items: stretch; }
  .hero-akce .tlacitko, .kontakt-akce .tlacitko, .chyba-odkazy .tlacitko { text-align: center; }

  .karta { padding: 26px 22px; }
  .poukaz { padding: 26px 22px; }
  .mapa-plocha, .mapa-plocha iframe { min-height: 300px; }

  /* Odkazy v patičce potřebují na prst větší cíl než jen výšku řádku. */
  .paticka li { margin-bottom: 2px; }
  .paticka li a { display: inline-block; padding: 9px 0; }
  .mapa-odkazy { gap: 4px 18px; }
  .mapa-odkazy a { display: inline-block; padding: 8px 0; }
}

/* ---------- Úzký telefon, do 480 px ---------- */
@media (max-width: 480px) {
  .obal { padding-inline: 18px; }
  .reference > .obal { padding-inline: 18px; }
}


/* ==========================================================================
   Responzivní fotky na pozadí

   Hero i sekce s výrokem jsou CSS pozadí, ne <img>, takže se na ně nedá
   pověsit srcset. Výběr proto řídí dotazy na šířku okna.

   Tři velikosti: 900 px pro telefon, 1400 px pro tablet a menší notebook,
   1920 px pro velké obrazovky. Výchozí je ta nejmenší, aby telefon
   nestahoval nic navíc, když se na širší pravidlo vůbec nedostane.

   Poznámka k jemnosti: na telefonu s trojnásobnou hustotou bodů je 900px
   fotka lehce změkčená. U fotky přes celou plochu se to nepozná a stojí to
   za tu úsporu, u ostrého motivu (logo, text) by to nešlo.

   Když přibude nová velikost, patří sem i do preloadu v index.html.
   ========================================================================== */

@media (min-width: 901px) {
  .hero-foto {
    /* ZKOUŠKA, viz poznámka u .hero-foto výš. */
    background-image: url("obrazky/hero-studio-1400.jpg");
    background-image: image-set(
        url("obrazky/hero-studio-1400.webp") type("image/webp"),
        url("obrazky/hero-studio-1400.jpg")  type("image/jpeg"));
    /* Původní stock fotka:
    background-image: url("obrazky/hero-1400.jpg");
    background-image: image-set(
        url("obrazky/hero-1400.webp") type("image/webp"),
        url("obrazky/hero-1400.jpg")  type("image/jpeg"));
    */
  }
  .reference::before {
    background-image: url("obrazky/reference-1400.jpg");
    background-image: image-set(
        url("obrazky/reference-1400.webp") type("image/webp"),
        url("obrazky/reference-1400.jpg")  type("image/jpeg"));
  }
}

@media (min-width: 1500px) {
  .hero-foto {
    /* ZKOUŠKA, viz poznámka u .hero-foto výš. */
    background-image: url("obrazky/hero-studio.jpg");
    background-image: image-set(
        url("obrazky/hero-studio.webp") type("image/webp"),
        url("obrazky/hero-studio.jpg")  type("image/jpeg"));
    /* Původní stock fotka:
    background-image: url("obrazky/hero.jpg");
    background-image: image-set(
        url("obrazky/hero.webp") type("image/webp"),
        url("obrazky/hero.jpg")  type("image/jpeg"));
    */
  }
  .reference::before {
    background-image: url("obrazky/reference.jpg");
    background-image: image-set(
        url("obrazky/reference.webp") type("image/webp"),
        url("obrazky/reference.jpg")  type("image/jpeg"));
  }
}


/* ---------- Náhled ukázky na úvodce jako odkaz ---------- */

.pripad-odkaz {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pripad-odkaz:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(58,45,32,.12); }
.pripad-odkaz:focus-visible { outline: 3px solid var(--coffee-tmava); outline-offset: 3px; }
.pripad-odkaz h3 { transition: color .2s ease; }
.pripad-odkaz:hover h3 { color: var(--coffee-tmava); }

@media (prefers-reduced-motion: reduce) {
  .pripad-odkaz, .pripad-odkaz:hover { transform: none; transition: none; }
}


/* ---------- Fotky provozovny ----------
   Každá fotka má vlastní poměr stran, proto stojí samostatně a nikdy
   nejsou vedle sebe v mřížce. Poměry 16:9, 2:1 a 3:4 by se v jednom
   řádku nesrovnaly a musela by se jedna z nich ořezat na nesmysl. */

.foto-pas {
  border-radius: var(--radius);
  overflow: hidden;
  /* Bez vlastního pozadí. Kdyby ho měl a mřížka ho protáhla, svítila by
     pod fotkou prázdná barevná plocha. */
}
.foto-pas img { display: block; width: 100%; height: auto; }
.foto-popisek {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--text-slaby);
  text-align: center;
}


/* Fotka provozovny a mapa nad sebou v pravém sloupci Kontaktu.
   align-self: start brání tomu, aby je mřížka natáhla na výšku
   levého sloupce s adresou a otevírací dobou. */
.kontakt-vizual { align-self: start; }

/* ---------- Zvětšená fotka (lightbox) ---------- */

/* Obecný obal klikatelné fotky. Stránka Ukázky práce si ho přebíjí
   absolutním umístěním, protože tam fotka sedí v dlaždici s aspect-ratio. */
.foto-zvetsit {
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius);
}
.foto-zvetsit:focus-visible {
  outline: 3px solid var(--coffee-tmava);
  outline-offset: 3px;
}


.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(35, 28, 22, .94);
}
.lightbox-ramec {
  max-width: min(900px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox-ramec img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
}
.lightbox-popisek {
  margin: 0;
  max-width: 60ch;
  text-align: center;
  color: rgba(255, 255, 255, .92);
  font-size: 0.95rem;
}
/* Zavírací tlačítko má velkou klikací plochu kvůli starším klientkám. */
.lightbox-zavrit {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 52px;
  height: 52px;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  cursor: pointer;
}
.lightbox-zavrit:hover { background: rgba(0, 0, 0, .55); }
.lightbox-zavrit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }