/* ==========================================================================
   08 — Home sections: categories, rail, story, featured, process, benefits,
        natural tabs, reviews, blog teaser
   ========================================================================== */

/* ---------- Categories ---------- */
.cats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat {
	position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg);
	background: var(--white); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow var(--t), border-color var(--t);
}
.cat:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: transparent; }
.cat__media { position: relative; aspect-ratio: 1 / .82; display: grid; place-items: center; overflow: hidden; background: var(--green-soft); }
.cat__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat:hover .cat__img { transform: scale(1.06); }
.cat__art { width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.6); color: var(--green); transition: transform .6s var(--ease); }
.cat__art .ico { width: 52%; height: 52%; stroke-width: 1.3; }
.cat:hover .cat__art { transform: rotate(-8deg) scale(1.06); }
.cat--dates .cat__media { background: radial-gradient(circle at 70% 30%, #F6DFA0, #EBD3A0 60%, #E2C38B); }
.cat--dates .cat__art { color: var(--date); }
.cat--sesame .cat__media { background: radial-gradient(circle at 70% 30%, #FBF3DE, #F1E3BE); }
.cat--sesame .cat__art { color: var(--brown); }
.cat--honey .cat__media { background: radial-gradient(circle at 70% 30%, #F8D886, #E8B94E); }
.cat--honey .cat__art { color: #8A5A0E; }
.cat--syrup .cat__media { background: radial-gradient(circle at 70% 30%, #B97B52, #683A20); }
.cat--syrup .cat__art { color: var(--gold-light); background: rgba(255,255,255,.12); }
.cat__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; flex: 1; }
.cat__name { font-weight: 900; font-size: 1.05rem; color: var(--green-deep); }
.cat__lead { font-size: var(--fs-xs); color: var(--muted); line-height: 1.8; display: none; }
.cat__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.cat__foot small { color: var(--brown); font-weight: 700; font-size: var(--fs-xs); }
.cat__go { width: 34px; height: 34px; margin-inline-start: auto; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--green); transition: background var(--t), color var(--t), transform var(--t) var(--ease); }
.cat__go .ico { width: 18px; height: 18px; }
.cat:hover .cat__go { background: var(--gold); color: var(--green-deep); transform: translateX(-4px); }
@media (min-width: 768px) {
	.cats__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
	.cat__lead { display: block; }
	.cat__body { padding: 18px 20px 20px; }
	.cat__name { font-size: 1.2rem; }
	/* چیدمان: خرما بزرگ (۲×۲)، کنجد و عسل، شیره افقی و عریض */
	.cats__grid { grid-template-columns: 1.6fr 1fr 1fr; }
	.cat--dates { grid-row: span 2; }
	.cat--dates .cat__media { aspect-ratio: auto; flex: 1; min-height: 300px; }
	.cat--dates .cat__name { font-size: 1.6rem; }
	.cat--syrup { grid-column: span 2; flex-direction: row; }
	.cat--syrup .cat__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 200px; }
}

/* ---------- Horizontal rail (موبایل: اسکرول افقی) ---------- */
.rail { position: relative; }
.rail__nav { display: none; }
@media (max-width: 767px) {
	.p-grid--rail, .reviews__list {
		display: grid !important; grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none !important;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 12px;
		margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; scrollbar-width: none;
	}
	.p-grid--rail::-webkit-scrollbar, .reviews__list::-webkit-scrollbar { display: none; }
	.p-grid--rail > li, .reviews__list > li { scroll-snap-align: start; }
	.reviews__list { grid-auto-columns: 86%; }
}

/* ---------- Story ---------- */
.story__in { display: grid; gap: 36px; align-items: center; }
.story__visual { position: relative; max-width: 420px; margin-inline: auto; width: 100%; }
.story__frame { position: relative; aspect-ratio: 4 / 5; }
/* قاب طاقی با حلقه طلایی */
.story__scene {
	position: absolute; inset: 0; overflow: hidden;
	border-radius: 999px 999px 28px 28px;
	background: linear-gradient(180deg, #EFB866, #F4E4C2);
	box-shadow: 0 0 0 3px var(--gold), 0 0 0 10px var(--cream), 0 0 0 11px rgba(201,154,39,.45), 0 40px 60px -30px rgba(6,61,33,.45);
}
.story__scene canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--ease); }
.story__scene.is-ready canvas { opacity: 1; }
.story__scene::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 40px rgba(104,58,32,.25); }
.story__badge {
	position: absolute; z-index: 2; top: 30%; right: -6%; display: flex; flex-direction: column; max-width: 180px; padding: 12px 16px; border-radius: var(--r);
	background: var(--white); box-shadow: var(--sh-2); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); line-height: 1.6;
	animation: floaty 6s var(--ease-io) infinite;
}
.story__badge b { font-size: 2rem; font-weight: 900; color: var(--gold); line-height: 1.1; }
.story__p { display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); margin: 18px 0 22px; }
@media (max-width: 600px) { .story__badge { right: 3%; top: 26%; } }
.story__steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.story__steps li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: var(--fs-sm); }
.story__steps span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--gold-light); font-weight: 900; flex-shrink: 0; }
@media (min-width: 900px) { .story__in { grid-template-columns: .9fr 1.1fr; gap: 72px; } }

