/**
 * Statistics Row Block Styles - Child Theme Override
 */

/* ================================
   Container & Header
   ================================ */

.statistics-row-container {
	text-align: left;
}

.statistics-row-header.section-header {
	max-width: var(--max-width-content-lg);
}

/* Keep emphasized phrases (e.g. "Phase III") from breaking mid-phrase
   when the heading wraps at narrower widths. */
.statistics-row-header.section-header .section-title strong {
	white-space: nowrap;
}

.statistics-subtitle.section-subtitle {
	font-size: var(--font-size-lead);
	max-width: 55ch;
	margin-left: 0;
}

/* Centered heading & intro variant (opt-in via the Heading & Intro Alignment
   field). Default is left-aligned above. */
.statistics-row-header--center.section-header {
	max-width: var(--max-width-content-xl);
	margin-inline: auto;
	text-align: center;
}

.statistics-row-header--center .statistics-subtitle.section-subtitle {
	max-width: 100%;
	margin-inline: auto;
}

/* Eyebrow Logo */
.statistics-eyebrow-logo {
	margin-bottom: var(--space-sm);
}

.statistics-eyebrow-logo-img {
	max-height: 48px;
	width: auto;
	display: inline-block;
}

/* ================================
   Statistics Grid
   ================================ */

.statistics-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--row-gap);
	align-items: stretch;
	justify-content: flex-start;
}

/* ================================
   Statistic Card
   Each card: metric on left, label text on right, all centered
   ================================ */

.statistics-grid .statistic-item {
	flex: 1 1 30%;
	max-width: 32%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-md);
	border-radius: var(--radius-card);
	padding: var(--space-lg);
}

.statistics-grid .statistic-metric {
	flex-shrink: 0;
	color: var(--color-primary);
	font-size: var(--font-size-h1);
	font-weight: 500;
	line-height: 1;
	margin-bottom: 0;
}

/* Match parent theme specificity (.statistic-item .statistic-metric) to override opacity: 0 */
.statistics-grid .statistic-item .statistic-metric {
	opacity: 1;
}

.statistics-grid .statistic-label {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	gap: var(--space-2xs);
	width: 100%;
}

.statistics-grid .statistic-title {
	margin-bottom: 0;
	color: var(--wp--preset--color--blue-navy);
	font-weight: var(--font-weight-medium);
}

.statistics-grid .statistic-text {}

/* Card text inherits block color when set */
section.has-text-color .statistics-grid .statistic-text {
	color: var(--color-text);
}

/* ================================
   Column Layout Variant (HCP subsite)
   Applied when any card has a description. HCP stacks fully:
   metric → title → description, all left-aligned in a column.
   Scoped to .cingal-hcp so the main/patients site can use a
   different arrangement (see below).
   ================================ */

.cingal-hcp .statistics-grid--column .statistic-item {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	row-gap: var(--space-lg);
	padding: var(--space-lg) var(--space-lg) var(--space-xl) var(--space-lg);
}

.cingal-hcp .statistics-grid--column .statistic-item .statistic-metric {
	font-size: var(--font-size-h1);
}

.cingal-hcp .statistics-grid--column .statistic-label {
	text-align: left;
	align-items: flex-start;
	row-gap: var(--space-md);
}

/* ================================
   Column Layout Variant (main/patients site)
   When a card has a description, keep the metric and title side by
   side (as in the no-description layout), but drop the description
   onto its own full-width row below both. The card becomes a
   wrapping flex row: [metric][title] on the first line, description
   spanning 100% on the next.
   ================================ */

.cingal-main .statistics-grid--column .statistic-item {
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
}

/* Dissolve the label wrapper so the metric, title, and description become
   direct flex children of the wrapping card row. */
.cingal-main .statistics-grid--column .statistic-label {
	display: contents;
}

/* Title sits beside the metric and takes only the remaining space
   (flex-basis: 0). Its text wraps to multiple lines within that column
   rather than the whole title dropping onto a new row below the metric. */
