/*
 * Warstwa blogowa: lista artykulow, karta artykulu, wpis, spis tresci.
 * Arkusz wchodzi tylko na widokach wpisow (`inc/assets.php`) — sklep go nie pobiera.
 *
 * Wszystkie wartosci pochodza ze zmiennych `--kd-*`. Zmiana kierunku wizualnego to nadal
 * podmiana `tokens.json`, nie ruszanie tego pliku.
 */

/* --- naglowek dzialu --------------------------------------------------------------- */

.kd-blog__head {
	max-width: var(--kd-container-narrow);
	margin-bottom: var(--kd-space-5);
}

.kd-blog__head .kd-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.kd-blog__head .kd-eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kd-blog__lead {
	margin: var(--kd-space-2) 0 0;
	max-width: 62ch;
	color: var(--kd-color-text-muted);
}

/* --- siatka kart ------------------------------------------------------------------- */

.kd-postgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kd-space-5) var(--kd-gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.kd-postgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.kd-postgrid { grid-template-columns: repeat(3, 1fr); }
}

.kd-postcard {
	display: flex;
	background: var(--kd-color-background);
}

.kd-postcard__link {
	display: flex;
	flex-direction: column;
	gap: var(--kd-space-2);
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.kd-postcard__media {
	display: block;
	overflow: hidden;
	border-radius: var(--kd-radius);
	background: var(--kd-color-surface);
	/*
	 * Kadr wymuszony, bo obrazki wyrozniajace tych wpisow maja rozne proporcje (od 4:3 do
	 * panoram). Bez tego rzad kart lamie sie na roznych wysokosciach i siatka faluje.
	 */
	aspect-ratio: 3 / 2;
}

.kd-postcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--kd-motion-slow) var(--kd-ease);
}

.kd-postcard__media--empty {
	display: block;
	width: 100%;
	height: 100%;
}

.kd-postcard__link:hover .kd-postcard__media img {
	transform: scale(1.03);
}

.kd-postcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kd-postcard__cat {
	display: block;
	color: var(--kd-color-text-muted);
}

.kd-postcard__title {
	display: block;
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-h3-weight);
	font-size: var(--kd-h3-size);
	line-height: var(--kd-h3-lh);
	color: var(--kd-color-text);
	/* Trzy wiersze to najdluzszy tytul w tym zbiorze; czwarty zaczyna rozjezdzac rzad. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kd-postcard__link:hover .kd-postcard__title {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.kd-postcard__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--kd-color-text-muted);
	font-size: var(--kd-body-size);
	line-height: 1.6;
}

.kd-postcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
	color: var(--kd-color-text-muted);
	font-size: var(--kd-caption-size);
}

/* --- wpis -------------------------------------------------------------------------- */

.kd-post .kd-container {
	max-width: var(--kd-container-narrow);
}

.kd-post__head {
	padding-top: var(--kd-space-4);
}

.kd-post__cat a {
	color: var(--kd-color-secondary);
	text-decoration: none;
	/*
	 * Cel dotykowy: nadkreslnik ma 13 px, wiec sam odnosnik bylby o polowe za niski. Szerokosc
	 * tez pilnujemy — najkrotsza nazwa kategorii („Turkus") ma 34 px na telefonie. Pole rosnie
	 * w prawo, bo `flex-start` trzyma napis przy lewej krawedzi slupa tekstu.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 40px;
	min-width: 44px;
}

.kd-post__cat a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kd-post__head .kd-entry__title {
	margin: 0;
}

.kd-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--kd-space-2) 0 0;
	color: var(--kd-color-text-muted);
	font-size: var(--kd-body-sm-size);
}

.kd-post__cover {
	margin: var(--kd-space-4) auto 0;
}

.kd-post__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kd-radius);
}

.kd-post__content {
	padding-top: var(--kd-space-4);
}

.kd-post__content h2 {
	margin-top: var(--kd-space-5);
	/*
	 * Odstep od gornej krawedzi okna przy skoku z spisu tresci — inaczej naglowek lezy
	 * pod przyklejonym paskiem naglowka strony.
	 */
	scroll-margin-top: 96px;
}

.kd-post__content h3 {
	margin-top: var(--kd-space-4);
	scroll-margin-top: 96px;
}

.kd-post__content img {
	border-radius: var(--kd-radius);
}

/* --- spis tresci ------------------------------------------------------------------- */

.kd-toc {
	margin-top: var(--kd-space-4);
	padding: var(--kd-space-3);
	border: 1px solid var(--kd-color-border);
	border-radius: var(--kd-radius);
	background: var(--kd-color-surface);
}

.kd-toc__title {
	margin: 0 0 var(--kd-space-2);
	font-family: var(--kd-font-body);
	font-size: var(--kd-label-size);
	font-weight: var(--kd-label-weight);
	letter-spacing: var(--kd-label-ls);
	text-transform: var(--kd-label-transform);
	color: var(--kd-color-text-muted);
}

.kd-toc__list {
	margin: 0;
	padding-left: 1.25em;
	color: var(--kd-color-text-muted);
}

.kd-toc__list li + li {
	margin-top: 2px;
}

.kd-toc__list a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--kd-color-secondary);
	text-decoration: none;
}

.kd-toc__list a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- bloki pod wpisem -------------------------------------------------------------- */

.kd-postrelated {
	border-top: 1px solid var(--kd-color-border);
}

.kd-postrelated__title {
	margin: 0 0 var(--kd-space-4);
}

/*
 * Zapis pod strona liczby (`kd_render_number_lead()`, 28.09.2026): ta sama ramka co pod wynikiem
 * kalkulatora (`.kdnum-lead` w `numerology.css`), ale tamten arkusz laduje sie tylko na kalkulatorze.
 */
.kd-numlead {
	margin-block: var(--kd-space-4);
	padding: 24px 20px;
	background: var(--kd-color-surface);
	border: 1px solid color-mix(in srgb, var(--kd-color-accent) 24%, transparent);
	border-radius: var(--kd-radius-input);
}

.kd-numlead .kd-numlead__title {
	margin: 0 0 6px;
	font-size: var(--kd-h4-size, 1.125rem);
}

.kd-numlead .kd-numlead__text {
	margin: 0 0 var(--kd-space-2);
	font-size: var(--kd-body-sm-size);
	color: var(--kd-color-text-muted);
}

.kd-numlead .kd-form {
	margin: 0;
}

/* Zwarta ramka po pierwszym akapicie strony liczby (N4a, 13.10.2026): mniej powietrza niz dolna, tytul to `<p>`. */
.kd-numlead--wtresci {
	margin-block: var(--kd-space-3);
	padding: 16px;
}
.kd-entry__content .kd-numlead--wtresci .kd-numlead__title {
	margin: 0 0 4px;
	font-size: var(--kd-h4-size, 1.125rem);
	font-weight: 600;
	line-height: 1.3;
}
.kd-entry__content .kd-numlead--wtresci .kd-numlead__text { margin: 0 0 12px; }

/*
 * Blok produktow lamie waski slup tekstu i wraca na pelna szerokosc strony: cztery karty
 * w kolumnie 760 px byly by po 170 px, czyli mniej niz miniatura, ktora dla nich istnieje.
 */
@media (min-width: 1024px) {
	.kd-post .kd-postrelated--products {
		width: min(var(--kd-container), calc(100vw - 2 * var(--kd-gutter)));
		margin-inline: calc((var(--kd-container-narrow) - min(var(--kd-container), 100vw - 2 * var(--kd-gutter))) / 2);
	}
}