/* =========================================================================
   ERI BAKERY — B2B landing page

   Pravidla, kterých se drží celý soubor:
   · JEDNO písmo (Archivo variable)
   · DVĚ barvy pozadí (tmavá / kraftová) — nic třetího, karty mají jen linku
   · PĚT velikostí písma — žádné drobné verzálkové štítky navíc
   · jedna třída = jedna věc, žádné ID selektory
   ========================================================================= */

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

:root {
  /* --- dvě pozadí, nic víc --- */
  --tmava:  #0C0906;
  --kraft:  #F0E9DA;

  /* --- akcent --- */
  --zlata:       #E0A93F;   /* na tmavé */
  --zlata-tmava: #7A5210;   /* na kraftové, kontrast 5,71:1 */

  /* --- text --- */
  --sedy:  #AE9F86;         /* sekundární na tmavé, 7,66:1 */
  --kamen: #574B3A;         /* sekundární na kraftové, 7,03:1 */

  /* --- linky --- */
  --linka:        #2A2118;
  --linka-kraft:  #D6C9AE;

  /* --- pět velikostí --- */
  --t-maly:   0.9375rem;
  --t-zaklad: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-velky:  clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-h2:     clamp(1.875rem, 1.3rem + 2.6vw, 3.5rem);
  --t-h1:     clamp(2.375rem, 1.5rem + 3.9vw, 4.75rem);

  --pismo: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  --mezera: clamp(4.5rem, 3rem + 6vw, 8rem);
  --obal-sirka: 78rem;
  --obal-padding: clamp(1.25rem, 0.7rem + 2.4vw, 3rem);
  --prechod: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tmava);
  color: #F3EDE0;
  font-family: var(--pismo);
  font-size: var(--t-zaklad);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }
svg { display: block; }

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

.preskocit {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--zlata); color: var(--tmava);
  padding: 0.85rem 1.35rem; font-weight: 700; text-decoration: none;
}
.preskocit:focus { left: 0.5rem; top: 0.5rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- obal */
.obal { width: 100%; max-width: var(--obal-sirka); margin-inline: auto; padding-inline: var(--obal-padding); }
.obal--uzky { max-width: 50rem; }
.stred { text-align: center; }

/* --------------------------------------------------------------- sekce */
.sek { padding-block: var(--mezera); }
.sek--tmavy { background: var(--tmava); }
.sek--kraft { background: var(--kraft); color: var(--tmava); }

/* --------------------------------------------------------- typografie */
.nadpis {
  font-size: var(--t-h2);
  font-weight: 800;
  font-stretch: 105%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 20ch;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}
.nadpis--stred { margin-inline: auto; text-align: center; max-width: 24ch; }
.nadpis em { font-style: normal; color: var(--zlata); }
.sek--kraft .nadpis em { color: var(--zlata-tmava); }

.uvod {
  font-size: var(--t-velky);
  color: var(--sedy);
  max-width: 50ch;
  margin-bottom: 3rem;
  line-height: 1.45;
}
.sek--kraft .uvod { color: var(--kamen); }
.uvod--stred { margin-inline: auto; text-align: center; }

.poznamka { margin-top: 3rem; padding-top: 1.5rem; font-size: var(--t-maly); color: var(--sedy); border-top: 1px solid var(--linka); }
.sek--kraft .poznamka { color: var(--kamen); border-top-color: var(--linka-kraft); }

/* --------------------------------------------------------------- ikony */
.ikona { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none;
         stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ikona--velka { width: 2.5rem; height: 2.5rem; stroke-width: 1.3; }

/* ------------------------------------------------------------ tlačítka */
.tl {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  font-weight: 700; font-size: var(--t-maly); font-stretch: 104%;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  padding: 1.15rem 2rem;
  border: 2px solid var(--zlata);
  background: var(--zlata);
  color: #0C0906;
  cursor: pointer;
  transition: background var(--prechod), color var(--prechod), transform var(--prechod);
}
.tl:hover { background: transparent; color: var(--zlata); }
.sek--kraft .tl:hover { color: var(--zlata-tmava); border-color: var(--zlata-tmava); }
.tl:active { transform: translateY(1px); }
.tl .ikona { width: 1.05rem; height: 1.05rem; stroke-width: 2.6; }
.tl--maly { padding: 0.7rem 1.1rem; border-width: 1px; }
.tl--plny { width: 100%; }

.odkaz {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: auto; padding-top: 1.35rem;
  font-size: var(--t-maly); font-weight: 700;
  color: var(--zlata); text-decoration: none; align-self: flex-start;
}
.odkaz .ikona { width: 0.95rem; height: 0.95rem; stroke-width: 2.6; transition: transform var(--prechod); }
.odkaz:hover .ikona { transform: translateX(4px); }

/* ------------------------------------------------------------ hlavička */
.hlavicka {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--tmava) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linka);
}
.hlavicka__vnitrek { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; }
.znacka { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.znacka img { width: auto; height: 2.7rem; }
.znacka__text { font-size: var(--t-maly); font-weight: 800; font-stretch: 106%; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: min(88svh, 46rem);
  display: flex; align-items: center;
  overflow: hidden;
}
.hero__foto { position: absolute; inset: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 74%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--tmava) 2%, rgba(12,9,6,0.9) 34%, rgba(12,9,6,0.5) 66%, rgba(12,9,6,0.15) 92%);
}
.hero__obsah { position: relative; z-index: 1; padding-block: clamp(3.5rem, 2rem + 6vw, 6rem); }
.hero__nadpis {
  font-size: var(--t-h1); font-weight: 900; font-stretch: 104%;
  letter-spacing: -0.03em; text-transform: uppercase;
  margin-bottom: 1.5rem; max-width: 17ch; text-wrap: balance;
}
.hero__nadpis em { font-style: normal; color: var(--zlata); display: block; }
.hero__uvod { font-size: var(--t-velky); max-width: 34ch; margin-bottom: 2.5rem; line-height: 1.4; }
.hero__poznamka { margin-top: 1.1rem; font-size: var(--t-maly); color: var(--sedy); }

