/* =========================================================================
   blog.css — szablon pojedynczego wpisu (zamow-kontener.pl)
   -------------------------------------------------------------------------
   Tokeny --zk-* pochodzą z :root w assets/site-header.css (jedno źródło
   prawdy). Tu je KONSUMUJEMY przez var() z fallbackami.

   Zasady (design system):
   - #84BF2A (--zk-green) = tylko akcent graficzny (belki, kropki). NIGDY tło
     pod biały tekst ani kolor tekstu. Zieleń tekstowa/ikony = --zk-green-dark.
   - Kolor akcji (CTA) = --zk-red. Pigułka (--zk-r-pill) = WYŁĄCZNIE przyciski.
   - Kontrolki = --zk-r-control (8px). Karty = --zk-r-card (12px).
   - Kontrast ≥ 4,5:1. Focus-visible = outline 2px --zk-green-dark.
   ========================================================================= */

.zk-blog {
	--zkb-side-w: 340px;
	--zkb-gap: 56px;
	--zkb-read: 820px;

	font-family: var(--zk-font, sans-serif); /* kanon: zk-ui.css (Geist) */
	color: var(--zk-ink, #23291c);
	font-size: 1.02rem;
	line-height: 1.65;
	padding-top: 34px;
}

.zk-blog *,
.zk-blog *::before,
.zk-blog *::after { box-sizing: border-box; }

.zk-blog__container {
	max-width: var(--zk-max, 1240px);
	margin: 0 auto;
	padding: 0 20px;
}

/* --- Nagłówek wpisu --------------------------------------------------- */
.zk-blog__head { max-width: var(--zkb-read); }

/* Breadcrumb: styl przeniesiony do warstwy wspólnej (.zk-ui-breadcrumb w
   zk-ui.css). Blog renderuje breadcrumb przez zk_ui_breadcrumb() – jedno
   źródło markupu i stylu dla całego serwisu. */

.zk-blog__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.zk-blog__badge {
	display: inline-flex;
	align-items: center;
	background: var(--zk-bg-green, #e8f2d6);
	color: var(--zk-green-dark, #487214);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--zk-r-control, 8px);
	text-decoration: none;
	line-height: 1;
}
.zk-blog__badge:hover { background: #ddecc2; }

.zk-blog__readtime {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .86rem;
	color: var(--zk-muted, #5b6152);
}
.zk-blog__readtime svg { flex: 0 0 auto; }

.zk-blog__h1 {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	line-height: 1.12;
	font-weight: 800;
	color: var(--zk-ink, #23291c);
	margin: 0 0 26px;
	letter-spacing: -.01em;
}

.zk-blog__author-meta {
	display: flex;
	align-items: center;
	gap: 14px;
}
.zk-blog__avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--zk-bg-soft, #f2f4ec);
	border: 1px solid var(--zk-line, #e6e8e1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--zk-muted, #9aa08f);
}
.zk-blog__avatar img { width: 100%; height: 100%; object-fit: cover; }
.zk-blog__avatar-svg { width: 100%; height: 100%; }
.zk-blog__author-text { display: flex; flex-direction: column; line-height: 1.35; }
.zk-blog__author-name { color: var(--zk-ink, #23291c); font-weight: 700; font-size: .98rem; }
.zk-blog__author-sub { color: var(--zk-muted, #5b6152); font-size: .84rem; }

.zk-blog__divider {
	border: 0;
	border-top: 1px solid var(--zk-line, #e6e8e1);
	margin: 26px 0 0;
}

/* --- Zdjęcie główne --------------------------------------------------- */
.zk-blog__featured {
	margin: 30px 0 0;
}
.zk-blog__featured-img,
.zk-blog__featured img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--zk-r-card, 12px);
	border: 1px solid var(--zk-line, #e6e8e1);
}
.zk-blog__featured-cap {
	margin-top: 10px;
	font-size: .82rem;
	color: var(--zk-muted, #5b6152);
	text-align: center;
}

/* --- Układ dwukolumnowy ---------------------------------------------- */
.zk-blog__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--zkb-side-w);
	gap: var(--zkb-gap);
	align-items: start;
	margin-top: 40px;
}
.zk-blog__main { min-width: 0; }

.zk-blog__sidebar {
	position: sticky;
	top: 24px;
	align-self: start;
}
.zk-blog__side-inner { display: grid; gap: 22px; }

/* --- Lead ------------------------------------------------------------- */
.zk-blog__lead {
	border-left: 3px solid var(--zk-green, #84BF2A);
	padding: 2px 0 2px 22px;
	margin: 0 0 26px;
	font-size: 1.16rem;
	line-height: 1.65;
	color: var(--zk-ink, #23291c);
}
.zk-blog__lead p { margin: 0 0 .6em; }
.zk-blog__lead p:last-child { margin-bottom: 0; }

/* --- Treść (prose) ---------------------------------------------------- */
.zk-blog__prose { font-size: 1.02rem; line-height: 1.75; color: var(--zk-ink, #23291c); }
.zk-blog__prose > *:first-child { margin-top: 0; }

.zk-blog__prose h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.72rem);
	font-weight: 800;
	color: var(--zk-ink, #23291c);
	line-height: 1.25;
	margin: 2em 0 .55em;
	scroll-margin-top: 90px;
}
.zk-blog__prose h3 {
	font-size: 1.22rem;
	font-weight: 700;
	color: var(--zk-ink, #23291c);
	margin: 1.6em 0 .5em;
	scroll-margin-top: 90px;
}
.zk-blog__prose h4 { font-size: 1.06rem; font-weight: 700; margin: 1.4em 0 .4em; }
.zk-blog__prose p { margin: 0 0 1.05em; }
.zk-blog__prose a {
	color: var(--zk-green-dark, #487214);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.zk-blog__prose a:hover { text-decoration-thickness: 2px; }
.zk-blog__prose strong { font-weight: 700; color: var(--zk-ink, #23291c); }

.zk-blog__prose ul,
.zk-blog__prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.zk-blog__prose li { margin: 0 0 .5em; padding-left: .2em; }
.zk-blog__prose li::marker { color: var(--zk-green-dark, #487214); font-weight: 700; }
/* ul: własny kwadratowy znacznik (spójny z listami na landingu, .zk-lp__prose) */
.zk-blog__prose ul { list-style: none; padding-left: 0; }
.zk-blog__prose ul > li { position: relative; padding-left: 1.4em; }
.zk-blog__prose ul > li::before {
	content: ""; position: absolute; left: .2em; top: .82em;
	transform: translateY(-50%);
	width: 5px; height: 5px; border-radius: 1.5px;
	background: var(--zk-green, #84BF2A);
}
.zk-blog__prose ul ul,
.zk-blog__prose ol ol { margin: .4em 0 .4em; }

.zk-blog__prose blockquote {
	border-left: 3px solid var(--zk-green, #84BF2A);
	margin: 1.4em 0;
	padding: 4px 0 4px 20px;
	color: var(--zk-muted, #5b6152);
	font-style: normal;
}
.zk-blog__prose img { max-width: 100%; height: auto; border-radius: var(--zk-r-card, 12px); }
.zk-blog__prose figure { margin: 1.5em 0; }
.zk-blog__prose figure figcaption { font-size: .82rem; color: var(--zk-muted, #5b6152); text-align: center; margin-top: 8px; }

.zk-blog__prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
	font-size: .95rem;
}
.zk-blog__prose th,
.zk-blog__prose td { border: 1px solid var(--zk-line, #e6e8e1); padding: 10px 12px; text-align: left; }
.zk-blog__prose thead th { background: var(--zk-bg-soft, #f2f4ec); font-weight: 700; }

.zk-blog__prose hr { border: 0; border-top: 1px solid var(--zk-line, #e6e8e1); margin: 2em 0; }
.zk-blog__prose code {
	background: var(--zk-bg-soft, #f2f4ec);
	padding: .12em .4em;
	border-radius: 4px;
	font-size: .9em;
}
.zk-blog__prose pre {
	background: var(--zk-navy, #212f45);
	color: #f4f6fa;
	padding: 16px 18px;
	border-radius: var(--zk-r-card, 12px);
	overflow: auto;
	margin: 1.4em 0;
}
.zk-blog__prose pre code { background: none; padding: 0; }

.zk-blog__pagination { margin-top: 1.4em; font-size: .92rem; }
.zk-blog__pagination a { color: var(--zk-green-dark, #487214); }

.zk-blog__tags { margin-top: 26px; font-size: .86rem; color: var(--zk-muted, #5b6152); }
.zk-blog__tags-label { font-weight: 700; }
.zk-blog__tags a {
	display: inline-block;
	background: var(--zk-bg-soft, #f2f4ec);
	color: var(--zk-green-dark, #487214);
	padding: 3px 10px;
	border-radius: var(--zk-r-control, 8px);
	text-decoration: none;
	margin: 0 4px 6px 0;
}
.zk-blog__tags a:hover { background: #e6ebda; }

/* --- Karta CTA (sidebar) --------------------------------------------- */
.zk-blog__cta-card {
	/* Gradient dostatecznie ciemny, by biały tekst przechodził AA (≥4,6:1). */
	background: linear-gradient(150deg, #55811a, #41680f);
	color: #fff;
	border-radius: var(--zk-r-card, 12px);
	padding: 24px 22px;
	box-shadow: 0 10px 28px -14px rgba(20, 32, 4, .5);
}
.zk-blog__cta-title { color: #fff; font-size: 1.24rem; font-weight: 800; margin: 0 0 6px; line-height: 1.2; }
.zk-blog__cta-sub { color: rgba(255, 255, 255, .92); font-size: .92rem; margin: 0 0 18px; line-height: 1.45; }

.zk-blog__cta-card .zk-ui-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 18px;
	border-radius: var(--zk-r-pill, 999px);
	font-weight: 800;
	font-size: .98rem;
	text-decoration: none;
	/* border USUNIĘTY (24.07): deklaracja `border: transparent` nadpisywała
	   border-color wariantu --call z kanonu (ta sama specyficzność, później
	   w kaskadzie) — obwódkę i bazowy border daje zk-ui.css. */
	cursor: pointer;
	transition: background-color .16s ease, transform .16s ease, border-color .16s ease;
}
.zk-blog__cta-card .zk-ui-btn svg{ flex: 0 0 auto; }
/* Odstęp między przyciskami w karcie CTA (dawniej margin-top w klonie --call,
   usuniętym przy ujednolicaniu przycisku telefonu — 24.07). */
.zk-blog__cta-card .zk-ui-btn + .zk-ui-btn { margin-top: 10px; }
.zk-blog__cta-card .zk-ui-btn--primary{
	background: var(--zk-red, #c0392b);
	color: #fff;
	box-shadow: 0 8px 18px -10px rgba(192, 57, 43, .8);
}

/* --- Spis treści („W tym artykule") ---------------------------------- */
.zk-blog__toc {
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	padding: 18px 18px 14px;
	background: var(--zk-bg, #fff);
}
.zk-blog__toc-title,
.zk-blog__popular-title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--zk-muted, #5b6152);
	margin: 0 0 12px;
}
.zk-blog__toc ul { list-style: none; margin: 0; padding: 0; }
.zk-blog__toc li { margin: 0; }
.zk-blog__toc a {
	display: block;
	padding: 9px 12px;
	border-left: 3px solid transparent;
	border-radius: 0 var(--zk-r-control, 8px) var(--zk-r-control, 8px) 0;
	color: var(--zk-ink, #23291c);
	text-decoration: none;
	font-size: .93rem;
	line-height: 1.4;
	transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.zk-blog__toc a:hover { background: var(--zk-bg-soft, #f2f4ec); }
.zk-blog__toc a.is-active {
	background: var(--zk-bg-soft, #f2f4ec);
	color: var(--zk-green-dark, #487214);
	border-left-color: var(--zk-green, #84BF2A);
	font-weight: 700;
}

/* --- Popularne wpisy -------------------------------------------------- */
.zk-blog__popular {
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	padding: 18px 18px 6px;
	background: var(--zk-bg, #fff);
}
.zk-blog__popular ul { list-style: none; margin: 0; padding: 0; }
.zk-blog__pop-item { border-bottom: 1px solid var(--zk-line, #e6e8e1); }
.zk-blog__pop-item:last-child { border-bottom: 0; }
.zk-blog__pop-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	text-decoration: none;
}
.zk-blog__pop-thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--zk-r-control, 8px);
	overflow: hidden;
	background: var(--zk-bg-soft, #f2f4ec);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #b7bcac;
}
.zk-blog__pop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zk-blog__pop-title {
	color: var(--zk-ink, #23291c);
	font-weight: 700;
	font-size: .9rem;
	line-height: 1.35;
}
.zk-blog__pop-item a:hover .zk-blog__pop-title { color: var(--zk-green-dark, #487214); }
.zk-blog__thumb-ph { display: inline-flex; width: 60%; height: 60%; }
.zk-blog__thumb-ph svg { width: 100%; height: 100%; }

/* --- Ramka autora ----------------------------------------------------- */
.zk-blog__authorbox {
	display: flex;
	gap: 20px;
	background: var(--zk-bg-soft, #f2f4ec);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	padding: 24px;
	margin-top: 44px;
}
.zk-blog__authorbox-avatar {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--zk-bg, #fff);
	border: 1px solid var(--zk-line, #e6e8e1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #b7bcac;
}
.zk-blog__authorbox-avatar img { width: 100%; height: 100%; object-fit: cover; }
.zk-blog__authorbox-avatar .zk-blog__avatar-svg { width: 100%; height: 100%; }
.zk-blog__authorbox-eyebrow {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--zk-muted, #5b6152);
	margin: 0 0 4px;
}
.zk-blog__authorbox-name { font-size: 1.15rem; font-weight: 800; color: var(--zk-ink, #23291c); margin: 0 0 8px; }
.zk-blog__authorbox-bio { font-size: .94rem; line-height: 1.6; color: var(--zk-muted, #5b6152); margin: 0 0 12px; }
.zk-blog__authorbox-contact { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
.zk-blog__authorbox-contact a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--zk-green-dark, #487214);
	font-weight: 700;
	font-size: .9rem;
	text-decoration: none;
}
.zk-blog__authorbox-contact a:hover { text-decoration: underline; }

/* --- Powiązane artykuły ---------------------------------------------- */
.zk-blog__related {
	background: var(--zk-bg-soft, #f2f4ec);
	padding: 56px 0 60px;
	margin-top: 64px;
}
.zk-blog__related-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.zk-blog__eyebrow-label {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--zk-green-dark, #487214);
	margin: 0 0 8px;
}
.zk-blog__related-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; color: var(--zk-ink, #23291c); margin: 0; }
.zk-blog__related-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--zk-green-dark, #487214);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.zk-blog__related-all:hover { text-decoration: underline; }

.zk-blog__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.zk-blog__card {
	display: flex;
	flex-direction: column;
	background: var(--zk-bg, #fff);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}
.zk-blog__card:hover { box-shadow: var(--zk-shadow, 0 18px 40px -12px rgba(20, 32, 4, .26)); transform: translateY(-2px); }
.zk-blog__card-media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--zk-bg-soft, #f2f4ec);
	overflow: hidden;
	color: #b7bcac;
	display: flex;
	align-items: center;
	justify-content: center;
}
.zk-blog__card-media img { width: 100%; height: 100%; object-fit: cover; }
.zk-blog__card-media .zk-blog__thumb-ph { width: 64px; height: 64px; }
.zk-blog__card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.zk-blog__card-title { font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--zk-ink, #23291c); margin: 0; }
.zk-blog__card-title a { color: inherit; text-decoration: none; }
.zk-blog__card-title a:hover { color: var(--zk-green-dark, #487214); }
.zk-blog__card-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	color: var(--zk-muted, #5b6152);
	margin: auto 0 0;
}

/* --- Focus-visible (dostępność) -------------------------------------- */
.zk-blog a:focus-visible,
.zk-blog__cta-card .zk-ui-btn:focus-visible{
	outline: 2px solid var(--zk-green-dark, #487214);
	outline-offset: 2px;
	border-radius: 2px;
}
.zk-blog__cta-card a:focus-visible { outline-color: #fff; }

/* --- Responsywność (breakpointy design systemu) ---------------------- */
@media (max-width: 1200px) {
	.zk-blog { --zkb-side-w: 300px; --zkb-gap: 40px; }
}
@media (max-width: 900px) {
	.zk-blog__grid { grid-template-columns: 1fr; margin-top: 32px; }
	.zk-blog__head { max-width: none; }
	.zk-blog__sidebar { position: static; margin-top: 40px; }
	.zk-blog__side-inner { gap: 20px; }
	.zk-blog__toc { display: none; } /* spis treści mało użyteczny na mobile */
	.zk-blog__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.zk-blog { padding-top: 22px; }
	.zk-blog__cards { grid-template-columns: 1fr; }
	.zk-blog__authorbox { flex-direction: column; gap: 14px; }
	.zk-blog__featured { margin-top: 22px; }
}

/* --- Ograniczenie ruchu ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.zk-blog *,
	.zk-blog *::before,
	.zk-blog *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   ITERACJA 2 — poprawki (nadpisują reguły powyżej; ładowane później w pliku)
   ========================================================================= */

/* 1) Naprawa sticky sidebaru.
   custom.css ustawia html,body { overflow-x: hidden !important } — to tworzy
   kontekst przewijania i ŁAMIE position:sticky. Na stronach bloga zamieniamy
   na overflow-x: clip (ucina poziom BEZ tworzenia scroll-containera → sticky
   działa). Reguła obowiązuje tylko tam, gdzie ładuje się blog.css. */
html, body { overflow-x: clip !important; }

.zk-blog__sidebar { position: -webkit-sticky; position: sticky; top: 24px; align-self: start; }

/* 2) Karta CTA — jasnozielone tło + przyciski jak w nagłówku serwisu */
.zk-blog__cta-card {
	background: var(--zk-bg-green, #e8f2d6);
	border: 1px solid #d7e6bf;
	box-shadow: none;
	color: var(--zk-ink, #23291c);
}
.zk-blog__cta-title { color: var(--zk-ink, #23291c); }
.zk-blog__cta-sub { color: var(--zk-muted, #5b6152); }

/* Primary = klon .zk-cta (czerwień, biały tekst, pigułka) */
.zk-blog__cta-card .zk-ui-btn--primary {
	background: var(--zk-red, #c0392b);
	color: #fff;
	font-size: 14.5px;
	box-shadow: 0 8px 18px -9px rgba(192, 57, 43, .75);
	border-color: transparent;
}

/* Secondary = klon .zk-phone (białe tło, obwódka, kółko z zieloną ikoną) */
.zk-blog__btn-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--zk-bg-soft, #f2f4ec);
	color: var(--zk-green-dark, #487214);
	flex: 0 0 auto;
}
/* Focus na jasnej karcie — zielony (biały byłby niewidoczny) */
.zk-blog__cta-card a:focus-visible { outline-color: var(--zk-green-dark, #487214); }

/* 4) Badge kategorii w karcie powiązanych — nie rozciągaj na całą szerokość
   (w flex-column align-items:stretch domyślnie rozciąga element) */
.zk-blog__card-body .zk-blog__badge { align-self: flex-start; }

/* 5) „Wszystkie wpisy" — wymuś zieleń (motyw koloruje <a> z !important) */
.zk-blog__related-all,
.zk-blog__related-all:visited { color: var(--zk-green-dark, #487214) !important; }
.zk-blog__related-all:hover { color: var(--zk-green-dark, #487214) !important; }

/* 6) Pasek „Pogłęb temat z pomocą AI" (pod zdjęciem głównym) */
.zk-blog__ai {
	margin-top: 24px;
	background: var(--zk-bg-soft, #f2f4ec);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px 16px;
	flex-wrap: wrap;
}
.zk-blog__ai-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--zk-muted, #5b6152);
	font-size: .9rem;
}
.zk-blog__ai-label svg { color: var(--zk-green-dark, #487214); flex: 0 0 auto; }
.zk-blog__ai-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.zk-blog__ai-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1.5px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-pill, 999px);
	padding: 8px 14px;
	color: var(--zk-ink, #23291c);
	font-weight: 700;
	font-size: .86rem;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.zk-blog__ai-btn:hover { background: var(--zk-bg-soft, #f2f4ec); border-color: #cfd6c2; }
.zk-blog__ai-btn svg { flex: 0 0 auto; }
.zk-blog__ai-ico { color: var(--zk-green-dark, #487214); }

/* 3) FAQ (repeater ACF) — akcordeon <details>, białe kafle */
.zk-blog__faq { margin-top: 44px; }
.zk-blog__faq h2 {
	font-size: clamp(1.5rem, 2.8vw, 1.95rem);
	font-weight: 800;
	color: var(--zk-ink, #23291c);
	margin: 0;
	line-height: 1.2;
}
.zk-blog__faq h2::after {
	content: "";
	display: block;
	width: 46px;
	height: 4px;
	border-radius: 2px;
	background: var(--zk-green, #84BF2A);
	margin-top: 14px;
}

@media (max-width: 640px) {
	.zk-blog__ai { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   ITERACJA 3 — przycisk telefonu w karcie CTA: wypełnione zielone tło,
   biały tekst, BEZ kółka wokół ikony (para z czerwonym primary).
   ========================================================================= */

/* =========================================================================
   ITERACJA 4 — kolory przycisków karty CTA
   - primary (czerwony): biały tekst i ikona (wymuszone !important — motyw
     nadpisuje kolor linków wewnętrznych),
   - telefon: białe tło + obramowanie ciemniejsze od tła karty (var(--zk-bg-green, #e8f2d6)),
     tekst ciemny, ikona zielona (widoczne na białym).
   ========================================================================= */
.zk-blog__cta-card .zk-ui-btn--primary,
.zk-blog__cta-card .zk-ui-btn--primary span,
.zk-blog__cta-card .zk-ui-btn--primary svg { color: #fff !important; }

/* =========================================================================
   ITERACJA 5 — box „W skrócie" (pole ACF blog_lead, ręczne). Bez ikony.
   ========================================================================= */
.zk-blog__tldr {
	background: var(--zk-bg-green-soft, #eef5e2);
	border: 1px solid #dcecc4;
	border-radius: var(--zk-r-card, 12px);
	padding: 22px 26px;
	margin: 0 0 28px;
}
.zk-blog__tldr-label {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zk-green-dark, #487214);
	margin: 0 0 10px;
}
.zk-blog__tldr-text {
	color: var(--zk-ink, #23291c);
	font-size: 1.05rem;
	line-height: 1.65;
}
.zk-blog__tldr-text > *:first-child { margin-top: 0; }
.zk-blog__tldr-text p { margin: 0 0 .6em; }
.zk-blog__tldr-text p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .zk-blog__tldr { padding: 18px 18px; } }

/* =========================================================================
   ITERACJA 6 — zdjęcie wyróżniające w nagłówku (obok tytułu), 2 kolumny.
   ========================================================================= */
.zk-blog__head--media { max-width: none; }
.zk-blog__head-grid--media {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 42%);
	gap: 44px;
	align-items: center;
	margin-top: 8px;
}
.zk-blog__head-text { min-width: 0; }
.zk-blog__head-grid--media .zk-blog__h1 { margin-bottom: 22px; }
.zk-blog__head-media { margin: 0; }
.zk-blog__head-img,
.zk-blog__head-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--zk-r-card, 12px);
	border: 1px solid var(--zk-line, #e6e8e1);
}
@media (max-width: 900px) {
	.zk-blog__head-grid--media { grid-template-columns: 1fr; gap: 22px; }
	.zk-blog__head-img,
	.zk-blog__head-media img { aspect-ratio: 16 / 9; }
}

/* =========================================================================
   ITERACJA 7 — delikatny cień pod zdjęciem w nagłówku.
   ========================================================================= */
.zk-blog__head-img,
.zk-blog__head-media img {
	box-shadow: 0 12px 30px -14px rgba(20, 32, 4, .28);
}

/* =========================================================================
   ITERACJA 8 — pasek AI na granatowym tle (#212F45).
   ========================================================================= */
.zk-blog__ai {
	background: var(--zk-navy, #212f45);
	border-color: transparent;
}
.zk-blog__ai-label { color: #fff; }
.zk-blog__ai-label svg,
.zk-blog__ai-ico { color: var(--zk-green, #84BF2A); }
/* przyciski: białe kafle, ciemny tekst — kontrast na granacie */
.zk-blog__ai-btn { border-color: transparent; }
.zk-blog__ai-btn:hover { background: #eef1e8; border-color: transparent; }

/* =========================================================================
   ITERACJA 9
   - pasek AI: neutralny (biały + obwódka), nie trzeci zielony blok,
   - korekta sticky sidebaru pod przyklejony nagłówek (~105px) + kotwice TOC.
   ========================================================================= */
.zk-blog__ai { background: #fff; border: 1px solid var(--zk-line, #e6e8e1); }
.zk-blog__ai-label { color: var(--zk-muted, #5b6152); }
.zk-blog__ai-label svg,
.zk-blog__ai-ico { color: var(--zk-green-dark, #487214); }
.zk-blog__ai-btn { border-color: var(--zk-line, #e6e8e1); }
.zk-blog__ai-btn:hover { background: var(--zk-bg-soft, #f2f4ec); border-color: #cfd6c2; }

/* sticky sidebar pod przyklejonym nagłówkiem (topbar + belka główna) */
.zk-blog__sidebar { top: 120px; }
html { scroll-padding-top: 120px; }
.zk-blog__prose h2,
.zk-blog__prose h3 { scroll-margin-top: 120px; }

/* =========================================================================
   LISTING BLOGA — indeks /blog/ + archiwa kategorii (home.php, category.php)
   -------------------------------------------------------------------------
   Reużywa .zk-blog__cards / .zk-blog__card (siatka 3-kol). Poniżej wyłącznie
   elementy specyficzne dla listingu: nagłówek archiwum, intro, pasek kategorii,
   paginacja numeryczna, stan pusty. Tokeny --zk-* z site-header.css.
   ========================================================================= */

/* --- Nagłówek listingu (pełna szerokość, inaczej niż wpis 820px) ------- */
.zk-blog__head--archive { max-width: none; }
.zk-blog__head--archive .zk-blog__h1 { margin-top: 4px; }

.zk-blog__archive-intro {
	max-width: 720px;
	margin-top: 14px;
	color: var(--zk-muted, #5b6152);
	font-size: 1.02rem;
	line-height: 1.6;
}
.zk-blog__archive-intro p { margin: 0 0 .6em; }
.zk-blog__archive-intro p:last-child { margin-bottom: 0; }

/* --- Pasek kategorii (pigułki) ---------------------------------------- */
.zk-blog__cat-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}
.zk-blog__cat-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-pill, 999px);
	background: var(--zk-bg, #fff);
	color: var(--zk-ink, #23291c) !important; /* motyw koloruje <a> — wymuszamy */
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.zk-blog__cat-pill:hover {
	background: var(--zk-bg-soft, #f2f4ec);
	border-color: #d7dccb;
	color: var(--zk-green-dark, #487214) !important;
}
.zk-blog__cat-pill.is-active {
	background: var(--zk-bg-green, #e8f2d6);
	border-color: #d0e3b2;
	color: var(--zk-green-dark, #487214) !important;
	font-weight: 700;
}

/* --- Siatka kart na listingu ------------------------------------------ */
.zk-blog__cards--archive { margin-top: 34px; }

/* --- Paginacja numeryczna (the_posts_pagination) ---------------------- */
.zk-blog__archive-pagination { margin-top: 44px; }
.zk-blog__archive-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.zk-blog__archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-control, 8px);
	background: var(--zk-bg, #fff);
	color: var(--zk-ink, #23291c) !important; /* motyw koloruje <a> — wymuszamy */
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.zk-blog__archive-pagination a.page-numbers:hover {
	background: var(--zk-bg-soft, #f2f4ec);
	border-color: #d7dccb;
	color: var(--zk-green-dark, #487214) !important;
}
.zk-blog__archive-pagination .page-numbers.current {
	background: var(--zk-green-dark, #487214);
	border-color: var(--zk-green-dark, #487214);
	color: #fff !important;
	cursor: default;
}
.zk-blog__archive-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
	padding: 0 4px;
	color: var(--zk-muted, #5b6152) !important;
}
.zk-blog__archive-pagination .page-numbers.prev,
.zk-blog__archive-pagination .page-numbers.next {
	font-weight: 700;
	color: var(--zk-green-dark, #487214) !important;
}
.zk-blog__archive-pagination a.prev.page-numbers:hover,
.zk-blog__archive-pagination a.next.page-numbers:hover {
	background: var(--zk-bg-green, #e8f2d6);
	border-color: #d0e3b2;
}

/* --- Stan pusty ------------------------------------------------------- */
.zk-blog__archive-empty {
	margin: 40px 0;
	padding: 28px;
	text-align: center;
	color: var(--zk-muted, #5b6152);
	background: var(--zk-bg-soft, #f2f4ec);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
}

/* --- Responsywność listingu ------------------------------------------ */
@media (max-width: 640px) {
	.zk-blog__cat-nav { gap: 8px; }
	.zk-blog__cat-pill { padding: 7px 13px; font-size: .85rem; }
	.zk-blog__archive-pagination .page-numbers { min-width: 38px; height: 38px; }
}

/* --- Odstęp dolny listingu (main „posiada" własny odstęp od stopki) ---- */
.zk-blog--archive { padding-bottom: 72px; }
@media (max-width: 640px) {
	.zk-blog--archive { padding-bottom: 48px; }
}

/* --- Pasek tagów na listingu (chipy „#tag") --------------------------- */
.zk-blog__tag-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}
.zk-blog__tag-nav-label {
	font-size: .86rem;
	font-weight: 700;
	color: var(--zk-muted, #5b6152);
	margin-right: 2px;
}
.zk-blog__tag-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: var(--zk-r-control, 8px);
	background: var(--zk-bg-soft, #f2f4ec);
	color: var(--zk-green-dark, #487214) !important; /* motyw koloruje <a> — wymuszamy */
	font-size: .85rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .16s ease, color .16s ease;
}
.zk-blog__tag-chip::before { content: "#"; opacity: .55; margin-right: 1px; }
.zk-blog__tag-chip:hover { background: #e6ebda; }
.zk-blog__tag-chip.is-active {
	background: var(--zk-green-dark, #487214);
	color: #fff !important;
}
.zk-blog__tag-chip.is-active::before { opacity: .85; }

/* --- Nawigacja grup DWUPOZIOMOWA (kody: grupy główne → podgrupy) -------- */
.zk-blog__group-nav {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}
.zk-blog__group-mains {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* przyciski-pigułki grup głównych (reset natywnego <button>) */
.zk-blog__group-main {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	cursor: pointer;
}
/* strzałka rozwijania */
.zk-blog__group-main::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform .16s ease;
	opacity: .6;
}
.zk-blog__group-main[aria-expanded="true"]::after {
	transform: rotate(-135deg) translateY(1px);
	opacity: .9;
}

/* panele podgrup */
.zk-blog__group-panels {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.zk-blog__group-sub {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 16px;
	background: var(--zk-bg-soft, #f2f4ec);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
}
.zk-blog__group-sub[hidden] { display: none; }

@media (max-width: 640px) {
	.zk-blog__group-sub { padding: 12px 12px; }
}