/* CEBU - chráněná dílna s.r.o.
   Styl webu podle grafického manuálu v1.1.
   Bez cizích zdrojů: písmo je hostované lokálně, žádné skripty třetích stran. */

@font-face{font-family:Lato;src:url(fonts/Lato-Regular.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(fonts/Lato-Semibold.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(fonts/Lato-Bold.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --text:#15171a;          /* 17,96:1 na bílé */
  --sub:#5F656B;           /* 5,90:1 */
  --akcent:#9A5200;        /* 5,86:1 */
  --akcent-tmavy:#7E4300;
  --modra:#0B6E96;         /* 5,70:1 */
  --zelena:#4A6425;        /* 6,69:1 */
  --plocha-or:#F69525;     /* jen plocha, nikdy text */
  --krem:#FBF7F0;
  --krem2:#F5EEE2;
  --linka:#E6E4DF;
  --sirka:1320px;          /* širší sazba pro velké monitory */
  --motiv:#EDE4D4;         /* světlý tón pro motiv skřítka v pozadí */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Lato,"Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.65;
  color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--akcent)}
a:hover{color:var(--akcent-tmavy)}
.obal{max-width:var(--sirka);margin:0 auto;padding:0 24px}

/* ---------- přeskočení na obsah, přístupnost ---------- */
.preskoc{position:absolute;left:-9999px;top:0;background:var(--text);color:#fff;
  padding:12px 18px;z-index:100}
.preskoc:focus{left:0}
:focus-visible{outline:3px solid var(--akcent);outline-offset:2px}

/* ---------- hlavička ---------- */
.pruh{height:5px;background:var(--plocha-or)}
header{border-bottom:1px solid var(--linka);background:#fff;position:sticky;top:0;z-index:20}
.hlavicka{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 0;flex-wrap:wrap}
.hlavicka .logo img{height:56px;width:auto}   /* výška značky 56 px dle manuálu, kap. 13 */
nav ul{list-style:none;display:flex;gap:26px;flex-wrap:nowrap;align-items:center}
nav li{white-space:nowrap}
nav a{color:var(--text);text-decoration:none;font-weight:600;padding:6px 0;
  border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--plocha-or);color:var(--text)}
nav a[aria-current=page]{border-bottom-color:var(--akcent);color:var(--akcent)}

/* ---------- typografie ---------- */
h1{font-size:40px;line-height:1.15;font-weight:700;letter-spacing:-.5px}
h2{font-size:26px;line-height:1.25;font-weight:700;margin-bottom:14px}
h3{font-size:19px;line-height:1.3;font-weight:700}
/* Délka řádku nejvýše 80 znaků podle doporučení WCAG 1.4.8. Dlouhý řádek nejvíc
   škodí čtenářům s dyslexií a poruchou pozornosti, tedy části cílové skupiny.
   Široká sazba zůstává, strop se týká jen běžícího textu.
   POZOR: jednotka `ch` je šířka číslice nula, u Lata výrazně užší než průměrný
   znak běžného textu. `80ch` vychází na 110 skutečných znaků. Změřeno v prohlížeči:
   na 80 znaků sedí 58ch, a to shodně pro 15, 17 i 20 px, protože obě veličiny
   škálují s velikostí písma. */
p,li,dd{max-width:58ch}
.perex{font-size:20px;color:var(--sub);max-width:58ch}
.mala{font-size:15px;color:var(--sub)}
.kicker{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--akcent);
  font-weight:600;margin-bottom:10px}

/* ---------- sekce ---------- */
section{padding:64px 0}
section.krem{background:var(--krem)}
section.uvod{padding:72px 0 60px;position:relative;overflow:hidden}
.dva{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
/* jen fotografie (bez třídy), ne motivy značky - ty mají vlastní rozměr */
.dva img:not([class]){width:100%;max-height:440px;object-fit:cover}

/* ---------- propojovací motiv: skřítek s medem, včelka a květiny ---------- */
/* Kotví se k hornímu okraji pásu, ne na střed. Na dlouhých stránkách (článek) by
   se jinak posunul doprostřed textu. Šířka 250 px, aby se do pásu vešel celý
   (poměr motivu 490:436, tedy výška 222 px). */
.motiv-scena{position:absolute;right:2%;top:24px;
  width:250px;height:auto;z-index:0;pointer-events:none}
.uvod .obal{position:relative;z-index:1}
section.citat{background:var(--krem);position:relative;overflow:hidden;padding:74px 0}
section.citat .obal{position:relative;z-index:1}
.motiv-scena.velka{width:460px;right:auto;left:50%;top:50%;
  transform:translate(-50%,-50%);opacity:.75}
.ruce-uvod{width:150px;height:auto;margin-bottom:18px}
blockquote{border:0;margin:0;text-align:center}
/* šířka 700 px drží citát na dvou řádcích v běžném zobrazení */
blockquote p{font-size:27px;line-height:1.38;font-weight:700;max-width:700px;margin:0 auto}
blockquote cite{display:block;margin-top:16px;font-style:normal;font-size:14px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--sub);font-weight:600}

/* ---------- tlačítka ---------- */
.tlacitko{display:inline-block;background:var(--akcent);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:26px;font-weight:600;margin-top:22px}
.tlacitko:hover{background:var(--akcent-tmavy);color:#fff}
.tlacitko.duch{background:transparent;color:var(--akcent);border:2px solid var(--akcent);
  padding:11px 24px}
.tlacitko.duch:hover{background:var(--krem2);color:var(--akcent-tmavy)}

/* ---------- motiv rukou ---------- */
.ruce{display:block;margin:0 auto;width:200px;opacity:1}
.ruce-svetle{width:280px;opacity:.5}

/* ---------- mřížka výrobků ---------- */
.mrizka{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
/* Ořez fotografie je na vnitřním rámu, ne na kartě, aby z něj mohla visačka
   přesahovat ven. S `overflow:hidden` na kartě se visačka uřízne. */
.karta{border:1px solid var(--linka);border-radius:12px;background:#fff}
.karta-foto{position:relative}
.karta-ram{overflow:hidden;border-radius:11px 11px 0 0;background:var(--krem2)}
.karta-ram img{width:100%;height:230px;object-fit:cover}
.karta .telo{padding:40px 20px 22px}

/* ---------- papírová visačka ----------
   Jediný prvek převzatý z varianty D. Je to obrys skutečné visačky, kterou dílna
   dává na každý výrobek: srdce s jemným ozdobným střihem, dírka a stužka.
   Nese cenu, takže cena je zároveň text pro čtečku i pro vyhledávač. */
.visacka{position:absolute;right:6px;bottom:-34px;width:96px;height:95px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px 18px 0;text-align:center;
  background:url(logo/visacka_papir.svg) no-repeat center/contain;
  transform:rotate(-7deg);transition:transform .35s ease;z-index:2}
.visacka b{font-size:16px;font-weight:700;line-height:1.05;white-space:nowrap;
  color:var(--text)}
.karta:hover .visacka{transform:rotate(0)}
.karta:hover .karta-ram img{transform:scale(1.03)}
.karta-ram img{transition:transform .5s ease}
.rozmer{font-size:14px;color:var(--sub);margin-top:4px}

/* ---------- parametry výrobku ---------- */
.parametry{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
  margin-top:14px;font-size:14px}
.parametry dt{color:var(--sub)}
.parametry dd{font-weight:600;max-width:none}

/* ---------- úkony na stránce Práce u nás ---------- */
.ukony{margin:14px 0 0 20px}
.ukony li{margin-bottom:8px}

.karta h3{margin-bottom:6px}
.cena{color:var(--akcent);font-weight:700}
.karta .telo p:first-of-type{margin-top:0}
.stitek{display:inline-block;background:var(--krem2);color:var(--text);font-size:13px;
  font-weight:600;padding:3px 10px;border-radius:12px;margin-top:10px}

/* ---------- hodnoty ---------- */
.hodnoty{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}
/* čtyři body bezbariérovosti se mají vejít do jedné řady, jinak zůstane
   poslední osamocený pod ostatními */
.hodnoty.ctyri{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hodnota{background:#fff;border-radius:12px;padding:26px}
section.krem .hodnota{background:#fff}
.hodnota h3{margin-bottom:8px}

/* ---------- aktuality ---------- */
.clanky{display:grid;gap:24px;margin-top:34px}
.clanek-nahled{display:grid;grid-template-columns:300px 1fr;gap:28px;
  border:1px solid var(--linka);border-radius:12px;overflow:hidden;background:#fff}
.clanek-nahled img{height:100%;min-height:200px;object-fit:cover}
.clanek-nahled .telo{padding:26px 28px 28px}
.datum{font-size:14px;color:var(--sub);font-weight:600;letter-spacing:.6px}
article.clanek{max-width:660px;margin:0 auto}
article.clanek img.hlavni{border-radius:12px;margin:28px 0}
article.clanek h2{margin-top:34px}
article.clanek p{margin-bottom:16px;max-width:58ch}
.pozvanka{background:var(--krem2);border-left:4px solid var(--plocha-or);
  border-radius:0 10px 10px 0;padding:24px 28px;margin:28px 0}
.pozvanka dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-top:12px}
.pozvanka dt{color:var(--sub)}
.pozvanka dd{font-weight:600}

/* ---------- kontakt ---------- */
.kontakt-mriz{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.box{border:1px solid var(--linka);border-radius:12px;padding:26px 30px 30px}
.box h2{margin-bottom:6px}
.udaje dt{color:var(--sub);font-size:15px;margin-top:16px}
.udaje dd{font-weight:600;font-size:18px}
/* ---------- mapa ----------
   Statický obrázek, ne vložená mapa. Web proto nenačítá cizí skripty a nepotřebuje
   souhlas s cookies. Podle licence ODbL musí být u mapy uveden zdroj. */
.mapa{margin:0}
.mapa-plocha{display:block;border:1px solid var(--linka);border-radius:12px;
  overflow:hidden;background:var(--krem2);text-decoration:none}
.mapa-plocha img{width:100%;height:auto;display:block}
.mapa-cekani{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:340px;padding:26px;text-align:center;color:var(--sub)}
.mapa-cekani .mala{max-width:34ch}
.mapa figcaption{margin-top:10px;font-size:13px;color:var(--sub);line-height:1.6}

/* ---------- patička ---------- */
footer{background:var(--krem);border-top:1px solid var(--linka);padding:48px 0 34px;
  margin-top:0}
footer .ruce{width:300px;margin:0 auto 30px}
.paticka-mriz{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;
  padding-top:26px;border-top:1px solid var(--linka)}
footer h3{font-size:15px;margin-bottom:10px}
footer ul{list-style:none}
footer li{margin-bottom:6px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
.paticka-zapati{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--linka)}
.paticka-logo{width:220px;height:auto}
.pravni{font-size:14px;color:var(--sub);line-height:1.9;max-width:58ch}

/* ---------- mobil ---------- */
@media (max-width:1100px){
  .motiv-scena{display:none}
  .motiv-scena.velka{display:block;width:340px}
}
@media (max-width:900px){
  .dva,.kontakt-mriz{grid-template-columns:1fr;gap:32px}
  .mrizka,.hodnoty,.hodnoty.ctyri{grid-template-columns:1fr 1fr}
  .clanek-nahled{grid-template-columns:1fr}
  .clanek-nahled img{min-height:200px;max-height:240px}
  .paticka-mriz{grid-template-columns:1fr 1fr}
  .paticka-zapati{grid-template-columns:1fr;gap:22px;text-align:center}
  .paticka-logo{margin:0 auto}
}
@media (max-width:620px){
  body{font-size:17px}
  .visacka{width:84px;height:83px;padding:10px 14px 0;right:4px;bottom:-30px}
  .visacka b{font-size:14px}
  .karta .telo{padding-top:34px}
  h1{font-size:30px}
  h2{font-size:22px}
  blockquote p{font-size:21px}
  footer .ruce{width:220px}
  .mrizka,.hodnoty,.hodnoty.ctyri,.paticka-mriz{grid-template-columns:1fr}
  .hlavicka{justify-content:center;text-align:center}
  nav ul{justify-content:center;gap:14px;flex-wrap:wrap}
  nav a{font-size:16px}
  section{padding:44px 0}
}

/* ---------- včelka u nadpisu ----------
   Jediný pohyblivý prvek na webu. Zbytek motivů je statický záměrně. */
.nadpis-radek{display:flex;align-items:center;gap:14px}
.nadpis-radek h2{margin-bottom:0}
.nadpis-radek + p,.nadpis-radek + .perex{margin-top:14px}
/* odsazení mezititulků v článku drží řádek, ne samotný nadpis uvnitř něj */
article.clanek .nadpis-radek{margin-top:34px}
.vcelka-mala{width:48px;height:auto;flex:0 0 auto;
  animation:vcelka-poletuje 5.5s ease-in-out infinite}
@keyframes vcelka-poletuje{
  0%{transform:translate(0,0) rotate(-7deg)}
  30%{transform:translate(5px,-7px) rotate(5deg)}
  60%{transform:translate(-3px,-3px) rotate(-4deg)}
  100%{transform:translate(0,0) rotate(-7deg)}
}

/* Kdo si nepřeje pohyb, ten ho nedostane. Bez tohoto pravidla by web mohl vadit
   lidem s vestibulárními potížemi nebo poruchou pozornosti. U chráněné dílny to
   považujeme za povinnost, ne za nadstandard. Nikdy neodstraňovat. */
@media (prefers-reduced-motion: reduce){
  .vcelka-mala{animation:none}
  .visacka,.karta-ram img,.karta:hover .visacka,.karta:hover .karta-ram img{
    transition:none}
}

@media print{
  header,nav,.tlacitko{display:none}
  body{font-size:11pt}
  .vcelka-mala{animation:none}
  .visacka{position:static;transform:none;background:none;width:auto;height:auto;
    padding:0;display:inline-block;border:1px solid #000;padding:2px 8px}
}