/* ================================================================
 * KK Blog — front-end styling
 * Tokens sourced from kk-design-tokens. NO new CSS variables defined.
 * Scoped under blog surfaces to avoid leaking into other pages.
 * ================================================================ */

/* --------------------------------------------------------------
 * Shared wrapper helpers — blog index + archive use the same grid.
 * -------------------------------------------------------------- */
.kk-blog-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: var(--s-5);
	padding-block: var(--s-7);
	box-sizing: border-box;
	width: 100%;
}
.kk-blog-theme, .kk-blog-theme * { min-width: 0; box-sizing: border-box; }
.kk-blog-theme img, .kk-blog-theme svg { max-width: 100%; height: auto; }
.kk-blog-theme { overflow-x: clip; }
@media (min-width: 768px)  { .kk-blog-wrap { padding-inline: var(--s-7); } }
@media (min-width: 1024px) { .kk-blog-wrap { padding-inline: var(--s-8); } }

/* --------------------------------------------------------------
 * Index hero — eyebrow / H1 / dek
 * -------------------------------------------------------------- */
.kk-blog-hero {
	margin-block-end: var(--s-7);
}
.kk-blog-hero__eyebrow {
	display: inline-block;
	color: var(--accent);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-block-end: var(--s-2);
}
.kk-blog-hero__title {
	color: var(--ink);
	font-size: clamp(32px, 6vw, 56px);
	font-weight: var(--fw-h2);
	line-height: 1.3;
	margin: 0 0 var(--s-3);
	word-break: break-word;
	overflow-wrap: anywhere;
}
.kk-blog-hero__dek {
	color: var(--ink-muted);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	max-width: 64ch;
	margin: 0;
}

/* --------------------------------------------------------------
 * Chip row (category filter)
 * -------------------------------------------------------------- */
.kk-blog-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-block-end: var(--s-6);
}
.kk-blog-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.kk-blog-chip:hover {
	background: var(--primary-soft);
	color: var(--primary);
	border-color: var(--primary-soft);
}
.kk-blog-chip[aria-current="page"],
.kk-blog-chip.is-active {
	background: var(--primary);
	color: var(--surface);
	border-color: var(--primary);
}

/* --------------------------------------------------------------
 * Featured + latest layout
 * -------------------------------------------------------------- */
.kk-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
@media (min-width: 640px) {
	.kk-blog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}
@media (min-width: 1024px) {
	.kk-blog-grid--index {
		grid-template-columns: 2fr 1fr;
		gap: var(--s-7);
	}
	.kk-blog-grid--archive { grid-template-columns: repeat(3, 1fr); }
}

.kk-blog-featured { display: flex; flex-direction: column; gap: var(--s-5); }
.kk-blog-latest   { display: flex; flex-direction: column; gap: var(--s-4); }

/* --------------------------------------------------------------
 * Article card
 * -------------------------------------------------------------- */
.kk-c-article-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--e1);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.kk-c-article-card.is-revealed { /* no-op, kept for JS compat */ }
.kk-c-article-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--e2);
}

.kk-c-article-card__cover {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--sand);
}
.kk-c-article-card__cover img,
.kk-c-article-card__cover > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--d-3) var(--ease);
}
.kk-c-article-card:hover .kk-c-article-card__cover img { transform: scale(1.02); }

.kk-c-article-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-4) var(--s-5) var(--s-5);
	flex: 1 1 auto;
}

.kk-c-article-card__meta {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-small);
	color: var(--ink-muted);
}
.kk-c-article-card__cat {
	display: inline-flex;
	padding: 2px var(--s-2);
	background: var(--primary-soft);
	color: var(--primary);
	border-radius: var(--r-pill);
	font-weight: var(--fw-medium);
	text-decoration: none;
}
.kk-c-article-card__read {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
}
.kk-c-article-card__read::before {
	content: "";
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--line-strong);
}

.kk-c-article-card__title {
	font-size: var(--fs-h5);
	font-weight: var(--fw-h5);
	line-height: var(--lh-heading);
	color: var(--ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kk-c-article-card__dek {
	color: var(--ink-muted);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kk-c-article-card__footer {
	margin-top: auto;
	padding-top: var(--s-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	border-top: 1px solid var(--line);
	font-size: var(--fs-small);
	color: var(--ink-muted);
}
.kk-c-article-card__author { font-weight: var(--fw-medium); color: var(--ink); }

/* Featured (first card) — a bit grander */
.kk-blog-featured .kk-c-article-card--featured .kk-c-article-card__title {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.4;
	-webkit-line-clamp: 4;
}

/* Latest stack card — compact horizontal layout on wide screens */
@media (min-width: 1024px) {
	.kk-blog-latest .kk-c-article-card { flex-direction: row; }
	.kk-blog-latest .kk-c-article-card__cover {
		flex: 0 0 40%;
		aspect-ratio: 1 / 1;
	}
	.kk-blog-latest .kk-c-article-card__body { padding: var(--s-4); }
	.kk-blog-latest .kk-c-article-card__dek { display: none; }
}

/* --------------------------------------------------------------
 * Pagination — pill style
 * -------------------------------------------------------------- */
.kk-blog-pagination {
	display: flex;
	justify-content: center;
	gap: var(--s-2);
	margin-block-start: var(--s-7);
}
.kk-blog-pagination a,
.kk-blog-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--s-3);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.kk-blog-pagination a:hover {
	background: var(--primary-soft);
	color: var(--primary);
	border-color: var(--primary-soft);
}
.kk-blog-pagination .current {
	background: var(--primary);
	color: var(--surface);
	border-color: var(--primary);
}

/* Let the theme mark its native paginator — we softly style it too */
body.blog .pagination,
body.blog .page-numbers,
body.category .pagination,
body.tag .pagination {
	font-family: inherit;
}

/* --------------------------------------------------------------
 * Empty state
 * -------------------------------------------------------------- */
.kk-blog-empty {
	text-align: center;
	padding: var(--s-8) var(--s-5);
	background: var(--surface-alt);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-card);
	color: var(--ink-muted);
	font-size: var(--fs-body-lg);
}

/* --------------------------------------------------------------
 * Single post
 * -------------------------------------------------------------- */
.kk-blog-article,
body.single-post .entry-content,
body.single-post article .entry-content {
	color: var(--ink);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
}
body.single-post .entry-content,
body.single-post article .entry-content,
.kk-blog-article .entry-content {
	max-width: 72ch;
}

/* --------------------------------------------------------------
 * Single post — main + sidebar layout
 * -------------------------------------------------------------- */
.kk-blog-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);
	margin-block: var(--s-6);
}
.kk-blog-article__main { min-width: 0; }

@media (min-width: 1024px) {
	.kk-blog-article__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--s-7);
		align-items: start;
	}
}

/* Sidebar */
.kk-blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	min-width: 0;
}
@media (min-width: 1024px) {
	.kk-blog-sidebar { position: sticky; top: var(--s-6); }
}
.kk-blog-sidebar__block {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--r-card);
	padding: var(--s-5);
}
.kk-blog-sidebar__title {
	font-size: var(--fs-h4, 17px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 var(--s-4);
	padding-inline-start: 10px;
	border-inline-start: 3px solid var(--accent);
	line-height: 1.4;
}
.kk-blog-sidebar__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.kk-blog-sidebar__item { margin: 0; }
.kk-blog-sidebar__link {
	display: flex;
	gap: var(--s-3);
	text-decoration: none;
	color: inherit;
	align-items: flex-start;
}
.kk-blog-sidebar__link:hover .kk-blog-sidebar__link-title { color: var(--primary); }
.kk-blog-sidebar__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: var(--r-sm, 10px);
	overflow: hidden;
	background: var(--accent-soft);
	display: block;
}
.kk-blog-sidebar__thumb--ph {
	background: linear-gradient(135deg, var(--accent-soft), var(--primary-soft));
}
.kk-blog-sidebar__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kk-blog-sidebar__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
}
.kk-blog-sidebar__link-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .15s ease;
}
.kk-blog-sidebar__date {
	font-size: 12px;
	color: var(--ink-muted, #6B6B6B);
}

/* Sidebar search */
.kk-blog-search {
	display: flex;
	gap: var(--s-2);
	align-items: stretch;
}
.kk-blog-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--rule);
	border-radius: var(--r-pill, 999px);
	background: var(--sand, #FAF8F3);
	font-family: inherit;
	font-size: 14px;
	color: var(--ink);
	outline: none;
	transition: border-color .15s ease, background .15s ease;
}
.kk-blog-search__input:focus {
	border-color: var(--primary);
	background: #fff;
}
.kk-blog-search__btn {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: var(--primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease;
}
.kk-blog-search__btn:hover { background: var(--primary-dark, var(--primary)); }

/* Sidebar chips (categories) */
.kk-blog-sidebar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.kk-blog-sidebar__chips .kk-blog-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-pill, 999px);
	background: var(--accent-soft);
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.kk-blog-sidebar__chips .kk-blog-chip:hover {
	background: var(--primary);
	color: #fff;
}
.kk-blog-chip__count {
	font-size: 11px;
	opacity: .7;
	font-weight: 400;
}

/* --------------------------------------------------------------
 * Comments
 * -------------------------------------------------------------- */
.kk-blog-comments {
	margin-block: var(--s-7) var(--s-6);
	padding-block-start: var(--s-6);
	border-top: 1px solid var(--rule);
}
.kk-blog-comments .comments-title,
.kk-blog-comments #reply-title {
	font-size: var(--fs-h3, 22px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 var(--s-5);
	padding-inline-start: 10px;
	border-inline-start: 4px solid var(--accent);
}
.kk-blog-comments .comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.kk-blog-comments .comment-list .comment,
.kk-blog-comments .comment-list .pingback {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: var(--r-card);
	padding: var(--s-4) var(--s-5);
	list-style: none;
}
.kk-blog-comments .comment-list .children {
	list-style: none;
	padding-inline-start: var(--s-4);
	margin-block-start: var(--s-3);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.kk-blog-comments .comment-author {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-block-end: var(--s-2);
}
.kk-blog-comments .comment-author .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--accent-soft);
}
.kk-blog-comments .comment-author .fn {
	font-weight: 600;
	color: var(--ink);
	font-style: normal;
}
.kk-blog-comments .comment-meta {
	font-size: 12px;
	color: var(--ink-muted, #6B6B6B);
	margin-block-end: var(--s-2);
}
.kk-blog-comments .comment-meta a { color: inherit; text-decoration: none; }
.kk-blog-comments .comment-content {
	color: var(--ink);
	line-height: var(--lh-body);
	font-size: 15px;
}
.kk-blog-comments .comment-content p { margin: 0 0 var(--s-2); }
.kk-blog-comments .reply {
	margin-block-start: var(--s-2);
}
.kk-blog-comments .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: var(--r-pill, 999px);
	background: var(--accent-soft);
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.kk-blog-comments .comment-reply-link:hover {
	background: var(--primary);
	color: #fff;
}

/* Comment form */
.kk-blog-comments .comment-respond {
	background: var(--sand, #FAF8F3);
	border: 1px solid var(--rule);
	border-radius: var(--r-card);
	padding: var(--s-5);
}
.kk-blog-comments .comment-form {
	display: grid;
	gap: var(--s-4);
}
.kk-blog-comments .comment-form-comment,
.kk-blog-comments .comment-form-author,
.kk-blog-comments .comment-form-email,
.kk-blog-comments .comment-form-url,
.kk-blog-comments .comment-form-cookies-consent {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.kk-blog-comments .comment-form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}
.kk-blog-comments .comment-form input[type="text"],
.kk-blog-comments .comment-form input[type="email"],
.kk-blog-comments .comment-form input[type="url"],
.kk-blog-comments .comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--rule);
	border-radius: var(--r-sm, 10px);
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: var(--ink);
	outline: none;
	transition: border-color .15s ease;
	box-sizing: border-box;
}
.kk-blog-comments .comment-form textarea { min-height: 120px; resize: vertical; }
.kk-blog-comments .comment-form input:focus,
.kk-blog-comments .comment-form textarea:focus {
	border-color: var(--primary);
}
@media (min-width: 640px) {
	.kk-blog-comments .comment-form-author,
	.kk-blog-comments .comment-form-email {
		display: inline-flex;
	}
	.kk-blog-comments .comment-form .form-row-inline {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s-4);
	}
}
.kk-blog-comments .comment-form-cookies-consent {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}
.kk-blog-comments .form-submit {
	margin: 0;
}
.kk-blog-comments .submit,
.kk-blog-comments input[type="submit"] {
	background: var(--primary);
	color: #fff;
	border: 0;
	padding: 12px 28px;
	border-radius: var(--r-pill, 999px);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.kk-blog-comments .submit:hover,
.kk-blog-comments input[type="submit"]:hover {
	background: var(--primary-dark, var(--primary));
	transform: translateY(-1px);
}
.kk-blog-comments .no-comments,
.kk-blog-comments .must-log-in {
	color: var(--ink-muted, #6B6B6B);
	font-size: 14px;
}
.kk-blog-comments .logged-in-as {
	font-size: 13px;
	color: var(--ink-muted, #6B6B6B);
}

.kk-blog-article .entry-title,
body.single-post .entry-title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-h2);
	line-height: var(--lh-heading);
	color: var(--ink);
	margin-block-end: var(--s-4);
}

.kk-blog-article .entry-content > p:first-of-type::first-letter,
body.single-post .entry-content > p:first-of-type::first-letter {
	float: inline-start;
	font-size: 3.2em;
	line-height: 0.9;
	font-weight: var(--fw-h3);
	color: var(--primary);
	padding-inline-end: var(--s-2);
	padding-block-start: var(--s-1);
}

/* RTL override: "inline-start" float maps correctly under dir=rtl. */

.kk-blog-article .entry-content h2,
.kk-blog-article .entry-content h3,
body.single-post .entry-content h2,
body.single-post .entry-content h3 {
	position: relative;
	padding-inline-start: var(--s-4);
	margin-block-start: var(--s-7);
	margin-block-end: var(--s-3);
	line-height: var(--lh-heading);
}
.kk-blog-article .entry-content h2,
body.single-post .entry-content h2 {
	font-size: var(--fs-h3);
	font-weight: var(--fw-h3);
}
.kk-blog-article .entry-content h3,
body.single-post .entry-content h3 {
	font-size: var(--fs-h4);
	font-weight: var(--fw-h4);
}
.kk-blog-article .entry-content h2::before,
.kk-blog-article .entry-content h3::before,
body.single-post .entry-content h2::before,
body.single-post .entry-content h3::before {
	content: "";
	position: absolute;
	inset-block: 0.15em 0.15em;
	inset-inline-start: 0;
	width: 4px;
	background: var(--accent);
	border-radius: var(--r-xs);
}

.kk-blog-article .entry-content blockquote,
body.single-post .entry-content blockquote {
	background: var(--sand);
	border-inline-start: 4px solid var(--accent);
	border-radius: var(--r-md);
	margin: var(--s-5) 0;
	padding: var(--s-5) var(--s-6);
	color: var(--ink);
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	font-weight: var(--fw-medium);
}
.kk-blog-article .entry-content blockquote p:last-child,
body.single-post .entry-content blockquote p:last-child { margin-bottom: 0; }

.kk-blog-article .entry-content a,
body.single-post .entry-content a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--d-2) var(--ease);
}
.kk-blog-article .entry-content a:hover,
body.single-post .entry-content a:hover { color: var(--accent); }

.kk-blog-article .entry-content img,
body.single-post .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r-md);
}

/* --------------------------------------------------------------
 * Sticky TOC (injected by blog.js on ≥1280)
 * -------------------------------------------------------------- */
.kk-blog-toc {
	display: none;
}
@media (min-width: 1280px) {
	.kk-blog-toc {
		display: block;
		position: sticky;
		top: calc(72px + var(--s-5));
		float: inline-end;
		width: 240px;
		margin-inline-start: var(--s-6);
		margin-block-end: var(--s-5);
		padding: var(--s-4);
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		font-size: var(--fs-small);
	}
	.kk-blog-toc__title {
		font-weight: var(--fw-h5);
		color: var(--ink);
		margin: 0 0 var(--s-2);
		font-size: var(--fs-small);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--ink-muted);
	}
	.kk-blog-toc ol {
		list-style: none;
		margin: 0; padding: 0;
		display: flex; flex-direction: column; gap: var(--s-1);
	}
	.kk-blog-toc a {
		color: var(--ink-muted);
		text-decoration: none;
		display: block;
		padding: var(--s-1) var(--s-2);
		border-radius: var(--r-xs);
		transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
	}
	.kk-blog-toc a:hover {
		background: var(--primary-soft);
		color: var(--primary);
	}
	.kk-blog-toc .kk-blog-toc__h3 { padding-inline-start: var(--s-4); }
}

/* --------------------------------------------------------------
 * Related articles strip
 * -------------------------------------------------------------- */
.kk-blog-related {
	margin-block-start: var(--s-8);
	padding-block-start: var(--s-6);
	border-top: 1px solid var(--line);
}
.kk-blog-related__title {
	font-size: var(--fs-h4);
	font-weight: var(--fw-h4);
	line-height: var(--lh-heading);
	margin: 0 0 var(--s-5);
}
.kk-blog-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
}
@media (min-width: 640px)  { .kk-blog-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kk-blog-related__grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------
 * Scoped polish for basalam-affiliate product blocks — ONLY within
 * .kk-blog-article. Harmonise borders/radii/spacing with brand.
 * -------------------------------------------------------------- */
.kk-blog-article [class*="basalam-affiliate"],
.kk-blog-article [class*="basalam-product"],
.kk-blog-article [class*="basalam-carousel"] {
	border-radius: var(--r-card);
	margin-block: var(--s-5);
}
.kk-blog-article [class*="basalam-affiliate"] .basalam-product,
.kk-blog-article [class*="basalam-affiliate"] [class*="product-card"] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--e1);
	transition: box-shadow var(--d-2) var(--ease);
}
.kk-blog-article [class*="basalam-affiliate"] [class*="product-card"]:hover {
	box-shadow: var(--e2);
}
.kk-blog-article [class*="basalam-affiliate"] img {
	border-radius: var(--r-md);
}
.kk-blog-article [class*="basalam-affiliate"] a[class*="button"],
.kk-blog-article [class*="basalam-affiliate"] .basalam-cta {
	background: var(--primary);
	color: var(--surface);
	border-radius: var(--r-btn);
	padding: var(--s-2) var(--s-4);
	font-weight: var(--fw-button);
	text-decoration: none;
	transition: background var(--d-2) var(--ease);
}
.kk-blog-article [class*="basalam-affiliate"] a[class*="button"]:hover,
.kk-blog-article [class*="basalam-affiliate"] .basalam-cta:hover {
	background: var(--primary-dark);
}

/* --------------------------------------------------------------
 * Template-specific selectors (template overrides)
 * -------------------------------------------------------------- */

/* Chip bar alias */
.kk-blog-chip-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-block-end: var(--s-6);
}
.kk-blog-chip--active {
	background: var(--primary);
	color: var(--surface);
	border-color: var(--primary);
}

/* Split layout: featured (2/3) + stack (1/3) — using flexbox for predictable RTL */
.kk-blog-split {
	display: flex !important;
	flex-direction: column;
	gap: var(--s-5);
	margin-block-end: var(--s-7);
	width: 100%;
}
@media (min-width: 1024px) {
	.kk-blog-split {
		flex-direction: row;
		gap: var(--s-7);
		align-items: stretch;
	}
	.kk-blog-split > .kk-blog-featured {
		flex: 2 1 0;
		min-width: 0;
	}
	.kk-blog-split > .kk-blog-latest-stack {
		flex: 1 1 0;
		min-width: 0;
	}
}

.kk-blog-latest-stack {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.kk-blog-stack-item {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--s-3);
	padding: var(--s-3);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.kk-blog-stack-item:hover {
	box-shadow: var(--e1);
	transform: translateY(-1px);
}
.kk-blog-stack-item__thumb {
	width: 96px;
	height: 96px;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--sand);
}
.kk-blog-stack-item__thumb img,
.kk-blog-stack-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.kk-blog-stack-item__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--sand);
}
.kk-blog-stack-item__meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--s-1);
	min-width: 0;
}
.kk-blog-stack-item__title {
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	color: var(--ink);
	margin: 0;
	line-height: var(--lh-heading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kk-blog-stack-item__date {
	font-size: var(--fs-small);
	color: var(--ink-muted);
}

/* Latest grid */
.kk-blog-latest { margin-block-start: var(--s-7); }
.kk-blog-latest__heading {
	font-size: var(--fs-h3);
	font-weight: var(--fw-h3);
	color: var(--ink);
	margin: 0 0 var(--s-5);
}
.kk-blog-latest__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
@media (min-width: 640px)  { .kk-blog-latest__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kk-blog-latest__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .kk-blog-latest__grid { grid-template-columns: repeat(4, 1fr); } }

/* Card placeholder */
.kk-c-article-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, var(--accent-soft) 0%, transparent 40%),
		radial-gradient(circle at 70% 70%, var(--primary-soft) 0%, transparent 45%),
		linear-gradient(135deg, var(--sand-deeper), var(--line));
	position: relative;
}

/* Pagination list */
.kk-blog-pagination ul,
.kk-blog-pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: var(--s-2);
	flex-wrap: wrap;
	justify-content: center;
}
.kk-blog-pagination li { display: inline-flex; }

/* Single article layout */
.kk-blog-article__wrap {
	max-width: 80ch;
	margin-inline: auto;
}
.kk-blog-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	font-size: var(--fs-small);
	color: var(--ink-muted);
	margin-block-end: var(--s-5);
}
.kk-blog-breadcrumb a {
	color: var(--ink-muted);
	text-decoration: none;
	transition: color var(--d-2) var(--ease);
}
.kk-blog-breadcrumb a:hover { color: var(--primary); }
.kk-blog-breadcrumb { align-items: center; }
.kk-blog-breadcrumb__sep { display: inline-flex; align-items: center; opacity: 0.7; }
.kk-blog-breadcrumb [aria-current="page"] { color: var(--ink); }

.kk-blog-article__header {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-block-end: var(--s-6);
}
.kk-blog-article__header .kk-c-chip { align-self: flex-start; }
.kk-blog-article__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-h2);
	line-height: var(--lh-heading);
	color: var(--ink);
	margin: 0;
}
.kk-blog-article__dek {
	font-size: var(--fs-body-lg);
	color: var(--ink-muted);
	line-height: var(--lh-body);
	margin: 0;
	max-width: 64ch;
}
.kk-blog-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	align-items: center;
	font-size: var(--fs-small);
	color: var(--ink-muted);
}
.kk-blog-article__author { font-weight: var(--fw-medium); color: var(--ink); }

