/* =========================================================
   صفحه اصلی

   قانون‌های حاکم بر این فایل، همان چیزهایی که عمداً استفاده
   نمی‌شوند: بدون اسلایدر، بدون ردیف چهارستونی آیکون، بدون
   وسط‌چین کردن همه‌چیز، بدون سایه زیر هر عنصر.
   ========================================================= */

/* ---------------------------------------------------------
   قهرمان صفحه
   پنل روی تصویر می‌افتد، نه وسط آن.
   --------------------------------------------------------- */

.bkk-hero {
	position: relative;
	background-color: var(--bkk-surface-raised);
}

.bkk-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 78vh;
	overflow: hidden;
}

.bkk-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* پرده ملایم تا متن پنل روی هر عکسی خوانا بماند */
.bkk-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(42, 36, 32, 0.1),
		rgba(42, 36, 32, 0.35)
	);
}

.bkk-hero__inner {
	position: relative;
}

.bkk-hero__panel {
	position: relative;
	z-index: 2;
	max-width: 34rem;
	padding: var(--space-l);
	background-color: var(--bkk-bg);
	background-image: var(--texture-paper);
	background-blend-mode: multiply;
	border-radius: var(--radius-m);
}

/* روی دسکتاپ پنل از پایین وارد تصویر می‌شود و سمت شروع می‌چسبد */
@media (min-width: 768px) {
	.bkk-hero__inner {
		margin-block-start: -8rem;
	}

	.bkk-hero__panel {
		padding: var(--space-xl);
		box-shadow: var(--shadow-lift);
	}
}

/* بدون تصویر، پنل نباید معلق بماند */
.bkk-hero--plain {
	background-image: var(--texture-paper);
	background-blend-mode: multiply;
	padding-block: var(--space-2xl);
}

.bkk-hero--plain .bkk-hero__inner {
	margin-block-start: 0;
}

.bkk-hero--plain .bkk-hero__panel {
	background-color: transparent;
	background-image: none;
	padding-inline: 0;
	box-shadow: none;
	max-width: 42rem;
}

.bkk-hero__title {
	font-size: var(--step-5);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.25;
	margin-block-end: var(--space-s);
}

.bkk-hero__text {
	font-size: var(--step-1);
	color: var(--bkk-text-muted);
	margin-block-end: var(--space-m);
	max-width: 32ch;
}

.bkk-hero__cta {
	font-size: var(--step-1);
}

/* --- نوار سه واقعیت --- */

.bkk-hero__facts {
	position: relative;
	z-index: 2;
	margin-block-start: var(--space-l);
	padding-block: var(--space-s);
	border-block-start: 1px solid var(--bkk-border);
}

.bkk-hero__factlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s) var(--space-l);
	color: var(--bkk-text-muted);
	font-size: var(--step--1);
}

/* جداکننده نقطه‌ای به‌جای خط عمودی */
.bkk-hero__factlist li {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

.bkk-hero__factlist li + li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--bkk-accent);
	margin-inline-start: calc(var(--space-l) * -0.5);
}

/* ---------------------------------------------------------
   دسته‌بندی‌ها — ارتفاع نامساوی، عمدی
   --------------------------------------------------------- */

.bkk-cats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	align-items: start;
}

.bkk-cats__link {
	/* شبکه با auto-fit چیده شده، پس عرض هر کارت به تعداد ستون‌هایی
	   که جا شده‌اند بستگی دارد و از عرض پنجره قابل حدس زدن نیست —
	   دقیقاً همان جایی که مدیاکوئری جواب نمی‌دهد. */
	container: bkk-cat / inline-size;

	display: block;
	position: relative;
	border-radius: var(--radius-m);
	overflow: hidden;
	background-color: var(--bkk-surface-raised);
	text-decoration: none;
	color: var(--bkk-text);
}

.bkk-cats__media {
	display: block;
	overflow: hidden;
	background-color: var(--bkk-surface-sunken);
	aspect-ratio: 4 / 5;
}

.bkk-cats__item--short .bkk-cats__media {
	aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
	.bkk-cats__item--tall {
		margin-block-start: calc(var(--space-l) * -1);
	}
}

.bkk-cats__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow) var(--ease-out);
}

.bkk-cats__link:hover .bkk-cats__img {
	transform: scale(1.03);
}

.bkk-cats__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-s) var(--space-m) var(--space-m);
}

.bkk-cats__name {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 700;
}

.bkk-cats__count {
	color: var(--bkk-text-muted);
	font-size: var(--step--2);
	font-variant-numeric: tabular-nums;
}

@container bkk-cat (max-width: 279px) {
	.bkk-cats__body {
		padding: var(--space-2xs) var(--space-s) var(--space-s);
	}

	.bkk-cats__name {
		font-size: var(--step-1);
	}
}

