/*
 * TheSybin — blog: strona wpisów, archiwa (kategoria, tag), wyniki wyszukiwania, wpis z komentarzami.
 * Zakres: body.ts-page-blog (klucz „blog” w inc/assets.php). Wartości: design-ref/spec/blog.md S1–S10.
 * Szablony: templates/{home,archive,search,single}.html; sekcje: patterns/blog-*.php, patterns/comments.php.
 *
 * Komponenty (wygląd z components.css — tu tylko położenie i warianty Sellsmart):
 * karta wpisu C6(c), link ze strzałką C4, paginacja C19, treść .ts-prose (interlinia w em), przycisk C3 (.ts-btn--plain), baner (layout.css).
 * Geometria Sellsmart: kontener 1300 px z odstępem 15 px (treść 1270 / 738 / 360), treść wpisu 1100 px.
 * Progi: tablet ≤1024 (Sellsmart ≤991 — spec. „Otwarte kwestie” 1), telefon ≤767.
 */

/* ==========================================================================
   S2–S4. Archiwum: siatka kart, stronicowanie, brak wyników
   ========================================================================== */

.ts-page-blog .ts-blog-archive {
	padding: var(--ts-section-y) 15px;
}

.ts-page-blog .ts-blog-archive__query {
	max-width: 1270px;
	margin-inline: auto;
}

.ts-page-blog .ts-blog-archive__query > * {
	margin-block: 0;
}

/* Wiersze kart: wysokość najwyższej karty w rzędzie, odstęp 30 px; pod ostatnim rzędem margines karty 30 px (Sellsmart .post-item). */
.ts-page-blog .ts-blog-archive .ts-post-grid.ts-post-grid {
	margin-bottom: 30px;
}

.ts-page-blog .ts-blog-archive .ts-post-card {
	/* Sellsmart: tytuł karty 600 (kit h2) */
	--ts-post-title-weight: 600;
}

.ts-page-blog .ts-blog-archive .ts-post-card__date {
	/* Data 16 px z interlinią „normal” jak .post-meta p (wysokość wiersza stopki wyznacza kółko 24 px) */
	line-height: normal;
}

.ts-page-blog .ts-blog-archive__query > .wp-block-query-pagination {
	/* margines ostatniego rzędu kart (30) + .nav-links margin-top 30 (≤1024: 10) — padding, bo marginesy rodzeństwa by się złożyły */
	padding-top: 30px;
}

.ts-page-blog .ts-blog-archive__empty {
	margin: 0 0 1.57em;
}

@media (max-width: 1024px) {
	.ts-page-blog .ts-blog-archive__query > .wp-block-query-pagination {
		padding-top: 10px;
	}
}

/* ==========================================================================
   S6. Baner wpisu: meta (data, kategoria) zamiast okruszków
   ========================================================================== */

.ts-page-blog .ts-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 19px;
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 18px;
	line-height: 27px;
}

.ts-page-blog .ts-single-meta > * {
	margin: 0;
}

.ts-page-blog .ts-single-meta :is(.ts-single-meta__date, .ts-single-meta__terms) {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.ts-page-blog .ts-single-meta :is(.ts-single-meta__date, .ts-single-meta__terms)::before {
	content: "";
	flex: none;
	width: 16px;
	height: 18px;
	margin-right: 8px;
	background-color: currentColor;
	-webkit-mask: url("../../icons/calendar.svg") center / contain no-repeat;
	mask: url("../../icons/calendar.svg") center / contain no-repeat;
}

.ts-page-blog .ts-single-meta .ts-single-meta__terms::before {
	margin-right: 10px;
	-webkit-mask-image: url("../../icons/tag.svg");
	mask-image: url("../../icons/tag.svg");
}

/* Prefiks „Kategoria:” tylko dla czytników ekranu (wzorzec: sama ikona) */
.ts-page-blog .ts-single-meta__terms .wp-block-post-terms__prefix {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ts-page-blog .ts-single-meta__terms a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.ts-page-blog .ts-single-meta__terms a:is(:hover, :focus-visible) {
	text-decoration-line: underline;
}

@media (max-width: 767px) {
	.ts-page-blog .ts-single-meta {
		column-gap: 18px;
		font-size: 16px;
		line-height: 24px;
	}

	.ts-page-blog .ts-single-meta :is(.ts-single-meta__date, .ts-single-meta__terms)::before {
		width: 14px;
		height: 16px;
	}
}

/* ==========================================================================
   S7–S8. Wpis: obraz wyróżniający (1270 px) i treść (1100 px)
   ========================================================================== */

.ts-page-blog .ts-single {
	padding: var(--ts-section-y) 15px;
}

.ts-page-blog .ts-single > * {
	margin-block: 0;
}

.ts-page-blog .ts-single .ts-single__image {
	max-width: 1270px;
	margin: 0 auto 30px;
	border-radius: var(--ts-radius-card);
}

.ts-page-blog .ts-single .ts-single__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	border-radius: var(--ts-radius-card);
	object-fit: cover;
}

.ts-page-blog .ts-single__body {
	max-width: 1100px;
	margin-inline: auto;
}

.ts-page-blog .ts-single__body > * {
	margin-block: 0;
}

/* .post-entry: linia pod treścią wpisu */
.ts-page-blog .ts-single__body > .ts-single__content {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--ts-divider);
}

