/* Wpis blogowy. Blog daje ~5x wiecej ruchu niz strona glowna, ale dotad
   nie mial zadnego CTA - stad blok konwersji po tresci. */

.wpis-head {
	background: var(--c-brand-bg);
	padding-block: var(--sp-7) var(--sp-6);
}
/* Hero wpisu trzyma PELNA szerokosc kontenera - tak jak naglowek, okruszki
   i tresc pod nim. Wczesniej mial tu max-width: 76ch, a poniewaz .container
   daje margin-inline: auto, waski blok sie CENTROWAL: H1 zaczynal sie na
   362 px, gdy cala reszta strony na 124 px.
   Dlugosc wiersza ograniczamy na samym naglowku, nie na kontenerze. */
/* Zadnego max-width tutaj - .container ma juz swoje 1240 px i wlasny
   padding. Nadpisanie go (nawet na "none") rozwalalo szerokosc w druga
   strone: blok szedl na pelne 1440 px. */
.wpis-head h1 { max-width: 28ch; }
.wpis-head__meta { max-width: 60ch; }
.wpis-head__kat {
	margin: 0 0 var(--sp-3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-brand);
}
.wpis-head h1 { margin-bottom: var(--sp-4); }
.wpis-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-size: 0.82rem;
	color: var(--c-text-muted);
}
.wpis-head__sep { color: var(--c-brand-light); }

.wpis-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-7);
	padding-block: var(--sp-7);
}
/* Asymetria: szeroka kolumna czytania + waska boczna. Bez dzielenia na pol. */
@media (min-width: 992px) {
	.wpis-layout { grid-template-columns: minmax(0, 1fr) 300px; }
	.wpis-aside { position: sticky; top: calc(var(--h-header) + var(--sp-4)); align-self: start; }
}

.wpis-thumb { width: 100%; margin-bottom: var(--sp-6); }

/* Tresc z WordPressa: 58 wpisow, w sumie 1037 <li>, 451 <h2>, 565 <h3>,
   140 wierszy tabel. Stylujemy przez kontekst .prose, bez klas w tresci. */
.wpis-tresc .prose { max-width: 72ch; font-size: 1.04rem; }
.wpis-tresc .prose h2 {
	margin-top: var(--sp-8);
	padding-top: var(--sp-4);
	border-top: 2px solid var(--c-brand-bg);
}
.wpis-tresc .prose h3 { margin-top: var(--sp-6); color: var(--c-brand); }
.wpis-tresc .prose strong { color: var(--c-brand-dark); }
.wpis-tresc .prose a { text-decoration: underline; text-underline-offset: 2px; }
.wpis-tresc .prose ul { list-style: none; padding-left: 0; }
.wpis-tresc .prose ul li {
	position: relative;
	padding-left: var(--sp-5);
}
/* Znacznik listy jako kreska w kolorze marki, nie kropka - drobny detal,
   ale to on odroznia tekst od domyslnego renderu przegladarki. */
.wpis-tresc .prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 12px;
	height: 2px;
	background: var(--c-cta);
}
/* Tabele (.prose table / .tabela-scroll) przeniesione do layout.css - stary
   `display:block` na <table> psul uklad kolumn na mobile zamiast przewijac
   caly blok. Teraz owija je kontener dodawany przez filtr `tresc`. */
.wpis-tresc .prose hr {
	border: 0;
	border-top: 1px solid var(--c-border);
	margin-block: var(--sp-6);
}

/* --- blok konwersji po tresci --- */
.wpis-cta {
	margin-top: var(--sp-8);
	padding: var(--sp-6) var(--sp-6) var(--sp-7);
	background: var(--c-brand-dark);
	color: var(--c-white);
}
.wpis-cta__nad {
	margin: 0 0 var(--sp-2);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-brand-light);
}
.wpis-cta__title { color: var(--c-white); margin-bottom: var(--sp-3); font-size: var(--fs-h3); }
.wpis-cta__opis { margin: 0 0 var(--sp-5); color: rgba(255, 255, 255, 0.86); max-width: 52ch; }
.wpis-cta__btny { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.wpis-cta .btn--ghost { color: var(--c-white); border-color: rgba(255, 255, 255, 0.5); }
.wpis-cta .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.wpis-cta .open-now { margin-top: var(--sp-4); color: rgba(255, 255, 255, 0.86); }
.wpis-cta .open-now[data-state="open"] { color: #9ce8bd; }

/* --- kolumna boczna --- */
.blok-boczny { margin-bottom: var(--sp-6); }
.blok-boczny__title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-brand);
	margin-bottom: var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 2px solid var(--c-brand-light);
}
.blok-boczny__lista { margin: 0; padding: 0; list-style: none; }
.blok-boczny__lista li + li { margin-top: var(--sp-3); }
.blok-boczny__lista a {
	display: block;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--c-brand-dark);
	text-decoration: none;
}
.blok-boczny__lista a:hover { color: var(--c-cta); }