/*
 * PromiseCare — Provider Card Cohesion (v2, STAGING ONLY)
 * Updated 2026-05-13 based on Paul's review of v1.
 *
 * Changes from v1:
 *   - Phone link is now calm brand teal (not red coral). PCP context is
 *     scheduling, not emergency. See feedback_phone_link_color.md.
 *   - Phone icon is now an inline Lucide-style SVG injected by the template
 *     override (not a unicode glyph from CSS).
 *   - "Accepting new patients" / "Primary Care" / "Telehealth" status badges
 *     sit inside the info area below the photo, not overlaid on the photo.
 *   - New: practice-address line with a small location-pin icon, between
 *     specialty and phone.
 *
 * Palette refs:
 *   Navy   #00548B   Teal   #1E7FA9   Teal Tint  #EAF5FC
 *   Coral  #C8553D   Stone  #F7F5F2   Slate      #565656
 */

/* ---------- Grid ---------- */
ul.wpmd-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px;
	padding: 0;
	margin: 28px 0;
	list-style: none;
}

/* ---------- Card shell ---------- */
.wpmd-card.wpmd-provider-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #E6E9EE;
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
	margin: 0;
	transition: box-shadow .18s ease, transform .18s ease;
	list-style: none;
}
.wpmd-card.wpmd-provider-card:hover,
.wpmd-card.wpmd-provider-card:focus-within {
	box-shadow: 0 4px 14px rgba(0, 84, 139, 0.10);
	transform: translateY(-1px);
}

/* ---------- Photo ---------- */
.wpmd-card__image {
	margin: 0;
	background: #F7F5F2;
	aspect-ratio: 295 / 340;
	overflow: hidden;
}
.wpmd-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Title (provider name) ----------
 * Selector boosted to .wpmd-card.wpmd-provider-card h3.wpmd-card__title to win
 * against whatever was eating my single-class rule (some upstream h3 rule we
 * haven't pinpointed yet). !important kept off so this is still debuggable.
 */
.wpmd-card.wpmd-provider-card h3.wpmd-card__title {
	margin: 16px 28px 4px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
.wpmd-card__title a.wpmd-card__link {
	color: #00548B;
	text-decoration: none;
}
.wpmd-card__title a.wpmd-card__link:hover,
.wpmd-card__title a.wpmd-card__link:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Specialty (meta) ---------- */
.wpmd-card__meta {
	margin: 0 28px 8px;
	font-size: 14px;
	color: #565656;
	line-height: 1.4;
}

/* ---------- Practice cities (v3) ----------
 * Multiple practice cities are linked, dot-separated, and wrap naturally.
 * Each city links to the corresponding location detail page.
 */
.wpmd-card__address {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0 28px 10px;
	font-size: 13px;
	color: #565656;
	line-height: 1.5;
}
.wpmd-card__address-icon {
	flex-shrink: 0;
	margin-top: 3px;
	color: #1E7FA9;
}
.wpmd-card__cities {
	display: inline;
	color: #565656;
}
.wpmd-card__city-sep {
	color: #B3ADAB;
	margin: 0 2px;
}

/* ---------- Phone ---------- */
.wpmd-card__phone {
	margin: 0 28px 12px;
	font-size: 14px;
	font-weight: 500;
}
.wpmd-card__phone a {
	color: #00548B;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.wpmd-card__phone-icon {
	flex-shrink: 0;
	color: #1E7FA9;
}
.wpmd-card__phone a:hover,
.wpmd-card__phone a:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Network badges (medical groups) ---------- */
.wpmd-card__networks {
	margin: 0 28px 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wpmd-badge.wpmd-badge--network {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	background: #EAF5FC;
	color: #00548B;
	padding: 4px 10px;
	border-radius: 999px;
	text-decoration: none;
	line-height: 1.4;
	border: 1px solid transparent;
}
.wpmd-badge.wpmd-badge--network:hover,
.wpmd-badge.wpmd-badge--network:focus {
	background: #D9EDFA;
	border-color: #B6DDF6;
}

/* ---------- Status badges (in-flow now, not overlaid) ---------- */
.wpmd-status-badges {
	margin: 0 28px 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wpmd-badge.wpmd-badge--accepting {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #EAF3DE;
	color: #1A5A33;
	border: 1px solid #97C459;
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.4;
}
.wpmd-badge.wpmd-badge--accepting::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #1A5A33;
	border-radius: 50%;
	flex-shrink: 0;
}
.wpmd-badge.wpmd-badge--pcp {
	display: inline-flex;
	align-items: center;
	background: #EAF5FC;
	color: #00548B;
	border: 1px solid #B6DDF6;
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.4;
}
.wpmd-badge.wpmd-badge--telehealth {
	display: inline-flex;
	align-items: center;
	background: #F7F5F2;
	color: #565656;
	border: 1px solid #B3ADAB;
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.4;
}

/* ---------- Hub variant (find-a-provider) ---------- */
.wpmd-hub__grid .wpmd-card.wpmd-provider-card {
	/* Card-level styles above apply here too; the hub container handles its own grid layout. */
}