/* ==========================================================================
   trebi.cz — styly.css (MONOLIT, české popisné třídy, bez build procesu)
   Předávací formát stav A. Editovatelné ručně backendem i HTML člověkem.
   Zdroj měr: Figma „Trebi--Copy" (JGe7i7ZN7P5p8cvHT8ows8) — pixel-perfect.
   JEDEN motiv (světlý web s tmavým/magenta hero) — žádný theme toggle.

   OBSAH:
   1. Design tokeny (:root)
   2. Base / reset doplňky
   3. Typografie
   4. Kontejnery (blok_sirky_webu) + bary
   5. Tlačítka
   6. Hlavička (header)            — detail Fáze 1
   7. Patička (footer)             — detail Fáze 1
   8. Drobečková navigace
   9. Bary homepage                — detail Fáze 1
   10. Utility + reveal animace
   11. Responsivita                — detail Fáze 4
   ========================================================================== */

/* === 1. DESIGN TOKENY ================================================== */
:root {
  /* Brand — Figma proměnné */
  --c-pink:      #af259c;   /* hlavní akcent / CTA / hero */
  --c-red:       #ed1921;
  --c-orange:    #e43a1b;

  /* Neutrály — Figma proměnné */
  --c-bg:        #ffffff;   /* White — bílé obsahové sekce */
  --c-bg-2:      #f4f4f4;   /* Gray bg — střídavé šedé sekce */
  --c-ink:       #000000;   /* Black — nadpisy / hlavní text */
  --c-text:      #1a1a1a;   /* tělo textu (mírně měkčí černá) */
  --c-muted:     #777777;   /* Gray font — tlumený text */
  --c-outline:   #dedede;   /* Gray outline — borders */
  --c-line:      #cacaca;   /* Gray line — oddělovače */
  --c-white:     #ffffff;
  --c-on-accent: #ffffff;   /* text na pink/akcentu */

  /* Layout */
  --content-w:       1280px;  /* obsah centrovaný; gutter @1920 = 320px (auto) */
  --header-h:        111px;
  --header-h-scroll: 68px;
  --radius:          0px;     /* Figma = ostré rohy; per-prvek override dle potřeby */

  /* Typografie (Manrope) */
  --ff: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-h1:     72px;  --lh-h1: 0.897;
  --fs-h2:     48px;  --lh-h2: 1.1;
  --fs-h3:     30px;  --lh-h3: 1.2;
  --fs-lead:   24px;
  --fs-body:   16px;
  --fs-small:  14px;
  --fs-eyebrow:18px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === 2. BASE / RESET DOPLŇKY ========================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu_zamceno { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* === 3. TYPOGRAFIE ==================================================== */
h1, h2, h3 { margin: 0; color: var(--c-ink); font-weight: 700; }

.eyebrow {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-pink);
}

/* === 4. KONTEJNERY + BARY ============================================= */
.bar { position: relative; }

.blok_sirky_webu {
  width: 100%;
  max-width: calc(var(--content-w) + 2 * 40px);
  margin-inline: auto;
  padding-inline: 40px;
}
/* @1920 = gutter 320 (auto), obsah přesně 1280; menší viewport → padding 40 */
@media (min-width: 1920px) {
  .blok_sirky_webu { max-width: var(--content-w); padding-inline: 0; }
}

/* === 5. TLAČÍTKA ===================================================== */
/* button-60 (Figma): pink bg, bílý text, ExtraBold 16 uppercase, ostré rohy,
   padding 14 / 40 / 14 / 32, gap 16, chevron 32px. */
.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 32px 14px 40px;
  background: var(--c-pink);
  color: var(--c-on-accent);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid var(--c-pink);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tlacitko svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform .25s var(--ease); }
.tlacitko:hover svg { transform: translateX(3px); }

/* outline varianta — na hero bílý okraj, na světlém pink/ink */
.tlacitko_outline {
  background: transparent;
  color: var(--c-white);
  border-color: var(--c-white);
}

/* === 8. DROBEČKOVÁ NAVIGACE ========================================== */
.obal_navigace { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-small); color: var(--c-muted); }
.obal_navigace a { color: var(--c-muted); transition: color .2s; }
.obal_navigace a:hover { color: var(--c-pink); }
.predel_navigace { display: inline-flex; }
.predel_navigace svg { width: 16px; height: 16px; }
.aktivni_navigace { color: var(--c-ink); font-weight: 600; }
.obal_navigace .spacer { flex: 1 1 100%; height: 0; }

/* === 6. HLAVIČKA (Figma 8038:184, black 111px) ====================== */
.hlavicka { position: sticky; top: 0; z-index: 100; background: var(--c-ink); transition: box-shadow .25s var(--ease); }
.hlavicka_in { display: flex; align-items: center; height: var(--header-h); transition: height .25s var(--ease); }

.logo { display: flex; align-items: center; gap: 32px; flex-shrink: 0; }
.logo_wordmark { height: 57px; width: auto; transition: height .25s var(--ease); }
.logo_znak { height: 87px; width: auto; overflow: hidden; transition: height .25s var(--ease), opacity .2s var(--ease); }

