/* stavba-gabionu.cz — kámen / drát / mech */
:root{
  --zula:#26282B;
  --svetla:#EDECE8;
  --bila:#F7F6F3;
  --drat:#9AA0A0;
  --drat-svetly:#C6CAC9;
  --mech:#4C6321;
  --mech-tmavy:#3E5219;
  --stin:#55585C;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --disp:'Big Shoulders',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--sans);color:var(--zula);background:var(--svetla);line-height:1.6;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--mech)}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

h1,h2,h3{font-family:var(--disp);text-transform:uppercase;line-height:1.04;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:800}
h2{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700;letter-spacing:.03em}
.eyebrow{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--stin)}
.eyebrow::before{content:"▦ ";color:var(--mech)}

/* drátěný předěl sekcí */
.sekce{padding:72px 0;border-top:1px solid var(--drat-svetly)}
.sekce.tmava{background:var(--zula);color:var(--bila);border-top:4px double var(--drat)}
.sekce.tmava .eyebrow{color:var(--drat-svetly)}
.sekce h2{margin:.35rem 0 1.6rem}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(38,40,43,.94);backdrop-filter:blur(6px);color:var(--bila)}
.nav{display:flex;align-items:center;gap:18px;padding:12px 20px;max-width:1120px;margin:0 auto}
.nav .tel{font-family:var(--mono);font-size:.95rem;color:#B7D080;text-decoration:none;margin-left:auto;padding:10px 8px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.nav .tel:hover{color:#fff}
.logo{font-family:var(--disp);font-weight:800;font-size:1.35rem;text-transform:uppercase;color:var(--bila);text-decoration:none;letter-spacing:.02em}
.logo b{color:#8FB04C}
.nav ul{display:flex;gap:22px;list-style:none;align-items:center}
.nav a{color:var(--bila);text-decoration:none;font-size:.95rem}
.nav a:hover{color:#B7D080}
.nav .cta-mini{background:var(--mech);padding:9px 16px;font-family:var(--mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.nav .cta-mini:hover{background:var(--mech-tmavy);color:var(--bila)}
.burger{display:none;background:none;border:1px solid var(--drat);color:var(--bila);font-size:1.3rem;padding:4px 10px}
@media(max-width:840px){
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--zula);flex-direction:column;padding:18px;gap:16px;border-bottom:2px solid var(--mech)}
  .nav ul.open{display:flex}
  .burger{display:block}
}

/* hero s mřížkou */
.hero{position:relative;color:var(--bila);min-height:82vh;display:flex;align-items:flex-end;background:var(--zula)}
.hero::before{content:"";position:absolute;inset:0;background:url(/assets/img/hero-zed.jpg) center/cover no-repeat;opacity:.62}
.hero::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(38,40,43,0) 55%,rgba(38,40,43,.96)),
  repeating-linear-gradient(0deg,transparent 0 79px,rgba(237,236,232,.16) 79px 80px),
  repeating-linear-gradient(90deg,transparent 0 79px,rgba(237,236,232,.16) 79px 80px)}
.hero .container{position:relative;z-index:2;padding-bottom:64px;padding-top:140px}
.hero .eyebrow{color:var(--drat-svetly)}
.hero p.sub{max-width:34rem;margin:1.1rem 0 1.8rem;font-size:1.12rem;color:#DDDCD7}
.hero-kpi{display:flex;gap:28px;flex-wrap:wrap;margin-top:2.2rem;font-family:var(--mono);font-size:.85rem;color:var(--drat-svetly)}
.hero-kpi b{display:block;font-size:1.25rem;color:var(--bila)}

/* tlačítka */
.btn{display:inline-block;background:var(--mech);color:#fff;text-decoration:none;padding:15px 28px;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.07em;font-size:.95rem;border:none;cursor:pointer;min-height:44px}
.btn:hover{background:var(--mech-tmavy)}
.btn.obrys{background:transparent;border:1px solid var(--drat);color:var(--bila)}
.btn.obrys:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* karty služeb */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:840px){.grid3,.grid2{grid-template-columns:1fr}}
.karta{background:var(--bila);border:1px solid var(--drat-svetly)}
.karta img{aspect-ratio:4/3;object-fit:cover;width:100%}
.karta .in{padding:20px 22px 26px}
.karta h3{margin-bottom:.5rem}
.karta p{color:var(--stin);font-size:.98rem}
.karta .cena-od{font-family:var(--mono);color:var(--mech);font-size:.9rem;display:block;margin-top:.9rem}
.karta a.vice{font-family:var(--mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}

/* proces */
.proces{counter-reset:krok;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--drat-svetly)}
@media(max-width:840px){.proces{grid-template-columns:1fr}}
.krok{background:var(--svetla);padding:22px 18px 26px;position:relative}
.krok::before{counter-increment:krok;content:"0" counter(krok);font-family:var(--mono);color:var(--mech);font-size:.85rem;letter-spacing:.1em}
.krok h3{font-size:1.05rem;margin:.4rem 0 .4rem}
.krok p{font-size:.9rem;color:var(--stin)}

/* tabulky */
table{width:100%;border-collapse:collapse;background:var(--bila);font-size:.97rem}
th,td{padding:13px 15px;text-align:left;border:1px solid var(--drat-svetly)}
th{font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;background:var(--zula);color:var(--bila)}
td.c{font-family:var(--mono);white-space:nowrap}
.tab-wrap{overflow-x:auto}
.pozn{font-size:.85rem;color:var(--stin);margin-top:.8rem}

/* ── SIGNATURE: kalkulačka Postavte si zeď ── */
.kalk{background:var(--zula);color:var(--bila);border:4px double var(--drat);padding:30px 26px}
.kalk-grid{display:grid;grid-template-columns:320px 1fr;gap:34px;align-items:start}
@media(max-width:840px){.kalk-grid{grid-template-columns:1fr}}
.kalk label{display:block;font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;margin:18px 0 6px;color:var(--drat-svetly)}
.kalk select,.kalk input[type=range]{width:100%;accent-color:#8FB04C}
.kalk select{background:var(--svetla);border:none;padding:12px;font-family:var(--sans);font-size:1rem}
.kalk output{font-family:var(--mono);color:var(--bila);font-size:.95rem;margin-left:8px}
.zed-plocha{min-height:230px;display:flex;align-items:flex-end;border-bottom:6px solid var(--drat);padding-bottom:0;overflow:hidden}
.zed{display:grid;gap:3px;width:100%}
.blok{background:url(/assets/img/detail-kamen.jpg) center/120px auto;border:1px solid rgba(237,236,232,.55);aspect-ratio:2/1;min-height:26px;
  animation:polozit .25s ease-out backwards}
@keyframes polozit{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.kalk-vysledek{margin-top:20px;border-top:1px solid var(--drat);padding-top:16px;font-family:var(--mono)}
.kalk-vysledek .castka{font-size:clamp(1.6rem,4vw,2.4rem);color:#B7D080;font-weight:600}
.kalk-vysledek small{color:var(--drat-svetly);display:block;margin-top:6px;font-family:var(--sans)}

/* FAQ */
details{background:var(--bila);border:1px solid var(--drat-svetly);margin-bottom:10px}
summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";font-family:var(--mono);color:var(--mech)}
details[open] summary::after{content:"–"}
details p{padding:0 20px 18px;color:var(--stin)}

/* formulář */
.form-box{background:var(--bila);border:1px solid var(--drat-svetly);padding:30px 28px;max-width:640px}
.form-box .radek{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-box .radek{grid-template-columns:1fr}}
.form-box input,.form-box select,.form-box textarea{width:100%;padding:13px 14px;margin-bottom:14px;border:1px solid var(--drat);
  font-family:var(--sans);font-size:1rem;background:var(--svetla)}
.form-box textarea{min-height:110px;resize:vertical}
.form-box label.chk{display:flex;gap:10px;font-size:.88rem;color:var(--stin);margin-bottom:16px;align-items:flex-start}
.form-box label.chk input{width:auto;margin:4px 0 0}
.form-success{background:var(--mech);color:#fff;padding:22px 26px;font-weight:600}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* obsahové stránky */
.clanek{max-width:760px}
.clanek h2{font-size:1.7rem;margin:2.4rem 0 .8rem}
.clanek p{margin-bottom:1rem}
.clanek ul{margin:0 0 1rem 1.3rem}
.clanek li{margin-bottom:.4rem}
.breadcrumb{font-family:var(--mono);font-size:.8rem;padding:18px 0 0;color:var(--stin)}
.breadcrumb a{color:var(--stin)}

footer{background:var(--zula);color:var(--drat-svetly);padding:46px 0 30px;border-top:4px double var(--drat);font-size:.92rem}
footer .grid3{gap:34px}
footer h3{color:var(--bila);font-size:1rem;margin-bottom:.7rem}
footer a{color:var(--drat-svetly)}
footer .pata{margin-top:34px;padding-top:18px;border-top:1px solid #3A3D40;font-family:var(--mono);font-size:.78rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
:focus-visible{outline:3px solid #8FB04C;outline-offset:2px}