.cingal-main .statistics-grid--column .statistic-title {
	flex: 1 1 0;
	min-width: 0;
	text-align: left;
}

/* Description drops onto its own full-width row below the metric + title. */
.cingal-main .statistics-grid--column .statistic-text {
	flex: 0 0 100%;
}

/* ================================
   Single Post Override
   On single posts the content column is much narrower than a full-width
   page, so there isn't room to keep the metric and title side by side.
   The metric is flex-shrink: 0 and the title is flex: 1 1 0 with
   min-width: 0, which means the title's column can be squeezed narrower
   than its longest word - a word like "Extension" beside a wide metric
   ("100%") then spills past the card's padding.

   Rather than fight for horizontal space, give the title its own full-width
   row so the card reads metric -> title -> description. This matches the
   arrangement the HCP variant already uses at every width.

   Note both classes are compound, not descendant: tmw_child_hcp_body_class()
   adds cingal-main via body_class, so "single" and "cingal-main" land on the
   same <body> element - ".single .cingal-main" would never match.
   ================================ */

body.single.cingal-main .statistics-grid--column .statistic-item {
	align-items: flex-start;
}

body.single.cingal-main .statistics-grid--column .statistic-title {
	flex: 0 0 100%;
}

/* HCP subsite: default the column-layout cards to the blue-white gradient.
   Editors can still override per-block via the Card Background Color field
   (a real selection outputs its own has-*-background class, winning on
   source order over this default). */
body.cingal-hcp .statistics-grid--column .statistic-item:not([class*="-background"]) {
	background-image: var(--wp--preset--gradient--gradient-blue-white);
}

/* ================================
   Divided Rows Layout Variant
   Full-width stacked rows divided by a hairline, stat+caption on the
   left, description on the right. Unscoped (same on both subsites) -
   unlike the HCP/main split above, nothing here is subsite-specific.
   ================================ */

.statistics-grid--divided-rows {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
}

.statistics-grid--divided-rows .statistic-item--row {
	display: grid;
	grid-template-columns: minmax(0, 26%) minmax(0, 1fr);
	column-gap: var(--space-xl);
	align-items: start;
	width: 100%;
	max-width: 100%;
	flex: none;
	background: none;
	border-radius: 0;
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--color-border);
}

.statistics-grid--divided-rows .statistic-item--row:last-child {
	border-bottom: 0;
}

/* Dissolve the label wrapper so metric/title/text become direct grid
   children that can be placed independently (same trick already used
   by .cingal-main .statistics-grid--column .statistic-label above).
   text-align: left overrides the base "Statistic Card" rule's centered
   text - display:contents doesn't stop inheritance, so without this the
   centering set there would still cascade down to the promoted children. */
.statistics-grid--divided-rows .statistic-label {
	display: contents;
	text-align: left;
}

/* Specificity note: the parent theme's dark-bg-adaptation.css forces
   [data-section-dark-bg="true"] :is(.h1, .h2, .h3, .h4, .h5, .h6) to the
   light text color - a 2-class selector via :is(). .statistic-metric and
   .statistic-title both carry .h1/.h6 sizing classes, so a bare 2-class
   selector here ties on specificity and can lose depending on stylesheet
   load order. Prefixing with .statistics-row-block (3 classes) guarantees
   these win regardless of order. */
.statistics-row-block .statistics-grid--divided-rows .statistic-metric {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: var(--space-2xs);
	overflow-wrap: break-word;
	color: var(--color-primary);
}

.statistics-row-block .statistics-grid--divided-rows .statistic-title {
	grid-column: 1;
	grid-row: 2;
	color: var(--color-primary);
}

.statistics-grid--divided-rows .statistic-text {
	grid-column: 2;
	grid-row: 1 / span 2;
	color: var(--dark-bg-text);
}

