/* podlahove-topeni24.cz: teplo zespodu. Paleta: potěr, nopová deska, PEX červená/modrá, mosaz */
:root{
  --poter:#3B3F44; --poter-tmavy:#25282C; --nop:#F2F0EA; --bila:#FFFFFF; --linka:#D9D5CC;
  --cervena:#C8402A; --cervena-tmava:#A5321F; --modra:#2C5D8F; --mosaz:#B08D4A; --teplo:#F6D9C4;
  --sed:#6B6F74;
  --disp:'Bricolage Grotesque',system-ui,sans-serif; --text:'Inter Tight',system-ui,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(--text);color:var(--poter);background:var(--nop);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--modra)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--cervena);outline-offset:2px}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--disp);line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.6vw,4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:700;margin-bottom:1.2rem}
h3{font-size:1.2rem;font-weight:700;margin-bottom:.4rem}
p{margin-bottom:1rem;max-width:68ch}
.sekce{padding:72px 0}
.sekce.tmava{background:var(--poter-tmavy);color:var(--nop)}
.sekce.tmava a{color:var(--teplo)}
.sekce.bila{background:var(--bila)}
.uvod{font-size:1.1rem;color:var(--sed);max-width:60ch}
.sekce.tmava .uvod{color:#C9C5BC}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(242,240,234,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linka)}
.nav{display:flex;align-items:center;gap:16px;padding:10px 20px;max-width:1120px;margin:0 auto}
.logo{white-space:nowrap;font-family:var(--disp);font-weight:800;font-size:1.25rem;color:var(--poter);text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.logo span{display:inline-block;width:14px;height:14px;border-radius:50%;background:linear-gradient(180deg,var(--cervena) 50%,var(--modra) 50%)}
.nav .tel{margin-left:auto;font-weight:600;color:var(--poter);text-decoration:none;border:2px solid var(--poter);padding:8px 14px;border-radius:6px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.nav .tel:hover{background:var(--poter);color:var(--nop)}
.burger{display:none;background:none;border:2px solid var(--poter);border-radius:6px;font-size:1.3rem;width:44px;height:44px;cursor:pointer;color:var(--poter)}
#menu{display:flex;gap:4px;list-style:none;align-items:center}
#menu a{color:var(--poter);text-decoration:none;padding:10px 8px;display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:.92rem;white-space:nowrap;border-bottom:2px solid transparent}
#menu a:hover,#menu a[aria-current]{border-bottom-color:var(--cervena)}
#menu .cta-mini{background:var(--cervena);color:#fff;border-radius:6px;padding:10px 16px;font-weight:600}
#menu .cta-mini:hover{background:var(--cervena-tmava);border-bottom-color:transparent}
@media(max-width:960px){
  .burger{display:inline-flex;align-items:center;justify-content:center}
  #menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--nop);flex-direction:column;align-items:stretch;padding:10px 20px 20px;border-bottom:1px solid var(--linka);gap:0}
  #menu.open{display:flex}
  #menu a{min-height:48px;border-bottom:1px solid var(--linka)}
  #menu .cta-mini{margin-top:10px;justify-content:center}
  .nav .tel{margin-left:auto;font-size:.95rem;padding:8px 10px}
}

/* hero: teplo zespodu */
.hero{position:relative;padding:64px 0 40px;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(246,217,196,0) 0%,var(--teplo) 100%);pointer-events:none}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{margin-bottom:1rem}
.hero .sub{font-size:1.15rem;color:var(--sed);margin-bottom:1.6rem;max-width:56ch}
.hero-foto{border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(59,63,68,.18)}
.hero-foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hero-kpi{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--linka)}
.hero-kpi div{font-size:.92rem;color:var(--sed)}
.hero-kpi b{display:block;font-family:var(--disp);font-size:1.25rem;color:var(--poter)}
@media(max-width:860px){.hero .container{grid-template-columns:1fr;gap:28px}.hero{padding:36px 0 32px}}

.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--cervena);color:#fff;text-decoration:none;font-weight:600;padding:14px 24px;border-radius:6px;border:2px solid var(--cervena);min-height:48px;cursor:pointer;font-size:1rem;font-family:var(--text);margin:0 10px 10px 0}
.btn:hover{background:var(--cervena-tmava);border-color:var(--cervena-tmava)}
.btn.obrys{background:transparent;color:var(--poter);border-color:var(--poter)}
.btn.obrys:hover{background:var(--poter);color:var(--nop)}
.tmava .btn.obrys{color:var(--nop);border-color:var(--nop)}
.tmava .btn.obrys:hover{background:var(--nop);color:var(--poter)}

/* tři cesty jako řádky */
.cesty{display:grid;gap:0;border-top:1px solid var(--linka)}
.cesta{display:grid;grid-template-columns:320px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--linka);align-items:center}
.cesta img{border-radius:8px;aspect-ratio:3/2;object-fit:cover;width:100%}
.cesta .kdy{font-size:.95rem;color:var(--sed);border-left:3px solid var(--modra);padding-left:12px;margin:10px 0}
.cesta.elektro .kdy{border-left-color:var(--cervena)}
.cesta.reko .kdy{border-left-color:var(--mosaz)}
.vice{font-weight:600;color:var(--poter);text-decoration:underline;text-decoration-color:var(--cervena);text-underline-offset:4px;display:inline-flex;min-height:44px;align-items:center}
@media(max-width:760px){.cesta{grid-template-columns:1fr;gap:16px}}

