/* Aktualności (rodzina blog): lista wpisów (pages/blog.html) i pojedynczy wpis (pages/post.html). Tylko tokeny z kr-tokens.css, ostre krawędzie.
   Port redesign/mockup/css/blog.css (codemod prefix.mjs, potem ręczne poprawki opisane w redesign/docs/wdrozenie/blog.md): prefiks kr-, tokeny --kr-*.
   Z powłoki (kr-base/kr-components/kr-shell) bierze: .kr-crumbs, .kr-pager*, .kr-cempty*, .kr-price*, .kr-badge, .kr-btn*, .kr-text-link, .kr-ms, .kr-sr-only, .kr-container, .kr-header-offset.
   Własne tylko tu: .kr-wm / .kr-wm__w (maska słów tytułu; w mockupie leży w catalogue.css, a powłoka jej nie ma: kandydat do awansu do kr-components.css).
   Treść wpisu (.kr-post__body) jest stylowana selektorami elementów, bo backend (sanitize_news_html) zwraca goły HTML z listy dozwolonych znaczników
   (p, h2–h6, ul/ol/li, dl, figure/figcaption, img, a, strong, em, blockquote, hr, table); klas wewnątrz treści nie ma.
   Wartości dynamiczne (indeks animacji --kr-i, --kr-w) liczy CSS po :nth-child, bo CSP zabrania style="".
   Ruch: transform/opacity/clip-path; stany początkowe „ukrytych” elementów są wyłącznie w prefers-reduced-motion: no-preference,
   więc bez ruchu każda treść jest od razu widoczna. Odsłanianie przy przewijaniu: tylko CSS (animation-timeline: view()) w @supports. */

/* ---------- wspólne: nadtytuł, tytuł, liczniki ---------- */

.kr-blog,
.kr-post {
	/* nagłówek jest przyklejony i nie zajmuje miejsca w układzie; miejsce na niego rezerwuje <main class="kr-header-offset"> */
	padding-block: 0 var(--kr-s9);
}