.kk-blog-article__cover {
	margin: 0 0 var(--s-6);
	border-radius: var(--r-card);
	overflow: hidden;
}
.kk-blog-article__cover img,
.kk-blog-article__img {
	width: 100%;
	height: auto;
	display: block;
}

.kk-blog-related__heading {
	font-size: var(--fs-h4);
	font-weight: var(--fw-h4);
	line-height: var(--lh-heading);
	margin: 0 0 var(--s-5);
}

/* Generic chip (used in card meta + single header) */
.kk-c-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--s-2);
	border-radius: var(--r-pill);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	background: var(--sand);
	color: var(--ink);
}
.kk-c-chip--primary {
	background: var(--primary-soft);
	color: var(--primary);
}
.kk-c-article-card__dot {
	color: var(--ink-muted);
	user-select: none;
}

/* --------------------------------------------------------------
 * Reduced-motion
 * -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kk-c-article-card,
	.kk-c-article-card.is-revealed,
	.kk-c-article-card__cover img {
		transition: none !important;
		transform: none !important;
	}
}

/* =================================================================
 * REDESIGN — Persian editorial (Kinfolk × Spruce × Apartment Therapy)
 * Scoped to `.kk-blog-theme` so global tokens remain untouched.
 * ================================================================= */

.kk-blog-theme {
	/* Local palette override (scoped only). */
	--primary: #0E3B2E;
	--primary-dark: #0A2B20;
	--primary-soft: #D9E8DE;
	--accent: #C8833A;
	--accent-soft: #F5E4CD;
	--sand: #F5ECDD;
	--sand-deeper: #EDE1CC;
	--surface: #FFFFFF;
	--surface-alt: #FBF6EC;
	--line: #EFE4D0;
	--line-strong: #E1D3B8;
	--ink: #1C1C1C;
	--ink-muted: #6B6B6B;
	/* Paper-grain background */
	background-color: var(--sand);
	background-image:
		radial-gradient(1200px 600px at 10% -10%, rgba(200,131,58,0.06), transparent 60%),
		radial-gradient(900px 500px at 100% 0%, rgba(14,59,46,0.05), transparent 60%);
}

.kk-blog-theme a:not(.kk-blog-btn):not(.kk-blog-chip):not(.kk-c-article-card__cover) { color: var(--primary); }
.kk-blog-theme a:not(.kk-blog-btn):not(.kk-blog-chip):not(.kk-c-article-card__cover):hover { color: var(--accent); }
.kk-blog-theme a.kk-blog-btn--primary,
.kk-blog-theme a.kk-blog-btn--primary:hover,
.kk-blog-theme a.kk-blog-btn--primary:visited { color: #fff; }
.kk-blog-theme a.kk-blog-btn--ghost,
.kk-blog-theme a.kk-blog-btn--ghost:visited { color: var(--primary); }
.kk-blog-theme a.kk-blog-btn--ghost:hover { color: var(--primary-dark); }

.kk-blog-theme :focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 2px;
}

/* Entrance motion — removed to guarantee content visibility.
   Keep an empty selector in case future JS re-introduces it. */
.kk-blog-theme [data-enter] { }

/* Screen-reader helper */
.kk-blog-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------
 * Hero split layout
 * -------------------------------------------------------------- */
.kk-blog-hero--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	align-items: center;
	padding: var(--s-7) 0;
	margin-block-end: var(--s-6);
	position: relative;
}
@media (min-width: 768px) {
	.kk-blog-hero--split {
		grid-template-columns: 55% 45%;
		gap: var(--s-7);
		min-height: 420px;
		max-height: 520px;
	}
}

/* Single-column hero (404): no collage, readable measure. */
.kk-blog-hero--solo { padding: var(--s-7) 0; max-width: 720px; }

.kk-blog-hero__text { display: flex; flex-direction: column; gap: var(--s-4); }

.kk-blog-theme .kk-blog-hero__title {
	font-size: clamp(28px, 5vw, 56px) !important;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25 !important;
	color: var(--ink);
	white-space: normal !important;
	word-break: break-word;
	overflow-wrap: anywhere;
	max-width: 100%;
}
.kk-blog-theme .kk-blog-hero__eyebrow {
	color: var(--accent);
	letter-spacing: 0.08em;
	font-weight: 600;
	font-size: 14px;
}
.kk-blog-theme .kk-blog-hero__dek {
	font-size: 17px;
	line-height: 1.85;
	color: var(--ink-muted);
	max-width: 56ch;
}

