/**
 * EPIC Doctors — front-end styles
 *
 * Matched to the existing WPS Team card appearance on epichospital.com so the
 * swap produces no visual change. Adjust the variables below if the brand
 * palette is ever updated — nothing else needs touching.
 */

:root {
	--epic-doc-teal:        #3c93a2;
	--epic-doc-teal-dark:   #2f7480;
	--epic-doc-text:        #1c2833;
	--epic-doc-muted:       #5d6d7e;
	--epic-doc-card-bg:     #dfe9e9;
	--epic-doc-radius:      2px;
	--epic-doc-gap:         30px;
}

/* ── Grid ──────────────────────────────────────────────────────────────── */

.epic-doctors {
	display: grid;
	gap: var(--epic-doc-gap);
	align-items: stretch;   /* every card in a row shares the tallest height */
	margin: 0 0 40px;
}

.epic-doctors--cols-1 { grid-template-columns: 1fr; }
.epic-doctors--cols-2 { grid-template-columns: repeat(2, 1fr); }
.epic-doctors--cols-3 { grid-template-columns: repeat(3, 1fr); }
.epic-doctors--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.epic-doctors--cols-3,
	.epic-doctors--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.epic-doctors { grid-template-columns: 1fr !important; }
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.epic-doctor-card {
	display: flex;
	flex-direction: column;
	background: var(--epic-doc-card-bg);
	border-top: 5px solid var(--epic-doc-teal);
	border-radius: 0 0 4px 4px;
	padding: 30px 30px 32px;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
}

.epic-doctor-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
}

/* ── Photo ─────────────────────────────────────────────────────────────── */

.epic-doctor-card__photo {
	position: relative;
	width: 158px;
	max-width: 100%;
	margin-bottom: 26px;
}

.epic-doctor-card__photo a {
	display: block;
	line-height: 0;
}

/**
 * The teal block sits behind the photograph, offset down and to the right.
 * A zero-blur box-shadow gives that without an extra element.
 */
.epic-doctor-card__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	display: block;
	box-shadow: 10px 10px 0 0 var(--epic-doc-teal);
}

/* Placeholder when no photo is set */
.epic-doctor-card__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: linear-gradient(180deg, #dfe6ea 0%, #cfd8dd 100%);
	box-shadow: 10px 10px 0 0 var(--epic-doc-teal);
	position: relative;
}

.epic-doctor-card__placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background: no-repeat center / 42% auto
		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a9b6bd'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E");
	opacity: .8;
}

/* ── Body ──────────────────────────────────────────────────────────────── */

.epic-doctor-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
}

.epic-doctor-card__name {
	margin: 0 0 14px;
	font-family: 'Josefin Sans', 'Roboto', sans-serif;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--epic-doc-teal);
	text-transform: uppercase;
	letter-spacing: .2px;
}

.epic-doctor-card__name a {
	color: inherit;
	text-decoration: none;
}

.epic-doctor-card__name a:hover {
	color: var(--epic-doc-teal-dark);
}

.epic-doctor-card__quals {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--epic-doc-text);
}

.epic-doctor-card__role {
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--epic-doc-teal);
	text-transform: uppercase;
	letter-spacing: .3px;
}

/* ── Button ────────────────────────────────────────────────────────────── */

.epic-doctor-card__btn {
	margin-top: auto;          /* pinned to the card foot, so buttons line up */
	align-self: flex-start;
	display: inline-block;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: #2b2b2b;
	border-radius: 3px;
	text-decoration: none;
	transition: background .2s ease;
}

.epic-doctor-card__btn:hover,
.epic-doctor-card__btn:focus {
	background: var(--epic-doc-teal);
	color: #fff;
}

/* ── Accessibility ─────────────────────────────────────────────────────── */

.epic-doctor-card__btn:focus-visible,
.epic-doctor-card__name a:focus-visible,
.epic-doctor-card__photo a:focus-visible {
	outline: 2px solid var(--epic-doc-teal);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.epic-doctor-card,
	.epic-doctor-card__btn {
		transition: none;
	}
	.epic-doctor-card:hover {
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════════════════ */

/**
 * SECTION BAND
 *
 * On the live site the doctors block sits on a pale full-width band, which is
 * what separates it from the section above. Reproduced here rather than in the
 * page content so all 30 specialty pages get it without edits.
 *
 * Full bleed is done with box-shadow plus clip-path, not a negative z-index —
 * a stacking context around this content would clip the fixed WhatsApp and
 * Call Now buttons.
 *
 * Set --epic-doc-band to transparent to switch the band off.
 */
.epic-doctors-wrap {
	margin-bottom: 40px;
}

/**
 * No section band — the page background shows through and the cards carry the
 * only tint. Set --epic-doc-band to a colour to bring the full-width band back;
 * it is drawn with box-shadow and clip-path rather than a negative z-index,
 * which would clip the fixed WhatsApp and Call Now buttons.
 */
.epic-doctors-wrap .epic-doctors {
	margin-bottom: 0;
	background: var(--epic-doc-band, transparent);
	box-shadow: -100vmax 0 0 var(--epic-doc-band, transparent),
	             100vmax 0 0 var(--epic-doc-band, transparent);
	clip-path: inset(0 -100vmax);
}

.epic-doctors-filter { background: none; }

.epic-doctors-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;   /* centred, as on the original listing */
	gap: 16px;
	margin: 0 0 36px;
}

.epic-doctors-filter__search { flex: 0 1 290px; min-width: 0; }
.epic-doctors-filter__select { flex: 0 1 290px; min-width: 0; }

.epic-doctors-filter__search { position: relative; }

.epic-doctors-filter__search::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	pointer-events: none;
	background: no-repeat center / contain
		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235d6d7e'%3E%3Cpath d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E");
	opacity: .6;
}

