/* ==========================================================================
   Valova chaloupka
   Vizuál podle předlohy (pergamenová paleta, garamondovský serif na nadpisy,
   Inter na text, Marck Script jako ozdobný akcent).

   Předloha stála na Bootstrapu z CDN. Tady je vlastní CSS bez frameworku:
   web je malý, z Bootstrapu by se využila desetina a načítání cizího CDN
   je zbytečná závislost i brzda. Písma se hostují lokálně ze stejného důvodu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Písma
   -------------------------------------------------------------------------- */

/* Nadpisové písmo je EB Garamond, ne Cormorant Garamond z vizuální předlohy.
   Důvod je věcný, ne estetický: celá rodina Cormorant (Garamond, Cormorant,
   Infant) sází českou diakritiku rozbitě, háčky a čárky se odlepí od písmene
   a odskočí doleva a nahoru. Ověřeno na CDN i na lokálních souborech, není to
   chyba hostování. Na webu, který je celý česky a jmenuje se „Valova
   chaloupka", to nejde použít. EB Garamond je táž garamondovská linie,
   vypadá skoro stejně a češtinu sází správně. */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/css/pisma/eb-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: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/css/pisma/eb-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;
}

/* Kurzíva se používá v citátech, bez vlastního řezu by ji prohlížeč
   nakláněl strojově a garamondovská kurzíva vypadá úplně jinak. */

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/css/pisma/eb-garamond-kurziva-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: 'EB Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/css/pisma/eb-garamond-kurziva-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/css/pisma/inter-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: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/css/pisma/inter-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;
}

@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/css/pisma/marck-script-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: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/css/pisma/marck-script-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;
}

/* --------------------------------------------------------------------------
   Základ
   -------------------------------------------------------------------------- */

:root {
  --bg: #f7f4ec;
  --bg-soft: #f1ede3;
  --bg-svetla: #faf8f2;
  --text: #27251f;
  --muted: #777267;
  --green: #4c5640;
  --green-tmava: #3b442f;
  --line: #d9d2c5;
  --gold: #9d8964;
  --bila: #ffffff;
  --chyba: #8c3a2e;
  --uspech: #4c5640;

  --serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --script: 'Marck Script', 'Snell Roundhand', cursive;

  --obal: 1400px;
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.025em;
  margin: 0 0 .5em;
  line-height: 1.05;
}

h1 { font-size: clamp(42px, 5.5vw, 76px); }
h2 { font-size: clamp(32px, 3.6vw, 52px); }
h3 { font-size: clamp(23px, 2vw, 31px); line-height: 1.15; }
h4 { font-size: 20px; line-height: 1.25; }

p { margin: 0 0 1.1em; }

.obal {
  width: min(var(--obal), calc(100% - 100px));
  margin: 0 auto;
}

.sekce { padding: 110px 0; }
.sekce-uzka { padding: 70px 0; }
.sekce-svetla { background: var(--bg-svetla); }
.sekce-tlumena { background: var(--bg-soft); }

.uzky { max-width: 760px; }
.stredem { margin-left: auto; margin-right: auto; }

.serif { font-family: var(--serif); }
.script { font-family: var(--script); font-weight: 400; }

.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--bila);
  padding: 12px 18px;
  z-index: 999;
}
.preskocit:focus { left: 0; }

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

/* Popisek nad nadpisem sekce */
.stitek {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 500;
}

.perex {
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}