.kk-blog-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--s-3);
}

.kk-blog-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 48px;
	padding: 0 var(--s-5);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
	border: 1px solid transparent;
	cursor: pointer;
}
.kk-blog-btn--primary { background: var(--primary); color: #fff; }
.kk-blog-btn--primary:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); }
.kk-blog-btn--ghost { background: transparent; color: var(--primary); border-color: var(--line); }
.kk-blog-btn--ghost:hover { background: var(--primary-soft); color: var(--primary); }
.kk-blog-btn__arrow { transition: transform var(--d-2) var(--ease); }
.kk-blog-btn--primary:hover .kk-blog-btn__arrow { transform: translateX(-4px); }

/* Collage */
.kk-blog-hero__collage {
	position: relative;
	min-height: 260px;
}
@media (min-width: 768px) {
	.kk-blog-hero__collage { min-height: 420px; }
}
.kk-blog-hero__card {
	position: absolute;
	width: 46%;
	max-width: 240px;
	filter: drop-shadow(0 10px 28px rgba(14,59,46,0.10));
	border-radius: 14px;
}
.kk-blog-hero__card--1 { inset-block-start: 0; inset-inline-end: 6%; transform: rotate(-4deg); z-index: 2; }
.kk-blog-hero__card--2 { inset-block-start: 18%; inset-inline-start: 4%;  transform: rotate(3deg); z-index: 3; }
.kk-blog-hero__card--3 { inset-block-end: 4%;  inset-inline-end: 20%; transform: rotate(-1deg); z-index: 1; }
.kk-blog-hero__leaf {
	position: absolute;
	inset-block-start: -8px;
	inset-inline-end: -4px;
	width: 80px; height: 80px;
	z-index: 4;
	opacity: 0.85;
}
@media (max-width: 767px) {
	.kk-blog-hero__collage { height: 280px; order: -1; }
	.kk-blog-hero__card { width: 38%; }
}

/* --------------------------------------------------------------
 * Filter bar — sticky category chips
 * -------------------------------------------------------------- */
.kk-blog-filterbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
	padding: var(--s-3) 0;
	margin-block-end: var(--s-5);
	position: sticky;
	top: var(--kk-header-height, 60px);
	z-index: 30;
	background: color-mix(in srgb, var(--sand) 92%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.kk-blog-theme .kk-blog-chips { margin-block-end: 0; flex: 1 1 auto; }
@media (min-width: 1024px) {
	.kk-blog-filterbar { top: var(--kk-header-height, 72px); }
}
/* Phones: one scrollable row instead of a tall wrapping sticky bar. */
@media (max-width: 767px) {
	.kk-blog-theme .kk-blog-filterbar .kk-blog-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.kk-blog-theme .kk-blog-filterbar .kk-blog-chips::-webkit-scrollbar { display: none; }
	.kk-blog-theme .kk-blog-filterbar .kk-blog-chip { flex: 0 0 auto; white-space: nowrap; }
}
.kk-blog-theme .kk-blog-chip {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink);
	min-height: 36px;
}
.kk-blog-theme .kk-blog-chip:hover {
	background: var(--line);
	color: var(--ink);
	border-color: var(--line);
}
.kk-blog-theme .kk-blog-chip.is-active,
.kk-blog-theme .kk-blog-chip[aria-current="page"],
.kk-blog-theme .kk-blog-chip--active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}
/* --------------------------------------------------------------
 * Featured card redesign — 60/40 split
 * -------------------------------------------------------------- */
.kk-blog-theme .kk-c-article-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
}
.kk-blog-theme .kk-c-article-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(14,59,46,0.08);
}
.kk-blog-theme .kk-c-article-card__cover {
	aspect-ratio: 4 / 3;
}
.kk-blog-theme .kk-c-article-card:hover .kk-c-article-card__cover img {
	transform: scale(1.03);
}

/* Overlay category pill */
.kk-c-article-card__cat-overlay {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	padding: 4px 10px;
	border-radius: 100px;
	background: color-mix(in srgb, var(--primary-soft) 85%, transparent);
	color: var(--primary);
	font-size: 12px;
	font-weight: 600;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	pointer-events: none;
}

