/* =====================================================
   rankingklimatyzacji.pl, minimalistyczny system stylów.
   Paleta wyprowadzona z logo: granat #002454 i błękit
   #006CF0. Neutralne szarości mają lekki błękitny odcień,
   żeby trzymały się z marką.
   ===================================================== */
:root{
  --bg:        #FFFFFF;
  --surface:   #F4F7FB;
  --ink:       #13223F;
  --ink-soft:  #4C5C7A;
  --ink-faint: #8593AC;
  --accent:    #0B6FE6;
  --accent-strong: #0A55B4;
  --accent-soft: #E5EFFD;
  --line:      #E1E8F1;
  --line-strong:#C3CFE0;
  --navy:      #0F2450;
}
/* Motyw wyłącznie jasny, decyzja projektowa. */
:root{ color-scheme: light; }

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px; margin:0 auto; padding:0 20px}
.num{font-variant-numeric:tabular-nums}
a{color:var(--accent-strong); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
h1{font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.15; letter-spacing:-.015em; margin:0 0 .8rem; text-wrap:balance}
h2{font-size:1.35rem; letter-spacing:-.01em; margin:0 0 1rem; text-wrap:balance}
h3{font-size:1.02rem; margin:0 0 .3rem}
.muted{color:var(--ink-soft)}
.lead{color:var(--ink-soft); max-width:40rem}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ---------- Baner demo ---------- */
.demo{
  background:var(--surface); border-bottom:1px solid var(--line);
  color:var(--ink-soft); font-size:.8rem; text-align:center; padding:.5rem 1rem;
}

/* ---------- Nagłówek ---------- */
header.site{border-bottom:1px solid var(--line); background:var(--bg)}
.site-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; flex-wrap:wrap}
.logo{display:flex; align-items:center; flex:none}
.logo:hover{text-decoration:none}
.logo img{display:block; height:68px; width:auto}
@media(max-width:760px){ .logo img{height:52px} }
nav.main{display:flex; gap:1.4rem; font-size:.92rem; flex-wrap:wrap}
nav.main a{color:var(--ink-soft)}
nav.main a:hover{color:var(--ink); text-decoration:none}
nav.main a[aria-current="page"]{color:var(--accent-strong); font-weight:600}

/* ---------- Hero ---------- */
.hero{padding:3.2rem 0 2.6rem}
.kicker{font-size:.82rem; font-weight:600; color:var(--accent-strong); margin-bottom:.5rem}
.hero-meta{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin-top:1.5rem; font-size:.84rem; color:var(--ink-faint)}
.hero-meta b{color:var(--ink); font-weight:600}

/* ---------- Hero ze zdjęciem (strona główna) ---------- */
.hero-photo{
  position:relative;
  background:url("img/hero.jpg") center 35% / cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero-photo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.55) 78%, rgba(255,255,255,.35) 100%);
}
.hero-photo .hero{position:relative; padding:4.6rem 20px 4.2rem}
@media(max-width:700px){
  .hero-photo::before{background:rgba(255,255,255,.9)}
}

/* ---------- Top 10 ---------- */
ol.top10{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
ol.top10 li{border:1px solid var(--line); border-radius:8px; background:var(--bg); transition:border-color .15s}
ol.top10 li:hover{border-color:var(--accent)}
ol.top10 a{
  display:grid; grid-template-columns:2.1rem 1fr max-content; gap:.15rem .8rem;
  align-items:baseline; padding:.75rem 1rem .85rem; color:var(--ink); text-decoration:none;
}
.t10-pos{font-weight:700; color:var(--ink-faint)}
ol.top10 li:nth-child(-n+3) .t10-pos{color:var(--accent-strong)}
.t10-name{font-weight:650}
.t10-name small{display:block; font-weight:400; color:var(--ink-faint); font-size:.78rem}
.t10-score{font-weight:700; color:var(--accent-strong); font-size:1.05rem}
.t10-score small{color:var(--ink-faint); font-weight:400; font-size:.72rem}
.t10-bar{grid-column:1 / -1; height:5px; border-radius:3px; background:var(--surface); border:1px solid var(--line); overflow:hidden; margin-top:.35rem}
.t10-bar i{display:block; height:100%; background:var(--accent)}


/* ---------- Sekcje ---------- */
section{padding:2.4rem 0 3rem}
section.alt{background:var(--surface); border-block:1px solid var(--line)}

/* ---------- Kategorie ---------- */
.cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:.9rem}
.cat{
  border:1px solid var(--line); border-radius:10px; padding:0; overflow:hidden;
  background:var(--bg); color:var(--ink); display:flex; flex-direction:column;
  transition:border-color .15s;
}
.cat:hover{border-color:var(--accent); text-decoration:none}
.cat img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border-bottom:1px solid var(--line)}
.cat .cat-body{padding:1.05rem 1.2rem 1.15rem; display:flex; flex-direction:column; gap:.25rem; flex:1}
.cat h3{margin:0}
.cat p{margin:0; font-size:.86rem; color:var(--ink-soft); flex:1}
.cat span{font-size:.84rem; color:var(--accent-strong); font-weight:600; margin-top:.7rem}

