/* =====================================================================
   /assets/css/site.css  —  sjednocený styl (bez duplicit)
   Sekce: root proměnné · base · header/nav/burger · layout/grid
           karty/služby/feature · galerie · checklist/process/faq
           CTA · hero (A/B foto/video) · sezónní banner · cookies bar
           formuláře · patička · modal · dark mode · a11y/reduced-motion
   ===================================================================== */

/* ===================== ROOT PROMĚNNÉ ===================== */
:root{
  /* Brand + neutrální paleta */
  --brand:#2b8a3e;
  --brand-600:#2e7d32;
  --brand-700:#1b5e20;

  --accent:#1f8a3b;
  --accent-600:#187132;

  --bg:#ffffff;
  --bg-soft:#f7faf7;
  --surface:#f5f8f6;
  --text:#0b1721;
  --muted:#5b6b75;
  --border:#e3e9e5;

  --header-bg: rgba(255,255,255,.85);

  /* Stíny */
  --shadow:   0 2px 10px rgba(0,0,0,.05);
  --shadow-1: 0 2px 16px rgba(0,0,0,.06);

  /* NAV škálování – menu udržíme na 1 řádku */
  --nav-gap: clamp(6px, 1vw, 12px);
  --nav-pad-x: clamp(6px, .9vw, 10px);
  --nav-pad-y: clamp(5px, .6vw, 8px);
  --nav-font: clamp(.92rem, .9vw + .2rem, 1rem);

  /* Rozměr hlavičky (pro overlay mobilního menu) */
  --header-height: 64px;

  /* Preferuj systémové světlé/tmavé téma */
  color-scheme: light dark;
}

/* --- Fix: burger a akční ikonky v dark módu (kontrast + barva ikon) --- */
.burger{
  background:#0f1412;
  color: var(--text);
  border-color:#2b3a33;
}
.burger:hover,
.burger[aria-expanded="true"]{
  background:#1b2521;
}

/* Ikonky obálka/zámek/menu – přebarvit i vnořené tvary */
.action svg,
.icon-link svg{
  color: #ecf5ef;                /* světlejší kresba ikon */
}
.action svg *,
.icon-link svg *{
  fill: currentColor !important; /* přebije případné fill="#fff" uvnitř SVG */
  stroke: currentColor !important;
}

/* Footer ikonky – jistota stejného chování jako v headeru */
.site-footer .action,
.site-footer .icon-link{
  background:#0f1412;
  border-color:#2b3a33;
  color: var(--text);
}


/* ===================== BASE / RESET ===================== */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
}
a{ color:var(--brand-600); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }
.section{ margin-block: 2rem; }

/* Obrázky uvnitř obsahových bloků */
:where(.gallery, .cards, .services, .features, .section) img{
  max-width:100%;
  height:auto;
  display:block;
}

/* ===================== HLAVIČKA ===================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;                 /* nad obsahem i hero videem */
  background: var(--header-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header .wrap{ display:block; max-width:1180px; }
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--header-height); gap:16px;
}
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text); }
.logo img{ display:block; height:36px; width:auto; }

/* Akce vpravo (Kontakt, Klientská zóna, Burger) */
.header-actions{ display:flex; align-items:center; gap:8px; }
.action, .icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; min-width:38px; height:38px; padding:8px 10px;
  border:1px solid var(--border); border-radius:10px; background:#fff;
  color:var(--text); cursor:pointer; text-decoration:none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.action:hover, .icon-link:hover{ background:var(--surface); text-decoration:none; }
.action svg, .icon-link svg{ display:block; width:18px; height:18px; }
.action .label{ font-weight:600; }
.action:focus-visible, .icon-link:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ===================== NAV (desktop + dropdown) ===================== */
.site-nav{ display:flex; gap:var(--nav-gap); align-items:center; position:relative; z-index:40; }
.site-nav a,
.site-nav button.nav-dropbtn{
  padding:var(--nav-pad-y) var(--nav-pad-x);
  border-radius:10px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  font-size:var(--nav-font);
  white-space:nowrap;
  border:0; background:transparent; color:var(--text);
}
.site-nav a:not(.cta):hover,
.site-nav .nav-dropbtn:hover{ background:var(--surface); text-decoration:none; }
.site-nav a.cta{ background:var(--brand); color:#fff; }
.site-nav a.cta:hover{ background:var(--brand-700); text-decoration:none; }
.site-nav a:focus-visible, .site-nav .nav-dropbtn:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

/* Dropdown */
.nav-dropdown{ position:relative; }
.nav-dropbtn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; position:relative; }
.nav-dropbtn svg{ width:16px; height:16px; transition: transform .2s ease; }

