/**
 * DawidWeb Blog CSS — v159.0.0
 * Zachowuje design motywu (--lime, Inter, cards, radius 16-24).
 *
 * Sekcje:
 *   1. Blog Hub (archive + hub page): hero, search, cats, grid, cards
 *   2. Single post: progress bar, hero, meta, TOC sidebar, content typography
 *   3. Author box + CTA box + Related
 *   4. Responsive
 */

/* ==========================================================
   1. BLOG HUB
   ========================================================== */

.blog-hub .blog-hero {
	padding: 60px 0 40px;
	background: linear-gradient(135deg, rgba(132,204,22,0.08) 0%, rgba(132,204,22,0.02) 100%);
	border-bottom: 1px solid rgba(0,0,0,0.04);
}
.blog-hero-title {
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 800;
	line-height: 1.1;
	margin: 8px 0 12px;
	color: #0f172a;
	letter-spacing: -0.02em;
}
.blog-hero-sub {
	font-size: 1.125rem;
	color: #475569;
	max-width: 680px;
	margin: 0 0 28px;
	line-height: 1.5;
}
/* FAZA 31 — Breadcrumbs: WCAG AA kontrast + równe wyrównanie strzałki */
.breadcrumbs {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 0.875rem;
	line-height: 1.2;
	color: #334155;
	font-weight: 500;
	margin: 0 0 20px;
	padding: 8px 14px;
	background: rgba(255,255,255,0.6);
	border: 1px solid rgba(132,204,22,0.2);
	border-radius: 999px;
	width: fit-content;
	max-width: 100%;
}
.breadcrumbs a {
	color: #334155;
	text-decoration: none;
	transition: color .15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible { color: #4d7c0f; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs a:focus-visible { outline: 2px solid #84cc16; outline-offset: 3px; border-radius: 4px; }
.breadcrumbs > span[aria-hidden="true"] {
	color: #94a3b8;
	font-size: 0.95em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	transform: translateY(-1px);
	user-select: none;
}
.breadcrumbs > span:not([aria-hidden]) { color: #0f172a; font-weight: 600; }

.blog-search {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 560px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 50px;
	padding: 6px 6px 6px 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.blog-search i.fa-search { color: #94a3b8; }
.blog-search input {
	flex: 1;
	border: 0;
	outline: 0;
	padding: 10px 8px;
	background: transparent;
	font-size: 0.95rem;
	font-family: inherit;
}
.blog-search .btn { padding: 10px 22px; }

/* Categories row */
.blog-cats {
	padding: 18px 0;
	background: #fff;
	border-bottom: 1px solid rgba(0,0,0,0.04);
	position: sticky;
	top: 70px;
	z-index: 10;
}
.blog-cats-row {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 4px;
}
.blog-cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	color: #334155;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: all .18s ease;
	--cat-color: #84cc16;
}
.blog-cat i { color: var(--cat-color); }
.blog-cat:hover { background: #fff; border-color: var(--cat-color); transform: translateY(-1px); }
.blog-cat.is-active {
	background: var(--cat-color);
	color: #fff;
	border-color: var(--cat-color);
	box-shadow: 0 3px 12px color-mix(in srgb, var(--cat-color) 35%, transparent);
}
.blog-cat.is-active i { color: #fff; }

/* Grid */
.blog-grid-wrap { padding: 40px 0 60px; }
.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
}
.blog-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-card:hover {
	transform: translateY(-4px);
	border-color: rgba(132,204,22,0.4);
	box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.blog-card-media {
	display: block;
	aspect-ratio: 40 / 21; /* = 1200x630 cover, zgodne z grafika (bez ucinania tekstu) */
	background: #f1f5f9;
	overflow: hidden;
	position: relative;
}
.blog-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .4s ease;
}
/* Featured (hero) media — ten sam aspect co grafika cover, zeby tytul sie nie ucinal */
.blog-featured-media {
	display: block;
	aspect-ratio: 40 / 21;
	background: #f1f5f9;
	overflow: hidden;
	position: relative;
	border-radius: 14px;
}
.blog-featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
/* FAZA 31 — Cover placeholder: rich gradient + SVG pattern + bold icon */
.blog-card-placeholder {
	width: 100%; height: 100%;
	position: relative;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	isolation: isolate;
	--cat-color: #84cc16;
	background:
		radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--cat-color) 90%, transparent) 0%, transparent 55%),
		radial-gradient(circle at 15% 90%, color-mix(in srgb, var(--cat-color) 35%, transparent) 0%, transparent 45%),
		linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.blog-card-placeholder::before {
	content: "";
	position: absolute; inset: 0;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E");
	background-size: 28px 28px;
	z-index: 0;
	pointer-events: none;
}
.blog-card-placeholder::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--cat-color) 0%, #84cc16 100%);
	z-index: 1;
}
.blog-card-placeholder i {
	position: relative;
	z-index: 2;
	font-size: 4.25rem;
	color: #ffffff;
	opacity: 0.96;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
	transition: transform .35s ease;
}
.blog-card:hover .blog-card-placeholder i,
.blog-featured:hover .blog-card-placeholder i { transform: scale(1.08) rotate(-2deg); }

/* Featured (duży) placeholder — większa ikona + więcej powietrza */
.blog-featured-media .blog-card-placeholder i { font-size: 6rem; }
.blog-featured-media .blog-card-placeholder::before { background-size: 36px 36px; }

/* Prefer-reduced-motion: nie skaluj ikony */
@media (prefers-reduced-motion: reduce) {
	.blog-card-placeholder i { transition: none !important; }
	.blog-card:hover .blog-card-placeholder i,
	.blog-featured:hover .blog-card-placeholder i { transform: none !important; }
}
.blog-card-body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.blog-card-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--cat-color, #4d7c0f);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	--cat-color: #4d7c0f;
}
.blog-card-title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 4px 0;
	color: #0f172a;
}
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: #4d7c0f; }
.blog-card-excerpt {
	font-size: 0.9375rem;
	color: #475569;
	line-height: 1.55;
	margin: 0;
}
.blog-card-meta {
	display: flex;
	gap: 14px;
	font-size: 0.8125rem;
	color: #64748b;
	margin-top: auto;
	padding-top: 8px;
	flex-wrap: wrap;
}
.blog-card-meta i { color: #84cc16; margin-right: 4px; }
.blog-card-cta {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #4d7c0f;
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: gap .2s ease;
}
.blog-card-cta:hover { gap: 12px; }

/* Pagination */
.blog-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.blog-pagination .page-numbers,
.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	color: #334155;
	font-weight: 600;
	text-decoration: none;
	transition: all .15s ease;
}
.blog-pagination a.page-numbers:hover {
	background: #f8fafc; border-color: #84cc16; color: #4d7c0f;
}
.blog-pagination .current {
	background: #84cc16; color: #fff; border-color: #84cc16;
}

