/* FOOE Web Starter – prvky z fooe.eu. Proměnné lze přepsat v Breakdance / vlastním CSS. */
:root{--fws-accent:#6fcf9b;--fws-logo-h:46px;--fws-logo-gap-x:64px;--fws-logo-gap-y:68px;--fws-shade:10,12,10}

/* 1) Mřížka log klientů (.fs-logos > .fs-logo > img.fs-logo__img). Loga se bílí filtrem, bez ohledu na původní barvu. */
html body .fs-logos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:var(--fws-logo-h);gap:var(--fws-logo-gap-y) var(--fws-logo-gap-x);justify-items:center;align-items:center;max-height:none;overflow:visible;padding:0}
html body .fs-logos>*:nth-child(n){display:flex}
html body .fs-logo{display:flex;justify-content:center;align-items:center;height:var(--fws-logo-h);opacity:1;transition:opacity .4s ease}
html body .fs-logo:hover{opacity:.5}
html body .fs-logo__img{width:auto;height:auto;max-width:68%;max-height:var(--fws-logo-h);object-fit:contain;filter:brightness(0) invert(1)}
html body .fs-logo__img[src$=".svg"],html body .fs-logo__img[src*="-w."]{filter:none}
@media(max-width:1023px){html body .fs-logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:52px 40px}}
@media(max-width:767px){html body .fs-logos{grid-template-columns:repeat(3,minmax(0,1fr));--fws-logo-h:36px;gap:44px 28px}html body .fs-logo__img{max-width:75%}}

/* 2) Hero: tmavý přechod přes foto/video. Text je dole, proto je dole nejtmavší; nahoře jen lehce (kvůli hlavičce). Na mobilu nahoře krátce. */
body .fs-hero__shade{background:linear-gradient(180deg,rgba(var(--fws-shade),.55) 0%,rgba(var(--fws-shade),.45) 35%,rgba(var(--fws-shade),.72) 70%,rgba(var(--fws-shade),.88) 100%)!important;opacity:1!important}
@media(max-width:767px){html body .fs-hero__shade{background:linear-gradient(180deg,rgba(var(--fws-shade),.5) 0%,rgba(var(--fws-shade),0) 16%,rgba(var(--fws-shade),.18) 45%,rgba(var(--fws-shade),.72) 72%,rgba(var(--fws-shade),.9) 100%)!important}}

/* 3) Animace loga v hlavičce (.fs-brand__logo). Obrázek: najede zespodu. Inline SVG: každý tvar (písmeno) naskočí postupně,
   tvar s třídou .fws-sq (akcent, např. čtvereček) dojede zprava. Barvu akcentu nastav fill:var(--fws-accent). */
@keyframes fws-logo-in{from{opacity:0;transform:translateY(55%)}to{opacity:1;transform:none}}
@keyframes fws-logo-sq{0%{opacity:0;transform:translateX(260%) rotate(-180deg)}100%{opacity:1;transform:none}}
html body .fs-brand__logo{height:var(--fws-logo-h);width:auto}
img.fs-brand__logo{animation:fws-logo-in .8s cubic-bezier(.2,.8,.2,1) both}
svg.fs-brand__logo{overflow:visible}
svg.fs-brand__logo>*{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:fws-logo-in .75s cubic-bezier(.2,.8,.2,1) both}
svg.fs-brand__logo>*:nth-child(2){animation-delay:.14s}svg.fs-brand__logo>*:nth-child(3){animation-delay:.28s}svg.fs-brand__logo>*:nth-child(4){animation-delay:.42s}
svg.fs-brand__logo>.fws-sq{fill:var(--fws-accent);animation:fws-logo-sq 1s cubic-bezier(.2,.8,.2,1) .75s both;transition:transform .5s cubic-bezier(.3,1.4,.4,1)}
.fs-brand:hover svg.fs-brand__logo>.fws-sq{animation:none;opacity:1;transform:rotate(180deg) scale(1.12)}
@media(max-width:767px){:root{--fws-logo-h:36px}html body .fs-brand__logo{height:36px}}
@media(prefers-reduced-motion:reduce){img.fs-brand__logo,svg.fs-brand__logo>*{animation:none;opacity:1;transform:none}}
/* 4) Karty projektů: nadpis a šipka v barvě akcentu */
html body .fs-brand-card__name{color:var(--fws-accent)!important}
html body .fs-brand-card__go,html body .fs-brand-card__go svg{color:var(--fws-accent)!important;stroke:var(--fws-accent)!important}

/* 5) Lepící hlavička: na mobilu do 600 px je lišta WordPressu (přihlášený) posuvná, takže hlavička se lepí úplně nahoru. */
@media screen and (max-width:600px){html body.admin-bar .fs-site-header{top:0}}