/* Drobný „most“ pod tlačítkem – eliminuje vypadávání při přejezdu myší */
.nav-dropbtn::after{
  content:""; position:absolute; left:-8px; right:-8px; bottom:-12px; height:14px;
  background:transparent; pointer-events:auto; z-index:10;
}
.nav-dropdown:focus-within .nav-dropbtn svg,
.nav-dropdown:hover .nav-dropbtn svg{ transform: rotate(180deg); }

/* Panel – nalepený na tlačítko, bez mezery */
.nav-dropmenu{
  position:absolute; top:100%; left:0;                 /* ← přilepeno */
  display:none; flex-direction:column; gap:4px;
  min-width:220px; padding:8px;
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  z-index: 60;
}
.nav-dropmenu a{
  display:block; padding:10px 10px; border-radius:8px; color:inherit; text-decoration:none;
}
.nav-dropmenu a:hover{ background:var(--surface); text-decoration:none; }
.nav-dropdown:hover .nav-dropmenu,
.nav-dropdown:focus-within .nav-dropmenu{ display:flex; }

/* Aktivní položky — desktop */
@media (min-width:901px){
  .site-nav{ white-space:nowrap; flex-wrap:nowrap; overflow:visible; }
  .action .label{ display:inline; }

  .site-nav a.is-active:not(.cta),
  .site-nav a[aria-current="page"]:not(.cta),
  .site-nav .nav-dropbtn.is-active{
    background: color-mix(in srgb, var(--brand) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
    color: var(--text);
    text-decoration: none;
    border-radius:10px;
  }
  .site-nav a.is-active:not(.cta):hover,
  .site-nav a[aria-current="page"]:not(.cta):hover,
  .site-nav .nav-dropbtn.is-active:hover{
    background: color-mix(in srgb, var(--brand) 18%, #fff);
    text-decoration: none;
  }
}

/* Utažení mezer na středních šířkách, aby se menu nezalomilo */
@media (min-width:901px) and (max-width:1100px){
  :root{ --nav-gap:6px; --nav-pad-x:6px; --nav-pad-y:5px; --nav-font:.9rem; }
}
@media (min-width:901px) and (max-width:1000px){
  :root{ --nav-gap:4px; --nav-pad-x:6px; --nav-pad-y:4px; --nav-font:.88rem; }
}

/* ===================== BURGER + MOBILE NAV ===================== */
.burger{
  display:none;
  border:1px solid var(--border); padding:8px 10px; border-radius:10px; background:#fff;
  transition: background-color .2s ease, border-color .2s ease;
}
.burger[aria-expanded="true"]{ background:var(--surface); }

/* Mobilní navigace jako overlay pod headerem */
.mobile-nav{
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  z-index: 45;                 /* < header (50), > obsah */
  display: none;               /* ovládá JS přes [hidden] */
  flex-direction: column;
  gap: .25rem;
  padding: .75rem 1rem;
}
.mobile-nav[hidden]{ display:none !important; }
.mobile-nav a{ padding:10px 6px; border-radius:8px; transition: background-color .2s ease; }
.mobile-nav a:hover{ background:var(--surface); text-decoration:none; }
.mobile-nav a:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* Mobilní submenu */
.mobile-subtoggle{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 6px; border-radius:8px; border:1px solid transparent; background:transparent; width:100%;
  font: inherit; color:inherit; cursor:pointer;
}
.mobile-subtoggle:hover{ background:var(--surface); }
.mobile-subtoggle svg{ width:18px; height:18px; transition: transform .2s ease; }
.mobile-subtoggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
.mobile-submenu{ display:none; padding:6px 0 6px 10px; }
.mobile-submenu a{ padding:8px 6px; }

/* Aktivní položky – mobil */
.mobile-nav a.is-active,
.mobile-nav a[aria-current="page"]{
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
}

/* Mobilní breakpointy */
@media (max-width:900px){
  .site-nav{ display:none; }
  .burger{ display:block; }

  /* na mobilu jen ikonky (bez text labelů) – pořadí v markupu */
  .action .label{ display:none; }
  .header-actions{ gap:8px; }
  .header-actions .action,
  .header-actions .icon-link{
    font-size:0; min-width:38px; height:38px; padding:8px; gap:0;
  }
  .header-actions .action svg,
  .header-actions .icon-link svg{ width:20px; height:20px; }
}

/* ===================== LAYOUT / GRID ===================== */
.wrap [class*="grid-"],
.wrap .cards, .wrap .services, .wrap .features, .wrap .gallery{ gap: 1.25rem; }

/* 2 sloupce – default = 1 col na mobilu, 2 stejné od 900px */
.grid-2{
  display:grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* Modifikátor „asym“ (1.15fr / .85fr) od 768px */
@media (min-width: 768px){
  .grid-2.asym{ grid-template-columns: 1.15fr .85fr; align-items:start; }
}

/* 3 sloupce – 1 col na mobilu, 3 od 900px */
.grid-3{
  display:grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===================== KARTY / SLUŽBY / FEATURES ===================== */
.card{
  background: #fff;
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-1);
}

/* FIX: když je karta <a>, musí být bloková – jinak se border/padding "láme" na fragmenty */
a.card{
  display:block;
  color: inherit;
  text-decoration: none;
}
a.card:hover{
  text-decoration: none;
}

.cards .card h3{ margin:.25rem 0; font-size:1.05rem; }
.cards .card p{ color:var(--muted); }

/* Cards grid – 3 sloupce na desktopu */
.cards{
  display: grid;
  grid-template-columns: 1fr;      /* mobil: 1 sloupec */
  gap: 1.25rem;                    /* jistota, i kdyby nepřišlo z .wrap */
}
@media (min-width: 900px){
  .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Služby – malé ikonové karty */
.services .card{ display:flex; gap:.75rem; align-items:flex-start; }
.services .card img{ flex:0 0 auto; width:48px; height:48px; object-fit:contain; }
.services .card p{ margin:0; }

/* News teaser (Aktuálně) – aby obrázek i text seděly */
.news-teaser img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  margin-bottom:.75rem;
}
.news-teaser-body h2{ margin-top:0; }
.news-teaser-body p{ margin:0; color:var(--muted); }

/* Clamp (pokud používáš class="clamp-3") */
.clamp-3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}


/* Features – jednoduché dlaždice */
.features{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem;
}
@media (min-width: 840px){
  .features{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.features .feature{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.9rem;
}

/* Service-card s fotkou */
.service-card{ transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.service-card img{
  width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:.5rem;
}

/* Foto-karta: figure.card -> bez polštáře, pěkný caption */
figure.card{ padding:0; overflow:hidden; }
figure.card img{ display:block; width:100%; height:auto; }
figure.card figcaption{ padding:.8rem 1rem; color:var(--muted); }
/* volitelný alias */
.media-card{ padding:0; overflow:hidden; }
.media-card figcaption{ padding:.8rem 1rem; color:var(--muted); }

/* Značky – decentní zarovnání */
.brands .brand{ display:flex; align-items:center; justify-content:center; }
.brands img{ filter: grayscale(100%); opacity:.9; }

/* ===================== GALERIE ===================== */
.gallery{
  display:grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .gallery{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.gallery figure, .gallery .card{
  border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--border);
}
.gallery img{ width:100%; height:auto; display:block; }
.gallery figcaption{
  font-size:.925rem; color:var(--muted);
  padding:.6rem .8rem .8rem;
}
.gallery a{ display:block; } /* celý náhled klikací */

/* Volitelný modifikátor s ořezem na výšku */
.gallery--crop img{ height:180px; object-fit:cover; }

/* ===================== CHECKLIST / PROCESS / FAQ ===================== */
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.checklist li{ position:relative; padding-left:1.6rem; }
.checklist li::before{
  content:"✓";
  position:absolute; left:0; top:.05rem;
  width:1.1rem; height:1.1rem; line-height:1.1rem;
  text-align:center; border-radius:999px;
  background: var(--bg-soft); color: var(--accent);
  border:1px solid var(--border);
  font-weight:700; font-size:.8rem;
}

/* Process – číslované kroky */
.process{
  counter-reset: step;
  list-style:none; margin: .25rem 0 0; padding:0;
  display:grid; gap:.6rem;
}
.process li{
  counter-increment: step;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.75rem .9rem .75rem 3.1rem;
  position:relative;
  box-shadow: var(--shadow);
}
.process li::before{
  content: counter(step);
  position:absolute; left:.9rem; top:.7rem;
  width:1.8rem; height:1.8rem; line-height:1.8rem;
  text-align:center; border-radius:999px;
  background: var(--accent); color:#fff; font-weight:700;
}

/* FAQ */
.faq details{
  border:1px solid var(--border);
  border-radius:12px;
  padding:.75rem .9rem;
  background:#fff;
}
.faq details + details{ margin-top:.75rem; }
.faq summary{ cursor:pointer; font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"▾";
  float:right; color:var(--muted); transition: transform .2s ease;
}
.faq details[open] summary::after{ transform: rotate(180deg); }
.faq p{ color:var(--text); margin:.5rem 0 0; }

/* ===================== CTA BOX ===================== */
.cta{
  margin-top:1rem; background:var(--bg-soft);
  border:1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 12px;
  padding:1rem;
}
.cta .btn{
  margin-top:.5rem;
  background: var(--accent); color:#fff; border:none;
  padding:.6rem .95rem; border-radius:10px; font-weight:600; cursor:pointer;
}
.cta .btn:hover{ background: var(--accent-600); }
.cta .btn:focus{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===================== TYPO / BUTTONS V OBSAHU ===================== */
.wrap h1{ margin-bottom:.5rem; }
.wrap h2{ margin-top:1.25rem; margin-bottom:.5rem; }
.wrap h3{ margin:.9rem 0 .25rem; }
.wrap p{ color:var(--text); }
.wrap em{ font-style:italic; }

.wrap .btn{
  display:inline-block; background:var(--brand); color:#fff;
  border:none; padding:.6rem .95rem; border-radius:10px; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.wrap .btn:hover{ background:var(--brand-700); }
.wrap .btn:focus{ outline:2px solid var(--brand); outline-offset:2px; }

/* ===================== HERO (A/B – FOTO vs VIDEO) ===================== */
.hero{
  position: relative;
  overflow:hidden;
  color:#fff;
  background:#0b1d10; /* default tmavý */
  min-height: clamp(460px, 62vh, 740px);
  border-bottom: 1px solid transparent; /* místo pro případný světlý hero */
}
@media (min-width: 900px){
  .hero{ min-height: clamp(560px, 70vh, 820px); }
}
.hero--light{
  color: var(--text);
  background: linear-gradient(180deg, var(--surface), #fff);
  border-bottom-color: var(--border);
}

.hero .wrap{ position:relative; z-index:2; }
.hero-wrap{
  display:grid; gap:1.25rem; padding:2rem 0;
  min-height: inherit; align-items: center;
}
@media (min-width: 900px){
  .hero-wrap{ grid-template-columns: 1.2fr .8fr; align-items:start; padding:3rem 0; }
}

.hero-copy .lead{ margin:.4rem 0 .8rem; }
.hero-cta .btn{ margin-right:.4rem; }
.hero-form h3{ margin-top:0; }

/* KPI chipy – inline + v rohu */
.kpis{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 1rem; }
.kpi{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  padding:.4rem .6rem; border-radius:999px; font-size:.95rem;
}
.hero-kpis{
  position:absolute; left: 1rem; bottom: 1rem; z-index: 3;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
@media (min-width: 900px){
  .hero-kpis{ left: 2rem; bottom: 1.25rem; }
}
.hero-kpis .kpi{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
}

/* Pozadí hero (foto/video) */
.hero-bg{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-bg-photo, .hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* jistota – nic neblokuje kliky v headeru ani formuláře */
.hero-bg, .hero-bg-photo, .hero-bg-video{ pointer-events:none; }

[data-variant="photo"] .hero-bg-video{ display:none !important; }
[data-variant="video"] .hero-bg-photo{ display:none !important; }

/* Stmavení kvůli čitelnosti */
.hero-bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.15));
}

/* Volitelné tlačítko pauzy videa */
.hero-video-toggle{
  position:absolute; right:1rem; bottom:1rem;
  background:rgba(0,0,0,.5); color:#fff; border:1px solid rgba(255,255,255,.25);
  padding:.4rem .7rem; border-radius:10px; font-weight:600; cursor:pointer;
}
.hero-video-toggle:focus{ outline:2px solid #1f8a3b; outline-offset:2px; }

/* Respektuj reduced-motion */
@media (prefers-reduced-motion: reduce){
  .hero-bg-video{ display:none !important; }
}
@media (max-width: 420px){
  .kpis .kpi{ font-size:.9rem; padding:.3rem .5rem; }
}

/* ===================== SEZÓNNÍ BANNER ===================== */
.seasonal-banner{ position:relative; z-index:5; }
.seasonal-banner .wrap{
  display:flex; gap:.75rem; align-items:center; justify-content:space-between;
  padding:.6rem .5rem;
}
.seasonal-banner .msg{ font-weight:600; }
.seasonal-banner .btn-link{
  background:none; border:none; color:inherit; cursor:pointer;
  font-size:1.25rem; line-height:1; padding:.2rem .4rem;
}
.seasonal-banner.info{ background:#0b4d1a; color:#fff; }
.seasonal-banner.alert{ background:#7c2d12; color:#fff; }
.seasonal-banner.off{ display:none; }

/* === Cookies bar ======================================================= */
.cookies-bar[hidden] { display: none !important; }

.cookies-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1200;
  background: var(--header-bg, rgba(255,255,255,.85));
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border, #e3e9e5);
  box-shadow: var(--shadow-1, 0 2px 16px rgba(0,0,0,.06));
  /* animace nájezdu */
  transform: translateY(100%);
  transition: transform .28s ease, opacity .28s ease;
  opacity: 0;
  /* bezpečný odstup u iOS */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px));
}

.cookies-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.cookies-bar .bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2.2vw, 24px);
  padding: clamp(10px, 1.6vw, 16px) 0;
}

.cookies-bar .bar-text {
  flex: 1 1 auto;
  min-width: 240px;
  color: var(--text, #0b1721);
}

.cookies-bar .bar-text strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

.cookies-bar .bar-text p {
  margin: 0 0 6px 0;
  color: var(--muted, #5b6b75);
  line-height: 1.45;
}

.cookies-bar .cookies-link {
  color: var(--brand, #2b8a3e);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookies-bar .bar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Knoflíky – jemné lokální doladění velikosti */
.cookies-bar .btn,
.cookies-bar .btn-secondary,
.cookies-bar .btn-plain {
  padding: .5rem .8rem;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* Plain (odkazovější vzhled) */
.cookies-bar .btn-plain {
  background: transparent;
  color: var(--text, #0b1721);
  border: 1px dashed var(--border, #e3e9e5);
}

/* Ikonové X (pokud nemáš globálně) */
.cookies-bar .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border, #e3e9e5);
  background: transparent;
  color: var(--muted, #5b6b75);
  line-height: 1;
}

/* Responsivita: na mobilu pod sebe */
@media (max-width: 900px) {
  .cookies-bar .bar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cookies-bar .bar-actions {
    justify-content: flex-start;
  }
}

/* Dark mode – vyšší čitelnost */
@media (prefers-color-scheme: dark) {
  .cookies-bar {
    background: rgba(20, 24, 28, .85);
    border-top-color: rgba(255,255,255,.08);
  }
  .cookies-bar .bar-text p { color: rgba(255,255,255,.8); }
  .cookies-bar .btn-plain,
  .cookies-bar .icon-btn {
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.85);
  }
}
@media (prefers-color-scheme: dark){
  /* Cookies bar – explicitní světlejší typografie a kontrastní prvky */
  .cookies-bar{
    color: #e7efe9; /* jistota i na starších enginech */
  }
  .cookies-bar .bar-text,
  .cookies-bar .bar-text p{
    color: rgba(255,255,255,.9);
  }
  .cookies-bar .cookies-link{
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* tlačítka v liště – ať nepůsobí „zašedle“ */
  .cookies-bar .btn{
    background: var(--brand-700);
    color: #0b120f;
    border: 1px solid var(--brand-600);
  }
  .cookies-bar .btn:hover{ background: var(--brand-600); }
  .cookies-bar .btn-plain,
  .cookies-bar .icon-btn{
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.2);
  }
}

/* Cookies bar – LIGHT fix (vynutit světlé pozadí a tmavý text) */
@media (prefers-color-scheme: light) {
  .cookies-bar {
    background: #ffffff !important;          /* už žádná tmavě zelená */
    color: var(--text, #0b1721);
    border-top-color: var(--border, #e3e9e5);
  }
  .cookies-bar .bar-text p {
    color: var(--muted, #5b6b75);
  }
  .cookies-bar .btn-plain,
  .cookies-bar .icon-btn {
    color: var(--text, #0b1721);
    border-color: var(--border, #e3e9e5);
  }
  .cookies-bar .cookies-link {
    color: var(--brand, #2b8a3e);
  }
}

/* Nechceme v tisku */
@media print {
  .cookies-bar { display: none !important; }
}


/* Modal */
.cookies-modal{
  position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.45);
  display: grid; place-items: center; padding: 1rem;
}
.cookies-dialog{
  background: #fff; color: var(--text); width: min(720px, 100%);
  border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow);
  overflow: hidden;
}
.cookies-header, .cookies-footer{ padding: .9rem 1rem; background: var(--bg-soft); }
.cookies-body{ padding: 1rem; }
.cookies-close{ background: transparent; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.cookies-group{ padding: .6rem 0; border-bottom: 1px dashed var(--border); }
.cookies-group:last-child{ border-bottom: none; }

/* Switch */
.cookies-switch{ display:flex; align-items:center; gap:.7rem; cursor:pointer; }
.cookies-switch input{ display:none; }
.cookies-switch .slider{
  width: 44px; height: 24px; background:#d1d5db; border-radius: 999px; position: relative; transition:.2s ease;
}
.cookies-switch .slider::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); transition:.2s ease;
}
.cookies-switch input:checked + .slider{ background: var(--accent); }
.cookies-switch input:checked + .slider::after{ transform: translateX(20px); }
.cookies-switch .label{ color: var(--text); }

/* ===================== FORM / OBECNÉ ===================== */
.form{ display:grid; gap:12px; }
.form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form label{ display:block; margin-bottom:6px; color:var(--muted); }
.form input, .form select, .form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--brand-600);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}
.form .consent{ font-size:14px; color:var(--muted); }

/* ===================== PATIČKA ===================== */
.site-footer{ margin-top:40px; border-top:1px solid var(--border); background:#fff; padding:24px 0; }
.small{ font-size:12px; color:var(--muted); margin-top:8px; }

/* ===================== MODAL (obecný) ===================== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center;
  z-index:1000;
}
.modal-backdrop.open{ display:flex; }
.modal-backdrop[hidden]{ display:none !important; }
.modal{
  width:min(700px, 92vw);
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  padding:18px; position:relative;
}
.modal h3{ margin:0 0 6px; }
.modal .contact-quick{ margin:0 0 12px; color:var(--muted); }
.modal .modal-close{
  position:absolute; right:16px; top:10px; width:36px; height:36px;
  border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer;
  font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.modal .modal-close:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
body.modal-open{ overflow: hidden; }

/* ===================== A11Y / REDUCED MOTION ===================== */
:where(a, button, [role="button"], summary):focus{
  outline: none; /* zrušit "always focus" (myš) */
}

:where(a, button, [role="button"], summary):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Karty jako odkazy – místo outline použijeme ring přes box-shadow (respektuje radius) */
a.card:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent),
    var(--shadow-1);
}


/* ===================== DARK MODE ===================== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1110;
    --text:#e7efe9;
    --muted:#a8b9b0;
    --surface:#141a18;
    --border:#26332c;

    --brand:#8fe39f;
    --brand-600:#7bd68d;
    --brand-700:#5fc877;

    --header-bg: rgba(15,20,18,.72);
    --shadow-1: 0 2px 16px rgba(0,0,0,.35);
  }

  body{ background: var(--bg); color: var(--text); }

  .site-header,
  .mobile-nav,
  .card,
  .site-footer { background:#0f1412; }

  .site-header { border-bottom: 1px solid var(--border); }
  .mobile-nav { border-top: 1px solid var(--border); }
  .card { border-color: var(--border); }
  .hero { background: linear-gradient(180deg, #0f1412, #0e1110); }
  .gallery img { border-color: var(--border); }

  a{ color: var(--brand); }
  .wrap .btn{ background: var(--brand-700); color:#0b120f; }
  .wrap .btn:hover{ background: var(--brand-600); }

  /* mobilní aktivní položka – tmavší podklad */
  .mobile-nav a.is-active,
  .mobile-nav a[aria-current="page"]{
    background:#1b2521;
    border-color:#2b3a33;
    color:var(--text);
  }

  /* desktop aktivní položka – mix zelené s tmavým */
  @media (min-width:901px){
    .site-nav a.is-active:not(.cta),
    .site-nav a[aria-current="page"]:not(.cta),
    .site-nav .nav-dropbtn.is-active{
      background: color-mix(in srgb, var(--brand) 22%, #0f1412);
      border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
      color:var(--text);
    }
    .site-nav a.is-active:not(.cta):hover,
    .site-nav a[aria-current="page"]:not(.cta):hover,
    .site-nav .nav-dropbtn.is-active:hover{
      background: color-mix(in srgb, var(--brand) 28%, #0f1412);
      text-decoration:none;
    }
  }

  /* vstupy ve tmě */
  .form input,.form select,.form textarea{
    background:#0f1412; color:var(--text); border-color:#2b3a33;
  }
  .form input::placeholder,.form textarea::placeholder{
    color: color-mix(in srgb, var(--muted) 70%, transparent);
  }

  /* akce (ikonky) v tmě */
  .action, .icon-link{ background:#0f1412; color:var(--text); border-color:#2b3a33; }
  .action:hover, .icon-link:hover{ background:#1b2521; }

  /* dropdown v dark módu */
  .nav-dropmenu{ background:#0f1412; border-color:#2b3a33; box-shadow: 0 8px 28px rgba(0,0,0,.5); }
  .nav-dropmenu a:hover{ background:#1b2521; }

  /* Cookies modal/dialog */
  .cookies-dialog{ background:#0f1412; color:var(--text); border-color:#2b3a33; box-shadow: var(--shadow-1); }
}

/* ===================== Anti-spam honeypot ===================== */
.hp{
  position:absolute!important;
  left:-9999px!important;
  opacity:0!important;
  height:0!important;
  width:0!important;
  pointer-events:none!important
}

/* === Modal form fixes === */
.modal .form .consent {
  margin: .5rem 0 .75rem;
}

/* checkbox musí zrušit globální width:100% a být inline */
.modal .form input[type="checkbox"] {
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

/* label se zobrazí v jedné řádce s checkboxem */
.modal .form .consent label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.3;
  color: var(--muted);
}

/* Volitelné: hezčí „custom“ checkbox (ponech, pokud nechceš OS styl) */
.modal .form .consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  position: relative;
}
.modal .form .consent input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.modal .form .consent input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #fff;
}

/* Zelené primární tlačítko i pro <button> */
button.btn,
.modal .btn {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand-600);
  border-radius: 12px;
  padding: .65rem 1rem;
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
button.btn:hover,
.modal .btn:hover { background: var(--brand-600); }
button.btn:disabled,
.modal .btn:disabled { opacity: .6; cursor: not-allowed; }

/* Grid v modalu – jistota rozvržení */
.modal .form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 680px) { .modal .form .grid-2 { grid-template-columns: 1fr; } }

/* === Dark mode – čitelné "chlívečky" (FAQ, proces, CTA) =============== */
@media (prefers-color-scheme: dark) {
  .faq details,
  .process li,
  .cta,
  .features .feature,
  .services .card,
  .cards .card,
  figure.card,
  .media-card {
    background: #141a18;
    color: var(--text);
    border-color: #2b3a33;
  }

  .faq summary,
  .faq p { color: var(--text); }
  .faq summary::after { color: var(--muted); }

  /* Kroky – ponecháme zelený badge, ale ať je hezky sytý */
  .process li::before {
    background: var(--brand-700);
    color: #0b120f;
  }

  /* Jemné hovery na tmavém pozadí */
  .faq details:hover,
  .process li:hover,
  .features .feature:hover,
  .services .card:hover,
  .cards .card:hover {
    background: #18201c;
  }



/* === NEWS TEASER (Aktuálně) – kompaktní náhled vlevo na desktopu === */
.news-teaser{
  display:grid;
  gap:1rem;
  align-items:start;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg);
  box-shadow: var(--shadow);
}

@media (prefers-color-scheme: dark){
  .news-teaser{
    background:#141a18;
    border-color:#2b3a33;
    box-shadow: 0 8px 22px rgba(0,0,0,.35); /* měkčí, bez světlé „linky“ */
  }
  .news-teaser-body h2,
  .news-teaser-body p{
    color: var(--text);
  }
}

/* Mobil: obrázek nad textem (implicitně jeden sloupec) */
.news-teaser img{
  width:100%;
  aspect-ratio: 4 / 3;   /* ořízne do 4:3 */
  object-fit: cover;     /* kompaktní, bez deformace */
  border-radius:10px;
}

/* Desktop: kompaktní sloupec s náhledem vlevo */
@media (min-width: 900px){
  .news-teaser{
    grid-template-columns: 260px 1fr; /* šířka náhledu – klidně 240–320px podle chuti */
  }
}

/* Typografie vpravo */
.news-teaser-body h2{
  margin:0 0 .35rem 0;
  font-size:1.25rem;
  line-height:1.25;
}
.news-teaser-body p{ margin:.25rem 0 0; }

/* Utility pro ořez textu (pokud ještě nemáš) */
.clamp-2, .clamp-3, .clamp-4{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.clamp-2{-webkit-line-clamp:2;}
.clamp-3{-webkit-line-clamp:3;}
.clamp-4{-webkit-line-clamp:4;}

/* === Links uvnitř chlívečků: bez podtržení, zvýraznit celý box ========== */

/* nepodtrhávat odkazy v boxech (přepíše globální a:hover) */
.cards .card a:hover,
.services .card a:hover,
.features .feature a:hover,
.faq details a:hover,
.process li a:hover,
figure.card a:hover,
a.card:hover {                 /* např. <a class="card service-card"> */
  text-decoration: none;
}

/* jistota: i v běžném stavu bez podtržení */
.cards .card a,
.services .card a,
.features .feature a,
.faq details a,
.process li a,
figure.card a,
a.card {
  text-decoration: none;
}

/* jemné podbarvení CELÉHO chlívečku na hover + klávesový focus */
.cards .card,
.features .feature,
.faq details,
.process li {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cards .card:hover,
.cards .card:focus-within,
.features .feature:hover,
.features .feature:focus-within,
.faq details:hover,
.faq details:focus-within,
.process li:hover,
.process li:focus-within {
  background: color-mix(in srgb, var(--surface) 85%, #fff);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}

/* figure.card (foto-karta) – zvýraznit až při hoveru nad figurou, ne jen linkem */
figure.card:hover,
figure.card:focus-within {
  background: color-mix(in srgb, var(--surface) 85%, #fff);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}

/* Dark mode – tmavší highlight */
@media (prefers-color-scheme: dark) {
  .cards .card:hover,
  .cards .card:focus-within,
  .features .feature:hover,
  .features .feature:focus-within,
  .faq details:hover,
  .faq details:focus-within,
  .process li:hover,
  .process li:focus-within,
  figure.card:hover,
  figure.card:focus-within {
    background: #18201c;
    border-color: #2b3a33;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
  }
}

/* KPI chips – zrušit puntíky */
.kpis,
.hero-kpis{
  list-style: none;
  margin: 0;
  padding: 0;
}

.kpis > li,
.hero-kpis > li{
  list-style: none;
}

/* prohlížeče, které si drží marker */
.kpis > li::marker,
.hero-kpis > li::marker{
  content: none;
}

/* volitelně: ať je „pilulka“ stabilní */
.kpi{
  display: inline-flex;
  align-items: center;
}

/* ===== Aktualita / Zazimování – hero 1:2, tři chlívečky, utažené mezery ===== */
@media (min-width: 900px){
  /* 1 : 2 ve prospěch textu vpravo */
  [data-template="aktualita-zazimovani-v1"] .grid-2.asym{
    grid-template-columns: 1fr 2fr;
    column-gap: .5rem; /* pravý sloupec "nalepený" na foto */
  }

  /* chlívečky: 3 vedle sebe + menší rozestupy */
  [data-template="aktualita-zazimovani-v1"] article .cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .6rem;
  }
  [data-template="aktualita-zazimovani-v1"] article .cards .card{
    padding: 16px; /* kompaktnější, ale čitelné */
  }

  /* zmenšíme vnitřní pravý okraj celé hero karty (text blíž k pravému okraji stránky) */
  [data-template="aktualita-zazimovani-v1"] article.card.media-card{
    padding-right: 10px;  /* min. mezera k pravému okraji karty */
    padding-left: 12px;   /* lehce stažené i vlevo */
  }

  /* drobná úprava typografie úvodu, ať se vejde víc textu */
  [data-template="aktualita-zazimovani-v1"] article p{
    line-height: 1.6;
    margin-block: .4rem;
  }

  /* jistota: obrázek bez přesahu – skutečně menší než dřív */
  [data-template="aktualita-zazimovani-v1"] article figure img{
    width: 100%;
    margin-left: 0;
  }
}

/* Jemné doladění padování a mezer na mobilech */
@media (max-width: 768px){
  .wrap{
    padding-inline: 20px;      /* místo 16px trochu víc vzduchu ze stran */
  }

  .hero-wrap{
    padding-top: 2.3rem;
    padding-bottom: 2.3rem;    /* o fous víc místa v hero */
  }

  .section{
    margin-block: 2.4rem;      /* větší mezera mezi bloky */
  }
}

/* ===================== ADMIN ANALYTICS (zahrada-art.cz) ===================== */
.za-chart { display:block; }
.za-bars{
  height: 220px;
  display:grid;
  grid-template-columns: repeat(var(--bars, 24), minmax(0, 1fr));
  gap: 3px;
  align-items:end;
  padding: 8px 6px 2px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
}
.za-bar{
  background: color-mix(in srgb, var(--accent) 70%, #fff);
  border-radius: 8px 8px 6px 6px;
  min-height: 2px;
}
.za-xlabels{
  display:grid;
  grid-template-columns: repeat(var(--bars, 24), minmax(0, 1fr));
  gap: 3px;
  padding: 6px 6px 0;
  color: var(--muted);
  font-size: 12px;
}
.za-xlabels span{ text-align:center; }

.za-table th, .za-table td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  text-align:left;
  vertical-align: top;
}
.za-table thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.za-table code{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 8px;
}