/**
 * Single doctor profile — hero (identity + stats + Doctor Details card),
 * sticky in-page nav, and the four content sections. Uses tokens.css +
 * components.css. The doctor-card extensions at the bottom are duplicated from
 * archive-doctor.css for the related-doctors row.
 */

html { scroll-behavior: smooth; }

/* ============================================================= *
 *  Hero
 * ============================================================= */
.ne-docprofile-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 140% at 80% 0%, rgba(21, 144, 238, 0.10), rgba(21, 144, 238, 0) 60%),
		linear-gradient(180deg, var(--ne-secondary-a10) 0%, var(--ne-neutral-100) 78%);
	border-bottom: 1px solid var(--ne-neutral-200);
}
.ne-docprofile-hero__overlay { display: none; }
.ne-docprofile-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: var(--ne-space-3xl);
	align-items: start;
	padding-block: var(--ne-space-5xl);
}
.ne-docprofile-hero__main { display: flex; gap: var(--ne-space-xl); align-items: flex-start; }
.ne-docprofile-hero__photo {
	position: relative;
	flex: 0 0 auto;
	width: 210px;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--ne-shadow-deep);
	background: var(--ne-neutral-200);
}
.ne-docprofile-hero__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ne-docprofile-hero__id { display: flex; flex-direction: column; gap: var(--ne-space-s); padding-top: var(--ne-space-xs); }
.ne-docprofile-hero__name { margin: 0; font-size: var(--ne-h4-size); line-height: var(--ne-h4-line); color: var(--ne-primary-500); }
.ne-docprofile-hero__role { margin: 0; color: var(--ne-neutral-700); font-size: var(--ne-h7-size); }
.ne-docprofile-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ne-space-xs); }
.ne-docprofile-hero__creds { color: var(--ne-neutral-800); font-size: var(--ne-b2-size); font-weight: 600; }

.ne-docprofile-hero__stats { display: flex; gap: var(--ne-space-xl); margin-top: var(--ne-space-2xs); }
.ne-docstat { display: flex; align-items: center; gap: var(--ne-space-2xs); }
.ne-docstat .ne-icon { width: 20px; height: 20px; color: var(--ne-secondary-400); }
.ne-docstat__num { font-size: var(--ne-h7-size); font-weight: 700; color: var(--ne-primary-500); }
.ne-docstat__label { font-size: var(--ne-b3-size); text-transform: uppercase; letter-spacing: .06em; color: var(--ne-neutral-700); }
.ne-docprofile-hero__id .ne-btn { align-self: flex-start; margin-top: var(--ne-space-xs); }

/* Doctor Details contact card */
.ne-docprofile-hero__contact { box-shadow: var(--ne-shadow-deep); border-color: transparent; }
.ne-docprofile-hero__contact-title { margin: 0 0 var(--ne-space-s); font-size: var(--ne-h7-size); color: var(--ne-primary-500); }
.ne-docdetail { display: flex; gap: var(--ne-space-s); padding-block: var(--ne-space-xs); }
.ne-docdetail__icon {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: var(--ne-secondary-a10); color: var(--ne-secondary-400);
}
.ne-docdetail__icon .ne-icon { width: 18px; height: 18px; }
.ne-docdetail > div { display: flex; flex-direction: column; gap: 2px; }
.ne-docdetail__label { font-size: var(--ne-b3-size); text-transform: uppercase; letter-spacing: var(--ne-h9-tracking); color: var(--ne-neutral-600); font-weight: 700; }
.ne-docdetail__value { font-size: var(--ne-h8-size); font-weight: 700; color: var(--ne-primary-500); text-decoration: none; }
a.ne-docdetail__value:hover { color: var(--ne-primary-400); }
.ne-docdetail__sub { font-size: var(--ne-b2-size); color: var(--ne-neutral-700); }
.ne-docdetail__link { font-size: var(--ne-b2-size); color: var(--ne-secondary-400); font-weight: 600; text-decoration: none; }
.ne-docdetail__link:hover { color: var(--ne-secondary-500); }
.ne-docprofile-hero__contact .ne-btn { margin-top: var(--ne-space-s); }

/* ============================================================= *
 *  Sticky in-page nav
 * ============================================================= */
.ne-docnav {
	position: sticky;
	top: var(--ne-header-h);
	z-index: 40;
	background: var(--ne-neutral-100);
	border-bottom: 1px solid var(--ne-neutral-200);
}
.ne-docnav__inner { display: flex; gap: var(--ne-space-xl); overflow-x: auto; scrollbar-width: none; }
.ne-docnav__inner::-webkit-scrollbar { display: none; }
.ne-docnav__link {
	padding: var(--ne-space-m) 0;
	border-bottom: 2px solid transparent;
	color: var(--ne-neutral-700);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	margin-bottom: -1px;
}
.ne-docnav__link:hover { color: var(--ne-primary-400); }
.ne-docnav__link.is-active { color: var(--ne-primary-400); border-bottom-color: var(--ne-primary-400); }

/* ============================================================= *
 *  Content sections
 * ============================================================= */