/* ---------- Featured ---------- */
.featured__grid { display: grid; gap: 16px; }
.spot { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--green-deep); color: #EDE7D6; }
.spot__media { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); }
.spot__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.spot:hover .spot__img { transform: scale(1.05); }
.spot__media .badge { position: absolute; top: 14px; right: 14px; }
.spot__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.spot__body .badge { align-self: flex-start; }
.spot__body .badge .ico { width: 14px; height: 14px; }
.spot__name { font-size: var(--fs-xl); color: #fff; }
.spot__desc { color: rgba(237,231,214,.75); font-size: var(--fs-sm); }
.spot__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; }
.spot .price { color: var(--gold-light); font-size: 1.3rem; font-weight: 900; }
.spot .price del { color: rgba(237,231,214,.5); font-size: .85rem; font-weight: 500; }
.spot .price ins { text-decoration: none; }
@media (min-width: 900px) { .featured__grid { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* ---------- Process ---------- */
.process { overflow: hidden; }
.process__pattern { position: absolute; inset: 0; background: url("../img/pattern.svg") 0 0/140px; opacity: .8; pointer-events: none; }
.process .container { position: relative; }
.process__list { display: grid; gap: 14px; counter-reset: p; }
.process__step {
	position: relative; padding: 24px 22px; border-radius: var(--r-lg);
	background: rgba(255,255,255,.04); border: 1px solid rgba(232,198,106,.18); backdrop-filter: blur(2px);
	transition: background var(--t), border-color var(--t), transform .45s var(--ease);
}
.process__step:hover { background: rgba(255,255,255,.07); border-color: rgba(232,198,106,.45); transform: translateY(-4px); }
.process__ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--gold); color: var(--green-deep); margin-bottom: 18px; }
.process__ico .ico { width: 28px; height: 28px; }
.process__num { position: absolute; top: 20px; left: 22px; font-size: 2.2rem; font-weight: 900; color: rgba(232,198,106,.18); line-height: 1; }
.process__step h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.process__step p { color: rgba(237,231,214,.72); font-size: var(--fs-sm); }
@media (min-width: 640px) { .process__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
	.process__list { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.process__step:not(:last-child)::after {
		content: ""; position: absolute; top: 52px; left: -21px; width: 22px; height: 2px;
		background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 8px);
	}
}

/* ---------- Benefits ---------- */
.benefits { padding-block: clamp(40px, 6vw, 72px); }
.benefits__list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.benefit { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); }
.benefit__ico { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--gold-soft); color: var(--brown); flex-shrink: 0; }
.benefit b { display: block; color: var(--green-deep); }
.benefit small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.7; }
@media (min-width: 640px) { .benefits__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .benefits__list { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---------- Tabs / Natural ---------- */
.tabs__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px calc(var(--gutter) * -1) 20px; padding: 4px var(--gutter); }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--cream); font-weight: 700; color: var(--ink-2); transition: all var(--t); }
.tabs__tab .ico { width: 20px; height: 20px; color: var(--gold); }
.tabs__tab[aria-selected="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.tabs__tab[aria-selected="true"] .ico { color: var(--gold-light); }
.tabs__panel { animation: fadeUp .5s var(--ease) both; }
.natural__panel { display: grid; gap: 16px; }
.natural__intro { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-lg); color: #F5EDD8; background: var(--green-deep) url("../img/pattern.svg") 0 0/120px; }
.natural__intro--honey { background-color: #6E4A12; }
.natural__intro--syrup { background-color: var(--brown); }
.natural__intro h3 { color: #fff; font-size: var(--fs-xl); }
.natural__intro p { color: rgba(245,237,216,.8); font-size: var(--fs-sm); }
.natural__intro .btn { align-self: flex-start; margin-top: auto; }
.natural__ico { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--gold-light); }
.natural__ico .ico { width: 30px; height: 30px; }
@media (min-width: 1024px) { .natural__panel { grid-template-columns: 300px 1fr; gap: 20px; } }

/* ---------- Reviews ---------- */
.reviews__list { display: grid; gap: 16px; }
@media (min-width: 768px) { .reviews__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reviews__list { grid-template-columns: repeat(4, 1fr); } }
.review { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.review__q { position: absolute; top: 18px; left: 18px; width: 34px; height: 34px; color: var(--gold-soft); stroke-width: 2; }
.review__stars { display: flex; gap: 2px; }
.review__stars .ico { width: 18px; height: 18px; color: var(--line-2); }
.review__stars .ico.on { color: var(--gold); fill: var(--gold); }
.review__text { color: var(--ink-2); font-size: var(--fs-sm); line-height: 2; flex: 1; }
.review__who { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.review__who .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-weight: 900; flex-shrink: 0; }
.review__who b { display: block; font-size: var(--fs-sm); color: var(--green-deep); }
.review__who small { font-size: var(--fs-xs); color: var(--muted); }
.review__who small a:hover { color: var(--green); }
.review__ver { display: inline-flex; align-items: center; gap: 2px; color: var(--ok); font-weight: 700; }
.review__ver .ico { width: 14px; height: 14px; }