@container bkk-cat (min-width: 440px) {
	.bkk-cats__name {
		font-size: var(--step-3);
	}

	.bkk-cats__body {
		padding: var(--space-m) var(--space-l) var(--space-l);
	}
}

/* ---------------------------------------------------------
   چرا ما — دو ستون نامساوی، نه ردیف آیکون
   --------------------------------------------------------- */

.bkk-story__inner {
	display: grid;
	gap: var(--space-xl);
}

@media (min-width: 1024px) {
	.bkk-story__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: start;
	}
}

.bkk-story__title {
	font-size: var(--step-4);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-block-end: var(--space-s);
}

.bkk-story__text {
	color: var(--bkk-text-muted);
	max-width: 38ch;
	margin-block-end: var(--space-m);
}

.bkk-story__places {
	list-style: none;
	margin: 0;
	padding: var(--space-s) 0 0;
	border-block-start: 1px solid var(--bkk-border);
	display: grid;
	gap: var(--space-2xs);
}

.bkk-story__places li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2xs);
	font-size: var(--step--1);
}

.bkk-story__placelabel {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--bkk-green);
}

.bkk-story__placeaddr {
	color: var(--bkk-text-muted);
}

/* --- نکته‌های شماره‌دار --- */

.bkk-story__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-m);
	counter-reset: none;
}

.bkk-story__point {
	display: flex;
	gap: var(--space-s);
	align-items: flex-start;
	padding-block-end: var(--space-m);
	border-block-end: 1px solid var(--bkk-border);
}

.bkk-story__point:last-child {
	border-block-end: none;
	padding-block-end: 0;
}

.bkk-story__num {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--bkk-accent);
	border-radius: 50%;
	color: var(--bkk-accent-hover);
	font-family: var(--font-display);
	font-size: var(--step--1);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bkk-story__pointbody {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bkk-story__pointtitle {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 700;
}

.bkk-story__pointtext {
	color: var(--bkk-text-muted);
	font-size: var(--step--1);
}

/* ---------------------------------------------------------
   بخش‌های محصول و وبلاگ روی صفحه اصلی
   --------------------------------------------------------- */

.bkk-featured .products {
	--col-min: 230px;
}

/* جداکننده بخش‌ها با تغییر تن، نه با خط */
.bkk-home > .bkk-section + .bkk-section {
	padding-block-start: var(--space-2xl);
}

/* ---------------------------------------------------------
   جدول مقایسه ارقام برنج
   --------------------------------------------------------- */

.bkk-varieties__lede {
	max-width: var(--measure);
	margin-block-end: var(--space-l);
	color: var(--bkk-text-muted);
}

/* اسکرول افقی به‌جای فشرده کردن. جدول شش‌ستونه در ۳۶۰ پیکسل یا
   خوانده نمی‌شود یا کل صفحه را اسکرول افقی می‌دهد؛ این یکی فقط
   خودش را اسکرول می‌کند. */
.bkk-varieties__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
}

.bkk-varieties__table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	text-align: start;
}

.bkk-varieties__table th,
.bkk-varieties__table td {
	padding: var(--space-s) var(--space-xs);
	border-block-end: 1px solid var(--bkk-border);
	text-align: start;
	vertical-align: middle;
	white-space: nowrap;
}

.bkk-varieties__table thead th {
	padding-block: var(--space-2xs);
	border-block-end: 2px solid var(--bkk-border-strong);
	color: var(--bkk-text-muted);
	font-family: var(--font-display);
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: var(--track-wide);
}

.bkk-varieties__table tbody tr:last-child th,
.bkk-varieties__table tbody tr:last-child td {
	border-block-end: none;
}

.bkk-varieties__table tbody tr:hover {
	background-color: var(--bkk-accent-soft);
}

/* ستون رقم می‌چسبد، وگرنه موقع اسکرول افقی معلوم نیست کدام ردیف
   را می‌خوانی. `inset-inline-start` نه `left` — در راست‌چین سمت
   شروع، سمت راست است. */
.bkk-varieties__name {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	background-color: var(--bkk-bg);
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 700;
}

.bkk-varieties__table tbody tr:hover .bkk-varieties__name {
	background-color: var(--bkk-accent-soft);
}

.bkk-varieties__name a {
	color: var(--bkk-text);
	text-decoration: none;
}

.bkk-varieties__name a:hover {
	color: var(--bkk-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bkk-varieties__origin {
	color: var(--bkk-green);
	font-size: var(--step--1);
}

.bkk-varieties__price {
	color: var(--bkk-price);
	font-family: var(--font-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.bkk-cats__img,
	.bkk-cats__link:hover .bkk-cats__img {
		transition: none;
		transform: none;
	}
}