.poznamka {
  font-size: 14px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Tlačítka a odkazy
   -------------------------------------------------------------------------- */

.tlacitko {
  display: inline-block;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  padding: 16px 28px;
  background: var(--green);
  color: var(--bila);
  border: 1px solid var(--green);
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.tlacitko:hover,
.tlacitko:focus-visible { background: var(--green-tmava); border-color: var(--green-tmava); }

.tlacitko-obrys {
  background: transparent;
  color: var(--text);
  border-color: #969082;
}

.tlacitko-obrys:hover,
.tlacitko-obrys:focus-visible { background: var(--green); color: var(--bila); border-color: var(--green); }

.tlacitka {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 0;
}

/* Podtržený textový odkaz („Poznat náš příběh →“) */
.odkaz-sipka {
  display: inline-block;
  font-family: var(--serif);
  font-size: 18px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: opacity .2s ease;
}
.odkaz-sipka:hover { opacity: .65; }

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

.pas-udaje {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.pas-udaje .obal {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 38px;
  flex-wrap: wrap;
}

.pas-udaje a { text-decoration: none; }
.pas-udaje a:hover { color: var(--text); }
.pas-udaje .vpravo { margin-left: auto; }

.hlava {
  background: rgba(247, 244, 236, .98);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.hlava-radek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
}

.logo {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

.logo small {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: .3em;
  color: var(--muted);
  text-align: center;
  text-transform: none;
}

.hlava ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hlava ul a {
  position: relative;
  display: block;
  padding: 8px 12px;
  font-family: var(--serif);
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
}

.hlava ul a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transition: transform .25s ease;
}

.hlava ul a:hover::after,
.hlava ul a[aria-current]::after { transform: scaleX(1); }

.hlava-akce {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.tlacitko-hlava {
  border: 1px solid #969082;
  padding: 12px 20px;
  font-family: var(--serif);
  font-size: 17px;
  background: transparent;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.tlacitko-hlava:hover,
.tlacitko-hlava:focus-visible { background: var(--green); color: var(--bila); border-color: var(--green); }

/* Výzva v rozbaleném menu je jen pro telefon, nad 640 px je tlačítko
   v hlavičce a dvakrát tam být nemá. */
.menu-vyzva { display: none; }

@media (max-width: 640px) {
  .menu-vyzva { display: block; }
}

.menu-prepinac {
  display: none;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  padding: 9px 15px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero na úvodní stránce
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 690px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg,
      rgba(19, 22, 15, .74) 0%,
      rgba(19, 22, 15, .46) 35%,
      rgba(19, 22, 15, .10) 70%,
      rgba(19, 22, 15, 0) 100%),
    var(--green) center 70% / cover no-repeat;
  /* Svislý výřez je posunutý nahoru, ne na střed. Hlavní fotka je snímek
     z mobilu na výšku a při `cover` na širokém pruhu by se ze středu vzala
     jen zeď pod okny. Takhle se do záběru vejde i střecha a okna. */
}

.hero-obsah {
  max-width: 660px;
  color: var(--bila);
  padding: 90px 0;
}

.hero-nadpis-mensi {
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(58px, 8vw, 125px);
  line-height: .8;
  font-weight: 500;
  letter-spacing: -.04em;
  margin: 0;
  color: var(--bila);
}

.hero-cara {
  width: 62px;
  height: 1px;
  background: var(--bila);
  margin: 38px 0 23px;
}

.hero-podnadpis {
  font-family: var(--serif);
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.15;
  margin-bottom: 34px;
}

.hero .tlacitka { margin-top: 0; }
.hero .tlacitko-obrys { color: var(--bila); border-color: rgba(255,255,255,.75); }
.hero .tlacitko-obrys:hover { background: var(--bila); color: var(--text); border-color: var(--bila); }

/* Ručně psaná poznámka v pravém horním rohu hero sekce */
.hero-pripis {
  position: absolute;
  right: 7%;
  top: 70px;
  color: rgba(255, 255, 255, .72);
  font-family: var(--script);
  font-size: 30px;
  line-height: 1.15;
  transform: rotate(-5deg);
}

.hero-pripis::after {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  background: rgba(255, 255, 255, .65);
  margin-top: 17px;
}

/* --------------------------------------------------------------------------
   Záhlaví vnitřních stránek
   -------------------------------------------------------------------------- */

.zahlavi {
  padding: 60px 0 48px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.zahlavi h1 { margin-bottom: .3em; }

.drobky {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
}

.drobky a { text-decoration: none; }
.drobky a:hover { text-decoration: underline; }
.drobky .oddelovac { margin: 0 8px; }

.koncept {
  display: inline-block;
  margin-top: 12px;
  background: var(--gold);
  color: var(--bila);
  font-size: 13px;
  padding: 6px 14px;
}

/* --------------------------------------------------------------------------
   Mřížky a karty
   -------------------------------------------------------------------------- */

.mriz {
  display: grid;
  gap: 46px;
}

.mriz-2 { grid-template-columns: repeat(2, 1fr); }
.mriz-3 { grid-template-columns: repeat(3, 1fr); }
.mriz-4 { grid-template-columns: repeat(4, 1fr); gap: 30px; }

.dlazdice img {
  width: 100%;
  aspect-ratio: 1.38;
  object-fit: cover;
}

.dlazdice h3 { margin: 22px 0 8px; }

.dlazdice p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 34ch;
}

.deska {
  background: var(--bg-svetla);
  border: 1px solid var(--line);
  padding: 38px 40px;
}

.deska-tmava {
  background: var(--green);
  border-color: var(--green);
  color: var(--bila);
}

.deska-tmava h2, .deska-tmava h3 { color: var(--bila); }
.deska-tmava .perex { color: rgba(255,255,255,.85); }

/* --------------------------------------------------------------------------
   Vstupné
   Patří nahoru a viditelně: v celém regionu ho skoro nikdo nezveřejňuje,
   je to nejlevnější výhoda, jakou tenhle web má.
   -------------------------------------------------------------------------- */

.vstupne {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--bg-svetla);
}

.vstupne-polozka {
  flex: 1 1 190px;
  padding: 30px 34px;
  border-right: 1px solid var(--line);
}

.vstupne-polozka:last-child { border-right: 0; }

.vstupne-castka {
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
  /* Částka se nikdy nesmí zlomit mezi číslo a měnu: „100 / Kč" na dvou
     řádcích vypadá jako chyba zrovna u údaje, kvůli kterému sem lidé chodí. */
  white-space: nowrap;
}

.vstupne-popis {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.vstupne-doplnek {
  flex: 2 1 280px;
  padding: 30px 34px;
  background: var(--bg-soft);
  font-size: 15px;
  color: var(--muted);
  display: flex;
  align-items: center;
  /* Odstavce vedle sebe jen tam, kde je na to místo. Na telefonu se odkaz
     mačkal do úzkého sloupce vpravo a lámal se na čtyři řádky. */
  flex-wrap: wrap;
  gap: 6px 24px;
}

.vstupne-doplnek p { margin: 0; }

@media (max-width: 640px) {
  .vstupne-doplnek { display: block; }
  .vstupne-doplnek p + p { margin-top: 16px; }
  .vstupne-doplnek a { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Citát a ozdobné prvky
   -------------------------------------------------------------------------- */

.citat {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(27px, 3vw, 45px);
  line-height: 1.15;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.citat-cara {
  width: 50px;
  height: 1px;
  background: var(--gold);
  margin: 34px auto 0;
}

/* Osobní citát v textovém sloupci (slova rodiny na stránce O chaloupce).
   Velký centrovaný `.citat` je stavěný na jednu větu přes celou sekci, tohle
   je delší a stojí uvnitř textu, takže menší, zarovnaný doleva a s pruhem. */

.citat-osobni {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
  max-width: 60ch;
  border-left: 2px solid var(--gold);
  padding-left: 18px;
}

.citat-podpis {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}

.pripis {
  font-family: var(--script);
  color: #8d877c;
  font-size: 22px;
  text-align: center;
  transform: rotate(-4deg);
}

.ozdoba { opacity: .6; }
.ozdoba-krajina { width: 100%; max-width: 430px; }
.ozdoba-rostlina { max-width: 180px; margin-left: auto; }

/* Nakloněná fotografie v rámečku, jako fotka vlepená do alba */
.foto-stara {
  position: relative;
  padding: 14px;
  background: #ebe5d9;
  transform: rotate(-2deg);
}

.foto-stara img {
  aspect-ratio: 1.45;
  object-fit: cover;
  filter: grayscale(100%);
}

.foto-popisek {
  position: absolute;
  right: 15px;
  bottom: -38px;
  font-family: var(--script);
  font-size: 18px;
  color: var(--muted);
  transform: rotate(2deg);
}

/* --------------------------------------------------------------------------
   Dvousloupcový blok text + obrázek
   -------------------------------------------------------------------------- */

.dvojice {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 70px;
  align-items: center;
}

.dvojice-obraceně { grid-template-columns: 6fr 5fr; }

.nezalomit { white-space: nowrap; }

/* Vložené video (O chaloupce), drží poměr 16 : 9 na každé šířce. */
/* min-width: 0, jinak si sloupec mřížky drží šířku iframu (560 px) a na
   mobilu roztáhne celou stránku do strany. */
.video { min-width: 0; }

.video iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--green);
}

.pas-obrazek {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
  background: var(--bg-soft);
  /* Linka nahoře i dole je pojistka proti splynutí. Pruh má stejný podklad
     jako `.sekce-tlumena`, takže když jde jedno hned za druhým, není bez ní
     vidět, kde jedna sekce končí a druhá začíná. */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pas-obrazek-foto {
  min-height: 520px;
  background: var(--green) center center / cover no-repeat;
}

.pas-obrazek-text {
  padding: 90px 9%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Časová osa (historie domu)
   -------------------------------------------------------------------------- */

.osa {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.osa li {
  position: relative;
  padding: 0 0 34px 34px;
}

.osa li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

.osa-rok {
  font-family: var(--serif);
  font-size: 27px;
  display: block;
  line-height: 1.2;
}

.osa p { margin: 4px 0 0; color: var(--muted); }

/* --------------------------------------------------------------------------
   Seznam otázek a odpovědí (stránka pro školy)
   -------------------------------------------------------------------------- */

.fakta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

.fakta > div {
  padding: 26px 30px 26px 0;
  border-bottom: 1px solid var(--line);
}

.fakta dt,
.fakta h3 {
  font-family: var(--serif);
  font-size: 21px;
  margin: 0 0 6px;
}

.fakta p { margin: 0; color: var(--muted); font-size: 15px; }

/* --------------------------------------------------------------------------
   Aktuality
   -------------------------------------------------------------------------- */

.aktualita-karta {
  display: block;
  text-decoration: none;
}

.aktualita-karta img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
}

.aktualita-bezfotky {
  width: 100%;
  aspect-ratio: 1.5;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--script);
  font-size: 26px;
  color: var(--gold);
}

.aktualita-datum {
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 20px 0 8px;
}

.aktualita-karta h3 { margin: 0 0 10px; }
.aktualita-karta p { color: var(--muted); font-size: 15px; margin: 0; }
.aktualita-karta:hover h3 { color: var(--green); }

.clanek-telo {
  max-width: 720px;
  font-size: 17px;
}

.clanek-telo h2 { font-size: 34px; margin-top: 1.6em; }
.clanek-telo h3 { font-size: 25px; margin-top: 1.5em; }
.clanek-telo img { margin: 34px 0; }

.clanek-telo blockquote {
  margin: 34px 0;
  padding-left: 26px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  line-height: 1.35;
  color: var(--text);
}

.clanek-uvodni-foto {
  width: 100%;
  aspect-ratio: 1.9;
  object-fit: cover;
  margin-bottom: 44px;
}

/* --------------------------------------------------------------------------
   Fotogalerie
   -------------------------------------------------------------------------- */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.galerie figure { margin: 0; }

.galerie img {
  width: 100%;
  aspect-ratio: 1.33;
  object-fit: cover;
}

.galerie figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}

/* Dlaždice je tlačítko, ne jen obrázek: fotka se dá otevřít i klávesnicí
   a odečítač obrazovky ohlásí, že se s ní dá něco dělat. Vzhled zůstává
   stejný jako u prostého obrázku. */
.galerie-otevrit {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}

.galerie-otevrit img { display: block; transition: opacity .2s ease; }
.galerie-otevrit:hover img { opacity: .86; }
.galerie-otevrit:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 17, 12, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 70px;
}

/* Skript vrstvu i šipky skrývá atributem `hidden`. Ten by jinak přebilo
   `display: flex` výš a fotka by nešla zavřít: kód by ji zavřel, ale na
   obrazovce by zůstala. */
.lightbox[hidden],
.lightbox [hidden] { display: none; }

/* Pod otevřenou vrstvou se stránka nesmí posouvat, jinak při zavření skončí
   člověk jinde, než kde byl. */
body.lightbox-otevreny { overflow: hidden; }

.lightbox-ramec {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox-obrazek {
  max-width: 100%;
  /* Popisek a odsazení si musí nechat místo, jinak by vysoká fotka vytlačila
     text pod okraj obrazovky. */
  max-height: calc(100vh - 150px);
  object-fit: contain;
  background: var(--bg-soft);
}

.lightbox-popisek {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  text-align: center;
  max-width: 700px;
}

.lightbox-zavrit,
.lightbox-sip {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  border-radius: 2px;
  transition: background .15s ease;
}

.lightbox-zavrit:hover,
.lightbox-sip:hover { background: rgba(255, 255, 255, .22); }

.lightbox-zavrit:focus-visible,
.lightbox-sip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lightbox-zavrit {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 30px;
}

.lightbox-sip {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 72px;
  font-size: 34px;
}

.lightbox-zpet { left: 12px; }
.lightbox-vpred { right: 12px; }

.lightbox-pocitadlo {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  letter-spacing: .18em;
}

@media (max-width: 767px) {
  /* Na úzké obrazovce by šipky přes fotku překážely, listuje se švihnutím. */
  .lightbox { padding: 60px 14px 70px; }
  .lightbox-sip { display: none; }
  .lightbox-obrazek { max-height: calc(100vh - 190px); }
}

/* --------------------------------------------------------------------------
   Psali o nás
   -------------------------------------------------------------------------- */

.odkazy-clanky {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.odkazy-clanky li {
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}

.odkazy-clanky .zdroj {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}

.odkazy-clanky h3 { margin: 0 0 6px; font-size: 25px; }
.odkazy-clanky h3 a { text-decoration: none; }
.odkazy-clanky h3 a:hover { color: var(--green); text-decoration: underline; }
.odkazy-clanky p { margin: 0; color: var(--muted); font-size: 15px; }

/* --------------------------------------------------------------------------
   Formuláře
   -------------------------------------------------------------------------- */

.formular { max-width: 760px; margin-left: auto; margin-right: auto; }

.pole { margin-bottom: 22px; }

.pole label,
.legenda {
  display: block;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.pole input[type=text],
.pole input[type=email],
.pole input[type=tel],
.pole input[type=number],
.pole input[type=password],
.pole select,
.pole textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--text);
  background: var(--bila);
  border: 1px solid var(--line);
  padding: 13px 15px;
}

.pole textarea { min-height: 130px; resize: vertical; }

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 86, 64, .12);
}

.pole .napoveda {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
  text-transform: none;
  letter-spacing: 0;
}

.pole-dvojice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

fieldset {
  border: 1px solid var(--line);
  padding: 28px 30px 8px;
  margin: 0 0 26px;
  background: var(--bg-svetla);
}

legend {
  font-family: var(--serif);
  font-size: 23px;
  padding: 0 10px;
}

/* Přepínač rodina / škola */
.prepinac {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: 30px;
  background: var(--bila);
}

.prepinac label {
  flex: 1;
  margin: 0;
  padding: 18px 20px;
  text-align: center;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  border-right: 1px solid var(--line);
  transition: background .2s ease, color .2s ease;
}

.prepinac label:last-child { border-right: 0; }
.prepinac input { position: absolute; opacity: 0; pointer-events: none; }
.prepinac input:checked + span { color: var(--bila); }
.prepinac label:has(input:checked) { background: var(--green); color: var(--bila); }
.prepinac label:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: -2px; }

.prepinac small {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  margin-top: 3px;
}

.prepinac label:has(input:checked) small { color: rgba(255,255,255,.8); }

/* Přepínání částí formuláře podle typu (rodina / škola).
   Bez JavaScriptu, čistě v CSS. Výchozí stav je „obojí vidět“: prohlížeč,
   který :has() neumí, tak ukáže celý formulář a nic se nerozbije. Server si
   stejně validuje jen ta pole, která k vybranému typu patří. */

@supports selector(:has(*)) {
  .formular:has(#typ-rodina:checked) .skupina-skola { display: none; }
  .formular:has(#typ-skola:checked) .skupina-rodina { display: none; }
}

/* Past na roboty. Musí zůstat ve stránce a být dostupná pro robota, ale
   neviditelná a nedosažitelná pro člověka i pro odečítač obrazovky. */
.past {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hlaska {
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: var(--bg-svetla);
  margin-bottom: 30px;
}

.hlaska-chyba { border-color: var(--chyba); color: var(--chyba); background: #fbf3f1; }
.hlaska-uspech { border-color: var(--green); background: #f1f3ec; }
.hlaska p:last-child { margin-bottom: 0; }

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

.kontakt-radek {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--serif);
  font-size: 22px;
  flex-wrap: wrap;
}

.kontakt-radek a { text-decoration: none; }
.kontakt-radek a:hover { text-decoration: underline; }

.kontakt-oddelovac {
  width: 1px;
  height: 30px;
  background: var(--line);
}

.mapa {
  width: 100%;
  aspect-ratio: 1.9;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

/* --------------------------------------------------------------------------
   Obsah stránek z administrace
   -------------------------------------------------------------------------- */

.text-obsah { max-width: 760px; font-size: 17px; }
.text-obsah h2 { font-size: 34px; margin-top: 1.6em; }
.text-obsah h3 { font-size: 25px; margin-top: 1.5em; }
.text-obsah ul, .text-obsah ol { padding-left: 22px; }
.text-obsah li { margin-bottom: .5em; }

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

.paticka {
  padding: 70px 0 32px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.paticka-mriz {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 50px;
}

.paticka-logo {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
}

.paticka-misto {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

.paticka h2 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  font-weight: 500;
  letter-spacing: .28em;
}

.paticka ul { list-style: none; margin: 0; padding: 0; }
.paticka li { margin-bottom: 9px; }

.paticka-mriz a {
  font-family: var(--serif);
  font-size: 17px;
  text-decoration: none;
}

.paticka-mriz a:hover { text-decoration: underline; }

.paticka-text { color: var(--muted); font-size: 14px; max-width: 34ch; margin-top: 18px; }

.paticka-partneri {
  margin-top: 55px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.paticka-partneri ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 44px;
}

.paticka-partneri li { margin: 0; }

.paticka-partneri a {
  display: block;
  opacity: .85;
  transition: opacity .2s;
}

.paticka-partneri a:hover,
.paticka-partneri a:focus-visible { opacity: 1; }

.paticka-partneri img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
}

.paticka-spodek {
  margin-top: 55px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: #9a9489;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Lišta přihlášeného správce
   -------------------------------------------------------------------------- */

.admin-lista {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: var(--text);
  color: #e8e3d8;
  font-size: 13px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.admin-lista a { color: var(--bila); }

/* --------------------------------------------------------------------------
   Responzivita
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .obal { width: min(100% - 60px, 1100px); }
  .hlava ul a { padding-left: 8px; padding-right: 8px; font-size: 16px; }
  .tlacitko-hlava { padding: 10px 14px; }
  .dvojice, .dvojice-obraceně { gap: 46px; }
}

@media (max-width: 991px) {
  .sekce { padding: 78px 0; }

  .hlava-radek { min-height: 72px; flex-wrap: wrap; }
  /* Na úzké obrazovce se hlavička zalomí. Menu patří vlevo pod logo,
     výzva k domluvení termínu vpravo: prst k ní má blíž a pořád je vidět. */
  .menu-prepinac { display: inline-flex; order: 2; }
  .hlava-akce { order: 3; margin-left: auto; }

  /* Na telefonu zůstává v hlavičce jen logo a ikona menu. „Domluvit termín“
     odtud mizí: hlavička se kvůli němu lámala na tři řádky a výzva k domluvení
     termínu je na každé stránce několikrát níž, takže se o ni nikdo nepřipraví.
     Menu se zmenší na samotnou ikonu, popisek nese aria-label. */
  @media (max-width: 640px) {
    .hlava-akce { display: none; }
    .menu-popisek { display: none; }
    /* Čtverec 46x46: pod 44 px se do ikony na telefonu špatně trefuje.
       Samotná ikona má 12 px na výšku, zbytek je odsazení. */
    .menu-prepinac { margin-left: auto; width: 46px; height: 46px; padding: 0; justify-content: center; }
    .menu-vyzva { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
    .menu-vyzva a { color: var(--green); font-weight: 500; }
  }

  .hlava ul {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line);
    padding: 8px 0 14px;
  }

  .hlava ul.otevrene { display: flex; }
  .hlava ul a { padding: 12px 0; font-size: 19px; }
  .hlava ul a::after { display: none; }

  .hero, .hero-obsah { min-height: 620px; }
  .hero-pripis { display: none; }

  .mriz-3, .mriz-2 { grid-template-columns: 1fr; gap: 50px; }
  .mriz-4 { grid-template-columns: repeat(2, 1fr); }
  .dvojice, .dvojice-obraceně { grid-template-columns: 1fr; }
  .fakta { grid-template-columns: 1fr; }
  .fakta > div { padding-right: 0; }

  .pas-obrazek { grid-template-columns: 1fr; }
  .pas-obrazek-foto { min-height: 380px; }
  .pas-obrazek-text { padding: 70px 40px; }

  .ozdoba-krajina { margin: 0 auto 40px; }
  .ozdoba-rostlina { margin: 40px auto 0; }

  .paticka-mriz { grid-template-columns: 1fr 1fr; gap: 40px; }
  .paticka-firma { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .obal { width: calc(100% - 40px); }

  body { font-size: 15px; }
  .sekce { padding: 62px 0; }
  .sekce-uzka { padding: 48px 0; }

  .logo { font-size: 20px; }
  .logo small { font-size: 6px; }
  /* Na telefonu se lišta lámala na dva řádky a text spadl na 11 px. Adresa
     odsud mizí: je v patičce, na Kontaktu i ve strukturovaných datech a na
     vrcholu telefonu nikomu nepomůže. Telefon a e-mail zůstávají, protože
     se na ně dá rovnou ťuknout, a vejdou se na jeden řádek i na 320 px. */
  .pas-udaje .obal {
    gap: 10px;
    font-size: 12px;
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: 40px;
  }
  .pas-udaje .vpravo { display: none; }
  .pas-udaje a { white-space: nowrap; }

  .hero, .hero-obsah { min-height: 560px; }
  .hero-obsah { padding: 60px 0; }

  .zahlavi { padding: 42px 0 34px; }

  .deska { padding: 28px 24px; }

  .vstupne-polozka { flex-basis: 50%; padding: 24px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .vstupne-castka { font-size: 34px; }
  .vstupne-doplnek { flex-basis: 100%; padding: 24px 20px; }

  .mriz-4 { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

  .pole-dvojice { grid-template-columns: 1fr; gap: 0; }
  .prepinac { flex-direction: column; }
  .prepinac label { border-right: 0; border-bottom: 1px solid var(--line); }
  .prepinac label:last-child { border-bottom: 0; }

  fieldset { padding: 22px 20px 4px; }

  .pas-obrazek-text { padding: 54px 25px; }
  .kontakt-radek { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 20px; }
  .kontakt-oddelovac { display: none; }

  .paticka-mriz { grid-template-columns: 1fr; }
  .paticka { padding-top: 54px; }
  .foto-popisek { position: static; margin-top: 14px; transform: none; text-align: right; }
}

/* --------------------------------------------------------------------------
   Tisk
   -------------------------------------------------------------------------- */

@media print {
  .hlava, .paticka, .admin-lista, .pas-udaje, .tlacitka { display: none; }
  body { background: #fff; font-size: 12pt; }
  .sekce { padding: 12pt 0; }
}