/* ============================================================
   STRÁNKA KALKULAČKY — Industrien
   Bez border-radius. Paleta z #010066. Font se dědí ze šablony.
   Rozvržení se řídí šířkou obsahu (container queries).
   Vše pod #nkp, aby se to nervalo se šablonou ani s kalkulačkou.
   ============================================================ */

#nkp, #nkp *, #nkp *::before, #nkp *::after { box-sizing:border-box; border-radius:0; }

#nkp{
  --brand:#010066;
  --brand-2:#1A1A8F;
  --accent:#FFB700;
  --ink:#0B0D2B;
  --muted:#454A6B;
  --label:#5C6180;
  --field:#767FA3;
  --divider:#DFE1EE;
  --panel:#F1F2F9;
  --card:#FFFFFF;
  --card-alt:#FAFAFD;
  --on-brand:#FFFFFF;
  --on-brand-mut:#B9BEE8;

  color:var(--ink); line-height:1.6;
  container-type:inline-size; container-name:nkp;
}

/* ---------- TYPOGRAFIE ---------- */
#nkp .nkp-h2{
  margin:44px 0 6px; font-size:26px; font-weight:800; line-height:1.2;
  letter-spacing:-.02em; color:var(--ink);
}
#nkp .nkp-h3{ margin:0 0 8px; font-size:17px; font-weight:700; line-height:1.3; color:var(--ink); }
#nkp .nkp-h3 a{ color:var(--brand); text-decoration:none; }
#nkp .nkp-h3 a:hover{ text-decoration:underline; }
#nkp .nkp-sub{ margin:0 0 20px; font-size:16px; color:var(--muted); max-width:70ch; }
#nkp p{ margin:0 0 12px; }
#nkp a{ color:var(--brand); }

#nkp .nkp-perex{
  margin:0 0 22px; font-size:18px; line-height:1.6; color:var(--muted); max-width:70ch;
}
#nkp .nkp-meta{ margin:10px 0 0; font-size:13px; color:var(--label); }

/* ---------- KALKULAČKA ---------- */
#nkp .nkp-calc{ margin:0 0 12px; }

/* ---------- KARTY ---------- */
#nkp .nkp-cards{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-bottom:8px; }
#nkp .nkp-card{
  min-width:0; padding:18px;
  background:var(--card-alt); border:1px solid var(--divider); border-top:3px solid var(--brand);
}
#nkp .nkp-card p:last-child{ margin-bottom:0; }
#nkp .nkp-card-cta{ margin:14px 0 0; }

#nkp .nkp-card-num{ position:relative; padding-top:20px; }
#nkp .nkp-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-bottom:10px;
  background:var(--brand); color:var(--on-brand);
  font-size:15px; font-weight:800; line-height:1;
}

/* ---------- BLOK NEJSTE SI JISTÍ ---------- */
#nkp .nkp-help{
  margin:28px 0 8px; padding:22px;
  background:var(--panel); border:1px solid var(--divider);
}
#nkp .nkp-help .nkp-h2{ margin-top:0; }
#nkp .nkp-help .nkp-card{ background:var(--card); }

/* ---------- TLAČÍTKA ---------- */
#nkp .nkp-btn{
  display:inline-block; padding:13px 20px;
  font-size:15px; font-weight:700; text-decoration:none; text-align:center;
  color:var(--on-brand); background:var(--brand); border:1.5px solid var(--brand);
  transition:background .12s ease;
}
#nkp .nkp-btn:hover{ background:var(--brand-2); border-color:var(--brand-2); color:var(--on-brand); text-decoration:none; }
#nkp .nkp-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
#nkp .nkp-btn-ghost{ color:var(--brand); background:var(--card); border-color:var(--field); }
#nkp .nkp-btn-ghost:hover{ background:var(--panel); border-color:var(--brand); color:var(--brand); }

/* ---------- POZNÁMKOVÝ BLOK ---------- */
#nkp .nkp-note{
  margin:18px 0 0; padding:16px 18px;
  background:var(--brand); color:var(--on-brand); border-left:5px solid var(--accent);
}
#nkp .nkp-note p{ margin:0; font-size:15px; }
#nkp .nkp-note strong{ color:var(--accent); }
#nkp .nkp-note em{ font-style:normal; text-decoration:underline; text-underline-offset:3px; }

/* ---------- TYPY KOMPRESORŮ ---------- */
#nkp .nkp-types{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
#nkp .nkp-type{
  min-width:0; padding:16px;
  background:var(--card); border:1px solid var(--divider); border-left:3px solid var(--brand);
}
#nkp .nkp-type p{ margin:0; font-size:14.5px; color:var(--muted); }