/* ----------------------------------------------------------- trust bar */
.pruh { border-bottom: 1px solid var(--linka); padding-block: 2.5rem; }
.pruh__seznam { display: grid; gap: 2rem 1rem; grid-template-columns: repeat(2, 1fr); text-align: center; }
.pruh__polozka { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.pruh__polozka .ikona { color: var(--zlata); margin-bottom: 0.5rem; }
.pruh__hodnota { font-size: var(--t-velky); font-weight: 900; font-stretch: 104%; line-height: 1; }
.pruh__popis { font-size: var(--t-maly); color: var(--sedy); }

/* --------------------------------------------------------------- video */
/* Tmavý rám i uvnitř světlé sekce — jinak fotka pod placeholderem vybledne. */
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
         background: var(--tmava); color: #F3EDE0; }
.video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  text-align: center; padding: 1.5rem;
}
.video__foto { position: absolute; inset: 0; }
.video__foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.video__vnitrek { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.video__ikona {
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  border: 2px solid var(--zlata); display: grid; place-items: center;
  background: color-mix(in srgb, var(--tmava) 55%, transparent);
  transition: transform var(--prechod), background var(--prechod);
}
.video:hover .video__ikona { transform: scale(1.06); }
.video__ikona::after {
  content: ""; border-left: 1.4rem solid var(--zlata);
  border-block: 0.9rem solid transparent; margin-left: 0.4rem;
}
.video__popis { font-size: var(--t-velky); font-weight: 800; font-stretch: 104%; text-transform: uppercase; }
.video__cesta { font-size: var(--t-maly); color: var(--sedy); }
.video__cesta code { font-family: ui-monospace, Consolas, monospace; }

/* -------------------------------------------------------------- pilíře */
.pilire { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; }
.pilir { display: flex; flex-direction: column; gap: 0.75rem; }
.pilir .ikona { color: var(--zlata-tmava); margin-bottom: 0.5rem; }
.pilir h3 { font-size: var(--t-velky); font-weight: 800; font-stretch: 104%; text-transform: uppercase; }
.pilir p { color: var(--kamen); }

/* ----------------------------------------------------------- sortiment */
.karty { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.karta { display: flex; flex-direction: column; }
.karta__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1.25rem; }
.karta h3 { font-size: var(--t-velky); font-weight: 800; font-stretch: 104%; text-transform: uppercase; margin-bottom: 0.75rem; }
.karta p { color: var(--sedy); font-size: var(--t-maly); }

/* -------------------------------------------------------------- příběh
   Tři velké fotky vedle sebe. Žádná timeline s vlásovými linkami. */
.pribeh { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.etapa { display: flex; flex-direction: column; }
.etapa__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 1.5rem; }
.etapa__rok {
  font-size: var(--t-h2); font-weight: 900; font-stretch: 104%;
  line-height: 1; text-transform: uppercase; color: var(--zlata-tmava);
  margin-bottom: 0.75rem;
}
.etapa p { color: var(--kamen); }

.zaver-veta {
  font-size: var(--t-h2); font-weight: 900; font-stretch: 104%;
  text-transform: uppercase; letter-spacing: -0.022em; line-height: 1.08;
  margin-top: var(--mezera); max-width: 24ch; text-wrap: balance;
}
.zaver-veta em { font-style: normal; color: var(--zlata-tmava); }

/* ================================================== STARTOVACÍ MIX */
.volba { border: 0; padding: 0; margin: 0 0 2rem; }
.volba__legenda { padding: 0; font-size: var(--t-maly); font-weight: 700; color: var(--kamen); margin-bottom: 1rem; }
.volba__tlacitka { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.volba__tl {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.35rem;
  background: transparent; border: 2px solid var(--linka-kraft); border-radius: 100px;
  font-size: var(--t-maly); font-weight: 600; color: var(--tmava); cursor: pointer;
  transition: background var(--prechod), border-color var(--prechod), color var(--prechod);
}
.volba__tl .ikona { width: 1.15rem; height: 1.15rem; stroke-width: 1.8; }
.volba__tl:hover { border-color: var(--kamen); }
.volba__tl[aria-pressed="true"] { background: var(--tmava); border-color: var(--tmava); color: var(--kraft); }
.volba__tl[aria-pressed="true"] .ikona { color: var(--zlata); }

.tac { border: 1px solid var(--linka-kraft); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.tac__hlavicka {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1rem; padding-bottom: 1.35rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--linka-kraft);
}
.tac__nazev { font-size: var(--t-velky); font-weight: 800; font-stretch: 104%; text-transform: uppercase; }
.tac__meta { font-size: var(--t-maly); color: var(--kamen); }
.tac__vyzva { color: var(--kamen); max-width: 52ch; }

.tac__mrizka { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.tac__mrizka > * { flex: 1 1 8.5rem; max-width: 13rem; min-width: 8.5rem; }
.tac:not([data-stav="plny"]) .tac__mrizka { display: none; }
.tac[data-stav="plny"] .tac__vyzva { display: none; }

.polozka {
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 480ms cubic-bezier(0.22,0.61,0.36,1),
              transform 480ms cubic-bezier(0.22,0.61,0.36,1);
  transition-delay: var(--zpozdeni, 0ms);
}
.polozka--uvnitr { opacity: 1; transform: none; }
.polozka__obrazek {
  height: 8.5rem; width: 100%;
  object-fit: contain; object-position: center bottom;
  margin-bottom: 1rem;
  filter: drop-shadow(0 10px 14px rgba(12,9,6,0.18));
}
.polozka__nazev { font-size: var(--t-maly); font-weight: 700; line-height: 1.3; margin-bottom: 0.4rem; }
.polozka__proc { font-size: var(--t-maly); line-height: 1.45; color: var(--kamen); }
.polozka--bezfotky .polozka__obrazek {
  display: grid; place-items: center;
  border: 1px dashed var(--linka-kraft);
  color: var(--kamen); font-size: var(--t-maly); text-align: center;
  padding: 0.5rem; filter: none;
}

/* --- formulář --- */
.formular { margin-top: 2rem; background: var(--tmava); color: #F3EDE0; padding: clamp(1.5rem, 1rem + 2.6vw, 3rem); }
.formular__nadpis { font-size: var(--t-velky); font-weight: 800; font-stretch: 104%; text-transform: uppercase; margin-bottom: 0.6rem; }
.formular__uvod { color: var(--sedy); font-size: var(--t-maly); margin-bottom: 2rem; }

.pole { margin-bottom: 1.6rem; }
.pole__popis { display: block; font-size: var(--t-maly); font-weight: 700; color: var(--zlata); margin-bottom: 0.7rem; }
.pole__nepovinne { font-weight: 400; color: var(--sedy); }
.pole__vstup {
  width: 100%; font: inherit; color: #F3EDE0;
  background: transparent; border: 1px solid var(--linka);
  padding: 1rem 1.1rem; transition: border-color var(--prechod);
}
.pole__vstup::placeholder { color: #93826A; }
.pole__vstup:hover { border-color: var(--sedy); }
.pole__vstup--text { resize: vertical; min-height: 5.5rem; }
.pole__vstup[aria-invalid="true"] { border-color: #E0785A; }

.pole__volby { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pole__tl {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  background: transparent; border: 1px solid var(--linka); border-radius: 100px;
  font-size: var(--t-maly); color: var(--sedy); cursor: pointer;
  transition: border-color var(--prechod), color var(--prechod), background var(--prechod);
}
.pole__tl .ikona { width: 1.05rem; height: 1.05rem; }
.pole__tl:hover { border-color: var(--sedy); color: #F3EDE0; }
.pole__tl[aria-pressed="true"] { background: var(--zlata); border-color: var(--zlata); color: #0C0906; font-weight: 700; }
.chyba { margin-top: 0.55rem; font-size: var(--t-maly); color: #F0A184; }
.formular__poznamka { margin-top: 1.1rem; font-size: var(--t-maly); color: var(--sedy); }
.formular__stav:not(:empty) { margin-top: 1.35rem; padding: 1rem 1.15rem; border-left: 3px solid var(--zlata); font-size: var(--t-maly); }

/* --------------------------------------------------- jak to funguje */
.kroky { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; }
.krok__cislo { font-size: var(--t-h2); font-weight: 900; font-stretch: 104%; line-height: 1; color: var(--zlata); display: block; margin-bottom: 0.75rem; }
.krok h3 { font-size: var(--t-velky); font-weight: 800; font-stretch: 104%; text-transform: uppercase; margin-bottom: 0.5rem; }
.krok p { font-size: var(--t-maly); color: var(--sedy); }

/* ------------------------------------------------------ B2B program */
.program { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
.program__seznam { display: grid; gap: 0; margin-bottom: 2rem; }
.program__seznam li { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.8rem 0; border-bottom: 1px solid var(--linka); font-size: var(--t-maly); }
.program__seznam .ikona { width: 1.15rem; height: 1.15rem; color: var(--zlata); flex: none; margin-top: 0.25rem; stroke-width: 2.4; }
.program__zaver { font-size: var(--t-velky); font-weight: 600; line-height: 1.4; max-width: 44ch; }
.program__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ----------------------------------------------------------- partneři */
.typy { display: grid; gap: 1.5rem 2rem; grid-template-columns: 1fr; }
.typy li { display: flex; align-items: center; gap: 1rem; font-size: var(--t-velky); font-weight: 600; }
.typy .ikona { color: var(--zlata); flex: none; }

/* --------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--linka-kraft); }
.faq__polozka { border-bottom: 1px solid var(--linka-kraft); }
.faq__polozka h3 { margin: 0; }
.faq__otazka {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.6rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--t-velky); font-weight: 700; font-stretch: 102%;
  color: var(--tmava); transition: color var(--prechod);
}
.faq__otazka:hover { color: var(--zlata-tmava); }
.faq__znak { position: relative; flex: none; width: 1.75rem; height: 1.75rem; }
.faq__znak::before, .faq__znak::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.1rem; height: 2px; background: currentColor;
  transform: translate(-50%, -50%); transition: transform var(--prechod), opacity var(--prechod);
}
.faq__znak::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__otazka[aria-expanded="true"] .faq__znak::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.faq__odpoved { padding: 0 0 1.6rem; }
.faq__odpoved p { color: var(--kamen); max-width: 62ch; }

/* --------------------------------------------------------------- závěr */
.sek--zaver { position: relative; overflow: hidden; }
.sek--zaver .obal { position: relative; z-index: 1; }
.zaver__foto { position: absolute; inset: 0; }
.zaver__foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.sek--zaver::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--tmava) 0%, rgba(12,9,6,0.72) 50%, var(--tmava) 100%);
}

/* ------------------------------------------------------------- patička */
.paticka { border-top: 1px solid var(--linka); padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); font-size: var(--t-maly); }
.paticka__vnitrek { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
.paticka__blok { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.paticka__blok img { width: auto; height: 3.4rem; flex: none; }
.paticka__adresa { line-height: 1.65; color: var(--sedy); }
.paticka__adresa b { color: #F3EDE0; }
.paticka__kontakt { display: grid; gap: 0.7rem; }
.paticka__kontakt li { display: flex; align-items: center; gap: 0.7rem; }
.paticka__kontakt .ikona { width: 1.05rem; height: 1.05rem; color: var(--zlata); flex: none; }
.paticka a { color: #F3EDE0; text-decoration: none; }
.paticka a:hover { color: var(--zlata); }
.paticka__site { display: flex; gap: 0.75rem; }
.paticka__site a {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--linka); border-radius: 50%;
  transition: border-color var(--prechod), color var(--prechod);
}
.paticka__site a:hover { border-color: var(--zlata); color: var(--zlata); }
.paticka__udaje { grid-column: 1 / -1; padding-top: 1.75rem; border-top: 1px solid var(--linka); color: var(--sedy); }

/* ------------------------------------------------- sticky CTA (mobil) */
.lista {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0.75rem var(--obal-padding) calc(0.75rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--tmava) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linka);
  transform: translateY(110%);
  transition: transform var(--prechod);
}
.lista[data-videt="1"] { transform: translateY(0); }

/* ============================================== jediná animace navíc */
.odhal { opacity: 0; transform: translateY(26px); }
.odhal--videt {
  opacity: 1; transform: none;
  transition: opacity 700ms cubic-bezier(0.22,0.61,0.36,1),
              transform 700ms cubic-bezier(0.22,0.61,0.36,1);
}

/* ====================================================== breakpointy */
@media (max-width: 39.99em) {
  .hlavicka .tl { display: none; }
  .hlavicka__vnitrek { padding-block: 0.6rem; }
  .tl { letter-spacing: 0.04em; padding: 1.05rem 1.2rem; }
}

@media (min-width: 40em) {           /* 640 px */
  .pruh__seznam { grid-template-columns: repeat(4, 1fr); }
  .karty { grid-template-columns: repeat(2, 1fr); }
  .pilire { grid-template-columns: repeat(2, 1fr); }
  .kroky { grid-template-columns: repeat(2, 1fr); }
  .pribeh { grid-template-columns: repeat(3, 1fr); }
  .typy { grid-template-columns: repeat(2, 1fr); }
  .program__seznam { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
  .paticka__vnitrek { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 56em) {           /* 896 px */
  .hero__foto img { object-position: 58% 50%; }
  .hero::after {
    background:
      linear-gradient(to top, var(--tmava) 2%, rgba(12,9,6,0.26) 48%, rgba(12,9,6,0.04) 78%),
      linear-gradient(to right, var(--tmava) 4%, rgba(12,9,6,0.82) 40%, rgba(12,9,6,0.08) 76%);
  }
  .karty { grid-template-columns: repeat(4, 1fr); }
  .pilire { grid-template-columns: repeat(4, 1fr); }
  .kroky { grid-template-columns: repeat(4, 1fr); }
  .typy { grid-template-columns: repeat(3, 1fr); }
  .program { grid-template-columns: 1.3fr 1fr; gap: 4rem; }
  .lista { display: none; }
}

@media (min-width: 64em) {           /* 1024 px */
  .formular form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.75rem; max-width: 46rem; }
  .formular form > .pole:first-child { grid-column: 1 / -1; }
  .formular form > .pole:nth-child(4) { grid-column: 1 / -1; }
  .formular form > button { grid-column: 1 / -1; justify-self: start; width: auto; }
  .formular__poznamka, .formular__stav { grid-column: 1 / -1; }
}

/* ============================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .odhal { opacity: 1; transform: none; }
  .polozka { opacity: 1; transform: none; }
}