/*
 * Pojedynczy wpis bloga (single-post.php): nagłówek (okruszki, tytuł, zdjęcie), treść i karuzela produktów.
 * Szerokość nagłówka i treści (domyślnie 1366 px) oraz liczba widocznych kart ustawia Ustawienia motywu → Blog (zmienne --post-* na .post-single).
 */

.icon--chevron-right { width: 8px; height: 12px; -webkit-mask-image: url("../img/chevron-right.svg"); mask-image: url("../img/chevron-right.svg"); }

.post-single {
	--post-cards: var(--post-products-sm, 1.8);
	--post-gap: 0.375rem;
	padding-block: 1.5rem 4rem;
}

/* Nagłówek: mobile – tytuł nad zdjęciem; desktop – tytuł po lewej, zdjęcie po prawej. */
.post-single__header {
	display: grid;
	gap: 1.5rem;
	max-width: var(--post-content-max, 1366px);
	margin: 0 auto 2.5rem;
}

.post-single__breadcrumb { margin-block-end: 1rem; }

.post-single__breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-muted);
	font: 300 var(--fs-sm) / 1.5 var(--font-body);
}

.post-single__breadcrumb li { display: flex; align-items: center; }

/* Separator: strzałka (ikona jak w całym motywie), kolor mocniejszy niż tekst okruszków. */
.post-single__breadcrumb li + li::before {
	content: "";
	flex: none;
	width: 8px;
	height: 12px;
	margin-inline-end: 0.75rem;
	background: var(--color-text-strong);
	-webkit-mask: url("../img/chevron-right.svg") center / contain no-repeat;
	mask: url("../img/chevron-right.svg") center / contain no-repeat;
}
.post-single__breadcrumb a { color: inherit; text-underline-offset: 0.2em; }
.post-single__breadcrumb a:hover { color: var(--color-text-strong); }

.post-single__title {
	margin: 0;
	color: var(--color-text-strong);
	font: 500 var(--fs-h1) / 1.1 var(--font-heading);
	text-align: left;
}

.post-single__media { margin: 0; }

.post-single__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Treść wpisu (edytor blokowy / klasyczny). */
.post-single__content {
	max-width: var(--post-content-max, 1366px);
	margin-inline: auto;
	color: var(--color-text);
	font: 300 var(--fs-base) / 1.75 var(--font-body);
	letter-spacing: 0.02em;
}

.post-single__content > :first-child { margin-top: 0; }
.post-single__content > :last-child { margin-bottom: 0; }
.post-single__content :is(p, ul, ol, figure) { margin: 0 0 1rem; }
.post-single__content :is(ul, ol) { padding-left: 1.5rem; }
.post-single__content :is(h2, h3, h4) {
	margin: 2rem 0 0.75rem;
	color: var(--color-text-strong);
}
.post-single__content :is(strong, b) { font-weight: 500; }
.post-single__content a { text-underline-offset: 0.2em; }
.post-single__content img { max-width: 100%; height: auto; }

/* Karuzela produktów: przewijanie z przyciąganiem, kolejna karta wystaje na mobile. */
.post-products { margin-block-start: 4rem; }

.post-products__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1.5rem;
}

/* Linia pod nagłówkiem wychodzi poza padding strony do lewej krawędzi ekranu. */
.post-products__title {
	margin: 0 0 0 calc(var(--page-pad) * -1);
	padding: 0 2rem 0.5rem var(--page-pad);
	border-bottom: 1px solid var(--color-text-strong);
	color: var(--color-text-strong);
	font: 400 var(--fs-title) / 1.2 var(--font-heading);
}

.post-products__nav { display: flex; gap: 0.25rem; }

.post-products__arrow {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid var(--color-text-strong);
	background: var(--color-background);
	color: var(--color-text-strong);
	cursor: pointer;
	transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

/* Cienka strzałka (kreska 1,1 px) w większym rozmiarze niż ikona chevron z nagłówka; "wstecz" to lustro "dalej". */
.post-products__arrow .icon {
	width: 0.875rem;
	height: 1.625rem;
	-webkit-mask-image: url("../img/chevron-thin.svg");
	mask-image: url("../img/chevron-thin.svg");
}

.post-products__arrow--prev .icon { transform: scaleX(-1); }

.post-products__arrow:hover:not(:disabled),
.post-products__arrow:focus-visible {
	background: var(--color-text-strong);
	color: var(--color-background);
}

.post-products__arrow:focus-visible { outline: 2px solid var(--color-text-strong); outline-offset: 2px; }

.post-products__arrow:disabled {
	border-color: var(--color-border);
	color: var(--color-border);
	cursor: default;
}

.post-products__track {
	display: flex;
	gap: var(--post-gap);
	margin: 0 calc(var(--page-pad) * -1);
	padding: 0 var(--page-pad);
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--page-pad);
	scrollbar-width: none;
}

.post-products__track::-webkit-scrollbar { display: none; }
.post-products__track:focus-visible { outline: 2px solid var(--color-text-strong); outline-offset: 2px; }

.post-products__item {
	flex: none;
	width: calc((100% - 2 * var(--page-pad) - (var(--post-cards) - 1) * var(--post-gap)) / var(--post-cards));
	scroll-snap-align: start;
}

/* Karty w karuzeli: mniejsze zdjęcie i opis (płynnie), żeby zmieściło się więcej produktów. */
.post-products__item .product-card__image { padding: 0.5rem; }
.post-products__item .product-card__media { margin-bottom: 0.5rem; }
.post-products__item .product-card__name { font-size: clamp(0.6875rem, 0.64rem + 0.15vw, 0.8125rem); }
.post-products__item .product-card__price { font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem); }

@media (min-width: 48rem) {
	.post-single { --post-cards: var(--post-products-md, 4); }
}

@media (min-width: 64rem) {
	.post-single { --post-cards: var(--post-products-lg, 5); padding-block: var(--page-top) 5rem; }

	.post-single__header {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 3rem;
		margin-block-end: 4rem;
	}

	.post-products { margin-block-start: 5rem; }
}

@media (prefers-reduced-motion: no-preference) {
	.post-products__track { scroll-behavior: smooth; }
}