/* maska słów tytułu: każde słowo w osobnym oknie, które ucina je od dołu, dopóki ruch wejścia nie wsunie go na miejsce */
.kr-wm {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.kr-wm__w {
	display: inline-block;
}

/* indeks opóźnienia słowa: pozycja w nagłówku, ale nie więcej niż 8 (długi tytuł nie wydłuża wejścia) */
.kr-wm:nth-child(2) {
	--kr-w: 1;
}

.kr-wm:nth-child(3) {
	--kr-w: 2;
}

.kr-wm:nth-child(4) {
	--kr-w: 3;
}

.kr-wm:nth-child(5) {
	--kr-w: 4;
}

.kr-wm:nth-child(6) {
	--kr-w: 5;
}

.kr-wm:nth-child(7) {
	--kr-w: 6;
}

.kr-wm:nth-child(8) {
	--kr-w: 7;
}

.kr-wm:nth-child(n + 9) {
	--kr-w: 8;
}

.kr-blog__eyebrow,
.kr-post__eyebrow {
	margin: 0 0 var(--kr-s3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kr-blog__head,
.kr-post__head {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

/* duch typograficzny jako treść generowana (czysto dekoracyjny: poza drzewem dostępności i poza testem kontrastu) */
.kr-blog__head::after,
.kr-post__head::after {
	content: attr(data-ghost);
	position: absolute;
	z-index: -1;
	right: -1vw;
	bottom: -0.1em;
	font-size: clamp(6rem, 17vw, 16rem);
	font-weight: 200;
	letter-spacing: -0.05em;
	line-height: 0.8;
	color: rgb(17 17 17 / 4.5%);
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

@media (max-width: 767px) {
	.kr-blog__head::after,
	.kr-post__head::after {
		display: none;
	}
}

/* ---------- lista: nagłówek ---------- */

.kr-blog__head {
	display: grid;
	gap: var(--kr-s5) var(--kr-s8);
	padding-block: var(--kr-s5) var(--kr-s7);
}

@media (min-width: 992px) {
	.kr-blog__head {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		align-items: end;
	}
}

.kr-blog__title {
	font-size: clamp(2.5rem, 5.2vw, 4.75rem);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.02;
	text-wrap: balance;
}

.kr-blog__title:focus-visible,
.kr-post__title:focus-visible {
	outline-offset: 6px;
}

.kr-blog__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kr-s2) var(--kr-s5);
	margin: var(--kr-s4) 0 0;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.kr-blog__count {
	font-weight: 600;
}

.kr-blog__pagestat {
	color: var(--kr-muted);
}

.kr-blog__lead {
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--kr-muted);
	text-wrap: pretty;
}

.kr-blog__lead > p + p {
	margin-top: var(--kr-s3);
}

/* ---------- lista: wpisy ---------- */

.kr-bfeed {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kr-bentry {
	position: relative;
	min-width: 0;
}

/* linia rozdzielająca: cienka szara, a ciemna rysuje się po najechaniu i fokusie */
.kr-bentry::before,
.kr-bentry::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	transform-origin: left;
	pointer-events: none;
}

.kr-bentry::before {
	background: var(--kr-line);
}

.kr-bentry::after {
	background: var(--kr-ink);
	scale: 0 1;
	transition: scale 240ms var(--kr-ease-out);
}

.kr-bentry:last-child {
	border-bottom: 1px solid var(--kr-line);
}

/* indeks opóźnienia wejścia wiersza (stagger 55 ms): pozycja na liście, ale nie więcej niż 7; ustawia go CSS, bo CSP zabrania style="--i:n" */
.kr-bfeed > .kr-bentry:nth-child(2) {
	--kr-i: 1;
}

.kr-bfeed > .kr-bentry:nth-child(3) {
	--kr-i: 2;
}

.kr-bfeed > .kr-bentry:nth-child(4) {
	--kr-i: 3;
}

.kr-bfeed > .kr-bentry:nth-child(5) {
	--kr-i: 4;
}

.kr-bfeed > .kr-bentry:nth-child(6) {
	--kr-i: 5;
}

.kr-bfeed > .kr-bentry:nth-child(7) {
	--kr-i: 6;
}

.kr-bfeed > .kr-bentry:nth-child(n + 8) {
	--kr-i: 7;
}

.kr-bentry__a {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s4);
	padding-block: var(--kr-s5) var(--kr-s6);
}

.kr-bentry__media {
	order: -1;
	position: relative;
	aspect-ratio: 900 / 400;
	overflow: hidden;
	background: var(--kr-stone-deep);
}

.kr-bentry__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	box-shadow: var(--kr-image-outline);
	pointer-events: none;
}

.kr-bentry__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 700ms var(--kr-ease-out);
}

.kr-bentry__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s3);
	align-content: start;
	min-width: 0;
}

/* data: na telefonie jedna linia, od 992 px duża cyfra dnia i miesiąc z rokiem pod nią */
.kr-bentry__date {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--kr-s2);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kr-muted);
	font-variant-numeric: tabular-nums;
}

.kr-bentry__t {
	font-size: clamp(1.375rem, 2.2vw, 2rem);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.15;
	text-wrap: balance;
}

.kr-bentry__link {
	text-decoration: none;
	outline: none;
}

/* tarcza przed a:hover starego CSS i Bootstrapa 4 (kolor i podkreślenie o wyższej specyficzności niż reset powłoki): odsyłacz wiersza zachowuje wygląd */
.kr-bentry__link:hover,
.kr-bentry__link:focus {
	color: inherit;
	text-decoration: none;
}

/* cały wiersz jest celem odsyłacza (jak nazwa na karcie produktu); pierścień fokusu obejmuje wiersz */
.kr-bentry__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.kr-bentry__link:focus-visible::after {
	outline: 3px solid var(--kr-focus);
	outline-offset: -3px;
}

.kr-bentry__x {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--kr-muted);
	text-wrap: pretty;
}

.kr-bentry__more {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: var(--kr-s2);
	margin-top: var(--kr-s2);
	padding-block: 2px;
	border-bottom: 1px solid currentColor;
	font-size: 0.78125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: gap var(--kr-t-ui) var(--kr-ease-out);
}

