/* Oční optika Jiří Petrů – Kyjov. Web jako tabule na měření zraku. */
:root{
  --papir:#f4f5f1;
  --bila:#ffffff;
  --inkoust:#181816;
  --sed:#6b6d66;
  --linka:#d8dad2;
  --bronz:#a8723b;        /* písmena „Optika“ na fasádě */
  --bronz-svetly:#e2b07a;
  --fasada:#5d6a47;       /* zelená fasáda prodejny */
  --fasada-tma:#262b20;
  --cervena:#cf2f29;      /* duochrom test */
  --zelena:#2c8a3d;
  --sklo:#1badcc;         /* modrá ze starého loga */
  --hlavicka:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papir);color:var(--inkoust);font:400 17px/1.6 "Lexend",system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;line-height:1.15}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--sklo);outline-offset:3px}
section{scroll-margin-top:calc(var(--hlavicka) + 30px)}

/* žlutý pruh – přesně jako ostatní ukázky */
.demo-strip{position:fixed;inset:0 0 auto 0;z-index:70;height:30px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;background:#ffd84d;color:#1a1a1a;font:600 13px/1 system-ui,sans-serif;white-space:nowrap;overflow:hidden}
.demo-strip b{text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.demo-strip a{color:inherit}
.demo-strip .ds-sep{opacity:.5}
.demo-strip .ds-short{display:none}
@media (max-width:520px){.demo-strip .ds-long{display:none}.demo-strip .ds-short{display:inline}}

/* hlavička */
.hlavicka{position:fixed;top:30px;left:0;right:0;z-index:60;height:var(--hlavicka);display:flex;align-items:center;gap:32px;padding:0 clamp(16px,3vw,44px);background:rgba(255,255,255,.96);border-bottom:1px solid var(--linka)}
.znacka{display:flex;flex-direction:column;text-decoration:none;color:var(--bronz);line-height:1.05;margin-right:auto}
.znacka-1{font-weight:600;font-size:22px;letter-spacing:.06em}
.znacka-2{font-weight:400;font-size:17px;letter-spacing:.08em;padding-left:3.4em;color:var(--fasada)}
.menu{display:flex;gap:26px}
.menu a{text-decoration:none;font-size:15.5px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--bronz)}
.tel-tlacitko{display:inline-flex;align-items:center;gap:9px;background:var(--bronz);color:#fff;text-decoration:none;font-weight:600;font-size:17px;padding:11px 18px;border-radius:5px;white-space:nowrap}
.tel-tlacitko svg{width:18px;height:18px;fill:currentColor}
.tel-tlacitko:hover{background:#8f5f2e}

/* ÚVOD */
.uvod{margin-top:calc(30px + var(--hlavicka));display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);min-height:calc(100vh - 30px - var(--hlavicka));min-height:calc(100svh - 30px - var(--hlavicka))}
.uvod-foto{margin:0;position:relative;overflow:hidden;background:#3c4234}
.uvod-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:28% 50%}
.uvod-foto figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 20px 16px;color:#fff;font-size:14px;background:linear-gradient(transparent,rgba(0,0,0,.55))}

.tabule{position:relative;background:var(--bila);padding:clamp(28px,4vh,52px) clamp(20px,4vw,64px) 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid var(--linka)}
.radky{display:flex;flex-direction:column;align-items:center;width:100%;font-weight:700}
.r{position:relative;display:flex;justify-content:center;width:100%;font-family:"Lexend Zetta","Lexend",sans-serif;font-weight:700;line-height:1;color:var(--inkoust);margin:0}
.r>span,.r>a{display:inline-block;letter-spacing:.12em;margin-right:-.12em;text-decoration:none;color:inherit}
.r::before,.r::after{position:absolute;top:50%;transform:translateY(-50%);font:400 12px/1 "Lexend",sans-serif;color:var(--sed);letter-spacing:0}
.r::after{content:attr(data-v);right:0}
.r1{font-size:clamp(70px,9.5vw,148px);margin-bottom:.16em}
.r2{font-size:clamp(40px,5.3vw,86px);margin-bottom:.32em}
.r3{font-size:clamp(30px,3.7vw,60px);margin-bottom:.42em}
.r4{font-size:clamp(23px,2.6vw,42px);margin-bottom:.55em}
.r5{font-size:clamp(17px,1.75vw,28px);margin-bottom:.7em}
.r6{font-size:clamp(14px,1.18vw,19px);margin-bottom:.9em}
.r7{font-size:clamp(14px,1vw,16px)}
.cara{display:block;width:min(460px,80%);height:2px;background:var(--cervena);margin:0 0 .9em}
.r7 a:hover{color:var(--bronz)}
.tabule-pod{margin:22px 0 0;max-width:34em;text-align:center;font-size:16px;color:#3e3f3a}
.stav{display:inline-flex;align-items:center;gap:10px;margin:14px 0 0;font-weight:500;font-size:16px;padding:8px 14px;border:1px solid var(--linka);border-radius:5px}
.stav-tecka{width:10px;height:10px;border-radius:50%;background:var(--sed);flex:none}
.stav.otevreno .stav-tecka{background:var(--zelena)}
.stav.zavreno .stav-tecka{background:var(--cervena)}

/* zkušební čočka s dioptriemi (hlavní scéna) */
.cocka{position:absolute;top:22px;right:22px;width:96px;height:96px}
.cocka svg{width:100%;height:100%;overflow:visible}
.cocka-ram{fill:none;stroke:var(--inkoust);stroke-width:7}
.cocka-sklo{fill:rgba(27,173,204,.12);stroke:rgba(27,173,204,.55);stroke-width:1.5;stroke-dasharray:2 5.9}
.cocka-uchyt{fill:var(--inkoust)}
.cocka-hodnota{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--inkoust);white-space:nowrap}
.cocka-hodnota b{font-size:15px;font-weight:600;margin-right:2px}

/* rozostřený start – zaostřuje js/web.js */
.rozostreno .r,.rozostreno .tabule-pod{filter:blur(7px)}
.rozostreno .uvod-foto img{filter:blur(10px);transform:scale(1.04)}

/* MĚŘENÍ */
.mereni{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(60px,9vw,120px) clamp(16px,5vw,80px)}
.mereni h2{font-size:clamp(30px,3.4vw,50px);margin-bottom:.6em;max-width:12em}
.mereni-text p{max-width:32em}
.mereni-text a{font-weight:600;color:var(--bronz)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--inkoust);background:var(--bila)}
.duo-pole{min-width:0;display:flex;align-items:center;justify-content:center;padding:12% 0}
.duo-cervena{background:var(--cervena)}
.duo-zelena{background:var(--zelena)}
.duo-pole svg{display:block;width:76%;height:auto}
.duo-pole circle{fill:none;stroke:#0a0a0a;stroke-width:7}
.duo-pole circle.plna{fill:#0a0a0a}
.duo-otazka{grid-column:1/-1;padding:24px clamp(18px,3vw,32px) 22px}
.duo-q{font-weight:500;font-size:18px}
.duo-volby{display:flex;flex-wrap:wrap;gap:10px}
.duo-volby button{font:500 16px/1 "Lexend",sans-serif;padding:13px 18px;border:2px solid var(--inkoust);background:var(--bila);color:var(--inkoust);border-radius:4px;cursor:pointer;transition:background .15s,color .15s}
.duo-volby button[data-odp="cervena"]{border-color:var(--cervena)}
.duo-volby button[data-odp="zelena"]{border-color:var(--zelena)}
.duo-volby button:hover{background:#f0f0ec}
.duo-volby button[aria-pressed="true"]{background:var(--inkoust);color:#fff;border-color:var(--inkoust)}
.duo-odpoved{min-height:0;margin:16px 0 0;font-size:17px;max-width:36em}
.duo-odpoved:empty{display:none}
.duo-odpoved.ukaz{animation:odp .35s ease-out}
@keyframes odp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.duo-pozn{margin:14px 0 0;font-size:14px;color:var(--sed)}

/* BRÝLE – čtecí tabulka do blízka */
.bryle{background:var(--fasada);padding:clamp(60px,8vw,110px) clamp(16px,5vw,80px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start}
.bryle-nadpis{color:#fff;font-size:clamp(30px,3.4vw,50px);max-width:9em;position:sticky;top:calc(var(--hlavicka) + 60px)}
.ctecka{background:var(--bila);padding:clamp(26px,4vw,56px) clamp(20px,4vw,56px) clamp(14px,2vw,28px);box-shadow:0 22px 50px -30px rgba(0,0,0,.6)}
.ct-radek{position:relative;padding:0 0 26px 58px;margin-bottom:26px;border-bottom:1px solid var(--linka)}
.ct-radek:last-child{border-bottom:0;margin-bottom:0}
.ct-radek::before{content:attr(data-v);position:absolute;left:0;top:.45em;font-size:13px;color:var(--sed)}
.ct-radek p{margin:0;max-width:38em}
.ct1 h3{font-size:clamp(26px,2.6vw,38px);margin-bottom:.4em}
.ct1 p{font-size:clamp(18px,1.5vw,22px)}
.ct2 h3{font-size:clamp(22px,2vw,29px);margin-bottom:.4em}
.ct2 p{font-size:19px}
.ct3 h3{font-size:clamp(19px,1.6vw,23px);margin-bottom:.35em}
.ct3 p{font-size:17px}
.ct4 h3{font-size:18px;margin-bottom:.3em}
.ct4 p{font-size:16px}

/* HODNOCENÍ */
.hodnoceni{padding:clamp(60px,8vw,110px) clamp(16px,5vw,80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px clamp(24px,4vw,64px)}
.hod-hlava{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 30px;border-bottom:2px solid var(--inkoust);padding-bottom:16px}
.hod-hlava h2{font-size:clamp(28px,3vw,44px)}
.hod-skore{margin:0;font-size:17px}
.hod-skore b{font-family:"Lexend Zetta",sans-serif;font-size:26px;color:var(--bronz)}
.citat{margin:0}
.citat p{font-size:20px;font-weight:300;line-height:1.5;margin-bottom:.6em}
.citat footer{font-size:15px;color:var(--sed)}
.c-velky{grid-column:1/-1}
.c-velky p{font-size:clamp(22px,2.1vw,30px);max-width:36em}

/* KONTAKT */
.kontakt{background:var(--fasada-tma);color:#f1f1ec;padding:clamp(60px,8vw,110px) clamp(16px,5vw,80px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,90px)}
.kontakt h2{font-size:clamp(26px,2.6vw,38px);margin-bottom:.5em;font-weight:500}
.velky-tel{display:inline-block;font-family:"Lexend Zetta",sans-serif;font-weight:700;font-size:clamp(30px,4.6vw,66px);letter-spacing:.04em;color:var(--bronz-svetly);text-decoration:none;line-height:1.1;margin-bottom:28px}
.velky-tel:hover{color:#fff}
.spojeni{list-style:none;margin:0 0 28px;padding:0;font-size:18px}
.spojeni li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.spojeni a{color:#fff;font-weight:500;margin-left:.4em}
.navigovat{display:inline-block;border:2px solid var(--bronz-svetly);color:#fff;text-decoration:none;font-weight:500;padding:12px 20px;border-radius:5px}
.navigovat:hover{background:var(--bronz-svetly);color:var(--fasada-tma)}
.kontakt-hodiny h3{font-size:22px;margin-bottom:14px;font-weight:500}
.hodiny{width:100%;border-collapse:collapse;font-size:18px}
.hodiny th,.hodiny td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.14);text-align:left;font-weight:400}
.hodiny td{text-align:right;font-variant-numeric:tabular-nums}
.hodiny tr.dnes{background:var(--bronz);color:#fff}
.hodiny tr.dnes th{font-weight:600}
.hodiny-pozn{margin-top:14px;font-size:15px;color:#c9cbc2}

.paticka{padding:28px clamp(16px,5vw,80px) 36px;font-size:14px;color:var(--sed);background:var(--papir)}
.paticka p{margin:0 0 4px}

/* PC středně široké */
@media (max-width:1180px){
  .menu{gap:18px}
  .menu a{font-size:14.5px}
}
@media (max-width:980px){
  .menu{display:none}
}
/* tablet + mobil */
@media (max-width:900px){
  .uvod{grid-template-columns:1fr;min-height:0}
  .tabule{order:-1;border-left:0;padding:26px 16px 26px}
  .uvod-foto{height:300px}
  .r1{font-size:clamp(64px,19vw,120px)}
  .r2{font-size:clamp(34px,10.4vw,70px)}
  .r3{font-size:clamp(26px,7.6vw,50px)}
  .r4{font-size:clamp(20px,5.6vw,36px)}
  .r5{font-size:clamp(15px,4.1vw,24px)}
  .r6{font-size:clamp(12.5px,3.3vw,18px)}
  .r7{font-size:16px}
  .r::after{font-size:11px}
  .mereni,.bryle,.kontakt{grid-template-columns:1fr}
  .bryle-nadpis{position:static}
  .hodnoceni{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--hlavicka:62px}
  .hlavicka{gap:12px}
  .znacka-1{font-size:18px}
  .znacka-2{font-size:14px}
  .tel-tlacitko{font-size:15.5px;padding:10px 12px;gap:7px}
  .cocka{width:64px;height:64px;top:12px;right:10px}
  .cocka-hodnota{font-size:10px}
  .cocka-hodnota b{font-size:12px}
  .r::after{display:none}
  .tabule{padding-top:30px}
  .ct-radek{padding-left:0}
  .ct-radek::before{position:static;display:block;margin-bottom:4px}
  .duo-volby button{flex:1 1 auto;padding:13px 10px}
  .citat p{font-size:18px}
}
@media (max-width:370px){
  .znacka-2{padding-left:1.6em}
  .tel-tlacitko svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rozostreno .r,.rozostreno .tabule-pod,.rozostreno .uvod-foto img{filter:none;transform:none}
  .duo-odpoved.ukaz{animation:none}
}