.hlavicka_prava {
  margin-left: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 0 21px;
  transition: padding .25s var(--ease);
}

/* scrolled stav (Figma header_scroll 8038:185, 68px, jen wordmark + menu + stín) */
.hlavicka.je_scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }
.hlavicka.je_scrolled .hlavicka_in { height: var(--header-h-scroll); }
.hlavicka.je_scrolled .logo_wordmark { height: 32px; }
.hlavicka.je_scrolled .logo_znak { height: 0; opacity: 0; }
.hlavicka.je_scrolled .hlavicka_kontakt { display: none; }  /* Figma header_scroll: tel/mail pryč */
.hlavicka.je_scrolled .hlavicka_prava { justify-content: center; padding: 0; }
.hlavicka_kontakt { display: flex; gap: 48px; }
.hk_polozka { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--c-white); transition: color .2s; }
.hk_polozka:hover { color: var(--c-pink); }
.hk_ik { display: inline-flex; color: var(--c-pink); }
.hk_ik svg { width: 24px; height: 24px; }

.hlavni_menu { display: flex; gap: 40px; }
.hlavni_menu a { position: relative; font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--c-white); letter-spacing: .01em; transition: color .2s; }
.hlavni_menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--c-pink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hlavni_menu a:hover, .hlavni_menu a.aktivni_menu { color: var(--c-pink); }
.hlavni_menu a:hover::after, .hlavni_menu a.aktivni_menu::after { transform: scaleX(1); }

.hamburger { display: none; background: none; border: 0; color: var(--c-white); padding: 8px; }
.hamburger svg { width: 28px; height: 28px; }

/* mobilní menu overlay */
.mobil_menu { position: fixed; inset: 0; z-index: 200; background: var(--c-ink); transform: translateX(100%); transition: transform .35s var(--ease); display: flex; }
.mobil_menu.je_otevrene { transform: none; }
/* X (close) lícuje s pozicí hamburgeru v headeru (vcentr 64px header, pravý okraj) */
.mobil_menu_zavrit { position: absolute; top: 16px; right: 18px; background: none; border: 0; padding: 6px; color: var(--c-white); }
.mobil_menu_zavrit svg { width: 28px; height: 28px; }
.mobil_menu_in { margin: auto; display: flex; flex-direction: column; gap: 40px; align-items: center; text-align: center; padding: 24px; }
.mobil_menu_seznam { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.mmenu_polozka { font-size: 26px; font-weight: 800; text-transform: uppercase; color: var(--c-white); transition: color .2s; }
.mmenu_polozka.aktivni_menu, .mmenu_polozka:hover { color: var(--c-pink); }
.mobil_menu_kontakt { display: flex; flex-direction: column; gap: 16px; }
.mmenu_kont { display: inline-flex; align-items: center; gap: 12px; color: var(--c-white); }
.mmenu_kont_ik { display: inline-flex; color: var(--c-pink); }
.mmenu_kont_ik svg { width: 24px; height: 24px; }

/* === 7. PATIČKA (Figma 8008:741, black 188px) ======================= */
.paticka { background: var(--c-ink); color: var(--c-white); padding: 41px 0 32px; }
.paticka_in { position: relative; }
.paticka_menu { display: flex; justify-content: center; gap: 48px; }
.paticka_menu a { font-size: 16px; color: var(--c-white); transition: color .2s; }
.paticka_menu a:hover, .paticka_menu a.aktivni_menu { color: var(--c-pink); }
.paticka_cara { height: 1px; background: rgba(255, 255, 255, .22); margin-top: 42px; }
.paticka_spodek { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.paticka_copy, .paticka_mcrai { font-size: 16px; color: var(--c-white); }
.paticka_mcrai { display: inline-flex; align-items: center; gap: 12px; transition: color .2s; }
.paticka_mcrai:hover { color: var(--c-pink); }
.paticka_mcrai_logo { display: inline-flex; width: 65px; height: 18px; flex: none; }
.paticka_mcrai_logo svg { width: 65px; height: 18px; display: block; }
.paticka_social { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 29px; }
.paticka_social a { display: inline-flex; color: var(--c-white); transition: color .2s; }
.paticka_social a:hover { color: var(--c-pink); }
.paticka_social svg { width: 24px; height: 24px; }

/* === 9. HERO (Figma slide-1 8008:706, 1920×720) ===================== */
.bar_hero { background: var(--c-pink); }
.hero_slide { position: relative; min-height: 720px; overflow: hidden; }
.hero_foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
.hero_grad { position: absolute; inset: 0; pointer-events: none; }
/* Figma 8008:708 černý gradient zleva (transparent → rgba(0,0,0,.57)) */
.hero_grad_cerny { background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .57) 100%); }
/* Figma 8008:709 magenta gradient zleva (transparent → rgba(175,37,156,.49)) */
.hero_grad_pink { background: linear-gradient(to left, rgba(175, 37, 156, 0) 0%, rgba(175, 37, 156, .49) 100%); }