.kr-bentry__more .kr-ms {
	font-size: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.kr-bentry:hover::after {
		scale: 1 1;
	}

	.kr-bentry:hover .kr-bentry__media img {
		scale: 1.04;
	}

	.kr-bentry:hover .kr-bentry__more {
		gap: var(--kr-s3);
	}
}

.kr-bentry:has(.kr-bentry__link:focus-visible)::after {
	scale: 1 1;
}

@media (min-width: 992px) {
	.kr-bentry__a {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--kr-s7);
		align-items: start;
		padding-block: var(--kr-s7);
	}

	.kr-bentry__media {
		order: 0;
	}

	.kr-bentry__body {
		grid-template-columns: 120px minmax(0, 1fr);
		column-gap: var(--kr-s6);
		row-gap: var(--kr-s3);
	}

	.kr-bentry__date {
		display: grid;
		gap: var(--kr-s1);
		align-content: start;
		grid-row: 1 / span 3;
	}

	.kr-bentry__day {
		font-size: clamp(2.5rem, 4vw, 3.5rem);
		font-weight: 200;
		letter-spacing: -0.04em;
		line-height: 1;
		color: var(--kr-ink);
	}

	.kr-bentry__body > :not(.kr-bentry__date) {
		grid-column: 2;
	}
}

@media (min-width: 1280px) {
	.kr-bentry__body {
		grid-template-columns: 160px minmax(0, 1fr);
	}
}

/* wpis bez daty (brak published_on): kolumna daty znika, tytuł i zajawka zajmują całą szerokość treści */
@media (min-width: 992px) {
	.kr-bentry__body.kr-bentry__body--nodate {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-bentry__body--nodate > :not(.kr-bentry__date) {
		grid-column: 1;
	}
}

/* najnowszy wpis na stronie 1: obraz po lewej i większy tytuł (jak scena aktualności na home) */
.kr-bentry--lead .kr-bentry__t {
	font-size: clamp(1.75rem, 3.2vw, 2.875rem);
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.kr-bentry--lead .kr-bentry__x {
	-webkit-line-clamp: 4;
	font-size: 1rem;
}

@media (min-width: 992px) {
	.kr-bentry--lead .kr-bentry__a {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--kr-s8);
		align-items: center;
		padding-block: var(--kr-s7) var(--kr-s8);
	}

	.kr-bentry--lead .kr-bentry__media {
		grid-column: 1;
		grid-row: 1;
		order: 0;
	}

	.kr-bentry--lead .kr-bentry__body {
		grid-column: 2;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kr-s4);
	}

	.kr-bentry--lead .kr-bentry__date {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 var(--kr-s2);
		grid-row: auto;
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--kr-muted);
	}

	.kr-bentry--lead .kr-bentry__day {
		font-size: inherit;
		font-weight: inherit;
		letter-spacing: 0;
		color: inherit;
	}

	.kr-bentry--lead .kr-bentry__body > :not(.kr-bentry__date) {
		grid-column: auto;
	}
}

/* ---------- lista: ładowanie (szkielet) ---------- */

.kr-bskel__media,
.kr-bskel__l {
	display: block;
	background: var(--kr-stone-deep);
}

.kr-bskel__media {
	order: -1;
	aspect-ratio: 900 / 400;
}

.kr-bskel__l {
	height: 14px;
}

.kr-bskel__l--1 {
	width: 24%;
}

.kr-bskel__l--2 {
	width: 82%;
	height: 28px;
}

.kr-bskel__l--3 {
	width: 94%;
}

.kr-bskel__l--4 {
	width: 70%;
}

@media (min-width: 992px) {
	.kr-bskel__media {
		order: 0;
	}
}

.kr-bskel__body {
	display: grid;
	gap: var(--kr-s3);
	align-content: start;
}

/* ---------- paginacja ---------- */

.kr-blog__pager {
	padding-top: var(--kr-s7);
}

/* ---------- wpis: nagłówek i obraz główny ---------- */

.kr-post__head {
	padding-block: var(--kr-s5) var(--kr-s6);
}

