/* [doctor_review] — see includes/content/class-doctor-review.php. Motion: one curve, three durations; transform and opacity only. */
.dr-review { --dr-focus: 0 0 0 3px var(--color-focus-ring); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --t-press: 140ms; --t-ui: 220ms; }
/* the article body gives every p / ul / li a margin and a list its padding; this block lays itself out */
/* doubled class: a post-scoped `body.postid-N .article-content p` rule in article.css is (0,3,1) */
.article-content .dr-review.dr-review :is(p, ul, li) { margin: 0; }
.article-content .dr-review.dr-review ul { padding: 0; list-style: none; }
.dr-review {
	display: grid; gap: 0; margin-block: var(--space-4);
	--dr-bg: var(--secondary-100); --dr-line: var(--secondary-200);
	border-radius: var(--radius-card); background: var(--dr-bg); overflow: hidden;
	/* enter: fade + 8px rise, once, when scrolled into view. Transition, so it retargets cleanly. */
	transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
@media (scripting: enabled) { .dr-review:not(.is-in) { opacity: 0; transform: translateY(8px); } }

.dr-review__main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--pad-card); }

/* avatar + seal */
.dr-review__who { position: relative; width: 48px; height: 48px; }
.dr-review__photo {
	display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
	background: #fff; border: 1px solid var(--dr-line); overflow: hidden;
	color: var(--primary-700); font: 700 20px/1 var(--font-body);
}
.dr-review__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-review__seal {
	position: absolute; inset-block-end: -4px; inset-inline-start: -4px;
	display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--secondary-500); color: #fff; box-shadow: 0 0 0 3px var(--dr-bg);
}
.dr-review__seal svg { width: 16px; height: 16px; overflow: visible; }
.dr-review__seal path { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
/* the tick draws itself once, a beat after the block lands */
.dr-review__seal .tick { stroke-dasharray: 20; transition: stroke-dashoffset 420ms var(--ease-out) 380ms; }
@media (scripting: enabled) { .dr-review:not(.is-in) .dr-review__seal .tick { stroke-dashoffset: 20; } }
/* seal: pops in from .6 (never 0) with a slight overshoot, the tick draws, then one soft ring ripples out */
.dr-review__seal { transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1) 120ms, opacity 160ms ease 120ms; }
@media (scripting: enabled) { .dr-review:not(.is-in) .dr-review__seal { transform: scale(.6); opacity: 0; } }
.dr-review__seal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--secondary-500); opacity: 0; pointer-events: none; }
.dr-review.is-in .dr-review__seal::after { animation: dr-ring 700ms var(--ease-out) 640ms 1 both; }
@keyframes dr-ring { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

.dr-review__text { display: grid; gap: 2px; min-width: 0; }
.dr-review__eyebrow { margin: 0; color: var(--secondary-700); font: var(--text-subtitle); font-weight: 600; }
.dr-review__name { margin: 0; color: var(--color-heading); font: var(--text-caption); font-weight: 500; }

/* disclosure: «این تایید یعنی چه؟» */
.dr-review__toggle {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
	width: 100%; min-height: 48px; padding: 0 var(--pad-card); border: 0; border-top: 1px solid var(--secondary-300);
	background: var(--secondary-200); color: var(--neutral-dark); font: var(--text-button-s); text-align: start; cursor: pointer;
	transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease;
}
.dr-review__toggle:active { transform: scale(.985); }
.dr-review__toggle:focus-visible { outline: none; box-shadow: inset var(--dr-focus); }
.dr-review__toggle svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-ui) var(--ease-out); }
.dr-review__toggle path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dr-review__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .dr-review__toggle:hover { background: var(--secondary-300); } }

/* grid-template-rows 0fr→1fr: height animates with no JS measuring; content fades in a touch later */
.dr-review__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-ui) var(--ease-out); }
.dr-review__more.is-open { grid-template-rows: 1fr; }
.dr-review__more > div { min-height: 0; overflow: hidden; }
.dr-review__more-inner { display: grid; gap: var(--space-2); padding: var(--space-1) var(--pad-card) var(--pad-card); opacity: 0; transition: opacity 160ms ease; }
.dr-review__more.is-open .dr-review__more-inner { opacity: 1; transition-delay: 60ms; }
.dr-review__more p { margin: 0; font: var(--text-body-s); }
.dr-review__steps { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font: var(--text-body-s); }
.dr-review__steps li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-1); align-items: start; }
.dr-review__steps svg { width: 18px; height: 18px; margin-top: 6px; color: var(--secondary-500); }
.dr-review__steps path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* compact variant: [doctor_review style="compact"] — one line, no disclosure */
.dr-review--compact .dr-review__main { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.dr-review--compact .dr-review__who { width: 44px; height: 44px; }
.dr-review--compact .dr-review__photo { font-size: 15px; }
.dr-review--compact .dr-review__seal { width: 22px; height: 22px; inset-block-end: -3px; inset-inline-start: -3px; box-shadow: 0 0 0 2px var(--dr-bg); }
.dr-review--compact .dr-review__seal svg { width: 13px; height: 13px; }
.dr-review--compact .dr-review__name { font: var(--text-caption); }

@media (max-width: 680px) {
	.dr-review__main { row-gap: var(--space-0); }
}
@media (max-width: 480px) {
	.dr-review__who { width: 44px; height: 44px; }
}

/* reduced motion: keep the fades (they aid comprehension), drop movement and the draw */
@media (prefers-reduced-motion: reduce) {
	.dr-review:not(.is-in) { transform: none; }
	.dr-review:not(.is-in) .dr-review__seal { transform: none; }
	.dr-review__seal { transition: opacity 160ms ease; }
	.dr-review__seal::after { display: none; }
	.dr-review:not(.is-in) .dr-review__seal .tick { stroke-dashoffset: 0; }
	.dr-review__seal .tick { transition: none; }
	.dr-review__toggle svg { transition: none; }
	.dr-review__toggle:active { transform: none; }
	.dr-review__more { transition: none; }
}
