/* Automatyczny szablon artykułu — wysoka czytelność, nawigacja i SEO-friendly markup. */

.kn-article-site { --article-bg:#f2f5f9; --article-panel:#fff; --article-text:#10223f; --article-copy:#334d6c; --article-muted:#60758e; --article-line:rgba(13,40,72,.15); }
.kn-reading-progress { position:fixed; z-index:1000; top:0; left:0; width:100%; height:3px; background:transparent; pointer-events:none; }
.kn-reading-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#dc1833,#ff2948,#367cff); box-shadow:0 0 16px rgba(255,41,72,.7); transition:width .08s linear; }
body.admin-bar .kn-reading-progress { top:32px; }
.kn-article { background:var(--article-bg); color:var(--article-text); }
.kn-article-hero { position:relative; padding:190px 0 160px; overflow:hidden; background:radial-gradient(circle at 82% 38%,rgba(54,124,255,.25),transparent 25%),radial-gradient(circle at 70% 55%,rgba(220,24,51,.13),transparent 35%),linear-gradient(135deg,#020815,#061832); color:#fff; }
.kn-article-hero::after { content:""; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,#367cff,#dc1833,transparent); }
.kn-article-grid { position:absolute; inset:0; opacity:.3; background-image:linear-gradient(rgba(137,167,210,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(137,167,210,.08) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,#000,transparent 95%); }
.kn-article-hero-inner { position:relative; z-index:2; max-width:1120px; }
.kn-article-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:46px; color:#93a6bf; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.kn-article-breadcrumb a { color:#c4d0df; }
.kn-article-breadcrumb a:hover { color:#fff; }
.kn-article-breadcrumb i { width:26px; height:1px; background:linear-gradient(90deg,#dc1833,#367cff); }
.kn-article-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; }
.kn-article-kicker span,
.kn-article-kicker a { padding:7px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#c8d5e6; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.kn-article-kicker span { border-color:rgba(255,41,72,.5); background:rgba(220,24,51,.14); color:#ff6f82; }
.kn-article-hero h1 { max-width:980px; margin:0; color:#fff !important; font-family:"Space Grotesk",sans-serif; font-size:clamp(46px,6vw,74px); font-weight:600; line-height:1.02; letter-spacing:-.052em; text-wrap:balance; }
.kn-article-lead { max-width:820px; margin:28px 0 0; color:#bac8da; font-size:20px; line-height:1.72; }
.kn-article-meta { display:flex; flex-wrap:wrap; gap:0; margin-top:38px; border-block:1px solid rgba(255,255,255,.14); }
.kn-article-meta > * { padding:14px 22px; border-right:1px solid rgba(255,255,255,.14); color:#9eafc5; font-size:11.5px; }
.kn-article-meta > *:first-child { padding-left:0; }
.kn-article-meta strong { color:#fff; }
.kn-article-featured { position:relative; z-index:4; margin-top:-90px !important; margin-bottom:70px !important; }
.kn-article-featured img { display:block; width:100% !important; max-width:none !important; height:auto !important; max-height:720px; object-fit:cover; border:1px solid rgba(255,255,255,.23); border-radius:18px; box-shadow:0 45px 100px rgba(2,8,21,.3); }
.kn-article-featured figcaption { padding:12px 4px 0; color:var(--article-muted); font-size:12px; line-height:1.6; }
.kn-article-layout { display:grid; grid-template-columns:250px minmax(0,820px); justify-content:center; gap:80px; padding:90px 0 120px; }
.kn-article-featured + .kn-article-layout { padding-top:10px; }
.kn-article-sidebar { min-width:0; }
.kn-article-toc,
.kn-article-share { position:relative; padding:23px; border:1px solid var(--article-line); border-radius:12px; background:var(--article-panel); box-shadow:0 18px 50px rgba(24,53,88,.07); }
.kn-article-toc { position:sticky; top:120px; }
.kn-article-toc > span,
.kn-article-share > span { display:block; margin-bottom:16px; color:#b70f28; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.kn-article-toc ol { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.kn-article-toc li { border-top:1px solid var(--article-line); }
.kn-article-toc li:first-child { border-top:0; }
.kn-article-toc li.level-3 { padding-left:14px; }
.kn-article-toc a { display:block; padding:11px 0; color:var(--article-copy); font-size:12.5px; font-weight:650; line-height:1.45; }
.kn-article-toc a:hover,
.kn-article-toc a.is-active { color:#c4122c; }
.kn-article-share { display:grid; gap:0; margin-top:15px; }
.kn-article-share a,
.kn-article-share button { width:100%; padding:10px 0; border:0; border-top:1px solid var(--article-line); background:none; color:var(--article-copy); font-size:12px; font-weight:650; text-align:left; cursor:pointer; }
.kn-article-share a:hover,
.kn-article-share button:hover { color:#c4122c; }
.kn-article-share small { min-height:19px; padding-top:8px; color:#19745e; font-size:10px; }
.kn-article-column { min-width:0; }
.kn-article-content { color:var(--article-copy); font-size:18.5px; line-height:1.86; }
.kn-article-content > :first-child { margin-top:0 !important; }
.kn-article-content h2,
.kn-article-content h3,
.kn-article-content h4 { scroll-margin-top:130px; color:var(--article-text) !important; font-family:"Space Grotesk",sans-serif; font-weight:650; text-wrap:balance; }
.kn-article-content h2 { margin:64px 0 22px; font-size:36px; line-height:1.17; letter-spacing:-.035em; }
.kn-article-content h3 { margin:48px 0 17px; font-size:27px; line-height:1.25; letter-spacing:-.025em; }
.kn-article-content h4 { margin:36px 0 14px; font-size:21px; line-height:1.35; }
.kn-article-content p { margin:0 0 25px; }
.kn-article-content a { color:#b70f28; font-weight:650; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.kn-article-content a:hover { color:#2f66c7; }
.kn-article-content ul,
.kn-article-content ol { display:grid; gap:10px; margin:0 0 28px; padding-left:28px; }
.kn-article-content ul { list-style:disc; }
.kn-article-content ol { list-style:decimal; }
.kn-article-content li { padding-left:6px; }
.kn-article-content strong { color:var(--article-text); }
.kn-article-content blockquote { position:relative; margin:45px 0; padding:30px 34px 30px 40px; border:1px solid rgba(220,24,51,.22); border-left:4px solid #dc1833; border-radius:0 12px 12px 0; background:linear-gradient(90deg,rgba(220,24,51,.08),var(--article-panel)); color:var(--article-text); font-family:"Instrument Serif",serif; font-size:28px; line-height:1.45; }
.kn-article-content blockquote p { margin:0; }
.kn-article-content img { display:block; width:auto; max-width:100% !important; height:auto !important; margin:38px auto; border-radius:12px; box-shadow:0 22px 60px rgba(15,42,74,.14); }
.kn-article-content figure { max-width:100%; margin:42px 0; }
.kn-article-content figcaption { margin-top:-25px; color:var(--article-muted); font-size:12.5px; line-height:1.6; text-align:center; }
.kn-article-content table { display:block; width:100%; margin:38px 0; overflow-x:auto; border-collapse:collapse; font-size:15px; line-height:1.55; }
.kn-article-content th,
.kn-article-content td { min-width:150px; padding:13px 15px; border:1px solid var(--article-line); text-align:left; }
.kn-article-content th { background:#e8eef6; color:var(--article-text); }
.kn-article-content code { padding:2px 6px; border-radius:4px; background:#e8eef6; color:#163d73; font-size:.88em; }
.kn-article-content pre { max-width:100%; padding:22px; overflow:auto; border-radius:10px; background:#06142d; color:#eef4fb; font-size:14px; line-height:1.65; }
.kn-article-author { display:grid; grid-template-columns:88px 1fr; gap:24px; margin-top:80px; padding:28px; border:1px solid var(--article-line); border-radius:14px; background:var(--article-panel); }
.kn-article-author img { width:88px; height:88px; border-radius:50%; }
.kn-article-author span { color:#b70f28; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.kn-article-author h2 { margin:7px 0 9px; color:var(--article-text) !important; font-size:24px; line-height:1.2; }
.kn-article-author p { margin:0; color:var(--article-copy); font-size:14.5px; line-height:1.7; }
.kn-article-cta { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:22px; padding:25px 28px; border:1px solid rgba(54,124,255,.3); border-radius:14px; background:linear-gradient(120deg,#041126,#09234a); color:#fff; box-shadow:0 24px 60px rgba(2,8,21,.16); }
.kn-article-cta > div { display:flex; align-items:center; gap:18px; }
.kn-article-cta .logo-sigil { width:48px; height:58px; }
.kn-article-cta p { display:grid; gap:4px; margin:0; }
.kn-article-cta p span { color:#ff6075; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.kn-article-cta p strong { max-width:370px; color:#fff; font-size:16px; line-height:1.45; }
.kn-post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-bottom:110px; }
.kn-post-navigation > a { display:grid; gap:8px; min-height:135px; padding:24px; border:1px solid var(--article-line); border-radius:12px; background:var(--article-panel); transition:transform .25s,border-color .25s; }
.kn-post-navigation > a:last-child { text-align:right; }
.kn-post-navigation > a:hover { transform:translateY(-5px); border-color:rgba(54,124,255,.5); }
.kn-post-navigation span { color:#b70f28; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.kn-post-navigation strong { color:var(--article-text); font-size:17px; line-height:1.45; }
.kn-related-posts { padding:110px 0 130px; background:#e5ecf5; }
.kn-related-posts header { max-width:760px; margin-bottom:50px; }
.kn-related-posts h2 { margin:18px 0 0; color:#071a36 !important; font-family:"Space Grotesk",sans-serif; font-size:clamp(40px,4.3vw,58px); line-height:1.06; letter-spacing:-.045em; }
.kn-related-posts h2 em { color:#49627f; font-family:"Instrument Serif",serif; font-weight:400; }
.kn-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.kn-related-grid article { overflow:hidden; border:1px solid rgba(7,26,54,.14); border-radius:14px; background:#fff; box-shadow:0 24px 60px rgba(25,55,92,.08); transition:transform .3s,box-shadow .3s; }
.kn-related-grid article:hover { transform:translateY(-7px); box-shadow:0 34px 75px rgba(25,55,92,.14); }
.kn-related-grid article > a { display:block; }
.kn-related-image { position:relative; display:grid; place-items:center; height:220px; overflow:hidden; background:radial-gradient(circle,rgba(54,124,255,.2),transparent 55%),#06142d; }
.kn-related-image img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.kn-related-grid article:hover .kn-related-image > img { transform:scale(1.06); }
.kn-related-image .logo-sigil { width:62px; height:75px; }
.kn-related-grid article > a > div:last-child { padding:24px; }
.kn-related-grid time { color:#b70f28; font-size:9px; font-weight:800; letter-spacing:.12em; }
.kn-related-grid h3 { min-height:58px; margin:12px 0; color:#071a36 !important; font-size:21px; line-height:1.35; }
.kn-related-grid p { min-height:76px; margin:0 0 20px; color:#49617e; font-size:14px; line-height:1.7; }
.kn-related-grid article span { display:flex; align-items:center; justify-content:space-between; padding-top:15px; border-top:1px solid rgba(7,26,54,.12); color:#b70f28; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.kn-related-grid article span svg { width:20px; }

/* Ciemny wariant artykułu zachowuje te same parametry czytelności. */
.kn-article-site[data-theme="dark"] { --article-bg:#020815; --article-panel:#07152d; --article-text:#f5f8fc; --article-copy:#c1cddd; --article-muted:#91a2b8; --article-line:rgba(198,216,240,.16); }
.kn-article-site[data-theme="dark"] .kn-article-layout { background:#020815; }
.kn-article-site[data-theme="dark"] .kn-article-content th,
.kn-article-site[data-theme="dark"] .kn-article-content code { background:#0b2346; color:#dce9fa; }
.kn-article-site[data-theme="dark"] .kn-article-content blockquote { background:linear-gradient(90deg,rgba(220,24,51,.11),#07152d); }
.kn-article-site[data-theme="dark"] .kn-related-posts { background:#041126; }
.kn-article-site[data-theme="dark"] .kn-related-posts h2,
.kn-article-site[data-theme="dark"] .kn-related-grid h3 { color:#f8fbff !important; }
.kn-article-site[data-theme="dark"] .kn-related-posts h2 em { color:#aebcd0; }
.kn-article-site[data-theme="dark"] .kn-related-grid article { background:#07152d; border-color:rgba(198,216,240,.15); }
.kn-article-site[data-theme="dark"] .kn-related-grid p { color:#aebdd1; }
.kn-article-site[data-theme="dark"] .kn-related-grid article span { border-color:rgba(198,216,240,.13); }

.kn-article-site[data-theme="light"] .kn-article-hero { background:radial-gradient(circle at 82% 38%,rgba(54,124,255,.14),transparent 26%),linear-gradient(135deg,#f8fafc,#e4ebf4); color:#071a36; }
.kn-article-site[data-theme="light"] .kn-article-hero h1 { color:#071a36 !important; }
.kn-article-site[data-theme="light"] .kn-article-lead { color:#405772; }
.kn-article-site[data-theme="light"] .kn-article-breadcrumb,
.kn-article-site[data-theme="light"] .kn-article-breadcrumb a { color:#49617e; }
.kn-article-site[data-theme="light"] .kn-article-kicker a { color:#29425f; border-color:rgba(7,26,54,.18); }
.kn-article-site[data-theme="light"] .kn-article-kicker span { color:#9f1024; }
.kn-article-site[data-theme="light"] .kn-article-meta { border-color:rgba(7,26,54,.14); }
.kn-article-site[data-theme="light"] .kn-article-meta > * { color:#49617e; border-color:rgba(7,26,54,.14); }
.kn-article-site[data-theme="light"] .kn-article-meta strong { color:#071a36; }

@media (max-width:1050px) {
  .kn-article-layout { grid-template-columns:210px minmax(0,1fr); gap:48px; }
  .kn-article-cta { align-items:stretch; flex-direction:column; }
  .kn-article-cta .button { width:100%; }
}

@media (max-width:820px) {
  .kn-article-hero { padding:170px 0 120px; }
  .kn-article-hero h1 { font-size:clamp(42px,8.5vw,62px); }
  .kn-article-layout { grid-template-columns:1fr; gap:42px; padding-top:60px; }
  .kn-article-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .kn-article-toc { position:relative; top:auto; }
  .kn-article-share { margin-top:0; }
  .kn-related-grid { grid-template-columns:1fr 1fr; }
  .kn-related-grid article:last-child { grid-column:1/-1; }
}

@media (max-width:680px) {
  body.admin-bar .kn-reading-progress { top:46px; }
  .kn-article-hero { padding:155px 0 92px; }
  .kn-article-breadcrumb { margin-bottom:30px; }
  .kn-article-hero h1 { font-size:clamp(38px,10.5vw,48px); line-height:1.06; letter-spacing:-.04em; }
  .kn-article-lead { margin-top:22px; font-size:17px; line-height:1.7; }
  .kn-article-meta { display:grid; grid-template-columns:1fr 1fr; }
  .kn-article-meta > * { padding:11px 10px; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); font-size:10.5px; }
  .kn-article-site[data-theme="light"] .kn-article-meta > * { border-color:rgba(7,26,54,.12); }
  .kn-article-featured { width:calc(100% - 20px) !important; margin-top:-45px !important; margin-bottom:42px !important; }
  .kn-article-featured img { min-height:240px; border-radius:12px; }
  .kn-article-layout { width:calc(100% - 36px) !important; padding:45px 0 80px; }
  .kn-article-featured + .kn-article-layout { padding-top:0; }
  .kn-article-sidebar { grid-template-columns:1fr; }
  .kn-article-content { font-size:17px; line-height:1.82; }
  .kn-article-content h2 { margin-top:52px; font-size:31px; }
  .kn-article-content h3 { margin-top:40px; font-size:24px; }
  .kn-article-content blockquote { padding:25px 22px; font-size:24px; }
  .kn-article-author { grid-template-columns:64px 1fr; padding:22px 18px; }
  .kn-article-author img { width:64px; height:64px; }
  .kn-article-author p { grid-column:1/-1; }
  .kn-article-cta { padding:22px 18px; }
  .kn-post-navigation { grid-template-columns:1fr; padding-bottom:80px; }
  .kn-post-navigation > a:last-child { text-align:left; }
  .kn-related-posts { padding:80px 0 105px; }
  .kn-related-grid { grid-template-columns:1fr; }
  .kn-related-grid article:last-child { grid-column:auto; }
  .kn-related-grid h3,
  .kn-related-grid p { min-height:0; }
}