@import url('../academy-base.css');

/* ================================================================
   سوالات متداول — آکاردئون با انیمیشن نرم
   ------------------------------------------------------------
   نکتهٔ کلیدی: از max-height استفاده نمی‌کنیم چون باعث می‌شود
   محتوا «بپرد» و در پایان ناگهان جا بیفتد (همان حس بدی که قبلاً
   گزارش شده بود). به‌جای آن از تکنیک grid-rows استفاده می‌کنیم:
       grid-template-rows: 0fr  →  1fr
   که ارتفاع واقعی محتوا را بدون عدد فرضی انیمیشن می‌دهد.
   برای همین یک لایهٔ داخلی (ap-faq__answer-inner) لازم است.
   ================================================================ */

.ap-faq-page .ap-faq {
	gap: 14px;
}

/* ---------- کارت آیتم ---------- */
.ap-faq-page .ap-faq__item {
	transition:
		transform 320ms cubic-bezier(.2, .8, .2, 1),
		box-shadow 320ms cubic-bezier(.2, .8, .2, 1),
		border-color 320ms cubic-bezier(.2, .8, .2, 1);
}

.ap-faq-page .ap-faq__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(76, 42, 165, .09);
}

/* هنگام باز بودن، hover باعث جابه‌جایی نشود */
.ap-faq-page .ap-faq__item[open]:hover {
	transform: none;
	box-shadow: 0 10px 30px rgba(76, 42, 165, .10);
}

/* ---------- نوار کناری که هنگام باز شدن پر می‌شود ---------- */
.ap-faq-page .ap-faq__item {
	position: relative;
	overflow: hidden;
}

.ap-faq-page .ap-faq__item::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: var(--ap-primary);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
	pointer-events: none;
}

.ap-faq-page .ap-faq__item[open]::after {
	transform: scaleY(1);
}

/* ---------- خلاصه (سوال) ---------- */
.ap-faq-page .ap-faq__item summary {
	position: relative;
	z-index: 1;
	transition: color 260ms ease;
}

.ap-faq-page .ap-faq__item summary span {
	transition: transform 340ms cubic-bezier(.2, .8, .2, 1);
	display: inline-block;
}

.ap-faq-page .ap-faq__item[open] summary span {
	transform: translateX(-4px);
}

/* آیکن + با easing فنری به × می‌چرخد */
.ap-faq-page .ap-faq__item summary b {
	transition: transform 420ms cubic-bezier(.34, 1.4, .64, 1), color 260ms ease;
}

.ap-faq-page .ap-faq__item[open] summary b {
	transform: rotate(135deg);
	color: var(--ap-primary-strong);
}

/* ---------- پاسخ: باز/بسته شدن واقعی با grid-rows ---------- */
.ap-faq-page .ap-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 460ms cubic-bezier(.3, .8, .25, 1);
	color: var(--ap-muted);
}

.ap-faq-page .ap-faq__item[open] .ap-faq__answer {
	grid-template-rows: 1fr;
}

.ap-faq-page .ap-faq__answer-inner {
	overflow: hidden;
	min-height: 0;
	/* محتوا فقط وقتی کامل باز شد دیده می‌شود */
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 260ms ease,
		transform 340ms cubic-bezier(.2, .8, .2, 1),
		padding 460ms cubic-bezier(.3, .8, .25, 1);
	padding: 0 20px;
	line-height: 2;
}

.ap-faq-page .ap-faq__item[open] .ap-faq__answer-inner {
	opacity: 1;
	transform: translateY(0);
	padding: 2px 20px 20px;
}

/* ---------- انیمیشن ورود پله‌ای آیتم‌ها ---------- */
.ap-faq-page .ap-faq__item {
	animation: ap-faq-in 560ms both cubic-bezier(.2, .8, .2, 1);
}
.ap-faq-page .ap-faq__item:nth-child(1) { animation-delay: .04s; }
.ap-faq-page .ap-faq__item:nth-child(2) { animation-delay: .1s; }
.ap-faq-page .ap-faq__item:nth-child(3) { animation-delay: .16s; }
.ap-faq-page .ap-faq__item:nth-child(4) { animation-delay: .22s; }
.ap-faq-page .ap-faq__item:nth-child(5) { animation-delay: .28s; }
.ap-faq-page .ap-faq__item:nth-child(6) { animation-delay: .34s; }
.ap-faq-page .ap-faq__item:nth-child(7) { animation-delay: .4s; }
.ap-faq-page .ap-faq__item:nth-child(8) { animation-delay: .46s; }

@keyframes ap-faq-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- احترام به کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
	.ap-faq-page .ap-faq__item,
	.ap-faq-page .ap-faq__item::after,
	.ap-faq-page .ap-faq__item summary,
	.ap-faq-page .ap-faq__item summary span,
	.ap-faq-page .ap-faq__item summary b,
	.ap-faq-page .ap-faq__answer,
	.ap-faq-page .ap-faq__answer-inner {
		animation: none !important;
		transition: none !important;
	}

	.ap-faq-page .ap-faq__answer { grid-template-rows: 1fr; }
	.ap-faq-page .ap-faq__answer-inner {
		opacity: 1;
		transform: none;
		padding: 2px 20px 20px;
	}
}

/* ---- واکنش‌گرایی ---- */
@media (max-width: 600px) {
	.ap-faq-page .ap-faq__item { padding: 16px 16px; }
	.ap-faq-page .ap-faq__item summary { font-size: 15px; }
}