/* ==========================================================================
   TimeDoc Health – Services page templates (CCM, AWV, …)
   Shared by page-services-*.php. Only covers what the theme's style.css
   doesn't already provide. Tokens (--timedoc-blue, --sunflower, etc.)
   come from style.css :root.
   ========================================================================== */
 
/* Photos (Why / Now sections) */
.tdh-service-page .tdh-photo {
	display: block;
	width: 100%;
	max-width: 357px;
	aspect-ratio: 1;
	object-fit: cover;
}
.tdh-service-page .tdh-photo--bordered { border: 1px solid var(--fog); }
 
/* Breadcrumb — theme .breadcrumb handles bg/color; this adds the › divider + current page */
.tdh-service-page .breadcrumb {
	--bs-breadcrumb-divider: "›";
	--bs-breadcrumb-divider-color: var(--slate);
}
.tdh-service-page .breadcrumb a { text-decoration: none; }
.tdh-service-page .breadcrumb-item.active {
	color: var(--timedoc-blue);
	font-weight: 600;
}
 
/* Stat cards — theme .stat-card supplies radius, ring watermark, white text.
   Figma uses the TimeDoc gradient (same as .program-card .card-body). */
.tdh-service-page .tdh-stat {
	min-height: 220px;
	background: linear-gradient(180deg, #0584BB 8.77%, #062E47 72.63%);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.tdh-service-page .tdh-stat::after { border-color: color-mix(in srgb, var(--turquoise) 18%, transparent); }
.tdh-service-page .tdh-stat .stat-number { color: var(--white); }
.tdh-service-page .tdh-stat .stat-percent {
	margin-left: 4px;
	font-size: 28px;
	color: var(--robins-egg-blue);
}
.tdh-service-page .tdh-stat__label {
	position: relative;
	z-index: 1;
	max-width: 300px;
}
 
/* Service cards — theme .why-us-card is built for links; these aren't clickable */
.tdh-service-page .tdh-static-card { cursor: default; }
.tdh-service-page .tdh-static-card:hover { transform: none; }
.tdh-service-page .why-us-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
 
/* Theme buttons + arrow */
.tdh-service-page .tdh-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
}

/* Benefits list (AWV) — numbered 7-up row on desktop */
.tdh-service-page .tdh-benefits .eyebrow {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.tdh-service-page .tdh-benefits__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tdh-service-page .tdh-benefits__num {
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--timedoc-blue);
}
@media (min-width: 768px)  { .tdh-service-page .tdh-benefits__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tdh-service-page .tdh-benefits__list { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
 
/* Workflow infographic (AWV) */
.tdh-service-page .tdh-infographic {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4096 / 1035;
	object-fit: contain;
}
 
/* Resource cards */
.tdh-service-page .tdh-resource {
	background: var(--white);
	box-shadow: 0 4px 2px rgba(0, 0, 0, .25);
}
.tdh-service-page .tdh-resource__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--light-blue);
}
.tdh-service-page .tdh-resource__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
 
/* Final CTA */
.tdh-service-page .tdh-final-cta { padding: 100px 0; }
 
@media (max-width: 991.98px) {
	.tdh-service-page .tdh-final-cta { padding: 64px 0; }
}