/* ==========================================================================
   TopShop — Блог: список статей і сторінка статті
   ========================================================================== */

.ts-blog__head {
	margin-bottom: var(--ts-space-6);
}

/*
 * Відступ згори такий самий, як у заголовка статті: хлібні крихти
 * мають власний padding, і заголовок має від них відійти.
 */
.ts-blog__title {
	margin: var(--ts-space-3) 0 0;
	font-size: var(--ts-text-3xl);
	line-height: var(--ts-leading-snug);
}

/*
 * Рубрика й архів за датою використовують ту саму шапку, тож
 * відступ працює і там.
 */
.ts-blog__head:first-child {
	margin-top: var(--ts-space-4);
}

.ts-blog__lead {
	margin: var(--ts-space-2) 0 0;
	font-size: var(--ts-text-md);
	color: var(--ts-color-muted);
}

/*
 * Сітка статей. Перша картка займає весь ряд і кладе картинку поруч
 * із текстом — так видно, з чого почати, а список не читається як
 * рівний килим з однакових прямокутників.
 */
.ts-blog {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ts-space-5);
	margin-bottom: var(--ts-space-8);
}

@media (min-width: 700px) {
	.ts-blog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.ts-blog {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ts-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	transition: border-color var(--ts-duration-fast) var(--ts-ease),
		box-shadow var(--ts-duration-fast) var(--ts-ease);
}

.ts-post-card:hover {
	border-color: var(--ts-color-border-strong);
	box-shadow: var(--ts-shadow-sm);
}

@media (min-width: 700px) {
	.ts-post-card--lead {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.ts-post-card--lead .ts-post-card__media {
		flex: 0 0 46%;
		aspect-ratio: auto;
	}

	.ts-post-card--lead .ts-post-card__body {
		justify-content: center;
		padding: var(--ts-space-6);
	}

	.ts-post-card--lead .ts-post-card__title {
		font-size: var(--ts-text-2xl);
	}
}

.ts-post-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ts-color-surface-sunken);
}

.ts-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ts-duration-slow) var(--ts-ease);
}

.ts-post-card:hover .ts-post-card__media img {
	transform: scale(1.03);
}

.ts-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
	padding: var(--ts-space-4);
}

/* Рубрика — дрібна плашка, щоб не сперечалась із заголовком. */
.ts-post-card__cat {
	align-self: flex-start;
	padding: 2px var(--ts-space-2);
	font-size: var(--ts-text-2xs);
	font-weight: var(--ts-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ts-color-primary);
	background: var(--ts-color-primary-soft);
	border-radius: var(--ts-radius-sm);
}

.ts-post-card__cat:hover {
	text-decoration: none;
	color: var(--ts-color-primary-hover);
}

.ts-post-card__title {
	margin: 0;
	font-size: var(--ts-text-lg);
	line-height: var(--ts-leading-snug);
}

.ts-post-card__title a {
	color: var(--ts-color-text-strong);
}

.ts-post-card__title a:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-post-card__excerpt {
	margin: 0;
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-relaxed);
	color: var(--ts-color-muted);
}

.ts-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-2);
	margin-top: auto;
	padding-top: var(--ts-space-2);
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
}

.ts-post-card__dot {
	color: var(--ts-color-border-strong);
}

/* --- Сторінка статті ----------------------------------------------------- */

.ts-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ts-space-8);
	padding-bottom: var(--ts-space-8);
}

@media (min-width: 1000px) {
	.ts-article__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--ts-space-10);
	}
}

.ts-article__head {
	margin-bottom: var(--ts-space-5);
}

.ts-article__title {
	margin: var(--ts-space-3) 0 0;
	font-size: var(--ts-text-3xl);
	line-height: var(--ts-leading-snug);
}

.ts-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-2);
	margin-top: var(--ts-space-3);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-article__cover {
	margin: 0 0 var(--ts-space-6);
	overflow: hidden;
	border-radius: var(--ts-radius-lg);
}

.ts-article__cover img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Довжина рядка в статті — головне для читання. Обмежуємо саме текст,
 * а не колонку: обкладинка й картки товарів лишаються на всю ширину.
 */
.ts-article__body {
	max-width: 68ch;
}

.ts-article__body img {
	height: auto;
	border-radius: var(--ts-radius-md);
}

.ts-article__products {
	margin-top: var(--ts-space-10);
	padding-top: var(--ts-space-6);
	border-top: 1px solid var(--ts-color-border);
}

.ts-article__products-title {
	margin: 0 0 var(--ts-space-4);
	font-size: var(--ts-text-xl);
}