/* Featured variant (60/40 row on wide) */
@media (min-width: 1024px) {
	.kk-blog-featured { width: 100%; }
	.kk-blog-featured .kk-c-article-card--featured {
		display: flex !important;
		flex-direction: row !important;
		width: 100%;
	}
	.kk-blog-featured .kk-c-article-card--featured .kk-c-article-card__cover {
		flex: 0 0 58%;
		aspect-ratio: auto;
		min-height: 380px;
		max-height: 440px;
	}
	.kk-blog-featured .kk-c-article-card--featured .kk-c-article-card__body {
		flex: 1 1 42%;
		padding: var(--s-6);
		justify-content: center;
		gap: var(--s-3);
	}
	.kk-blog-featured .kk-c-article-card--featured .kk-c-article-card__title {
		font-size: 26px;
		font-weight: 800;
		line-height: 1.4;
		-webkit-line-clamp: 4;
	}
	.kk-blog-featured .kk-c-article-card--featured .kk-c-article-card__dek {
		-webkit-line-clamp: 3;
	}
}

.kk-c-article-card__meta--rich {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: 13px;
	color: var(--ink-muted);
	flex-wrap: wrap;
}
.kk-c-article-card__avatar {
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}
.kk-c-article-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-2);
	color: var(--primary);
	font-weight: 700;
	text-decoration: none;
	font-size: 15px;
}
.kk-c-article-card__more-arrow {
	transition: transform var(--d-2) var(--ease);
	display: inline-block;
}
.kk-c-article-card__more:hover .kk-c-article-card__more-arrow {
	transform: translateX(-4px);
}

/* Grid gap tuning */
@media (min-width: 1024px) {
	.kk-blog-theme .kk-blog-latest__grid { column-gap: var(--s-6); row-gap: var(--s-7); }
}

/* --------------------------------------------------------------
 * Editor's Picks rail
 * -------------------------------------------------------------- */
.kk-blog-picks {
	margin-block: var(--s-8);
}
.kk-blog-picks__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--s-5);
	gap: var(--s-3);
}
.kk-blog-picks__heading {
	font-size: 28px;
	font-weight: 800;
	color: var(--ink);
	margin: 0;
	letter-spacing: -0.01em;
}
.kk-blog-picks__nav { display: inline-flex; gap: var(--s-2); }
.kk-blog-picks__arrow {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	font-size: 18px;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.kk-blog-picks__arrow:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.kk-blog-picks__arrow:disabled { opacity: 0.4; cursor: default; }

.kk-blog-picks__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 220px;
	gap: var(--s-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-block-end: var(--s-3);
}
.kk-blog-picks__rail::-webkit-scrollbar { height: 6px; }
.kk-blog-picks__rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 100px; }

.kk-blog-pick {
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.kk-blog-pick__cover {
	position: relative;
	width: 220px;
	height: 220px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--sand-deeper);
}
.kk-blog-pick__cover img,
.kk-blog-pick__img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--d-3) var(--ease);
}
.kk-blog-pick:hover .kk-blog-pick__img { transform: scale(1.04); }
.kk-blog-pick__placeholder {
	display: block; width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--accent-soft), var(--sand-deeper));
}
.kk-blog-pick__badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 100px;
	background: color-mix(in srgb, var(--accent) 92%, transparent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}
.kk-blog-pick__badge-star { font-size: 12px; }
.kk-blog-pick__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --------------------------------------------------------------
 * Numbered pagination (custom array render)
 * -------------------------------------------------------------- */
.kk-blog-theme .kk-blog-pagination {
	margin-block-start: var(--s-8);
}
.kk-blog-theme .kk-blog-pagination__list {
	list-style: none;
	margin: 0; padding: 0;
	display: inline-flex;
	gap: var(--s-2);
	flex-wrap: wrap;
	justify-content: center;
}
.kk-blog-theme .kk-blog-pagination a,
.kk-blog-theme .kk-blog-pagination span {
	min-width: 36px;
	height: 36px;
	padding: 0 var(--s-3);
	border-radius: 100px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
	font-weight: 600;
	text-decoration: none;
	font-size: 14px;
}
.kk-blog-theme .kk-blog-pagination a:hover {
	background: var(--primary-soft);
	color: var(--primary);
	border-color: var(--primary-soft);
}
.kk-blog-theme .kk-blog-pagination .current {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}
.kk-blog-pagination__arrow { display: inline-block; }
[dir="rtl"] .kk-blog-pagination__arrow { /* arrows used in prev/next text are already RTL-correct */ }

/* Touch targets (coarse pointers only, keeps the desktop look) */
@media (pointer: coarse) {
	.kk-blog-theme .kk-blog-chip { min-height: 44px; }
	.kk-blog-theme .kk-blog-pagination a,
	.kk-blog-theme .kk-blog-pagination span { min-width: 44px; height: 44px; }
	.kk-blog-search__btn { width: 44px; height: 44px; }
}