.epic-doctors-search,
.epic-doctors-specialty {
	width: 100%;
	padding: 14px 44px 14px 18px;
	font-size: 15px;
	font-family: inherit;
	color: var(--epic-doc-text, #1c2833);
	background: #fff;
	border: 1px solid #dfe4e8;
	border-radius: var(--epic-doc-radius, 2px);
	appearance: none;
	-webkit-appearance: none;
}

.epic-doctors-specialty {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235d6d7e'%3E%3Cpath d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	cursor: pointer;
}

.epic-doctors-search:focus,
.epic-doctors-specialty:focus {
	outline: none;
	border-color: var(--epic-doc-teal, #3c93a2);
	box-shadow: 0 0 0 3px rgba(60, 147, 162, .12);
}

.epic-doctors-search::placeholder { color: #9aa5ad; }

.epic-doctors__empty {
	margin: 30px 0 0;
	padding: 22px;
	background: #f6f8f9;
	border-radius: var(--epic-doc-radius, 2px);
	text-align: center;
	color: var(--epic-doc-muted, #5d6d7e);
	font-size: 15px;
}

.epic-doctor-card[hidden] { display: none !important; }

@media (max-width: 600px) {
	.epic-doctors-filter__search,
	.epic-doctors-filter__select { flex: 1 1 100%; }
}

/* ==========================================================================
   PROFILE CARD  —  [epic_doctors_<slug>_2]  /  style="profile"
   --------------------------------------------------------------------------
   For pages that target doctors rather than treatments, e.g.
   "best orthopaedic surgeons in Ahmedabad".

   Every block below is scoped to .epic-doctors--profile, so none of it can
   reach the default card used by the 184 existing pages.
   ========================================================================== */

.epic-doctors--profile {
	display: grid;
	gap: 24px;
}

.epic-doctors--profile.epic-doctors--cols-2 { grid-template-columns: repeat(2, 1fr); }
.epic-doctors--profile.epic-doctors--cols-3 { grid-template-columns: repeat(3, 1fr); }
.epic-doctors--profile.epic-doctors--cols-4 { grid-template-columns: repeat(4, 1fr); }

.epic-doctors--profile .epic-doc-pcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e3e9ea;
	border-radius: 12px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.epic-doctors--profile .epic-doc-pcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(27, 42, 46, .11);
}

.epic-doctors--profile .epic-doc-pcard__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 22px 0;
}

.epic-doctors--profile .epic-doc-pcard__photo {
	flex: none;
	width: 70px;
	height: 70px;
	border-radius: 10px;
	overflow: hidden;
	background: #eef6f7;
}

.epic-doctors--profile .epic-doc-pcard__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.epic-doctors--profile .epic-doc-pcard__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, #dfeaec, #cfe0e3);
}

.epic-doctors--profile .epic-doc-pcard__name {
	font-family: 'Cambo', Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.25;
	margin: 0;
}

.epic-doctors--profile .epic-doc-pcard__name a {
	color: #1b2a2e;
	text-decoration: none;
}

.epic-doctors--profile .epic-doc-pcard__name a:hover { color: #3c93a2; }

.epic-doctors--profile .epic-doc-pcard__role {
	margin: 3px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #3c93a2;
}

.epic-doctors--profile .epic-doc-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0 22px 22px;
}

.epic-doctors--profile .epic-doc-pcard__quals {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: #647278;
}

/* Trimmed to three lines so a row of cards stays level. The full text is
   still in the HTML — this hides it from the reader, not from Google. */
.epic-doctors--profile .epic-doc-pcard__expertise {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #3d4c51;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.epic-doctors--profile .epic-doc-pcard__badge {
	align-self: flex-start;
	margin-top: 16px;
	padding: 5px 11px;
	border-radius: 100px;
	background: #eef6f7;
	color: #2c7180;
	font-size: 11.5px;
	font-weight: 600;
}

.epic-doctors--profile .epic-doc-pcard__foot {
	margin: auto 0 0;
	padding-top: 18px;
}

.epic-doctors--profile .epic-doc-pcard__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #3c93a2;
	text-decoration: none;
}

.epic-doctors--profile .epic-doc-pcard__link:hover { color: #2c7180; }

.epic-doctors--profile .epic-doc-pcard__link svg { transition: transform .2s ease; }

.epic-doctors--profile .epic-doc-pcard:hover .epic-doc-pcard__link svg { transform: translateX(3px); }

@media (max-width: 1024px) {
	.epic-doctors--profile.epic-doctors--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.epic-doctors--profile.epic-doctors--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.epic-doctors--profile.epic-doctors--cols-2,
	.epic-doctors--profile.epic-doctors--cols-3,
	.epic-doctors--profile.epic-doctors--cols-4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {.epic-doctors--profile .epic-doc-pcard, .epic-doctors--profile .epic-doc-pcard__link svg { transition: none; }
}