@media (width <=640px) {
	.statistics-grid--divided-rows .statistic-item--row {
		grid-template-columns: 1fr;
		row-gap: var(--space-sm);
		padding: var(--space-md) 0;
	}

	.statistics-grid--divided-rows .statistic-title {
		grid-column: 1;
		grid-row: 2;
	}

	.statistics-grid--divided-rows .statistic-text {
		grid-column: 1;
		grid-row: 3;
	}
}

/* ================================
   Card Background Image
   Optional per-block image rendered as a real <img> (with srcset) inside every
   statistic card, absolutely positioned behind the card content. It paints over
   the Card Background Color / HCP gradient default, so a chosen image still wins.
   ================================ */

.statistics-grid .statistic-item.has-card-bg-image {
	position: relative;
	overflow: hidden;
}

.statistics-grid .statistic-item.has-card-bg-image > .statistic-card-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.statistics-grid .statistic-item.has-card-bg-image > :not(.statistic-card-bg-img) {
	position: relative;
	z-index: 1;
}

/* ================================
   Max Columns Variants
   ================================ */

.statistics-grid[data-max-columns="2"] .statistic-item {
	flex: 1 1 47%;
	max-width: 49%;
}

.statistics-grid[data-max-columns="4"] .statistic-item {
	flex: 1 1 22%;
	max-width: 24%;
	min-width: 220px;
}

.statistics-grid[data-max-columns="6"] .statistic-item {
	flex: 1 1 13%;
	max-width: 15%;
	min-width: 160px;
}

/* ================================
   Intermediate Breakpoint (992px - 1150px)
   4 items at a fixed 220px min-width need ~940px (4 x 220px + 3 gaps) to
   stay on one row, but the container itself only reaches that width around
   ~1150px viewport - well above the 991px breakpoint where the fixed
   min-width would otherwise be reduced. Below that, the block's own
   left/right container padding and the tightened .statistics-grid gap
   still leave less room than the hard 220px floor demands, so the 4th
   card is forced onto its own row. Scale the same min-width down with the
   viewport in this dead zone so 4-across keeps working without waiting for
   the 991px stack breakpoint.
   ================================ */

@media (992px <= width <= 1150px) {
	.statistics-grid[data-max-columns="4"] .statistic-item {
		/* Derived from the measured container-to-viewport ratio at this
		   breakpoint's bounds (~0.85): item max width = (0.85 * 100vw - 3
		   gaps) / 4 items ~= 21vw - 15px. Kept slightly conservative
		   (rounded down) rather than solved to the exact px so a small
		   theme-settings container-width change doesn't immediately
		   reopen the gap this rule closes. */
		min-width: min(220px, calc(21vw - 15px));
	}
}

/* ================================
   Metric Size Variants
   Editor-controlled override for the large statistic number, using the
   heading-scale tokens as discrete presets. "xl" (default) needs no rule
   here — it's just the base/HCP rule above.
   ================================ */

.statistics-grid[data-metric-size="sm"] .statistic-metric,
.cingal-hcp .statistics-grid--column[data-metric-size="sm"] .statistic-item .statistic-metric {
	font-size: var(--font-size-h4);
}

.statistics-grid[data-metric-size="md"] .statistic-metric,
.cingal-hcp .statistics-grid--column[data-metric-size="md"] .statistic-item .statistic-metric {
	font-size: var(--font-size-h3);
}

.statistics-grid[data-metric-size="lg"] .statistic-metric,
.cingal-hcp .statistics-grid--column[data-metric-size="lg"] .statistic-item .statistic-metric {
	font-size: var(--font-size-h2);
}

/* ================================
   Disclaimer
   ================================ */

.statistics-disclaimer {
	padding-top: var(--space-xl);
	font-size: var(--font-size-small);
	line-height: var(--line-height-body);
}

.statistics-disclaimer p {
	margin: 0;
}

section.has-text-color .statistics-disclaimer {
	color: inherit;
}

/* ================================
   CTA Buttons
   ================================ */

.statistics-row-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-xl);
	justify-content: flex-start;
}

/* ================================
   Responsive
   ================================ */