.ts-page-blog .ts-single__content::after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 1024px) {
	.ts-page-blog .ts-single .ts-single__image {
		margin-bottom: 20px;
	}
}

@media (max-width: 767px) {
	.ts-page-blog .ts-single .ts-single__image img {
		aspect-ratio: 1 / 0.7;
	}
}

/* ==========================================================================
   S9. Tagi i udostępnianie
   ========================================================================== */

.ts-page-blog .ts-single__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 30px;
}

.ts-page-blog .ts-single__footer > * {
	margin: 0;
}

.ts-page-blog .ts-tag-list {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 15px;
}

.ts-page-blog .ts-tag-list .wp-block-post-terms__prefix {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	line-height: 27.2px;
}

.ts-page-blog .ts-tag-list .wp-block-post-terms__separator {
	display: none;
}

/* Pigułka tagu: tekst #102B28 na złocie (D1-A); hover/fokus: #274A46 + biały tekst (blog.md S9 WCAG 1) */
.ts-page-blog .ts-tag-list a {
	display: inline-block;
	padding: 12px 20px;
	border-radius: var(--ts-radius-pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-transform: capitalize;
	transition:
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

.ts-page-blog :is(.ts-tag-list a, .ts-share__link):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.ts-page-blog .ts-share {
	margin-left: auto;
}

.ts-page-blog .ts-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-page-blog .ts-share__item {
	margin: 0;
}

/* Ikona funkcjonalna na złocie: #102B28 (D1-A) */
.ts-page-blog .ts-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	transition:
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

.ts-page-blog .ts-share__icon {
	width: 16px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("../../icons/whatsapp.svg") center / contain no-repeat;
	mask: url("../../icons/whatsapp.svg") center / contain no-repeat;
}

.ts-page-blog .ts-share__link--facebook .ts-share__icon {
	width: 11px;
	-webkit-mask-image: url("../../icons/facebook.svg");
	mask-image: url("../../icons/facebook.svg");
}

.ts-page-blog .ts-share__link--linkedin .ts-share__icon {
	-webkit-mask-image: url("../../icons/linkedin.svg");
	mask-image: url("../../icons/linkedin.svg");
}

/* Tryb wysokiego kontrastu (forced colors): tło maski ikony zamieniane na kolor tła — ikona i kształt przycisku znikały (link z samą ikoną) */
@media (forced-colors: active) {
	.ts-page-blog :is(.ts-share__link, .ts-tag-list a) {
		border: 1px solid LinkText;
	}

	.ts-page-blog .ts-share__icon {
		forced-color-adjust: none;
		background-color: LinkText;
	}
}

@media (max-width: 1024px) {
	.ts-page-blog .ts-single__footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.ts-page-blog .ts-tag-list a {
		padding-inline: 15px;
	}

	/* Sellsmart: pusty blok tagów zostawia margines 20 px nad przyciskami udostępniania */
	.ts-page-blog .ts-single__footer > .ts-share {
		margin-top: 20px;
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	.ts-page-blog .ts-tag-list .wp-block-post-terms__prefix {
		font-size: 18px;
	}
}

/* ==========================================================================
   S10. Komentarze: formularz (i lista — dziś brak komentarzy, wygląd z CSS Sellsmart)
   ========================================================================== */

.ts-page-blog .ts-single__body > .ts-comments {
	margin-top: 80px;
}

.ts-page-blog .ts-comments > * {
	margin-block: 0;
}

.ts-page-blog .ts-comments :is(.comment-reply-title, .ts-comments__title) {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
}

.ts-page-blog .ts-comments .ts-comments__title {
	margin-bottom: 30px;
}

.ts-page-blog .ts-comments .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
	margin: 0 0 10px;
}

.ts-page-blog .ts-comments .comment-reply-title small {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

/* „Anuluj pisanie odpowiedzi” i „Odpowiedz”: pigułka, tekst #102B28 na złocie (D1-A), hover #274A46 + biały */
.ts-page-blog .ts-comments :is(#cancel-comment-reply-link, .ts-comment__reply a) {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--ts-radius-pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	transition:
		background-color 0.4s ease-in-out,
		color 0.4s ease-in-out;
}

.ts-page-blog .ts-comments :is(#cancel-comment-reply-link, .ts-comment__reply a):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.ts-page-blog .ts-comments .comment-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.ts-page-blog .ts-comments .comment-form > * {
	width: 100%;
	margin: 0;
}

.ts-page-blog .ts-comments .comment-form > :is(.comment-notes, .logged-in-as) {
	margin-bottom: 1.57em;
}

.ts-page-blog .ts-comments .comment-form label {
	display: block;
	margin-bottom: 4px;
}

/* Pola: obrys #898C8C (D1 „Obramowanie pól formularzy”), cień i promień jak Sellsmart */
.ts-page-blog .ts-comments .comment-form :is(textarea, input[type="text"], input[type="email"], input[type="url"]) {
	display: block;
	width: 100%;
	margin: 0;
	padding: 17px 20px;
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: 12px;
	background-color: transparent;
	box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.05);
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.5;
}

.ts-page-blog .ts-comments .comment-form textarea {
	resize: vertical;
}

/* textarea była inline-block: pod polem 6,88 px luki wiersza (textarea → etykieta 32 px) */
.ts-page-blog .ts-comments .comment-form > .comment-form-comment {
	margin-bottom: 32px;
}

.ts-page-blog .ts-comments .comment-form > :is(.comment-form-author, .comment-form-email, .comment-form-url) {
	width: calc(33.33% - 20px);
	margin-bottom: 1.57em;
}

.ts-page-blog .ts-comments .comment-form > :is(.comment-form-author, .comment-form-email) {
	margin-right: 30px;
}

.ts-page-blog .ts-comments .comment-form > .comment-form-cookies-consent {
	position: relative;
	margin-bottom: 30px;
	padding-left: 20px;
}

/* #id: rdzeń (post-comments-form) dodaje polu margin-top .35em selektorem z identyfikatorem */
.ts-page-blog .ts-comments .comment-form-cookies-consent #wp-comment-cookies-consent {
	position: absolute;
	top: 6px;
	left: 0;
	width: 13px;
	height: 13px;
	margin: 0;
}

.ts-page-blog .ts-comments .comment-form-cookies-consent label {
	margin: 0;
}

.ts-page-blog .ts-comments .form-submit .ts-btn {
	min-height: 0;
	margin-right: 0;
	padding: 17px 30px;
}

/* Lista komentarzy */
.ts-page-blog .ts-comments .wp-block-comment-template {
	margin: 0;
}

.ts-page-blog .ts-comments .ts-comment {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--ts-divider);
}

