/* =========================================================
   چیدمان — ظرف‌ها، شبکه‌ها، ریتم عمودی
   ========================================================= */

/* --- ظرف‌ها --- */

.bkk-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bkk-wrap--narrow {
	max-width: var(--wrap-narrow);
}

.bkk-wrap--wide {
	max-width: 1600px;
}

/* تمام‌عرض واقعی، حتی داخل یک ظرف */
.bkk-fullbleed {
	width: 100vw;
	margin-inline-start: 50%;
	transform: translateX(50%);
}

/* در راست‌چین جهت جابه‌جایی برعکس است */
:dir(ltr) .bkk-fullbleed {
	transform: translateX(-50%);
}

/* --- ریتم عمودی بخش‌ها --- */

.bkk-section {
	padding-block: var(--space-2xl);
}

.bkk-section--tight {
	padding-block: var(--space-xl);
}

.bkk-section--loose {
	padding-block: var(--space-3xl);
}

/* جداکننده بخش‌ها با تغییر تن پس‌زمینه، نه با خط */
.bkk-section--sand {
	background-color: var(--bkk-sand);
}

.bkk-section--ink {
	background-color: var(--bkk-ink);
	color: var(--bkk-cream);
}

/* --- پشته: فاصله‌گذاری خودکار بین فرزندان --- */

.bkk-stack > * + * {
	margin-block-start: var(--stack-space, var(--space-s));
}

.bkk-stack--s {
	--stack-space: var(--space-2xs);
}

.bkk-stack--m {
	--stack-space: var(--space-m);
}

.bkk-stack--l {
	--stack-space: var(--space-l);
}

/* --- خوشه: ردیف منعطف با فاصله --- */

.bkk-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cluster-gap, var(--space-s));
	align-items: center;
}

.bkk-cluster--between {
	justify-content: space-between;
}

/* --- شبکه خودکار --- */

.bkk-grid {
	display: grid;
	gap: var(--grid-gap, var(--space-m));
	grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
}

@media (min-width: 640px) {
	.bkk-grid {
		--grid-cols: 2;
	}
}

@media (min-width: 1024px) {
	.bkk-grid {
		--grid-cols: var(--grid-cols-lg, 3);
	}
}

/* شبکه‌ای که خودش تعداد ستون را از عرض موجود درمی‌آورد */
.bkk-autogrid {
	display: grid;
	gap: var(--grid-gap, var(--space-m));
	grid-template-columns: repeat(auto-fill, minmax(min(var(--col-min, 240px), 100%), 1fr));
}

/* --- سربرگ بخش --- */

.bkk-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-s);
	margin-block-end: var(--space-l);
}

.bkk-section-head__title {
	font-size: var(--step-3);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.bkk-section-head__link {
	font-size: var(--step--1);
	font-weight: 500;
	color: var(--bkk-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
}

.bkk-section-head__link:hover {
	color: var(--bkk-saffron-deep);
}

/* پیکان که در راست‌چین به سمت چپ اشاره می‌کند */
.bkk-section-head__link svg {
	width: 1em;
	height: 1em;
	transition: transform var(--dur-fast) var(--ease-out);
}

.bkk-section-head__link:hover svg {
	transform: translateX(-3px);
}

/* --- چیدمان اصلی صفحه --- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
}

/* صفحه با سایدبار — سایدبار در فروشگاه استفاده نمی‌شود، فقط وبلاگ */
.bkk-with-aside {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 1024px) {
	.bkk-with-aside {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}