@media (width <=991px) {
	/* The data-max-columns variants below (line ~320) carry an attribute
	   selector, which out-specifies this bare .statistics-grid .statistic-item
	   rule and would otherwise keep cards pinned to their desktop
	   flex-basis/min-width at this breakpoint (same trap documented on the
	   640px breakpoint below - fixed here too since a 4-column row's
	   220px-per-item minimum doesn't fit a mobile-landscape/tablet container,
	   forcing each card's text into an unreadably narrow squeeze). Repeat the
	   selector per variant so each one is matched on specificity. */
	.statistics-grid .statistic-item,
	.statistics-grid[data-max-columns="2"] .statistic-item,
	.statistics-grid[data-max-columns="4"] .statistic-item,
	.statistics-grid[data-max-columns="6"] .statistic-item {
		flex: 1 1 47%;
		max-width: 49%;
		min-width: 240px;
	}

	/* .statistic-item--row (Divided Rows layout) also carries the base
	   .statistic-item class, so it matches the flex-card rule above and
	   picks up its max-width: 49% / min-width: 240px — even though divided
	   rows are full-width grid rows, not flex cards, and their base rule
	   (line ~221) already sets max-width: 100%; flex: none. That base rule
	   loses here only because this media query comes later in the
	   cascade at equal specificity. Restore full width at this breakpoint;
	   min-width must also be reset or it re-imposes the same flex-basis
	   floor on an element no longer using flex sizing. */
	.statistics-grid--divided-rows .statistic-item--row {
		flex: none;
		max-width: 100%;
		min-width: 0;
	}

	.statistics-eyebrow-logo-img,
	.statistics-eyebrow-logo-img[src$=".svg"] {
		max-height: 35px;
	}
}

@media (width <=640px) {
	.statistics-grid {
		gap: var(--space-lg);
	}

	/* The data-max-columns variants below (line ~319) carry an attribute
	   selector, which out-specifies the bare .statistics-grid .statistic-item
	   rule above and would otherwise keep cards pinned to their desktop
	   width/min-width on mobile. Repeat the selector per variant so each one
	   is matched on specificity rather than relying on !important. */
	.statistics-grid .statistic-item,
	.statistics-grid[data-max-columns="2"] .statistic-item,
	.statistics-grid[data-max-columns="4"] .statistic-item,
	.statistics-grid[data-max-columns="6"] .statistic-item {
		flex: 0 0 100%;
		max-width: 100%;
		min-width: 0;
	}

	.statistics-row-ctas {
		flex-direction: column;
	}

	.statistics-row-ctas .btn {
		width: 100%;
		text-align: center;
	}
}

/* ================================
   Editor Preview
   ================================ */

.editor-styles-wrapper .statistic-metric,
.block-editor-block-preview__container .statistic-metric {
	opacity: 1 !important;
}

.editor-styles-wrapper .statistics-grid .statistic-item,
.block-editor-block-preview__container .statistics-grid .statistic-item {
	flex: 1 1 30%;
	max-width: 32%;
	min-width: 200px;
}

.editor-styles-wrapper .statistics-grid--divided-rows .statistic-item--row,
.block-editor-block-preview__container .statistics-grid--divided-rows .statistic-item--row {
	flex: none;
	max-width: 100%;
}

.editor-styles-wrapper .statistics-grid[data-max-columns="2"] .statistic-item,
.block-editor-block-preview__container .statistics-grid[data-max-columns="2"] .statistic-item {
	flex: 1 1 47%;
	max-width: 49%;
}

.editor-styles-wrapper .statistics-grid[data-max-columns="4"] .statistic-item,
.block-editor-block-preview__container .statistics-grid[data-max-columns="4"] .statistic-item {
	flex: 1 1 22%;
	max-width: 24%;
	min-width: 160px;
}

.editor-styles-wrapper .statistics-grid[data-max-columns="6"] .statistic-item,
.block-editor-block-preview__container .statistics-grid[data-max-columns="6"] .statistic-item {
	flex: 1 1 13%;
	max-width: 15%;
	min-width: 120px;
}