.ts-page-blog .ts-comments .ts-comment > * {
	margin-block: 0;
}

.ts-page-blog .ts-comments .ts-comment__meta {
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.ts-page-blog .ts-comments .ts-comment__author {
	align-items: center;
	gap: 10px;
}

.ts-page-blog .ts-comments .ts-comment__avatar img {
	display: block;
	max-width: 42px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary);
}

.ts-page-blog .ts-comments .ts-comment__name {
	color: var(--wp--preset--color--primary);
	font-weight: 400;
}

.ts-page-blog .ts-comments :is(.ts-comment__name, .ts-comment__date, .ts-comment__edit) a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.ts-page-blog .ts-comments .ts-comment__info {
	gap: 10px;
}

/* Złoty tekst na jasnym tle → #946207 (D1-C) */
.ts-page-blog .ts-comments .ts-comment__edit a,
.ts-page-blog .ts-comments .ts-comment__date a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-text);
}

.ts-page-blog .ts-comments .ts-comment__content a {
	color: var(--wp--preset--color--accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ts-page-blog .ts-comments .ts-comment__reply {
	margin-top: 10px;
}

.ts-page-blog .ts-comments .wp-block-comments-pagination {
	margin-top: 30px;
}

.ts-page-blog .ts-comments .wp-block-comment-template ~ .comment-respond,
.ts-page-blog .ts-comments .wp-block-comments-pagination ~ .comment-respond {
	margin-top: 60px;
}

@media (max-width: 1024px) {
	.ts-page-blog .ts-single__body > .ts-comments {
		margin-top: 40px;
	}

	.ts-page-blog .ts-comments :is(.comment-reply-title, .ts-comments__title) {
		font-size: 24px;
	}

	.ts-page-blog .ts-comments .comment-reply-title small {
		width: 100%;
	}

	.ts-page-blog .ts-comments .comment-form :is(textarea, input[type="text"], input[type="email"], input[type="url"]) {
		padding: 12px 15px;
	}

	.ts-page-blog .ts-comments .form-submit .ts-btn {
		padding: 16px 20px;
	}

	.ts-page-blog .ts-comments .wp-block-comment-template ~ .comment-respond,
	.ts-page-blog .ts-comments .wp-block-comments-pagination ~ .comment-respond {
		margin-top: 40px;
	}

	.ts-page-blog .ts-comments .wp-block-comment-template .children {
		padding-left: 20px;
	}
}

@media (max-width: 767px) {
	.ts-page-blog .ts-comments .comment-form > :is(.comment-form-author, .comment-form-email, .comment-form-url) {
		width: 100%;
		margin-right: 0;
	}

	.ts-page-blog .ts-comments .ts-comment__meta {
		flex-direction: column;
		align-items: flex-start;
	}
}