.kr-post__title {
	max-width: 21em;
	font-size: clamp(2rem, 4.2vw, 3.75rem);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.05;
	text-wrap: balance;
}

.kr-post__hero {
	position: relative;
	margin: 0 0 var(--kr-s6);
	aspect-ratio: 900 / 400;
	overflow: hidden;
	background: var(--kr-stone-deep);
}

.kr-post__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	box-shadow: var(--kr-image-outline);
	pointer-events: none;
}

.kr-post__hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.kr-post__hero {
		margin-bottom: var(--kr-s8);
	}
}

/* ---------- wpis: układ (data z boku, treść w kolumnie czytania) ---------- */

.kr-post__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s5);
}

@media (min-width: 992px) {
	.kr-post__layout {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		column-gap: var(--kr-s8);
	}

	.kr-post__side {
		position: sticky;
		top: calc(var(--kr-header-h) + var(--kr-s5));
		align-self: start;
	}

	/* treść zawsze w kolumnie czytania (także bez daty z boku: ładowanie); strony błędu mają jedną kolumnę */
	.kr-post__main {
		grid-column: 2;
	}

	.kr-post.is-plain .kr-post__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.kr-post.is-plain .kr-post__main {
		grid-column: 1;
	}
}

.kr-pdate {
	position: relative;
	display: grid;
	gap: var(--kr-s1);
	padding-top: var(--kr-s4);
}

.kr-pdate::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--kr-line-strong);
	transform-origin: left;
}

.kr-pdate__l {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kr-pdate time {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--kr-s2);
	font-variant-numeric: tabular-nums;
}

.kr-pdate__day {
	font-size: 1rem;
	font-weight: 600;
}

.kr-pdate__my {
	font-size: 0.9375rem;
	color: var(--kr-muted);
}

@media (min-width: 992px) {
	.kr-pdate time {
		display: grid;
		gap: var(--kr-s1);
		margin-top: var(--kr-s3);
	}

	.kr-pdate__day {
		font-size: clamp(3rem, 5vw, 4.5rem);
		font-weight: 200;
		letter-spacing: -0.05em;
		line-height: 0.95;
	}

	.kr-pdate__my {
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--kr-ink);
	}
}

.kr-post__main {
	min-width: 0;
}

/* ---------- wpis: treść (goły HTML z edytora: stylowanie selektorami elementów) ---------- */

