/* ==========================================================================
   Shoes4Life — sdílený styl podstránek
   Používají ho: zasady-ochrany-osobnich-udaju.html, cookies.html,
   podminky-daru.html, dokumenty.html, 404.html, projekt-vzor.html
   Tokeny jsou stejné jako v index.html — při přebarvení měnit na obou místech
   (po převodu do WP zůstane jen jedno).
   ========================================================================== */
:root{
  --ink:#22303F;
  --brand:#2F80ED;
  --brand-2:#56CCF2;
  --accent:#FF7A33;
  --zluta:#FFC93C;
  --zelen:#27C08A;
  --ruzova:#FF6F91;
  --akcent-text:#D2521A;
  --zelen-text:#12855F;

  --krem:#FFF6EA;
  --nebe:#EAF3FD;
  --mata:#E8F8F1;
  --paper:#F6F8FB;

  --line:#E4EAF1;
  --mut:#5F7183;

  --gutter:1.5rem;
  --max:78rem;
  --clanek:46rem;
  --r:20px;

  --dsp:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
@media(min-width:800px){:root{--gutter:2rem}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:#fff;
     font-size:1rem;line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--dsp);font-weight:700;line-height:1.1;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:clamp(1.12rem,2vw,1.3rem)}
p{margin:0 0 1.1rem}
.obal{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.uzky{width:min(100% - 2*var(--gutter),var(--clanek));margin-inline:auto}
.stitek{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
        color:var(--brand);display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.stitek::before{content:"";width:26px;height:1px;background:currentColor;flex:none}

/* ---------- tlačítka ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.55rem;border-radius:100px;
     border:1px solid transparent;background:var(--accent);color:#fff;font-weight:600;
     text-decoration:none;cursor:pointer;box-shadow:0 6px 20px -8px rgba(255,122,51,.7);
     transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .25s ease,color .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(255,122,51,.85)}
.btn--modry{background:var(--brand);box-shadow:0 6px 20px -8px rgba(47,128,237,.6)}
.btn--modry:hover{box-shadow:0 12px 26px -10px rgba(47,128,237,.85)}
.btn--duch{background:transparent;border-color:var(--ink);color:var(--ink);box-shadow:none}
.btn--duch:hover{border-color:var(--accent);color:var(--akcent-text)}
.btn--duch:hover{background:rgba(34,48,63,.05);box-shadow:none}

/* ---------- hlavička ---------- */
.hlavicka{position:sticky;top:0;z-index:50;background:rgba(255,246,234,.92);
          backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding-block:.85rem}
.hlavicka__in{display:flex;align-items:center;gap:1.2rem}
.logo{flex:none;display:block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.logo:hover{transform:translateY(-2px)}
.logo img{height:52px;width:auto}
@media(max-width:1080px){.logo img{height:46px}}
@media(max-width:560px){.logo img{height:38px}}
.nav{margin-left:auto;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:.92rem;font-weight:500;padding:.5rem .7rem;border-radius:8px;
       transition:background .25s ease,color .25s ease}
.nav a:hover{background:rgba(47,128,237,.1);color:var(--brand)}
/* tlačítko v navigaci — musí přebít obecné .nav a:hover, jinak ztratí barvu */
.nav a.btn{margin-left:.4rem;padding:.6rem 1.15rem;font-size:.92rem;color:#fff;background:var(--accent);
           transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .25s ease,color .25s ease}
.nav a.btn:hover{color:#fff;background:var(--accent);transform:translateY(-2px);
                 box-shadow:0 12px 26px -10px rgba(255,122,51,.85)}
@media(max-width:640px){.nav a{font-size:.85rem;padding:.4rem .5rem}
                        .nav a.btn{padding:.5rem .9rem;font-size:.85rem}}

/* ---------- hlava stránky ---------- */
.hlava-stranky{background:var(--krem);padding-block:clamp(2.6rem,6vw,4.5rem) clamp(2rem,5vw,3.4rem);
               position:relative;overflow:hidden}
.hlava-stranky p.lead{color:var(--mut);font-size:clamp(1.02rem,1.6vw,1.15rem);max-width:52ch;margin:1rem 0 0}
.drobecky{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
          color:var(--mut);margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.drobecky a{text-decoration:none;transition:color .25s ease}
.drobecky a:hover{color:var(--brand)}
.drobecky span{opacity:.5}

/* ---------- obsah článku ---------- */
.clanek{padding-block:clamp(2.6rem,6vw,4.5rem)}
.clanek h2{margin:2.6rem 0 .9rem}
.clanek h2:first-child{margin-top:0}
.clanek h3{margin:1.9rem 0 .6rem}
/* Seznamy zarovnané s textem — odrážka sedí na levé hraně sloupce, zalomené
   řádky se srovnají pod text, blok nikam neuskakuje.
   .cisla-bloku, .galerie a .projekt-meta jsou taky <ul>, ale jsou to mřížky —
   ty musí zůstat bez odrážek a bez odsazení. */
.clanek :is(ul,ol):not(.cisla-bloku,.galerie,.projekt-meta){
  margin:0 0 1.1rem;padding:0;list-style:none;counter-reset:polozka}
.clanek :is(ul,ol):not(.cisla-bloku,.galerie,.projekt-meta) > li{
  margin-bottom:.5rem;position:relative;padding-left:1.35rem}
.clanek ul:not(.cisla-bloku,.galerie,.projekt-meta) > li::before{
  content:"";position:absolute;left:.15rem;top:.72em;
  width:7px;height:7px;border-radius:50%;background:var(--accent)}
.clanek ol:not(.cisla-bloku,.galerie,.projekt-meta) > li{
  counter-increment:polozka;padding-left:1.7rem}
.clanek ol:not(.cisla-bloku,.galerie,.projekt-meta) > li::before{
  content:counter(polozka) ".";position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:.85em;color:var(--brand);font-weight:500}
.clanek a{color:var(--brand);text-decoration:underline;text-underline-offset:.18em;
          transition:color .25s ease}
.clanek a:hover{color:var(--akcent-text)}
/* tlačítka uvnitř článku — .clanek a je specifičtější než .btn, jinak by
   text zmodral, podtrhl se a na modrém pozadí zmizel */
.clanek a.btn,.cta-blok a.btn{color:#fff;text-decoration:none;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .25s ease,color .25s ease}
.clanek a.btn:hover,.cta-blok a.btn:hover{color:#fff}
.clanek a.btn--duch,.cta-blok a.btn--duch{color:var(--ink);border-color:var(--ink);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .25s ease,color .25s ease,border-color .25s ease}
.clanek a.btn--duch:hover,.cta-blok a.btn--duch:hover{color:var(--akcent-text)}
.tabulka{overflow-x:auto;margin:0 0 1.4rem;-webkit-overflow-scrolling:touch;
         border-radius:12px}
.clanek table{width:100%;border-collapse:collapse;margin:0;font-size:.92rem;min-width:30rem}
.clanek th,.clanek td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
.clanek th:first-child,.clanek td:first-child{padding-left:0}
.clanek th:last-child,.clanek td:last-child{padding-right:0}
.clanek th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
           color:var(--mut);font-weight:500}
.clanek hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}
.datum{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--mut)}

/* perex — silnější úvodní odstavec */
.perex{font-size:clamp(1.05rem,1.7vw,1.2rem);line-height:1.6;font-weight:500;color:var(--ink)}

/* upozorňovací panel */
.panel{border-radius:var(--r);padding:1.3rem 1.5rem;margin:0 0 1.6rem;font-size:.95rem}
.panel p:last-child{margin-bottom:0}
.panel--info{background:var(--nebe);border:1px solid #C6DCF6}
.panel--dummy{background:#FFF1E4;border:1px solid #F5C39B}
.panel--ok{background:var(--mata);border:1px solid #BFE7D6}
.panel b{display:block;margin-bottom:.35rem}

/* ---------- patička ---------- */
.pata{background:var(--brand);color:#D7E8FB;padding-block:clamp(2.6rem,5vw,3.6rem) 1.6rem;font-size:.92rem}
.pata a{color:#fff;text-decoration:none;transition:color .25s ease}
.pata a:hover{color:var(--zluta)}
.pata__logo{height:46px;width:auto;margin-bottom:1.2rem}
.pata__grid{display:grid;gap:2rem}
@media(min-width:800px){.pata__grid{grid-template-columns:1.4fr 1fr 1fr}}
.pata h4{color:#fff;font-size:.78rem;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;
         margin-bottom:.8rem;font-weight:500}
.pata__spodek{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.25);
              display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.82rem}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   BLOKY DETAILU PROJEKTU
   Ukázka všech dohromady je v projekt-vzor.html. Po převodu do WordPressu
   z nich budou ACF flexible content layouty — název bloku = název layoutu.
   ========================================================================== */

/* --- hlavička projektu --- */
.projekt-hlava{background:var(--krem);padding-block:clamp(2.4rem,5vw,4rem) 0;position:relative}
.projekt-hlava h1{max-width:18ch}
.projekt-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;padding:0;list-style:none}
.projekt-meta li{background:#fff;border:1px solid var(--line);border-radius:100px;
                 padding:.5rem 1rem;font-size:.85rem;display:flex;align-items:baseline;gap:.45rem}
.projekt-meta b{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
                color:var(--mut);font-weight:500}
.projekt-uvodni{margin-top:clamp(1.8rem,4vw,2.6rem)}
.projekt-uvodni img{width:100%;aspect-ratio:16/9;object-fit:cover;
                    border-radius:calc(var(--r) + 8px) calc(var(--r) + 8px) 0 0}
@media(max-width:640px){.projekt-uvodni img{aspect-ratio:4/3}}

/* --- citát --- */
.citat{margin:2.4rem 0;padding:1.6rem 1.8rem 1.6rem calc(1.8rem - 5px);background:var(--nebe);
       border-radius:var(--r);border-left:5px solid var(--brand)}
.citat p{font-family:var(--dsp);font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.35;
         letter-spacing:-.02em;margin:0}
.citat footer{margin-top:.9rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
              text-transform:uppercase;color:var(--mut)}

/* --- čísla --- */
.cisla-bloku{display:grid;gap:1rem;margin:2.4rem 0;list-style:none;padding:0}
@media(min-width:640px){.cisla-bloku{grid-template-columns:repeat(3,1fr)}}
.cisla-bloku li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem}
.cisla-bloku b{display:block;font-family:var(--dsp);font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;
               line-height:1;color:var(--brand);margin-bottom:.4rem}
.cisla-bloku li:nth-child(2) b{color:var(--zelen-text)}
.cisla-bloku li:nth-child(3) b{color:var(--akcent-text)}
.cisla-bloku span{font-size:.9rem;color:var(--mut)}

/* --- blok podprojektu --- */
.podprojekt{margin:3rem 0;padding-top:2.4rem;border-top:2px dashed #DCE5EE}
.podprojekt__logo{height:64px;width:auto;margin-bottom:1.2rem;object-fit:contain;object-position:left}
.podprojekt h2{margin-top:0}
.podprojekt__misto{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
                   color:var(--akcent-text);margin-bottom:.4rem}

/* --- galerie --- */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.6rem 0 2rem;list-style:none;padding:0}
@media(min-width:640px){.galerie{grid-template-columns:repeat(3,1fr);gap:.9rem}}
.galerie button{padding:0;border:0;background:none;cursor:zoom-in;border-radius:14px;overflow:hidden;
                display:block;width:100%;aspect-ratio:4/3}
.galerie img{width:100%;height:100%;object-fit:cover;
             transition:transform .5s cubic-bezier(.22,1,.36,1),filter .3s ease}
.galerie button:hover img{transform:scale(1.06);filter:brightness(.85)}

/* zvětšenina */
.lupa{position:fixed;inset:0;z-index:120;background:rgba(34,48,63,.9);display:none;
      place-items:center;padding:var(--gutter);cursor:zoom-out}
.lupa[open]{display:grid}
.lupa img{max-width:min(96vw,1200px);max-height:88vh;width:auto;border-radius:12px;
          animation:lupa-vjezd .3s cubic-bezier(.22,1,.36,1)}
@keyframes lupa-vjezd{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lupa__zavrit{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;
              border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;
              display:grid;place-items:center;transition:background .25s ease}
.lupa__zavrit:hover{background:rgba(255,255,255,.15)}

/* --- text vedle obrázku --- */
.dvojice{display:grid;gap:1.6rem;margin:2.4rem 0;align-items:center}
@media(min-width:760px){.dvojice{grid-template-columns:1fr 1fr;gap:2.4rem}
                        .dvojice--obraceno img{order:2}}
.dvojice img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.dvojice p:last-child{margin-bottom:0}

/* --- video --- */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
       background:var(--paper);margin:2.4rem 0}
.video--prazdne{display:grid;place-items:center;text-align:center;padding:1.5rem;
                border:2px dashed #C7D4E2}
.video--prazdne p{margin:0;max-width:34rem;font-size:.92rem;color:var(--mut)}
.video--prazdne b{display:block;font-family:var(--dsp);font-size:1.1rem;color:var(--ink);margin-bottom:.4rem}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- CTA --- */
.cta-blok{background:var(--mata);border-radius:calc(var(--r) + 6px);padding:clamp(1.6rem,4vw,2.6rem);
          margin:3rem 0;display:grid;gap:1.2rem}
@media(min-width:760px){.cta-blok{grid-template-columns:1fr auto;align-items:center;gap:2rem}}
.cta-blok h2{margin:0 0 .5rem}
.cta-blok p{margin:0;color:var(--mut)}
.cta-blok__akce{display:flex;gap:.7rem;flex-wrap:wrap}

/* --- další projekty --- */
.dalsi{background:var(--paper);padding-block:clamp(2.6rem,6vw,4rem)}
.dalsi__mrizka{display:grid;gap:1.2rem;margin-top:1.6rem}
@media(min-width:700px){.dalsi__mrizka{grid-template-columns:repeat(3,1fr)}}
.dalsi__karta{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
              text-decoration:none;display:flex;flex-direction:column;
              box-shadow:0 0 0 -10px rgba(34,48,63,0);
              transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,border-color .32s ease}
.dalsi__karta:hover{transform:translateY(-6px) rotate(-.6deg);border-color:var(--brand-2);
                    box-shadow:0 20px 40px -22px rgba(34,48,63,.35)}
.dalsi__karta img{aspect-ratio:4/3;object-fit:cover;width:100%}
.dalsi__telo{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.dalsi__zeme{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
             color:var(--brand);margin-bottom:.35rem}
.dalsi__nazev{font-family:var(--dsp);font-weight:700;font-size:1.05rem;letter-spacing:-.015em;
              line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dalsi__vic{margin-top:auto;padding-top:.9rem;font-size:.85rem;font-weight:700;color:var(--akcent-text);
            display:inline-flex;gap:.35rem;transition:gap .28s ease}
.dalsi__karta:hover .dalsi__vic{gap:.7rem}

/* ==========================================================================
   GLOBÁLNÍ PŘECHODY — záchranná síť
   Specificitu zvedá :not(#_) na úroveň ID, aby přechod nemohlo shodit žádné
   pozdější pravidlo pro odkazy uvnitř sekcí (.clanek a, .nav a, .pata a…).
   Komponenty, které chtějí jinou délku, si ji dál nastavují samy — tohle
   platí jen tam, kde by jinak nebyl přechod žádný.
   .rev je vyjmuté, protože si řídí vlastní odhalovací animaci.
   ========================================================================== */
:is(a, button, summary, label, input, select, textarea,
    .karta, .karta__vic, .osoba, .krokS, .krokS__uzel, .polozka, .vzornik,
    .castka, .kopie, .kus, .pin, .pin i, .cisla div, .hero__odznak,
    .proc__citace, .mapa__legenda li, .logo__svg, .dalsi__karta,
    .galerie button, .soc a, .schema__shrnuti div, .fakta li,
    .panel, .projekt-meta li):not(#_):not(.rev){
  transition-property:color,background-color,border-color,box-shadow,transform,opacity,filter,gap;
  transition-duration:.3s;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}