/* Front-end styles — eSkyCity Patient Satisfaction section. */

.ec-patsat {
	/* Tight top padding so the charts sit close under the page heading (h2),
	   matching the original charts (~40px heading→circle on Fuller); no bottom
	   padding — the page-builder container below supplies that. Side padding is
	   kept for narrow viewports. */
	padding: 1.5rem 1rem 0;
}

.ec-patsat__title {
	margin: 0 0 2rem;
	text-align: center;
}

/* --- Radial charts --------------------------------------------------- */

.ec-patsat__charts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	/* A small column gap keeps a constant ~16px gap between the captions at every
	   3-across width (≈ the original charts' ~12px), instead of the captions
	   touching when the columns narrow. Row gap applies only when wrapping. */
	gap: 2rem 1rem;
}

.ec-patsat__chart {
	/* Equal columns that fill the row (3 across → thirds), mirroring the original
	   charts' full-width distribution rather than a centered cluster. min-width
	   matches the circle so the row stays 3-across down to the 768px breakpoint
	   (a larger value would force an awkward 2+1 wrap once the column gap is added). */
	flex: 1 1 0;
	max-width: 33.333%;
	min-width: 200px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ec-patsat__radial {
	width: 100%;
	max-width: 200px;
	height: auto;
	display: block;
}

/* Chart circles match the original charts' footprint: a 235px box with 18px of
   padding (border-box), which keeps the painted ring at ~170px (≈ the original's
   174px) while giving each circle the same air around it — this also brings the
   circle-to-circle spacing in line with the original (~190px gap on desktop).
   Scoped to the charts so the smaller inline SMI circle is unaffected. */
.ec-patsat__chart .ec-patsat__radial {
	max-width: 235px;
	padding: 18px;
	box-sizing: border-box;
}

.ec-patsat__track {
	fill: none;
	stroke-width: 10;
	opacity: 0.2;
	stroke-linecap: butt;
}

.ec-patsat__fill {
	fill: none;
	stroke-width: 10;
	stroke-linecap: butt;
	transition: stroke-dashoffset 1.2s ease-out;
}

/* Font size/weight/fill are set as SVG attributes inline; keep it horizontal
   regardless of any inherited theme transform. */
.ec-patsat__pct-text {
	writing-mode: horizontal-tb;
}

.ec-patsat__measure {
	margin-top: 0.85rem;
	line-height: 1.4;
	/* Color and font-size are left to the theme by default (the Appearance
	   settings can override them via an inline style on the element). */
	color: inherit;
}

/* --- Statistically Meaningful Improvement (circle + copy) ------------- */

/* Grid (not flex) so the title, circle, and copy are independent items that can
   reflow per breakpoint: circle vertically centered beside the text on desktop,
   title-above-circle in a single column on mobile. */
.ec-patsat__improvement {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"chart title"
		"chart copy";
	align-items: center;
	column-gap: 1.5rem;
	row-gap: 0.35rem;
	max-width: 760px;
	margin: 2.5rem auto 0;
}

.ec-patsat__improvement-chart {
	grid-area: chart;
	width: 160px;
	max-width: 40vw;
}

.ec-patsat__improvement-chart .ec-patsat__radial {
	max-width: 160px;
}

.ec-patsat .ec-patsat__improvement-title {
	grid-area: title;
	/* Stick to the bottom of the title row and the top of the copy row so the
	   two stay tight together (and centered against the circle) even if the
	   circle is taller than the combined text. */
	align-self: end;
	/* Only the margin is forced — font-size, line-height, weight, and color are
	   left to inherit the theme's heading styling. !important is required because
	   Avada applies heading margins via a high-specificity selector
	   (`body:not(.home) .fusion-column-wrapper .fusion-text h3`, 0-3-2) that
	   otherwise wins; those theme margins inflated the text block upward and left
	   the circle looking top-aligned instead of vertically centered. */
	margin: 0 !important;
}

.ec-patsat .ec-patsat__improvement-copy {
	grid-area: copy;
	align-self: start;
	margin: 0;
	line-height: 1.5;
	/* Color and font-size are theme-driven by default; the Appearance settings
	   override them via an inline style. */
	color: inherit;
}

/* --- Legal ----------------------------------------------------------- */

/* Scoped under .ec-patsat (two classes) so the margin beats theme rules like
   `body .post-content p`, which otherwise reset the paragraph's top margin. */
.ec-patsat .ec-patsat__legal {
	width: 100%;
	/* A substantial gap (no rule) separates the disclaimer from the charts /
	   improvement block above, so it reads as a section-wide footnote. */
	margin: 4.5rem 0 0;
	font-style: italic;
	/* Light weight to match the original charts' disclaimer. */
	font-weight: 300;
	line-height: 1.6;
	/* Color and font-size are theme-driven by default; the Appearance settings
	   override them via an inline style. (Italic is structural to the footnote.) */
	color: inherit;
	text-align: center; /* default; overridden by --left / --right */
}

/* Footnote asterisk marker, kept presentational (not in the Sanity copy). */
.ec-patsat .ec-patsat__legal::before {
	content: "* ";
}

/* Scoped under .ec-patsat to match the specificity of the base
   `.ec-patsat .ec-patsat__legal` rule above; placed after it so the alignment
   from the `legal-align` shortcode attribute actually wins (otherwise the base
   `text-align: center` always overrode left/right). */
.ec-patsat .ec-patsat__legal--left {
	text-align: left;
}

.ec-patsat .ec-patsat__legal--center {
	text-align: center;
}

.ec-patsat .ec-patsat__legal--right {
	text-align: right;
}

/* --- Responsive ------------------------------------------------------ */

@media ( max-width: 768px ) {
	.ec-patsat__chart {
		flex-basis: 100%;
		max-width: 100%;
	}

	/* Single column: title on top so it's clear what the circle refers to,
	   then the circle, then the copy. Collapsing to one column also removes the
	   old flex-basis height that left a large gap below the block. The larger
	   row-gap adds breathing room above and below the circle, and the bottom
	   margin keeps the block from feeling cramped now that the section has no
	   bottom padding. */
	.ec-patsat__improvement {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"chart"
			"copy";
		justify-items: center;
		text-align: center;
		row-gap: 1.25rem;
		/* More air above the heading so it separates from the last chart
		   caption; no bottom margin — the disclaimer's reduced top margin below
		   sets the gap under the block (Trey QA, Sep 2026). */
		margin: 3.5rem auto 0;
	}

	/* The desktop 4.5rem gap left the stacked SMI block floating far above
	   the disclaimer. Only when the SMI block precedes it — after the charts
	   alone the desktop gap still applies. */
	.ec-patsat .ec-patsat__improvement + .ec-patsat__legal {
		margin-top: 2.5rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ec-patsat__fill {
		transition: none;
	}
}