.kr-post__body {
	font-size: 1.0625rem;
	line-height: 1.8;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* elementy z listy dozwolonych znaczników, których nie obejmuje reset powłoki (marginesy przeglądarki zepsułyby rytm); mockup ich nie używa */
.kr-post__body :where(h4, h5, h6, blockquote, dl, dd, hr, figure, table) {
	margin: 0;
}

.kr-post__body > * + * {
	margin-top: 1.25em;
}

.kr-post__body > :where(p, ul, ol, h2, h3, h4, h5, h6, blockquote, hr, dl) {
	max-width: 66ch;
}

/* akapit otwierający */
.kr-post__body > p:first-child {
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: -0.005em;
}

@media (min-width: 768px) {
	.kr-post__body > p:first-child {
		font-size: 1.25rem;
		line-height: 1.65;
	}
}

.kr-post__body p {
	text-wrap: pretty;
}

.kr-post__body strong,
.kr-post__body b {
	font-weight: 600;
}

.kr-post__body :where(h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

.kr-post__body h2 {
	margin-top: 2.6em;
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.kr-post__body h3 {
	margin-top: 2.2em;
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.kr-post__body :where(h4, h5, h6) {
	margin-top: 2em;
	font-size: 1rem;
	font-weight: 600;
}

.kr-post__body :where(h2, h3, h4, h5, h6) + :where(p, ul, ol) {
	margin-top: 0.8em;
}

.kr-post__body a {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color var(--kr-t-hover) ease;
}

/* tarcza przed a:hover starego CSS i Bootstrapa 4: odsyłacze w treści nie zmieniają koloru po najechaniu (podkreślenie pogrubia się osobną regułą) */
.kr-post__body a:hover,
.kr-post__body a:focus {
	color: inherit;
}

.kr-post__body :where(h2, h3, h4) a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	padding-bottom: 2px;
	transition: background-size 200ms var(--kr-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.kr-post__body :where(h2, h3, h4) a:hover {
		background-size: 100% 1px;
	}

	.kr-post__body p a:hover {
		text-decoration-thickness: 2px;
	}
}

.kr-post__body :where(h2, h3, h4) a:focus-visible {
	background-size: 100% 1px;
}

/* listy z kwadratowym znacznikiem (ostre krawędzie) */
.kr-post__body :where(ul, ol) {
	display: grid;
	gap: var(--kr-s2);
	padding: 0;
	list-style: none;
}

.kr-post__body li {
	position: relative;
	padding-left: 1.5em;
}

.kr-post__body ul > li::before {
	content: "";
	position: absolute;
	left: 0.2em;
	top: 0.8em;
	width: 6px;
	height: 6px;
	background: var(--kr-ink);
}

.kr-post__body ol {
	counter-reset: bl-ol;
}

.kr-post__body ol > li {
	counter-increment: bl-ol;
}

.kr-post__body ol > li::before {
	content: counter(bl-ol) ".";
	position: absolute;
	left: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.kr-post__body blockquote {
	padding-left: var(--kr-s5);
	border-left: 1px solid var(--kr-line-strong);
	font-size: 1.1875rem;
	font-weight: 300;
	line-height: 1.6;
}

.kr-post__body hr {
	height: 1px;
	margin-block: 2.5em;
	border: 0;
	background: var(--kr-line);
}

/* obrazy w treści: pełna szerokość kolumny, proporcje z atrybutów width/height (bez skoków układu) */
.kr-post__body img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--kr-stone-deep);
}

.kr-post__body figure,
.kr-post__body p:has(> img:only-child) {
	position: relative;
	margin: 2.2em 0;
	max-width: none;
	overflow: hidden;
}

.kr-post__body figure::after,
.kr-post__body p:has(> img:only-child)::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: var(--kr-image-outline);
	pointer-events: none;
}

.kr-post__body figcaption {
	margin-top: var(--kr-s2);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--kr-muted);
}

/* tabele i listy definicji są na liście dozwolonych znaczników, ale mockup ich nie pokazuje: minimalny, spokojny wygląd w tym samym rytmie */
.kr-post__body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.kr-post__body :where(th, td) {
	padding: var(--kr-s2) var(--kr-s3);
	border-bottom: 1px solid var(--kr-line);
	text-align: left;
	vertical-align: top;
}

.kr-post__body th {
	font-weight: 600;
}

.kr-post__body caption {
	padding-bottom: var(--kr-s2);
	font-size: 0.8125rem;
	color: var(--kr-muted);
	text-align: left;
}

.kr-post__body dt {
	font-weight: 600;
}

.kr-post__body dd {
	padding-left: var(--kr-s5);
}

/* wideo: w docelowej treści to odsyłacz „Odtwórz materiał wideo” (lista dozwolonych znaczników nie zawiera <video>); skrypt zamienia go na odtwarzacz */
.kr-post__video {
	position: relative;
	margin: 2.2em 0;
	aspect-ratio: 900 / 400;
	overflow: hidden;
	background: var(--kr-stone-deep);
}

.kr-post__video::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: var(--kr-image-outline);
	pointer-events: none;
}

.kr-post__body a.kr-post__video-link {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--kr-s3);
	padding: var(--kr-s4);
	text-align: center;
	text-decoration: none;
}

.kr-post__body a.kr-post__video-link[hidden] {
	display: none;
}

/* wąski ekran: proporcje 900:400 dają za mało miejsca na przycisk i dwuwierszowy napis (320 px ucinało „Plik MP4”), więc blok rośnie z treścią */
@media (max-width: 479px) {
	.kr-post__video {
		aspect-ratio: auto;
	}

	.kr-post__body a.kr-post__video-link {
		position: relative;
		inset: auto;
		padding-block: var(--kr-s6);
	}
}

