/* ===== Hero ===== */
.hero {
	position: relative;
	min-height: 694px;
	color: var(--cream);
	overflow: hidden;
	isolation: isolate;
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to left, rgba(0, 16, 13, .95), rgba(0, 29, 25, .85) 50%, rgba(0, 40, 35, .7)),
		url("../images/hero-bg.jpg") 50% 0 / cover no-repeat;
	background-color: var(--green-900);
}
.hero__inner {
	display: grid;
	grid-template-columns: 442px minmax(0, 1fr);
	align-items: center;
	column-gap: 65.5px;
	width: min(var(--wrap-hero), 100% - 64px);
	margin-inline: auto;
	padding: 203px 0 85px;
	translate: var(--hero-shift, 0) 0;
}
.hero__media {
	grid-column: 1;
	grid-row: 1;
	width: 442px;
	height: 406px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--green-800);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__content {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-self: start;
	align-items: flex-start;
	padding-top: 48.7px;
}
.hero__title {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cream);
	padding-right: 6px;
}
.hero__subtitle {
	margin-top: 13.6px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--gold);
	padding-right: 5px;
}
.hero__intro {
	margin-top: 15px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--cream-300);
	padding-right: 5px;
}

.hero__stats {
	display: flex;
	gap: 30.5px;
	margin-top: 51.1px;
}
.stat {
	display: flex;
	align-items: center;
	gap: 12.5px;
	height: 88px;
	padding: 0 28px 0 0;
	border: 2px solid var(--gold);
	border-radius: 22px;
}
.stat--surgery { width: 185px; }
.stat--exp { width: 200.5px; }
.stat__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(247, 245, 238, .2);
}
.stat__icon img { width: 48px; height: 48px; }
.stat__text { display: flex; flex-direction: column; align-items: flex-start; }
.stat__num {
	font-size: 23px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--cream);
	white-space: nowrap;
}
.stat__label {
	margin-top: 3px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--cream);
	opacity: .9;
	white-space: nowrap;
}

/* ===== About ===== */
.about { padding: 150px 0 86px; }
.about__inner {
	display: grid;
	grid-template-columns: 437px minmax(0, 1fr);
	align-items: center;
	column-gap: 38px;
	width: min(var(--wrap), 100% - 32px);
	margin-inline: auto;
	translate: var(--wrap-shift, 0) 0;
}
@media (min-width: 1360px) {
	/* محتوای سکشن‌ها در طرح x 63..1383 است (۳px راست‌تر از مرکز) */
	:root { --wrap-shift: 3px; }
}
.about__media { position: relative; grid-column: 1; width: 437px; }
.about__photo {
	position: relative;
	z-index: 1;
	height: 431px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--white);
	box-shadow: 0 8px 10px -6px rgba(0, 0, 0, .1), 0 20px 25px -5px rgba(0, 0, 0, .1);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__dot { position: absolute; border-radius: 50%; }
.about__dot--a { left: -13px; top: -31px; width: 96px; height: 96px; background: color-mix(in srgb, var(--green-600) 10%, transparent); }
.about__dot--b { left: 325px; top: 347px; width: 128px; height: 128px; background: color-mix(in srgb, var(--gold) 16%, transparent); }

.about__body {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-left: 35px;
}
.about__text {
	margin-top: 44px;
	padding-right: 16px;
	font-size: 16px;
	line-height: 27px;
	word-spacing: -0.7px; /* شکست خطوط مطابق طرح */
	color: var(--ink);
}

/* ===== Tablet ===== */
@media (max-width: 1199.98px) {
	.hero__inner { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 40px; }
	.hero__media { width: 100%; height: auto; aspect-ratio: 442 / 406; }
	.hero__title { font-size: 34px; }
	.hero__subtitle { font-size: 20px; }
	.hero__stats { gap: 16px; flex-wrap: wrap; }

	.about__inner { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
	.about__media { width: 100%; }
	.about__photo { height: auto; aspect-ratio: 437 / 431; }
	.about__dot--b { left: auto; right: -16px; top: auto; bottom: -44px; }
	.about__body { padding-left: 0; }
}

/* ===== Mobile ===== */
@media (max-width: 991.98px) {
	.hero { min-height: 406px; }
	.hero__bg {
		background:
			linear-gradient(to left, rgba(0, 16, 13, .9), rgba(0, 29, 25, .85) 50%, rgba(0, 40, 35, .7)),
			url("../images/hero-bg-mobile.jpg") 50% 0 / 278.4% 113.3% no-repeat;
		background-color: var(--green-900);
	}
	.hero__inner {
		display: block;
		width: 100%;
		padding: 147px 15px 57px;
		translate: none;
	}
	.hero__media, .hero__intro { display: none; }
	.hero__content { align-items: center; padding-top: 0; text-align: center; }
	.hero__title { font-size: 23.6px; line-height: 1.6; padding: 0; }
	.hero__subtitle { margin-top: 18.4px; font-size: 14px; line-height: 1.6; padding: 0; }

	.hero__stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
		width: 100%;
		max-width: 345px;
		margin-top: 61px;
	}
	.stat { width: auto; height: 62px; padding-right: var(--icon-inset); gap: 11px; border-radius: 12px; }
	.stat--surgery { --icon-inset: 13px; }
	.stat--exp { --icon-inset: 7px; }
	.stat__icon, .stat__icon img { width: 40px; height: 40px; }
	.stat__num { font-size: 19.5px; line-height: 1.2; }
	.stat__label { margin-top: 2px; font-size: 13.5px; line-height: 1.3; }

	.about { padding: 51px 0 85px; }
	.about__inner {
		translate: none;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		max-width: 375px;
		padding-inline: 39px 33px;
	}
	.about__body { display: contents; }
	.about__inner > * { grid-column: 1; }
	.sec-title { grid-row: 1; justify-self: center; }
	.about__media { grid-row: 2; width: 100%; max-width: 303px; justify-self: center; margin-top: 34px; }
	.about__photo { height: 384px; aspect-ratio: auto; box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .1), 0 10px 15px -3px rgba(0, 0, 0, .1); }
	.about__dot--a { left: -29px; top: -32px; width: 64px; height: 64px; }
	.about__dot--b { display: none; }
	.about__text {
		grid-row: 3;
		margin-top: 26px;
		padding: 0;
		max-width: 303px;
		justify-self: center;
		font-size: 15px;
		line-height: 20.3px;
		text-align: center;
		word-spacing: -0.6px;
		color: var(--green-800);
	}
}