/* --- Бічна колонка ------------------------------------------------------- */

.ts-article__aside {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-5);
}

@media (min-width: 1000px) {
	/*
	 * Колонка їде за текстом: у довгій статті інакше половину екрану
	 * займає порожнеча там, де блок уже закінчився.
	 */
	.ts-article__aside {
		position: sticky;
		top: var(--ts-space-5);
		align-self: start;
		max-height: calc(100vh - var(--ts-space-10));
		overflow-y: auto;
	}
}

.ts-aside__block {
	padding: var(--ts-space-5);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-aside__title {
	margin: 0 0 var(--ts-space-4);
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
}

.ts-aside__posts {
	display: grid;
	gap: var(--ts-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-aside__post {
	display: flex;
	gap: var(--ts-space-3);
}

.ts-aside__post-media {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--ts-radius-md);
	background: var(--ts-color-surface-sunken);
}

.ts-aside__post-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ts-aside__post-title {
	display: block;
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	line-height: 1.35;
	color: var(--ts-color-text-strong);
}

.ts-aside__post-title:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-aside__post-date {
	display: block;
	margin-top: 2px;
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
}

.ts-aside__links {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-aside__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-3);
	min-height: 40px;
	padding: var(--ts-space-2) 0;
	font-size: var(--ts-text-base);
	color: var(--ts-color-muted);
}

.ts-aside__links a:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-aside__links .ts-icon {
	flex: 0 0 auto;
	color: var(--ts-color-faint);
}

.ts-aside__cta {
	text-align: center;
	background: var(--ts-color-surface-tint);
}

.ts-aside__cta-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--ts-space-3);
	color: var(--ts-color-primary);
	background: var(--ts-color-primary-soft);
	border-radius: var(--ts-radius-full);
}

.ts-aside__cta-title {
	margin: 0;
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-aside__cta-text {
	margin: var(--ts-space-1) 0 var(--ts-space-4);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/* --- Сусідні статті ------------------------------------------------------ */

.ts-article__nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-10);
}

@media (min-width: 700px) {
	.ts-article__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ts-article__nav-link {
	display: block;
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-article__nav-link:hover {
	border-color: var(--ts-color-primary);
	text-decoration: none;
}

/* Наступна стаття — праворуч: напрямок читання підказує, куди ведеш. */
.ts-article__nav-link--next {
	text-align: right;
	grid-column: -2;
}

.ts-article__nav-label {
	display: block;
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
}

.ts-article__nav-title {
	display: block;
	margin-top: 2px;
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text-strong);
}

/* --- Рубрики: перемикач і список у колонці ------------------------------ */

/*
 * Лічильник поруч із назвою: показує, чи є сенс заходити в рубрику,
 * і робить список схожим на фільтри каталогу — той самий прийом.
 */
.ts-aside__count {
	flex: 0 0 auto;
	padding: 1px var(--ts-space-2);
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
	background: var(--ts-color-surface-sunken);
	border-radius: 999px;
}

.ts-aside__cats a.is-active {
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text-strong);
}

.ts-aside__cats a.is-active .ts-aside__count {
	color: var(--ts-color-primary);
	background: rgba(11, 99, 246, 0.1);
}

/*
 * Перемикач рубрик над списком статей. Горизонтальна стрічка, яка на
 * вузькому екрані гортається вбік — переносити вкладки в кілька
 * рядів гірше: висота стрибає й список статей іде то вище, то нижче.
 */
.ts-blog__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-2);
	margin-bottom: var(--ts-space-6);
}

.ts-blog__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	/* 40px — палець потрапляє без прицілювання. */
	min-height: 40px;
	padding: 0 var(--ts-space-4);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: 999px;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ts-blog__tab:hover {
	color: var(--ts-color-primary);
	border-color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-blog__tab.is-active {
	color: #fff;
	background: var(--ts-color-primary);
	border-color: var(--ts-color-primary);
}

.ts-blog__tab-count {
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
}

.ts-blog__tab.is-active .ts-blog__tab-count {
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 639px) {
	/*
	 * Телефон: стрічка з горизонтальною прокруткою замість переносу.
	 * Негативні поля дають їй вийти під край екрана, щоб було видно,
	 * що вміст гортається далі.
	 */
	.ts-blog__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(var(--ts-space-4) * -1);
		padding-inline: var(--ts-space-4);
		scrollbar-width: none;
	}

	.ts-blog__tabs::-webkit-scrollbar {
		display: none;
	}

	.ts-blog__tab {
		flex: 0 0 auto;
	}
}