.kr-post__video-play {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	background: var(--kr-ink);
	color: var(--kr-paper);
	transition: background-color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

.kr-post__video-play .kr-ms {
	font-size: 36px;
}

.kr-post__video-t {
	font-size: 0.78125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kr-post__video-s {
	font-size: 0.8125rem;
	color: var(--kr-muted);
}

.kr-post__video-link:active .kr-post__video-play {
	scale: 0.96;
}

@media (hover: hover) and (pointer: fine) {
	.kr-post__video-link:hover .kr-post__video-play {
		background: var(--kr-ink-soft);
	}
}

.kr-post__video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #000;
}

.kr-post__video.is-error .kr-post__video-s {
	color: var(--kr-danger);
}

/* ---------- wpis: stopka (udostępnianie, powrót) ---------- */

.kr-post__foot {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kr-s4) var(--kr-s5);
	max-width: 66ch;
	margin-top: var(--kr-s8);
	padding-top: var(--kr-s5);
}

.kr-post__foot::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--kr-line);
	transform-origin: left;
}

.kr-post__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kr-s3);
}

.kr-post__share-t {
	margin-right: var(--kr-s2);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kr-post__share .kr-btn {
	min-height: 44px;
}

/* ---------- wpis: powiązane produkty ---------- */

.kr-post__related {
	position: relative;
	margin-top: var(--kr-s9);
	padding-top: var(--kr-s7);
}

.kr-post__related::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--kr-line-strong);
	transform-origin: left;
}

.kr-post__related-t {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-wrap: balance;
}

.kr-bprods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kr-s6) var(--kr-s4);
	margin: var(--kr-s6) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.kr-bprods {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--kr-s6) var(--kr-s5);
	}
}