.hero_in { position: relative; z-index: 2; padding-top: 185px; padding-bottom: 130px; color: var(--c-white); }
.hero_eyebrow { color: var(--c-white); }
.hero_h1 { margin: 9px 0 0; font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-h1); color: var(--c-white); }
.hero_perex { margin: 22px 0 0; max-width: 374px; font-size: var(--fs-lead); font-weight: 400; line-height: 1.35; }
.hero_cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 24px; }

/* === obecný nadpis sekce (centr) === */
.sekce_h2 { margin: 0; font-size: var(--fs-h2); font-weight: 800; text-align: center; color: var(--c-ink); }

/* === STAT PRUH (Figma 8008:790, magenta 169px) ===================== */
.bar_staty { background: var(--c-pink); color: var(--c-white); }
.staty_in { display: flex; }
.stat { flex: 1; min-height: 106px; padding: 17px 0 0 32px; border-left: 1px solid var(--c-white); }
.bar_staty { padding: 27px 0 36px; }
.stat_cislo { display: block; font-size: 48px; font-weight: 800; line-height: 1.1; }
.stat_popis { display: block; margin-top: 6px; max-width: 220px; font-size: 20px; font-weight: 800; line-height: 30px; }

/* === NABÍZENÉ SLUŽBY (Figma 8008:720 + karty 8019:404/405/412) ===== */
.bar_sluzby { background: var(--c-bg); padding: 72px 0; }
.sluzby_h2 { margin-bottom: 40px; }
.sluzby_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sluzba_karta { display: block; border-radius: 6px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sluzba_karta:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .14); }
.sluzba_foto { display: block; aspect-ratio: 414 / 289; background: #e0e0e0; overflow: hidden; }
.sluzba_foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sluzba_karta:hover .sluzba_foto img { transform: scale(1.05); }
.sluzba_pruh { position: relative; display: flex; align-items: center; min-height: 64px; padding: 0 9px 0 24px; background: var(--c-ink); border-top: 1px solid var(--c-pink); }
.sluzba_nazev { font-size: 24px; font-weight: 800; line-height: 30px; color: var(--c-white); }
.sluzba_chevron { margin-left: auto; display: inline-flex; color: var(--c-white); transition: transform .3s var(--ease); }
.sluzba_chevron svg { width: 32px; height: 32px; }
.sluzba_karta:hover .sluzba_chevron { transform: translateX(4px); color: var(--c-pink); }

/* tlačítko hover stavy */
.tlacitko:hover { background: #8d1d7e; border-color: #8d1d7e; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(175, 37, 156, .35); }
/* outline (bílý i černý okraj) → hover vždy celofialová výplň (Tomáš, Freelo) */
.tlacitko_outline:hover { background: var(--c-pink); color: var(--c-on-accent); border-color: var(--c-pink); box-shadow: 0 10px 28px rgba(175, 37, 156, .35); }
.tlacitko_outline_tmavy { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.tlacitko_outline_tmavy:hover { background: var(--c-pink); color: var(--c-on-accent); border-color: var(--c-pink); box-shadow: 0 10px 28px rgba(175, 37, 156, .35); }

/* === PROČ SPOLUPRACOVAT (Figma seo-bar 8008:863, bílá 666) ========= */
.bar_seo { background: var(--c-bg); padding: 85px 0; }
.seo_in { display: grid; grid-template-columns: 509px 630px; justify-content: space-between; align-items: center; }
.seo_h2 { font-size: 50px; font-weight: 800; line-height: 56px; color: var(--c-ink); }
.seo_perex { margin: 24px 0 0; max-width: 509px; font-size: 18px; line-height: 26px; color: var(--c-ink); }
.seo_seznam { margin: 34px 0 0; display: flex; flex-direction: column; gap: 10px; }
.seo_seznam li { display: flex; align-items: center; gap: 13px; font-size: 22px; font-weight: 800; line-height: 30px; color: var(--c-ink); }
/* Figma check_circle (Material, pink outline + pink fajfka — NE solid kruh) */
.seo_check { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--c-pink); }
.seo_check svg { width: 32px; height: 32px; }
.seo_cta { margin-top: 32px; }
.seo_foto { width: 630px; height: 540px; border-radius: 6px; overflow: hidden; background: var(--c-muted); }
.seo_foto img { width: 100%; height: 100%; object-fit: cover; }

/* === REFERENCE (Figma 8019:428, bílá, loga 2 řady 6+4 různé velikosti) === */
.bar_reference { background: var(--c-bg); border-top: 1px solid var(--c-line); padding: 56px 0 64px; }
.reference_loga { margin-top: 44px; display: flex; flex-direction: column; gap: 30px; align-items: center; }
.reference_rada { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 52px; }
.ref_logo { display: inline-flex; align-items: center; justify-content: center; }
.ref_logo img { width: auto; height: auto; max-height: 56px; max-width: 190px; object-fit: contain; filter: grayscale(1); opacity: .6; mix-blend-mode: multiply; transition: filter .3s, opacity .3s; }
.ref_logo:hover img { filter: none; opacity: 1; mix-blend-mode: normal; }

/* === AKTUALITY (Figma 8008:1023, 3 act-bar karty) ================== */
.bar_aktuality { background: var(--c-bg-2); padding: 72px 0 80px; }
.aktuality_grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.akt_karta { background: var(--c-bg); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.akt_foto { display: block; aspect-ratio: 413 / 309; background: #e0e0e0; overflow: hidden; }
.akt_foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.akt_karta:hover .akt_foto img { transform: scale(1.04); }
.akt_telo { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.akt_titulek { font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--c-ink); }
.akt_titulek a { transition: color .2s; }
.akt_titulek a:hover { color: var(--c-pink); }
.akt_perex { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--c-muted); }
.akt_vice { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 800; font-size: 14px; text-transform: uppercase; color: var(--c-pink); transition: gap .2s; }
.akt_vice svg { width: 18px; height: 18px; }
.akt_vice:hover { gap: 12px; }
.aktuality_paticka { margin-top: 44px; display: flex; justify-content: center; }

/* === KONTAKT + FORMULÁŘ (Figma Frame 46 8008:988, bílá) ============ */
.bar_kontakt { background: var(--c-bg); padding: 80px 0; }
.kontakt_in { display: grid; grid-template-columns: 630px 630px; justify-content: space-between; }
.kontakt_h2 { font-size: 50px; font-weight: 800; line-height: 1.1; color: var(--c-ink); }
.kontakt_text { margin: 28px 0 0; font-size: 18px; line-height: 30px; color: var(--c-ink); }
.kontakt_udaje { margin-top: 50px; display: flex; flex-direction: column; gap: 16px; }
.kontakt_radek { display: inline-flex; align-items: center; gap: 20px; font-size: 28px; font-weight: 800; color: var(--c-ink); transition: color .2s; }
.kontakt_radek:hover { color: var(--c-pink); }
.kontakt_ik { display: inline-flex; color: var(--c-pink); }
.kontakt_ik svg { width: 24px; height: 24px; }

.kontakt_pravy { position: relative; }
.kontakt_form { display: flex; flex-direction: column; gap: 18px; }
.form_radek { display: grid; grid-template-columns: 305px 305px; justify-content: space-between; gap: 20px; }
.form_pole { display: flex; flex-direction: column; gap: 8px; }
.form_pole label { font-size: 16px; font-weight: 700; color: var(--c-ink); }
.form_hv { color: var(--c-pink); }
.form_pole input, .form_pole textarea { width: 100%; height: 45px; padding: 0 14px; border: 1px solid var(--c-outline); border-radius: 4px; background: var(--c-bg); font-family: inherit; font-size: 16px; color: var(--c-ink); transition: border-color .2s; }
.form_pole textarea { height: 90px; padding: 12px 14px; resize: vertical; }
.form_pole input:focus, .form_pole textarea:focus { outline: none; border-color: var(--c-pink); }
.form_pole.je_chyba input, .form_pole.je_chyba textarea { border-color: var(--c-red); background: rgba(237, 25, 33, .04); }
.form_souhlas { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--c-ink); }
.form_souhlas input { width: 20px; height: 20px; accent-color: var(--c-pink); }
.form_souhlas a { text-decoration: underline; }
.form_honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form_spodek { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form_pozn { margin: 0; font-size: 14px; color: var(--c-text); }
.form_pozn .form_hv { color: var(--c-orange); }
.form_chyba { margin: 0 0 4px; color: var(--c-red); font-size: 14px; font-weight: 600; }
.form_odesila { opacity: .6; pointer-events: none; }
.form_uspech { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; background: var(--c-bg); }
.form_uspech[hidden] { display: none; }
.form_uspech_ik { color: var(--c-pink); }
.form_uspech_ik svg { width: 48px; height: 48px; }
.form_uspech_nadpis { font-size: 24px; font-weight: 800; color: var(--c-ink); }
.form_uspech_text { margin: 0; color: var(--c-muted); }

/* === PODSTRÁNKY — page hero (Figma 8001:288, šedá strana) ========== */
.strana_seda { background: var(--c-bg-2); }
.bar_page_hero { background: var(--c-bg-2); padding: 49px 0 56px; }
.page_hero_in { text-align: center; }
.page_hero_h1 { font-size: 50px; font-weight: 800; color: var(--c-ink); }
.page_hero_h1_velky { font-size: 54px; }
.page_hero_perex { margin: 28px auto 0; max-width: 903px; font-size: 18px; line-height: 26px; color: var(--c-ink); }
.bar_sluzby_vypis { background: var(--c-bg-2); padding: 0 0 80px; }

/* kontakt stránka — bílý panel (Figma 8035:389) */
.bar_kontakt_panel { background: var(--c-bg); padding: 80px 0; }
.kontakt_adresa { margin-top: 38px; font-style: normal; font-size: 18px; line-height: 30px; color: var(--c-ink); }
.kontakt_adresa strong { font-weight: 700; }

/* aktuality výpis */
.bar_aktuality_vypis { background: var(--c-bg-2); padding: 0 0 80px; }
.bar_aktuality_vypis .aktuality_grid { margin-top: 0; }

/* reference výpis (odvozená stránka) */
.bar_reference_vypis { background: var(--c-bg-2); padding: 0 0 80px; }
.bar_reference_vypis .reference_loga { margin-top: 0; }

/* reference — seznam realizovaných zakázek (reálný obsah) */
.bar_zakazky { background: var(--c-bg-2); padding: 8px 0 80px; }
.zakazky_h2 { text-align: center; font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-h2); color: var(--c-ink); }
.zakazky_perex { margin: 16px auto 0; max-width: 760px; text-align: center; font-size: 18px; color: var(--c-muted); }
.zakazky_seznam { margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 32px; }
.zakazky_seznam li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--c-ink); }
.zakazka_odrazka { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-pink); color: var(--c-white); }
.zakazka_odrazka svg { width: 16px; height: 16px; }
/* Mona port: zakázky přijdou z adminu jako plain <ul><li> — check kolečko přes ::before (matchuje .zakazka_odrazka) */
.zakazky_seznam li::before { content: ""; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background-color: var(--c-pink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 15px; }
@media (max-width: 1024px) { .zakazky_seznam { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .zakazky_seznam { grid-template-columns: 1fr; } }

/* === DETAIL ČLÁNKU (Figma 8001:382, šedá, centrovaný sloupec) ======= */
.bar_clanek { background: var(--c-bg-2); padding-bottom: 72px; }
.clanek_in { max-width: 843px; margin-inline: auto; padding-inline: 20px; }
/* Reference: zakázky potřebují plnou šířku (3 sloupce na 1 řádek jako template, ne úzkých 843px) */
.strana_reference .clanek_in { max-width: 1320px; }
.clanek_foto { width: 100%; aspect-ratio: 843 / 588; border-radius: 6px; overflow: hidden; background: var(--c-muted); }
.clanek_foto img { width: 100%; height: 100%; object-fit: cover; }
.clanek_telo { margin-top: 40px; }
.clanek_h2 { font-size: 30px; font-weight: 800; line-height: 1.25; color: var(--c-ink); }
.clanek_telo > p { margin: 20px 0 0; font-size: 18px; line-height: 28px; color: var(--c-ink); }
/* Mona/TinyMCE článek: textové bloky <div> mají sedět velikostí s <p> i odrážkami (jednotně 18px jako template) */
.clanek_telo > div { font-size: 18px; line-height: 28px; color: var(--c-ink); }
.clanek_h3 { margin-top: 40px; font-size: 24px; font-weight: 800; color: var(--c-ink); }
.clanek_seznam { margin: 20px 0 0; display: flex; flex-direction: column; gap: 8px; }
.clanek_seznam li { display: flex; align-items: center; gap: 14px; font-size: 18px; line-height: 30px; font-weight: 400; color: var(--c-ink); }
/* Figma odrážky detailu = malé pink kroužky JEN s borderem (prázdné tečky) */
.clanek_dot { flex-shrink: 0; width: 9px; height: 9px; border: 1.5px solid var(--c-pink); border-radius: 50%; }

/* Soubory ke stažení (Figma 8001:401 + download_bar) */
.bar_download { background: var(--c-bg-2); padding: 24px 0 64px; }
.bar_download .sekce_h2 { margin-bottom: 40px; }
.download_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 846px; margin-inline: auto; }
/* Figma download_bar: bílá karta, levý sloupec download ikona + šedá dělící čára, vpravo arrow_circle */
.download_karta { display: flex; align-items: stretch; min-height: 95px; background: var(--c-bg); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, .06); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.download_karta:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.dl_ikona { flex-shrink: 0; width: 72px; display: flex; align-items: center; justify-content: center; border-right: 2px solid #ebebeb; color: var(--c-pink); }
.dl_ikona svg { width: 32px; height: 32px; }
.dl_nazev { flex: 1; display: flex; align-items: center; padding: 0 12px 0 22px; font-size: 18px; font-weight: 700; line-height: 24px; color: var(--c-ink); }
.dl_sip { flex-shrink: 0; display: flex; align-items: center; padding-right: 8px; color: var(--c-pink); transition: transform .25s var(--ease); }
.dl_sip svg { width: 32px; height: 32px; }
.download_karta:hover .dl_sip { transform: translateX(3px); }

/* Galerie (Figma 8001:424, 4 foto) */
.bar_galerie { background: var(--c-bg-2); padding: 24px 0 80px; }
.bar_galerie .sekce_h2 { margin-bottom: 40px; }
.galerie_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.galerie_foto { display: block; aspect-ratio: 305 / 230; border-radius: 6px; overflow: hidden; background: var(--c-muted); }
.galerie_foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.galerie_foto:hover img { transform: scale(1.05); }

/* === MONA PORT — admin/TinyMCE markup =================================
   Obsah v Moně jde z adminu: odrážky = holé <ul><li> (TinyMCE), soubory
   přes modul download.php (.blok_soubory/.polozka_soubor), galerie přes
   foto.php (.obal_fotogalerie_pomerove). Náš Figma design byl psaný na
   statické třídy (.clanek_seznam/.download_karta/.galerie_foto), které
   admin markup nemá → tady je mapujeme na reálný markup, aby to vypadalo
   1:1 jako schválený template a přežilo to editaci v adminu. */

/* --- Odrážky v článku: holé <ul>/<ol> bez třídy (TinyMCE) — pink kroužek --- */
.clanek_telo ul:not([class]) { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.clanek_telo ul:not([class]) li { position: relative; padding-left: 24px; font-size: 18px; line-height: 30px; color: var(--c-ink); }
.clanek_telo ul:not([class]) li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border: 1.5px solid var(--c-pink); border-radius: 50%; }
.clanek_telo ol:not([class]) { margin: 20px 0 0; padding-left: 22px; list-style: decimal; display: flex; flex-direction: column; gap: 10px; }
.clanek_telo ol:not([class]) li { padding-left: 4px; font-size: 18px; line-height: 30px; color: var(--c-ink); }
.clanek_telo ol:not([class]) li::marker { color: var(--c-pink); font-weight: 700; }

/* --- Odkazy v textu článku: pink + podtržení (globální reset a{} je vypnul) --- */
.clanek_telo a { color: var(--c-pink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s var(--ease); }
.clanek_telo a:hover { color: var(--c-ink); }

/* --- Soubory ke stažení: Mona modul .blok_soubory → vzhled Figma download_bar --- */
.blok_soubory { background: var(--c-bg-2); padding: 8px 0 64px; }
.blok_soubory .blok_sirky_webu_uzky { max-width: 846px; margin-inline: auto; padding-inline: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.blok_soubory .nadpis_v_detail { grid-column: 1 / -1; margin-bottom: 20px; font-size: 30px; font-weight: 800; line-height: 1.25; color: var(--c-ink); text-align: center; }
.blok_soubory > .blok_sirky_webu_uzky > a { display: block; text-decoration: none; }
.blok_soubory .polozka_soubor { display: flex; align-items: stretch; min-height: 95px; background: var(--c-bg); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.06); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.blok_soubory a:hover .polozka_soubor { box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: translateY(-2px); }
.polozka_soubor_ikona { flex-shrink: 0; width: 72px; border-right: 2px solid #ebebeb; background-repeat: no-repeat; background-position: center; background-size: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23af259c' d='M16 20.7693L11.282 16.0513L12.2257 15.0923L15.3333 18.2V6.66667H16.6667V18.2L19.7743 15.0923L20.718 16.0513L16 20.7693ZM8.82067 25.3333C8.20689 25.3333 7.69444 25.1278 7.28333 24.7167C6.87222 24.3056 6.66667 23.7931 6.66667 23.1793V19.9487H8V23.1793C8 23.3847 8.08544 23.5728 8.25633 23.7437C8.42722 23.9146 8.61533 24 8.82067 24H23.1793C23.3847 24 23.5728 23.9146 23.7437 23.7437C23.9146 23.5728 24 23.3847 24 23.1793V19.9487H25.3333V23.1793C25.3333 23.7931 25.1278 24.3056 24.7167 24.7167C24.3056 25.1278 23.7931 25.3333 23.1793 25.3333H8.82067Z'/%3E%3C/svg%3E"); }
.polozka_soubor_in { flex: 1; display: flex; align-items: center; padding: 0 12px 0 22px; }
.polozka_soubor_nazev { font-size: 18px; font-weight: 700; line-height: 24px; color: var(--c-ink); }
.polozka_soubor::after { content: ""; flex-shrink: 0; align-self: center; width: 32px; height: 32px; margin-right: 10px; background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform .25s var(--ease); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23af259c' d='M16 20.3847L20.3847 16L16 11.6153L15.082 12.5333L17.882 15.3333H11.3333V16.6667H17.882L15.082 19.4667L16 20.3847ZM16.0043 28C14.345 28 12.7849 27.6851 11.324 27.0553C9.86333 26.4256 8.59267 25.5709 7.512 24.4913C6.43133 23.4118 5.57589 22.1422 4.94567 20.6827C4.31522 19.2233 4 17.6639 4 16.0043C4 14.345 4.31489 12.7849 4.94467 11.324C5.57444 9.86333 6.42911 8.59267 7.50867 7.512C8.58822 6.43133 9.85778 5.57589 11.3173 4.94567C12.7767 4.31522 14.3361 4 15.9957 4C17.655 4 19.2151 4.31489 20.676 4.94467C22.1367 5.57445 23.4073 6.42911 24.488 7.50867C25.5687 8.58822 26.4241 9.85778 27.0543 11.3173C27.6848 12.7767 28 14.3361 28 15.9957C28 17.655 27.6851 19.2151 27.0553 20.676C26.4256 22.1367 25.5709 23.4073 24.4913 24.488C23.4118 25.5687 22.1422 26.4241 20.6827 27.0543C19.2233 27.6848 17.6639 28 16.0043 28ZM16 26.6667C18.9778 26.6667 21.5 25.6333 23.5667 23.5667C25.6333 21.5 26.6667 18.9778 26.6667 16C26.6667 13.0222 25.6333 10.5 23.5667 8.43333C21.5 6.36667 18.9778 5.33333 16 5.33333C13.0222 5.33333 10.5 6.36667 8.43333 8.43333C6.36667 10.5 5.33333 13.0222 5.33333 16C5.33333 18.9778 6.36667 21.5 8.43333 23.5667C10.5 25.6333 13.0222 26.6667 16 26.6667Z'/%3E%3C/svg%3E"); }
.blok_soubory a:hover .polozka_soubor::after { transform: translateX(3px); }
.blok_soubory .spacer { grid-column: 1 / -1; }

/* --- Galerie: Mona modul .obal_fotogalerie_pomerove → vzhled Figma galerie --- */
.obal_fotogalerie_pomerove { background: var(--c-bg-2); padding: 8px 0 80px; }
.obal_fotogalerie_pomerove > .blok_sirky_webu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.obal_fotogalerie_pomerove .nadpis_v_detail { grid-column: 1 / -1; margin-bottom: 20px; font-size: 30px; font-weight: 800; line-height: 1.25; color: var(--c-ink); text-align: center; }
.obal_fotogalerie_pomerove .pomer_fotek_v_galerii { display: none; }
.obal_fotogalerie_pomerove > .blok_sirky_webu > a { display: block; text-decoration: none; aspect-ratio: 305 / 230; border-radius: 6px; overflow: hidden; background: var(--c-muted); }
.polozka_fotogalerie_pomerove, .polozka_fotogalerie_pomerove_in { display: block; width: 100%; height: 100%; }
.polozka_fotogalerie_pomerove img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.obal_fotogalerie_pomerove a:hover .polozka_fotogalerie_pomerove img { transform: scale(1.05); }
.polozka_fotogalerie_popisek, .obal_fotogalerie_pomerove .loader { display: none; }
.obal_fotogalerie_pomerove .spacer { grid-column: 1 / -1; }

@media (max-width: 1024px) { .obal_fotogalerie_pomerove > .blok_sirky_webu { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .blok_soubory .blok_sirky_webu_uzky { grid-template-columns: 1fr; } .obal_fotogalerie_pomerove > .blok_sirky_webu { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .obal_fotogalerie_pomerove > .blok_sirky_webu { grid-template-columns: 1fr; } }

/* === 10. UTILITY + REVEAL ============================================ */
.spacer { clear: both; }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].je_videt { opacity: 1; transform: none; }

/* plovoucí tlačítko „nahoru" */
.nahoru {
  position: fixed; right: 28px; bottom: 28px; z-index: 90;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-pink); color: var(--c-white); border: 0; border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s;
}
.nahoru.je_videt { opacity: 1; visibility: visible; transform: none; }
.nahoru:hover { background: #8d1d7e; transform: translateY(-3px); }
.nahoru svg { width: 24px; height: 24px; }
@media (max-width: 768px) { .nahoru { right: 16px; bottom: 16px; width: 46px; height: 46px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* === 11. RESPONSIVITA (Figma jen 1920 → collapse odvozen) ============ */

/* ≤1279 — menší desktop / tablet na šířku: fluidní 2-col bloky */
@media (max-width: 1279px) {
  .blok_sirky_webu { padding-inline: 32px; }
  .seo_in, .kontakt_in { grid-template-columns: 1fr 1fr; gap: 48px; justify-content: stretch; }
  .seo_foto { width: 100%; height: auto; aspect-ratio: 630 / 540; }
  .form_radek { grid-template-columns: 1fr 1fr; }
}

/* ≤1100 — header → burger dřív: hlavní menu má 6 položek + kontakt (tel/mail),
   do plné šířky se vedle loga nevejde už kolem 1030px (menu leze do loga, „O nás"
   se láme, kontakt/„Kontakt" se ořezávají). Mřížky zůstávají na 1024 níž. */
@media (max-width: 1100px) {
  .hlavicka_prava { display: none; }
  .hamburger { display: inline-flex; margin-left: auto; }  /* vpravo roh (flush) */
  .logo_znak { display: none; }
  .hlavicka_in { height: 80px; }
  .hlavicka.je_scrolled .hlavicka_in { height: 64px; }
}

/* ≤1024 — tablet: mřížky collapse */
@media (max-width: 1024px) {
  :root { --fs-h1: 56px; }

  .hero_slide { min-height: 560px; }
  .hero_in { padding-top: 118px; padding-bottom: 80px; }

  .sluzby_grid, .aktuality_grid { grid-template-columns: repeat(2, 1fr); }
  .seo_in, .kontakt_in { grid-template-columns: 1fr; gap: 40px; }
  .seo_foto { max-width: 630px; }
  .download_grid { grid-template-columns: 1fr; }
  .galerie_grid { grid-template-columns: repeat(2, 1fr); }
  .clanek_in { padding-inline: 32px; }
}

/* ≤768 — mobil */
@media (max-width: 768px) {
  :root { --fs-h1: 40px; --fs-h2: 30px; --fs-h3: 24px; --fs-lead: 18px; }
  .blok_sirky_webu { padding-inline: 20px; }
  .hlavicka_in { height: 64px; }
  .logo_wordmark { height: 40px; }
  .hlavicka.je_scrolled .logo_wordmark { height: 28px; }

  .hero_slide { min-height: 460px; }
  .hero_in { padding-top: 92px; padding-bottom: 52px; }
  .hero_h1 { font-size: 40px; line-height: 1.05; }
  .hero_perex { font-size: 18px; max-width: none; }
  .hero_cta { flex-direction: column; align-items: stretch; }
  .hero_cta .tlacitko { justify-content: center; }

  .staty_in { flex-wrap: wrap; }
  .stat { flex: 0 0 50%; min-height: 84px; padding: 14px 0 14px 20px; }

  .sluzby_grid, .aktuality_grid, .galerie_grid { grid-template-columns: 1fr; }
  .bar_sluzby { padding: 48px 0; }
  .reference_rada { gap: 28px 32px; }
  .ref_logo img { max-height: 44px; max-width: 150px; }

  .seo_h2, .kontakt_h2 { font-size: 32px; }
  .seo_seznam li { font-size: 18px; }
  .kontakt_radek { font-size: 22px; }
  .form_radek { grid-template-columns: 1fr; }
  .form_spodek { flex-direction: column; align-items: flex-start; gap: 14px; }

  .clanek_h2 { font-size: 26px; }
  .clanek_in { padding-inline: 20px; }

  .paticka { padding: 36px 0 28px; }
  .paticka_menu { flex-wrap: wrap; gap: 14px 28px; }
  .paticka_spodek { flex-direction: column; gap: 22px; text-align: center; }
  .paticka_social { position: static; transform: none; }

  .page_hero_h1, .page_hero_h1_velky { font-size: 36px; }
}

/* ≤420 — úzké telefony */
@media (max-width: 420px) {
  .stat { flex: 0 0 100%; border-left: 0; padding-left: 0; }
}

/* === CookieScript cookie-declaration widget (/gdpr/) — sladění s trebi skinem ==========
   JS-generovaný „Report Page" widget uvnitř .clanek_telo (třídy _CookieScriptReportPage*).
   Scoped přes .clanek_telo → vyšší specificita než widget default. */
.clanek_telo ._CookieScriptReportPageCheckboxes { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 10px; }
.clanek_telo ._CookieScriptReportPageCheckbox { display: flex; align-items: center; gap: 14px; }
.clanek_telo ._CookieScriptReportPageCheckboxLabel { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--c-ink); cursor: pointer; }
.clanek_telo ._CookieScriptReportPageCheckboxInput { width: 20px; height: 20px; accent-color: var(--c-pink); flex-shrink: 0; }
.clanek_telo ._CookieScriptReportPageSaveSettingButton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 30px; background: var(--c-pink); color: var(--c-on-accent);
  font-family: var(--ff); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .01em;
  border: 1px solid var(--c-pink); border-radius: 0; cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.clanek_telo ._CookieScriptReportPageSaveSettingButton:hover { background: #8d1d7e; border-color: #8d1d7e; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(175, 37, 156, .35); }
.clanek_telo ._CookieScriptReportPageConsentKey { margin: 6px 0 2px; color: var(--c-muted); font-size: 14px; }
.clanek_telo ._CookieScriptReportPageTable {
  width: 100%; border-collapse: collapse; margin: 16px 0 40px; font-size: 15px; color: var(--c-text);
}
.clanek_telo ._CookieScriptReportPageTable caption { text-align: left; font-weight: 800; color: var(--c-ink); font-size: 18px; padding: 0 0 12px; }
.clanek_telo ._CookieScriptReportPageTableTh {
  background: var(--c-ink); color: var(--c-white); text-align: left;
  padding: 13px 16px; font-weight: 700; border: 1px solid var(--c-ink);
}
.clanek_telo ._CookieScriptReportPageTableTd { padding: 13px 16px; border: 1px solid var(--c-outline); vertical-align: top; }
.clanek_telo ._CookieScriptReportPageTable tbody tr:nth-child(even) { background: var(--c-bg-2); }
.clanek_telo ._CookieScriptReportVendorName { font-weight: 700; color: var(--c-ink); }
.clanek_telo ._CookieScriptReportPageTable h4,
.clanek_telo h4 { margin: 8px 0 6px; font-size: 18px; color: var(--c-ink); }