/* The doctor card (inc/doctor-card.php) — one design wherever a doctor is listed.
   Square photo, name, role, a few lines, Learn more + Book now. Not scoped to a template
   wrapper, so it is identical on plugin pages and theme pages (the homepage). */

.dcard{
	position:relative;display:flex;flex-direction:column;gap:6px;height:100%;
	background:#FFFFFF;border:1px solid var(--grey-100,#ECEEF0);border-radius:var(--radius-md,16px);
	padding:14px 14px 16px;box-shadow:var(--shadow-xs,0 1px 2px rgba(28,30,33,.06));
	color:inherit;text-decoration:none;text-align:left;
	transition:transform var(--dur-base,.2s) var(--ease-out,ease),box-shadow var(--dur-base,.2s)
}
.dcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md,0 8px 24px rgba(28,30,33,.09));text-decoration:none}
a.dcard:focus-visible,.dcard-split:has(.dcard-title-link:focus-visible){outline:3px solid var(--brand-green,#618465);outline-offset:3px}

/* Square, always: a portrait is a face, and faces sit in the top half of the frame. */
.dcard-img{display:block;aspect-ratio:1/1;width:100%;border-radius:var(--radius-sm,10px);overflow:hidden;background:var(--green-50,#EEF3EE);margin-bottom:6px}
.dcard-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:inherit}
.dcard-initials{display:grid;place-items:center;width:100%;height:100%;font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--green-600,#3D5641)}

.dcard-name{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;line-height:1.25;margin:0;color:var(--grey-900,#1C1E21)}
.dcard-title-link{color:inherit;text-decoration:none}
.dcard-title-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.dcard-title-link:focus-visible{outline:none}

/* Two lines at most: some role titles run to four and pushed the buttons out of line. */
.dcard-role{
	font-size:.8125rem;font-weight:600;line-height:1.4;color:var(--green-600,#3D5641);margin:0;
	display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.dcard-bio{
	font-size:.875rem;line-height:1.55;color:var(--grey-600,#555A61);margin:0;overflow-wrap:anywhere;
	display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden
}
.dcard-skills{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.dcard-skills li{font-size:.72rem;line-height:1.3;padding:3px 8px;border-radius:var(--radius-pill,999px);background:var(--brand-sun,#FCD841);color:var(--grey-900,#1C1E21);font-weight:600;margin:0}

.dcard-actions{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.dcard-go{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem;color:var(--green-600,#3D5641)}
.dcard-go svg{width:14px;height:14px}
.dcard:hover .dcard-go{text-decoration:underline}
.dcard-book{
	position:relative;z-index:1;display:inline-flex;align-items:center;
	padding:7px 14px;border-radius:999px;background:var(--brand-sun,#FCD841);color:var(--grey-900,#1C1E21);
	font-weight:700;font-size:.82rem;text-decoration:none;transition:filter var(--dur-base,.2s) var(--ease-out,ease)
}
.dcard-book:hover{filter:brightness(.94);text-decoration:none}
.dcard-book:focus-visible{outline:3px solid var(--brand-green,#618465);outline-offset:2px}

/* Phone directory (Find a Doctor): one doctor per row, photo beside the words, so the list
   reads like a list instead of two columns of one-word lines. Still a square photo. */
@media(max-width:759px){
	.dir-grid .dcard{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;row-gap:4px;align-content:start;padding:12px}
	.dir-grid .dcard > *{grid-column:2}
	.dir-grid .dcard-img{grid-column:1;grid-row:1 / span 5;margin:0;align-self:start}
	.dir-grid .dcard-bio{-webkit-line-clamp:3;line-clamp:3;font-size:.8125rem}
	.dir-grid .dcard-actions{padding-top:6px}
}

@media(prefers-reduced-motion:reduce){.dcard{transition:none}.dcard:hover{transform:none}}