.ne-docbody { padding-block: var(--ne-space-4xl); }
.ne-docsection { padding-block: var(--ne-space-l); scroll-margin-top: calc(var(--ne-header-h) + 64px); }
.ne-docsection__title {
	position: relative;
	margin: 0 0 var(--ne-space-l);
	padding-left: var(--ne-space-m);
	font-size: var(--ne-h6-size);
	line-height: var(--ne-h6-line);
	color: var(--ne-primary-500);
}
.ne-docsection__title::before {
	content: "";
	position: absolute; left: 0; top: 4px; bottom: 4px;
	width: 4px; border-radius: 4px;
	background: linear-gradient(180deg, var(--ne-secondary-300), var(--ne-tertiary-300));
}
.ne-docsection__prose { color: var(--ne-neutral-800); font-size: var(--ne-b1-size); line-height: var(--ne-b1-line); max-width: 70ch; }
.ne-docsection__prose p { margin: 0 0 var(--ne-space-m); }
.ne-docsection__prose p:last-child { margin-bottom: 0; }

/* Clinical Expertise */
.ne-docexp {
	display: flex; gap: var(--ne-space-s);
	padding: var(--ne-space-l);
	border: 1px solid var(--ne-neutral-200);
	border-radius: 12px;
	background: var(--ne-neutral-100);
}
.ne-docexp__icon {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 10px;
	background: var(--ne-secondary-a10); color: var(--ne-secondary-400);
}
.ne-docexp__icon .ne-icon { width: 22px; height: 22px; }
.ne-docexp__body { display: flex; flex-direction: column; gap: var(--ne-space-2xs); }
.ne-docexp__heading { margin: 0; font-size: var(--ne-h8-size); line-height: 1.3; color: var(--ne-primary-500); }
.ne-docexp__text { margin: 0; color: var(--ne-neutral-700); font-size: var(--ne-b2-size); line-height: var(--ne-b2-line); }
.ne-docexp__procedures { list-style: none; margin: var(--ne-space-2xs) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ne-space-2xs); }

/* Qualifications */
.ne-docqual {
	display: flex; gap: var(--ne-space-s);
	padding: var(--ne-space-l);
	border: 1px solid var(--ne-neutral-200);
	border-radius: 12px;
	background: var(--ne-neutral-100);
}
.ne-docqual__icon {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 10px;
	background: var(--ne-primary-a10); color: var(--ne-primary-400);
}
.ne-docqual__icon .ne-icon { width: 22px; height: 22px; }
.ne-docqual__degree { margin: 0 0 2px; font-size: var(--ne-h8-size); color: var(--ne-primary-500); }
.ne-docqual__inst { margin: 0; color: var(--ne-neutral-700); font-size: var(--ne-b2-size); line-height: var(--ne-b2-line); }

/* Awards */
.ne-docawards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ne-space-s); }
.ne-docaward { display: flex; align-items: center; gap: var(--ne-space-s); padding-bottom: var(--ne-space-s); border-bottom: 1px solid var(--ne-neutral-200); }
.ne-docaward:last-child { border-bottom: 0; padding-bottom: 0; }
.ne-docaward__mark { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ne-tertiary-400); }
.ne-docaward__title { color: var(--ne-neutral-1000); font-size: var(--ne-b1-size); }
.ne-docaward__year { margin-left: auto; color: var(--ne-neutral-600); font-size: var(--ne-b2-size); font-weight: 600; }

/* ============================================================= *
 *  Doctor card extensions (duplicated from archive-doctor.css)
 * ============================================================= */
.ne-docmeta { list-style: none; margin: var(--ne-space-2xs) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ne-space-2xs); }
.ne-docmeta li { display: flex; align-items: center; gap: var(--ne-space-2xs); color: var(--ne-neutral-700); font-size: var(--ne-b3-size); }
.ne-docmeta .ne-icon { width: 16px; height: 16px; color: var(--ne-secondary-400); flex: 0 0 auto; }
.ne-docactions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ne-space-xs); }
.ne-docactions .ne-btn { width: 100%; padding-inline: var(--ne-space-s); }
/* .ne-card__avatar-fallback now lives in components.css — shared with the
   homepage doctor row and the doctor archive. */

/* ============================================================= *
 *  Responsive
 * ============================================================= */
@media (max-width: 1024px) {
	.ne-docprofile-hero__inner { grid-template-columns: 1fr; gap: var(--ne-space-xl); }
	.ne-docprofile-hero__contact { max-width: 460px; }
	.ne-grid--2.ne-docexpertise,
	.ne-grid--2.ne-docquals { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.ne-docprofile-hero__main { flex-direction: column; align-items: center; text-align: center; }
	.ne-docprofile-hero__photo { width: 180px; }
	.ne-docprofile-hero__tags,
	.ne-docprofile-hero__stats { justify-content: center; }
	.ne-docprofile-hero__id .ne-btn,
	.ne-docprofile-hero__id { align-items: center; }
	.ne-docprofile-hero__contact { max-width: none; }
}