/* výrazný odkaz na podrobný návod */
#nkp .nkp-guide{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin:16px 0 0; padding:20px;
  background:var(--brand); color:var(--on-brand); border-left:5px solid var(--accent);
}
#nkp .nkp-guide-txt{ flex:1 1 260px; min-width:0; }
#nkp .nkp-guide .nkp-h3{ margin:0 0 5px; color:var(--on-brand); font-size:18px; }
#nkp .nkp-guide p{ margin:0; color:var(--on-brand-mut); font-size:14.5px; }
#nkp .nkp-guide-cta{ flex:0 0 auto; margin:0; }
#nkp .nkp-guide .nkp-btn{ background:var(--accent); border-color:var(--accent); color:var(--brand); }
#nkp .nkp-guide .nkp-btn:hover{ background:#FFC633; border-color:#FFC633; color:var(--brand); }
#nkp .nkp-more{ margin:14px 0 0; font-size:14px; color:var(--muted); }

/* ---------- CHYBY ---------- */
#nkp .nkp-mistakes{ list-style:none; margin:0; padding:0; counter-reset:nkpm; }
#nkp .nkp-mistakes li{
  counter-increment:nkpm; position:relative;
  padding:16px 0 16px 52px; border-bottom:1px solid var(--divider);
}
#nkp .nkp-mistakes li::before{
  content:counter(nkpm); position:absolute; left:0; top:16px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:var(--on-brand); font-size:16px; font-weight:800; line-height:1;
}
#nkp .nkp-mistakes p{ margin:0; color:var(--muted); }

/* ---------- FAQ ---------- */
#nkp .nkp-faq{ border-top:1px solid var(--divider); }
#nkp .nkp-faq-item{ border-bottom:1px solid var(--divider); }
#nkp .nkp-faq-q{
  margin:0; padding:16px 40px 16px 0;
  font-size:16.5px; font-weight:700; line-height:1.4; color:var(--ink);
}
#nkp .nkp-faq-a{ padding:0 0 18px; color:var(--muted); max-width:75ch; }
#nkp .nkp-faq-a p{ margin:0; }

/* rozbalovací režim zapne JavaScript; bez něj zůstane vše čitelné */
#nkp .nkp-faq.is-ready .nkp-faq-q{ padding:0; }
#nkp .nkp-faq.is-ready .nkp-faq-a{ display:none; }
#nkp .nkp-faq.is-ready .nkp-faq-item.is-open .nkp-faq-a{ display:block; }
#nkp .nkp-faq-btn{
  position:relative; display:block; width:100%;
  margin:0; padding:16px 40px 16px 0;
  font:inherit; font-size:16.5px; font-weight:700; line-height:1.4;
  text-align:left; color:var(--ink);
  background:none; border:0; cursor:pointer;
}
#nkp .nkp-faq-btn:hover{ color:var(--brand); }
#nkp .nkp-faq-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
#nkp .nkp-faq-btn::after{
  content:""; position:absolute; right:10px; top:50%; width:10px; height:10px;
  border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:translateY(-70%) rotate(45deg); transition:transform .15s ease;
}
#nkp .nkp-faq-item.is-open .nkp-faq-btn::after{ transform:translateY(-30%) rotate(-135deg); }

/* ---------- ZÁVĚR ---------- */
#nkp .nkp-final{
  margin-top:36px; padding:24px;
  background:var(--brand); color:var(--on-brand);
}
#nkp .nkp-final .nkp-h2{ margin-top:0; color:var(--on-brand); }
#nkp .nkp-final p{ color:var(--on-brand-mut); max-width:70ch; }
#nkp .nkp-final-cta{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
#nkp .nkp-final .nkp-btn{ background:var(--accent); border-color:var(--accent); color:var(--brand); }
#nkp .nkp-final .nkp-btn:hover{ background:#FFC633; border-color:#FFC633; color:var(--brand); }
#nkp .nkp-final .nkp-btn-ghost{ background:transparent; border-color:var(--on-brand-mut); color:var(--on-brand); }
#nkp .nkp-final .nkp-btn-ghost:hover{ background:var(--brand-2); border-color:var(--on-brand); color:var(--on-brand); }

/* ---------- ROZVRŽENÍ PODLE ŠÍŘKY OBSAHU ---------- */
@container nkp (min-width:560px){
  #nkp .nkp-cards-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #nkp .nkp-types{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #nkp .nkp-cards-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container nkp (min-width:840px){
  #nkp .nkp-cards-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:560px){
  #nkp .nkp-h2{ font-size:22px; margin-top:34px; }
  #nkp .nkp-perex{ font-size:16.5px; }
  #nkp .nkp-help, #nkp .nkp-final{ padding:16px; }
  #nkp .nkp-final-cta .nkp-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ #nkp *{ transition:none !important; } }