.blog-empty {
	text-align: center;
	padding: 60px 20px;
	color: #64748b;
	font-size: 1.1rem;
}

/* Final CTA box (shared) */
.blog-cta-box {
	background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
	color: #fff;
	padding: 48px 32px;
	border-radius: 24px;
	text-align: center;
	box-shadow: 0 12px 32px rgba(132,204,22,0.25);
}
.blog-cta-box h2 {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	color: #fff;
	margin: 0 0 12px;
	font-weight: 800;
}
.blog-cta-box p {
	font-size: 1.0625rem;
	color: rgba(255,255,255,0.92);
	margin: 0 0 24px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.blog-cta-box .btn {
	background: #fff !important;
	color: #4d7c0f !important;
	border: 0;
	padding: 16px 32px;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.blog-cta-box .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.blog-final-cta { padding: 40px 0 80px; }

/* ==========================================================
   2. SINGLE POST
   ========================================================== */

.post-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: transparent;
	z-index: 9999;
	pointer-events: none;
}
.post-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #84cc16, #4d7c0f);
	box-shadow: 0 0 8px rgba(132,204,22,0.6);
	transition: width .05s linear;
}

.post-hero {
	padding: 60px 0 30px;
	background: linear-gradient(135deg, rgba(132,204,22,0.06) 0%, rgba(132,204,22,0.02) 100%);
}
.post-hero-c { max-width: 860px; }
.post-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: color-mix(in srgb, var(--cat-color) 12%, white);
	color: var(--cat-color);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	margin: 16px 0 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.post-title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 16px;
	color: #0f172a;
	letter-spacing: -0.02em;
}
.post-lead {
	font-size: 1.1875rem;
	color: #334155;
	line-height: 1.55;
	margin: 0 0 24px;
	font-weight: 400;
}
.post-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 16px 0;
	border-top: 1px solid rgba(0,0,0,0.06);
	border-bottom: 1px solid rgba(0,0,0,0.06);
	margin-bottom: 28px;
}
.post-meta-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.9375rem;
	color: #334155;
}
.post-meta-author img {
	width: 44px; height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.post-meta-author small { color: #64748b; font-size: 0.8125rem; }
.post-meta-details {
	display: flex; gap: 16px; flex-wrap: wrap;
	font-size: 0.875rem; color: #475569;
	margin-left: auto;
}
.post-meta-details i { color: #84cc16; margin-right: 4px; }
.post-meta-updated { color: #4d7c0f; font-weight: 600; }

.post-featured {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16/9;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	margin-top: 8px;
}
.post-featured img { width: 100%; height: 100%; object-fit: cover; }

/* BODY (content + TOC sidebar) */
.post-body {
	padding: 48px 0;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 60px;
	max-width: 1180px;
}
.post-toc-wrap {
	position: sticky;
	top: 140px;
	align-self: start;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
}
.post-toc {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 18px 20px;
	margin-bottom: 20px;
}
.post-toc-title {
	font-size: 0.875rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e2e8f0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.post-toc-title i { color: #84cc16; margin-right: 6px; }
.post-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: toc;
}
.post-toc-list li {
	margin: 0;
	padding: 0;
	counter-increment: toc;
}
.post-toc-list a {
	display: block;
	padding: 6px 0 6px 0;
	font-size: 0.875rem;
	color: #475569;
	text-decoration: none;
	line-height: 1.35;
	border-left: 2px solid transparent;
	padding-left: 12px;
	margin-left: -2px;
	transition: all .15s ease;
}
.post-toc-list a:hover { color: #4d7c0f; }
.post-toc-list a.is-active {
	color: #4d7c0f;
	font-weight: 600;
	border-left-color: #84cc16;
	background: linear-gradient(90deg, rgba(132,204,22,0.08), transparent);
}
.post-toc-list li.toc-level-3 a { padding-left: 24px; font-size: 0.8125rem; }

/* Share buttons */
.post-share {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 18px 20px;
}
.post-share-title {
	font-size: 0.875rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.post-share-title i { color: #84cc16; margin-right: 6px; }
.post-share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	color: #475569;
	text-decoration: none;
	cursor: pointer;
	transition: all .15s ease;
	font-size: 0.9375rem;
}
.share-btn:hover { transform: translateY(-2px); }
.share-wa:hover { background: #25d366; color: #fff; border-color: #25d366; }
.share-li:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.share-x:hover  { background: #000; color: #fff; border-color: #000; }
.share-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.share-copy:hover { background: #84cc16; color: #fff; border-color: #84cc16; }
.share-copy.is-copied { background: #4d7c0f; color: #fff; border-color: #4d7c0f; }

/* Content typography */
.post-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: #1f2937;
	max-width: 760px;
}
.post-content > p { margin: 0 0 1.2em; }
.post-content h2 {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 800;
	line-height: 1.25;
	margin: 2.2em 0 0.8em;
	color: #0f172a;
	letter-spacing: -0.015em;
	scroll-margin-top: 140px;
}
.post-content h3 {
	font-size: clamp(1.25rem, 1.8vw, 1.4rem);
	font-weight: 700;
	line-height: 1.3;
	margin: 1.8em 0 0.6em;
	color: #0f172a;
	scroll-margin-top: 140px;
}
.post-content h4 {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 1.4em 0 0.5em;
	color: #1e293b;
}
.post-content a {
	color: #4d7c0f;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color .15s ease;
}
.post-content a:hover { color: #365314; }
.post-content ul, .post-content ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.post-content li { margin-bottom: 0.4em; }
.post-content blockquote {
	margin: 1.5em 0;
	padding: 18px 24px;
	border-left: 4px solid #84cc16;
	background: linear-gradient(90deg, rgba(132,204,22,0.08), transparent);
	border-radius: 0 12px 12px 0;
	font-style: italic;
	color: #334155;
}
.post-content blockquote p { margin: 0; }
.post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
	margin: 1.5em 0;
}
.post-content figure { margin: 1.8em 0; }
.post-content figcaption {
	font-size: 0.875rem;
	color: #64748b;
	text-align: center;
	margin-top: 8px;
}
.post-content code {
	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
	font-size: 0.9em;
	background: #f1f5f9;
	color: #be185d;
	padding: 2px 6px;
	border-radius: 4px;
}
.post-content pre {
	position: relative;
	background: #0f172a;
	color: #e2e8f0;
	padding: 20px 20px 20px;
	border-radius: 14px;
	overflow-x: auto;
	margin: 1.6em 0;
	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
	font-size: 0.875rem;
	line-height: 1.6;
}
.post-content pre code {
	background: transparent;
	color: inherit;
	padding: 0;
}
.post-content pre .copy-code-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255,255,255,0.08);
	color: #cbd5e1;
	border: 1px solid rgba(255,255,255,0.15);
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 0.75rem;
	cursor: pointer;
	transition: all .15s ease;
	font-family: inherit;
}
.post-content pre .copy-code-btn:hover { background: #84cc16; color: #fff; border-color: #84cc16; }

.post-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 0.9375rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
}
.post-content table th,
.post-content table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid #e2e8f0;
}
.post-content table th {
	background: #f8fafc;
	font-weight: 700;
	color: #0f172a;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.post-content table tbody tr:hover { background: #f8fafc; }

/* Post CTA boxes w treści (dla redaktora — klasa .post-inline-cta) */
.post-content .post-inline-cta {
	background: linear-gradient(135deg, rgba(132,204,22,0.1), rgba(132,204,22,0.04));
	border: 2px solid rgba(132,204,22,0.3);
	border-radius: 16px;
	padding: 24px 28px;
	margin: 2em 0;
}
.post-content .post-inline-cta h3 { margin: 0 0 8px; color: #0f172a; }

.post-tags {
	margin: 32px 0 0;
	padding-top: 20px;
	border-top: 1px solid #e2e8f0;
	font-size: 0.875rem;
	color: #64748b;
}
.post-tags i { color: #84cc16; margin-right: 6px; }
.post-tags a {
	display: inline-block;
	padding: 4px 10px;
	background: #f1f5f9;
	color: #475569;
	border-radius: 6px;
	text-decoration: none;
	margin: 0 4px;
	font-size: 0.8125rem;
	transition: all .15s ease;
}
.post-tags a:hover { background: #84cc16; color: #fff; }

/* ==========================================================
   3. AUTHOR BOX + RELATED
   ========================================================== */

.post-author-box {
	padding: 40px 0;
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
}
.author-box-inner {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 24px;
	align-items: start;
	max-width: 860px;
}
.author-box-inner > img {
	width: 90px; height: 90px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.author-box-text h3 {
	margin: 0 0 4px;
	font-size: 1.25rem;
	color: #0f172a;
	font-weight: 800;
}
.author-box-role {
	color: #4d7c0f;
	font-weight: 600;
	font-size: 0.9375rem;
	margin: 0 0 10px;
}
.author-box-bio {
	color: #475569;
	line-height: 1.6;
	margin: 0 0 14px;
}
.author-box-links {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.author-box-links a {
	color: #475569;
	font-size: 0.9375rem;
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.author-box-links a:hover { color: #4d7c0f; }
.author-box-links i { color: #84cc16; }

.post-cta { padding: 40px 0 20px; }

.post-related { padding: 40px 0 80px; background: #fff; }
.post-related-title {
	text-align: center;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 32px;
}
.post-related-title i { color: #84cc16; margin-right: 8px; }
.post-related-back {
	text-align: center;
	margin: 32px 0 0;
}
.post-related-back a {
	color: #4d7c0f;
	font-weight: 700;
	text-decoration: none;
	font-size: 0.9375rem;
}
.post-related-back a:hover { text-decoration: underline; }

/* ==========================================================
   4. RESPONSIVE
   ========================================================== */

@media (max-width: 1024px) {
	.post-body { grid-template-columns: 1fr; gap: 32px; }
	.post-toc-wrap { position: static; max-height: none; order: -1; }
	.post-toc, .post-share { display: inline-block; vertical-align: top; width: calc(50% - 10px); }
	.post-share { margin-left: 12px; }
}

@media (max-width: 768px) {
	.blog-hero { padding: 40px 0 28px; }
	.blog-grid { grid-template-columns: 1fr; gap: 20px; }
	.blog-cats { position: static; padding: 14px 0; }
	.blog-cats-row { gap: 8px; }
	.blog-cat { padding: 8px 14px; font-size: 0.8125rem; }
	.blog-search .btn { padding: 10px 16px; font-size: 0.875rem; }

	.post-body { padding: 28px 0; }
	.post-toc, .post-share { display: block; width: 100%; margin: 0 0 16px; }
	.post-content { font-size: 1rem; line-height: 1.65; }
	.post-hero { padding: 40px 0 24px; }
	.post-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
	.post-meta-details { margin-left: 0; }

	.author-box-inner { grid-template-columns: 1fr; text-align: center; }
	.author-box-inner > img { margin: 0 auto; }
	.author-box-links { justify-content: center; }

	.blog-cta-box { padding: 36px 20px; border-radius: 18px; }
}

@media (max-width: 480px) {
	.blog-hero-title { font-size: 1.75rem; }
	.blog-hero-sub { font-size: 0.9375rem; }
	.post-title { font-size: 1.5rem; }
	.post-lead { font-size: 1rem; }
	.blog-cta-box h2 { font-size: 1.25rem; }
	.blog-cta-box p { font-size: 0.9375rem; }
}

/* Screen-reader only (reużywane) */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ============================================================
   FIX 2026-06-11 — artykul szeroki jak header (.c = 1240px),
   cover bez przycinania, karta formularza pod artykulem
   ============================================================ */
.post-hero-c { max-width: 1240px; }
.post-body { max-width: 1240px; }
.post-content { max-width: none; }
.post-featured { aspect-ratio: 40 / 21; }
.post-cta-form {
	margin-top: 24px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	padding: 28px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   FIX 2026-06-11 v2 — uklad wpisu wg feedbacku Dawida:
   gora: TOC (lewo) | W skrocie + wnioski (prawo),
   artykul pod spodem na pelnej szerokosci headera (.c)
   ============================================================ */
.post-body { padding: 36px 0 4px; align-items: start; }
.post-intro-col { display: flex; flex-direction: column; gap: 20px; }
.post-intro-col .dwb-tldr,
.post-intro-col .dwb-keytakeaways { margin: 0; }
.post-content-wrap { padding: 16px 0 48px; }
.post-toc-wrap { position: static; max-height: none; overflow: visible; }
.post-toc-title { font-size: 1rem; }
.post-toc-list a { font-size: 0.975rem; padding: 7px 0 7px 12px; line-height: 1.4; }
@media (max-width: 1024px) {
	.post-toc, .post-share { display: block; width: 100%; margin: 0 0 16px; }
}

/* FIX 2026-06-11 v3 - twarde zdjecie limitu szerokosci tresci */
.dwb-single .post-content, .blog-single .post-content, main .post-content { max-width: none !important; }
.dwb-single .post-hero-c, .blog-single .post-hero-c { max-width: 1240px !important; }
.dwb-single .post-body, .blog-single .post-body { max-width: 1240px !important; }


/* ============================================================
   FIX 2026-06-11 v4 — CTA pod artykulem w 2 kolumnach:
   lewo zielony pitch, prawo otwarty formularz (feedback Dawida)
   ============================================================ */
.post-cta-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: stretch; }
.post-cta-grid .blog-cta-box.post-cta-pitch {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	margin: 0;
	padding: 40px 36px;
}
.post-cta-pitch h2 { text-align: left; }
.post-cta-pitch p { margin-left: 0; max-width: none; }
.post-cta-trust { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.post-cta-trust li { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 600; color: #fff; }
.post-cta-trust li i { color: #f7fee7; font-size: 1.1rem; }
.post-cta-grid .post-cta-form { margin: 0; max-width: none; }
@media (max-width: 960px) {
	.post-cta-grid { grid-template-columns: 1fr; }
	.post-cta-grid .blog-cta-box.post-cta-pitch { padding: 32px 24px; }
}

/* FIX 2026-06-11 v5 - zdjecie autora: pokaz gorna czesc kadru (czolo bylo uciete) */
.post-meta-author img, .author-box-inner > img { object-position: 50% 12%; }
/* Mobile grid blowout fix 2026-06-13: 1fr implies minmax(auto,1fr); widest child stretched the column 7px past the container. */
@media (max-width:1024px){.post-body{grid-template-columns:minmax(0,1fr)}.post-body>*{min-width:0;max-width:100%}}