/* ---------- Lista miast ---------- */
.cities{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.6rem}
.city{
  border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem;
  color:var(--ink); font-weight:550; transition:border-color .15s;
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
}
.city:hover{border-color:var(--accent); text-decoration:none}
.city small{color:var(--ink-faint); font-weight:400}
.city.soon{color:var(--ink-faint); font-weight:400; cursor:default}
.city.soon:hover{border-color:var(--line)}

/* ---------- Ranking ---------- */
ol.ranking{list-style:none; margin:0; padding:0}
ol.ranking li{
  border:1px solid var(--line); border-radius:10px;
  padding:1.1rem 1.25rem; margin-bottom:.7rem; background:var(--bg);
}
.row-top{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap}
.pos{font-weight:700; color:var(--ink-faint); min-width:1.6rem; font-size:1.05rem}
ol.ranking li:nth-child(-n+3) .pos{color:var(--accent-strong)}
.firm{font-weight:650; font-size:1.08rem; letter-spacing:-.01em}
.district{font-size:.8rem; color:var(--ink-faint)}
.score{margin-left:auto; white-space:nowrap}
.score .val{font-weight:700; font-size:1.2rem; color:var(--accent-strong)}
.score .of{font-size:.75rem; color:var(--ink-faint)}
.scorebar{height:4px; border-radius:2px; background:var(--surface); border:1px solid var(--line); margin:.7rem 0 .8rem; overflow:hidden}
.scorebar i{display:block; height:100%; background:var(--accent)}
.facts{display:flex; flex-wrap:wrap; gap:.3rem 1.3rem; font-size:.83rem; color:var(--ink-soft)}
.facts b{color:var(--ink); font-weight:600}
.fact.spec{color:var(--accent-strong); font-weight:600}
details.breakdown{margin-top:.7rem; font-size:.84rem}
details.breakdown summary{cursor:pointer; color:var(--accent-strong); font-weight:600; font-size:.84rem}
.bd-grid{
  display:grid; grid-template-columns:minmax(10rem,max-content) 1fr max-content;
  gap:.4rem 1rem; margin-top:.7rem; align-items:center; max-width:34rem;
}
.bd-grid .lbl{color:var(--ink-soft)}
.mini{height:4px; border-radius:2px; background:var(--surface); border:1px solid var(--line); min-width:60px}
.mini i{display:block; height:100%; background:var(--accent)}

.empty-note{
  border:1px dashed var(--line-strong); border-radius:10px;
  padding:1.4rem 1.5rem; color:var(--ink-soft); max-width:44rem; margin-bottom:.7rem;
}
li.pending-block{background:var(--surface)}
.pending-title{font-size:1.05rem; margin:0 0 .5rem}
.pending-note{font-size:.84rem; color:var(--ink-soft); margin:0 0 1.1rem; max-width:44rem}
.pending-firm{border-top:1px solid var(--line); padding:.8rem 0}
.pending-firm .firm{font-size:.98rem}
.pending-firm .facts{margin-top:.25rem}

/* ---------- Metodologia ---------- */
.weights{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.9rem; margin:1.8rem 0}
.weight{border:1px solid var(--line); border-radius:10px; padding:1.1rem 1.15rem; background:var(--bg)}
.weight .pct{font-size:1.5rem; font-weight:700; color:var(--accent-strong)}
.weight h3{font-size:.92rem; margin:.3rem 0 .35rem}
.weight p{margin:0; font-size:.82rem; color:var(--ink-soft)}
.method-notes{max-width:44rem; padding-left:1.1rem; color:var(--ink-soft); font-size:.92rem}
.method-notes li{margin-bottom:.6rem}
.method-notes b{color:var(--ink)}
table.spec-table{border-collapse:collapse; width:100%; max-width:44rem; font-size:.9rem; margin-top:1rem}
table.spec-table th, table.spec-table td{border:1px solid var(--line); padding:.55rem .8rem; text-align:left}
table.spec-table th{background:var(--surface); font-weight:600}
table.spec-table td:last-child{color:var(--ink-soft)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line); padding:.9rem 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer; font-weight:600}
.faq details p{color:var(--ink-soft); margin:.6rem 0 0; max-width:44rem}

/* ---------- Przyciski / breadcrumb ---------- */
.btn{
  display:inline-block; padding:.6rem 1.3rem; border-radius:8px;
  background:var(--accent); color:#fff; font-weight:600; font-size:.92rem;
}
.btn:hover{background:var(--accent-strong); text-decoration:none; color:#fff}
.crumbs{font-size:.84rem; color:var(--ink-faint); padding-top:1.4rem}
.crumbs a{color:var(--ink-soft)}

/* ---------- Stopka ---------- */
footer.site{border-top:1px solid var(--line); background:var(--surface); padding:2.2rem 0 2.6rem; font-size:.84rem; color:var(--ink-soft)}
footer.site .cols{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; margin-bottom:1.4rem}
footer.site b{color:var(--ink)}
.foot-logo{display:block; height:42px; width:auto; margin-bottom:.6rem}
footer.site nav{display:flex; flex-direction:column; gap:.3rem}
footer.site .legal{font-size:.76rem; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:1.2rem; max-width:52rem}