@media (min-width: 1100px) {
	.kr-bprods {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.kr-bprod {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kr-bprod__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: radial-gradient(circle at 50% 42%, #fafaf9 0%, var(--kr-stone-deep) 100%);
}

.kr-bprod__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	box-shadow: var(--kr-image-outline);
	pointer-events: none;
}

.kr-bprod__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity 320ms var(--kr-ease-out), scale 700ms var(--kr-ease-out);
}

.kr-bprod__img--alt {
	object-fit: cover;
	mix-blend-mode: normal;
	opacity: 0;
	scale: 1.04;
}

.kr-bprod__badge {
	position: absolute;
	top: var(--kr-s2);
	left: var(--kr-s2);
	z-index: 3;
}

.kr-bprod__brand {
	margin-top: 14px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kr-bprod__name {
	margin-top: 6px;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-wrap: balance;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kr-bprod__name a {
	text-decoration: none;
	outline: none;
}

.kr-bprod__name a:hover,
.kr-bprod__name a:focus {
	color: inherit;
}

.kr-bprod__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
}

.kr-bprod__name a:focus-visible::after {
	outline: 3px solid var(--kr-focus);
	outline-offset: 2px;
}

.kr-bprod .kr-price {
	margin-top: auto;
	padding-top: var(--kr-s3);
}

@media (hover: hover) and (pointer: fine) {
	.kr-bprod:has(.kr-bprod__img--alt):hover .kr-bprod__img--main {
		opacity: 0;
	}

	.kr-bprod:hover .kr-bprod__img--alt {
		opacity: 1;
		scale: 1;
	}

	.kr-bprod:not(:has(.kr-bprod__img--alt)):hover .kr-bprod__img--main {
		scale: 1.05;
	}

	.kr-bprod__name a:hover {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/* ---------- wpis: ładowanie (szkielet) ---------- */

.kr-pskel {
	display: grid;
	gap: var(--kr-s3);
	max-width: 66ch;
}

.kr-pskel__l {
	display: block;
	height: 16px;
	background: var(--kr-stone-deep);
}

.kr-pskel__l--1 {
	width: 96%;
}

.kr-pskel__l--2 {
	width: 88%;
}

.kr-pskel__l--3 {
	width: 92%;
}

.kr-pskel__l--4 {
	width: 54%;
}

.kr-pskel__l--gap {
	margin-top: var(--kr-s4);
}

.kr-post__hero.is-skel {
	background: var(--kr-stone-deep);
}

/* ---------- ruch (ten sam język co home, katalog, produkt i marka) ---------- */

@keyframes kr-bl-word {
	from {
		translate: 0 112%;
	}
}

@keyframes kr-bl-ghost {
	from {
		opacity: 0;
		translate: 5vw 0;
	}
}

@keyframes kr-bl-fade {
	from {
		opacity: 0;
	}
}

@keyframes kr-bl-line {
	from {
		scale: 0 1;
	}
}

@keyframes kr-bl-rise {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

@keyframes kr-bl-wipe {
	from {
		clip-path: inset(0 100% 0 0);
	}
}

@keyframes kr-bl-settle {
	from {
		scale: 1.1;
	}
}

@keyframes kr-bl-scroll-rise {
	from {
		translate: 0 32px;
	}
}

@keyframes kr-bl-scroll-line {
	from {
		scale: 0 1;
	}
}

@keyframes kr-bl-scroll-wipe {
	from {
		clip-path: inset(0 100% 0 0);
	}
}

@keyframes kr-bl-scroll-settle {
	from {
		scale: 1.08;
	}
}

@keyframes kr-bl-shimmer {
	to {
		background-position: 0 0;
	}
}

.kr-bskel__media,
.kr-bskel__l,
.kr-pskel__l {
	background: linear-gradient(100deg, var(--kr-stone-deep) 30%, var(--kr-stone) 50%, var(--kr-stone-deep) 70%) 100% 0 / 250% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.kr-bskel__media,
	.kr-bskel__l,
	.kr-pskel__l {
		animation: kr-bl-shimmer 1.5s linear infinite;
	}

	/* wejście listy: tytuł (maska słów), duch, nadtytuł i lead, linie wierszy, obrazy z kurtyną, tekst unosi się ze staggerem 55 ms */
	.kr-blog.is-intro .kr-wm__w,
	.kr-post.is-intro .kr-wm__w {
		animation: kr-bl-word 900ms var(--kr-ease-out) both;
		animation-delay: calc(80ms + var(--kr-w, 0) * 70ms);
	}

	.kr-blog.is-intro .kr-blog__head::after,
	.kr-post.is-intro .kr-post__head::after {
		animation: kr-bl-ghost 1400ms var(--kr-ease-out) 200ms both;
	}

	.kr-blog.is-intro .kr-crumbs,
	.kr-post.is-intro .kr-crumbs {
		animation: kr-bl-fade 600ms var(--kr-ease-out) both;
	}

	.kr-blog.is-intro .kr-blog__eyebrow,
	.kr-post.is-intro .kr-post__eyebrow {
		animation: kr-bl-rise 560ms var(--kr-ease-out) 120ms both;
	}

	.kr-blog.is-intro .kr-blog__meta,
	.kr-blog.is-intro .kr-blog__lead {
		animation: kr-bl-rise 560ms var(--kr-ease-out) 360ms both;
	}

	.kr-blog.is-intro .kr-bentry::before,
	.kr-bfeed.is-entering > .kr-bentry::before {
		animation: kr-bl-line 1000ms var(--kr-ease-io) both;
		animation-delay: calc(300ms + var(--kr-i, 0) * 55ms);
	}

	/* zmiana strony zdarza się często: linie rysują się krócej niż przy wejściu na stronę */
	.kr-bfeed.is-entering > .kr-bentry::before {
		animation-duration: 640ms;
		animation-delay: calc(120ms + var(--kr-i, 0) * 55ms);
	}

	.kr-blog.is-intro .kr-bentry__media,
	.kr-bfeed.is-entering > .kr-bentry .kr-bentry__media {
		animation: kr-bl-wipe 720ms var(--kr-ease-out) both;
		animation-delay: calc(200ms + var(--kr-i, 0) * 55ms);
	}

	.kr-blog.is-intro .kr-bentry__media img,
	.kr-bfeed.is-entering > .kr-bentry .kr-bentry__media img {
		animation: kr-bl-settle 900ms var(--kr-ease-out) both;
		animation-delay: calc(200ms + var(--kr-i, 0) * 55ms);
	}

	.kr-blog.is-intro .kr-bentry__body > *,
	.kr-bfeed.is-entering > .kr-bentry .kr-bentry__body > * {
		animation: kr-bl-rise 560ms var(--kr-ease-out) both;
		animation-delay: calc(340ms + var(--kr-i, 0) * 55ms);
	}

	/* wejście wpisu: obraz główny z kurtyną, data z linią */
	.kr-post.is-intro .kr-post__hero {
		animation: kr-bl-wipe 700ms var(--kr-ease-out) 240ms both;
	}

	.kr-post.is-intro .kr-post__hero img {
		animation: kr-bl-settle 1000ms var(--kr-ease-out) 240ms both;
	}

	.kr-post.is-intro .kr-pdate::before {
		animation: kr-bl-line 1000ms var(--kr-ease-io) 420ms both;
	}

	.kr-post.is-intro .kr-pdate > * {
		animation: kr-bl-rise 560ms var(--kr-ease-out) 480ms both;
	}

	.kr-post.is-intro .kr-post__body > :first-child {
		animation: kr-bl-rise 560ms var(--kr-ease-out) 520ms both;
	}

	/* wymiana strony listy: wyjście wierszy, potem wejście (jak przełączanie zakładek półki na home) */
	.kr-bfeed.is-leaving > .kr-bentry {
		opacity: 0;
		translate: 0 10px;
		transition: opacity 170ms var(--kr-ease-out) calc(var(--kr-i, 0) * 12ms), translate 220ms var(--kr-ease-out) calc(var(--kr-i, 0) * 12ms);
		pointer-events: none;
	}

	/* uwaga robocza i błąd pojawiają się łagodnie */
	.kr-cstate .kr-cempty {
		animation: kr-bl-rise 520ms var(--kr-ease-out) both;
	}

	/* przewijanie: tylko CSS, w @supports; bez wsparcia wszystko widoczne od razu */
	@supports (animation-timeline: view()) {
		.kr-bfeed:not(.is-entering):not(.is-leaving) > .kr-bentry:nth-child(n + 4) .kr-bentry__body {
			animation: kr-bl-scroll-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% entry 38%;
		}

		.kr-bfeed:not(.is-entering):not(.is-leaving) > .kr-bentry:nth-child(n + 4)::before {
			animation: kr-bl-scroll-line linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}

		/* obraz wiersza wchodzi kurtyną od lewej w rytm przewijania (hover obrazu zostaje bez zmian: kurtyna jest na ramce, nie na <img>) */
		.kr-bfeed:not(.is-entering):not(.is-leaving) > .kr-bentry:nth-child(n + 4) .kr-bentry__media {
			animation: kr-bl-scroll-wipe linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 50%;
		}

		/* maska obrazu wpisu (pomysł masked-reveal bez GSAP): kurtyna od lewej i osiadanie w rytm przewijania */
		.kr-post__body figure,
		.kr-post__body p:has(> img:only-child),
		.kr-post__video {
			animation: kr-bl-scroll-wipe linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		.kr-post__body figure img,
		.kr-post__body p:has(> img:only-child) img {
			animation: kr-bl-scroll-settle linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}

		.kr-post__body h2,
		.kr-post__foot,
		.kr-bprods > li {
			animation: kr-bl-scroll-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% entry 34%;
		}

		.kr-post__foot::before,
		.kr-post__related::before {
			animation: kr-bl-scroll-line linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 50%;
		}
	}
}

/* ruch zredukowany: bez przesunięć; wejście wierszy to krótki zanik, a stan końcowy ten sam */
@media (prefers-reduced-motion: reduce) {
	.kr-bfeed.is-entering > .kr-bentry .kr-bentry__body > *,
	.kr-bfeed.is-entering > .kr-bentry .kr-bentry__media {
		animation: kr-bl-fade 160ms linear both;
	}

	.kr-bentry::after,
	.kr-bentry__more,
	.kr-bentry__media img {
		transition: none;
	}

	.kr-bskel__media,
	.kr-bskel__l,
	.kr-pskel__l {
		background: var(--kr-stone-deep);
	}
}