/* řez podlahou */
.rez{background:var(--bila);border:1px solid var(--linka);border-radius:12px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.rez-prepinac{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.rez-prepinac button{font-family:var(--text);font-size:.95rem;font-weight:600;padding:10px 14px;min-height:44px;border-radius:6px;border:2px solid var(--linka);background:var(--nop);color:var(--poter);cursor:pointer}
.rez-prepinac button[aria-pressed="true"]{border-color:var(--poter);background:var(--poter);color:var(--nop)}
.vrstvy{display:flex;flex-direction:column;border:2px solid var(--poter);border-radius:6px;overflow:hidden}
.vrstva{display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:.92rem;font-weight:600;transition:height .35s ease;overflow:hidden;height:38px;border-bottom:1px solid rgba(0,0,0,.08)}
.vrstva small{font-weight:400;color:inherit;opacity:.85}
.v-trubka span,.v-trubka small,.v-kabel span,.v-kabel small{background:rgba(255,255,255,.88);padding:2px 8px;border-radius:4px}
.v-krytina{background:#D9B990;color:var(--poter-tmavy)}
.v-poter{background:#B9BBB8;color:var(--poter-tmavy)}
.v-trubka{background:repeating-linear-gradient(90deg,var(--nop) 0 22px,var(--cervena) 22px 30px,var(--nop) 30px 52px,var(--modra) 52px 60px);color:var(--poter-tmavy)}
.v-kabel{background:repeating-linear-gradient(90deg,var(--nop) 0 14px,var(--cervena) 14px 18px);color:var(--poter-tmavy)}
.v-deska{background:#EDE6D3;color:var(--poter-tmavy)}
.v-izolace{background:#F4F1E7;color:var(--poter-tmavy);border-bottom:none}
.v-strop{background:var(--poter);color:var(--nop);border-bottom:none}
.rez-popis h3{margin-top:0}
.rez-popis dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.95rem;margin:14px 0}
.rez-popis dt{font-weight:600;color:var(--sed)}
.rez-popis dd{margin:0}
.rez .pozn{font-size:.85rem;color:var(--sed);margin:0}
@media(max-width:820px){.rez{grid-template-columns:1fr;padding:20px}}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}
.fakt b{font-family:var(--disp);font-size:1.6rem;display:block;color:var(--cervena)}
.tmava .fakt b{color:var(--teplo)}

/* proces */
.proces{counter-reset:krok;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.krok{counter-increment:krok;background:var(--bila);border:1px solid var(--linka);border-top:4px solid var(--modra);border-radius:8px;padding:18px 16px}
.krok::before{content:counter(krok);font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--modra);display:block;margin-bottom:6px}
.krok h3{font-size:1.05rem}
.krok p{font-size:.92rem;margin:0;color:var(--sed)}
@media(max-width:960px){.proces{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.proces{grid-template-columns:1fr}}

/* cena bez čísel */
.faktory{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.faktory li{padding:12px 0 12px 22px;border-bottom:1px solid var(--linka);position:relative}
.faktory li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:10px;border-radius:50%;background:var(--cervena)}
.faktory li:nth-child(even)::before{background:var(--modra)}
@media(max-width:700px){.faktory{grid-template-columns:1fr}}

/* faq */
details{border-bottom:1px solid var(--linka)}
summary{cursor:pointer;padding:16px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;font-size:1.02rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--disp);font-size:1.4rem;color:var(--cervena);margin-left:16px;flex-shrink:0}
details[open] summary::after{content:"\2212"}
details p{padding-bottom:16px;color:var(--sed)}
.tmava details p{color:#C9C5BC}
.tmava details{border-bottom-color:rgba(255,255,255,.14)}

/* formulář */
.form-box{background:var(--bila);border-radius:12px;padding:26px;max-width:640px;color:var(--poter)}
.form-box input,.form-box select,.form-box textarea{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid var(--linka);border-radius:6px;background:var(--nop);color:var(--poter);margin-bottom:12px;min-height:48px}
.form-box textarea{min-height:110px;resize:vertical}
.radek{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:560px){.radek{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--sed);margin:4px 0 16px;min-height:44px}
.chk input{width:22px;height:22px;margin:2px 0 0;flex-shrink:0;min-height:0}
.form-success,.form-error{background:var(--bila);color:var(--poter);border-radius:12px;padding:20px 26px;max-width:640px;font-weight:600}
.form-error{border:2px solid var(--cervena);margin-top:12px;font-weight:400}
.kontakt-tel{font-family:var(--disp);font-size:1.6rem;font-weight:700;color:var(--nop);text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.tmava .kontakt-alt{color:#C9C5BC;font-size:.95rem}

/* podstránka */
.pod-hero{padding:56px 0 36px;border-bottom:1px solid var(--linka)}
.pod-hero .grid2{align-items:center}
.pod-hero img{border-radius:10px;aspect-ratio:3/2;object-fit:cover;width:100%}
.obsah{max-width:72ch}
.obsah h2{margin-top:2.2rem;font-size:1.6rem}
.obsah ul{margin:0 0 1rem 1.2rem}
.obsah li{margin-bottom:.4rem}
.tab-wrap{overflow-x:auto;margin:1rem 0 1.5rem}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem;background:var(--bila)}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linka);vertical-align:top}
th{font-family:var(--disp);font-weight:700;background:var(--nop)}
.souvisejici{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.souvisejici a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px solid var(--linka);border-radius:6px;background:var(--bila);color:var(--poter);text-decoration:none;font-weight:500}
.souvisejici a:hover{border-color:var(--poter)}

/* footer */
footer{background:var(--poter-tmavy);color:#C9C5BC;padding:48px 0 28px;font-size:.95rem}
footer h3{color:var(--nop);font-size:1rem;margin-bottom:.6rem}
footer a{color:var(--nop);text-decoration:none;display:inline-flex;min-height:36px;align-items:center}
footer a:hover{text-decoration:underline}
footer p{max-width:none}
.pata{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem}