/**
 * Solutions Grid Block Styles
 *
 * Card grid for displaying solutions with background images.
 * Supports 2- and 3-column layouts (via the .cards-{count} container class).
 * Simplified from multi-column-boxed-content for solutions-specific usage.
 *
 * @package TMW_Core_Child
 * @version 1.3.0
 */

/* Section Container */
.solutions-grid {
	position: relative;
	isolation: isolate;
	padding-bottom: var(--space-xl);
}

/* Section background image: a real <img> (with srcset) inside a clipping
   wrapper that sits behind the section's content (z-index: -1 inside the
   isolated section). Clipping the wrapper rather than the section keeps the
   card hover effects unclipped. script.js adds .bg-loaded as the section
   nears the viewport, which fades the image in. */
.solutions-grid__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

/* Matches the previous background-size: 110% 95% / background-position: bottom */
.solutions-grid__bg-img {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 110%;
	max-width: none;
	height: 95%;
	object-fit: fill;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.solutions-grid.bg-loaded .solutions-grid__bg-img {
	opacity: 1;
}

/* Responsive Grid Container */
.solutions-grid .solutions-card-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	perspective: 1000px;

	--row-gap: 20px;
}

/* Section-level eyebrow — centered above the H2. Inherits the global
   .eyebrow-text treatment (uppercase, small, bold). */
.solutions-grid .solutions-grid-eyebrow {
	text-align: center;
}

.solutions-grid .section-title,
.solutions-grid .section-subtitle {
	text-align: center;
	max-width: var(--max-width-content-lg);
	margin-left: auto;
	margin-right: auto;
}

/* Card Styling */
.solutions-grid .column-card {
	position: relative;
	backdrop-filter: blur(8px);
	padding: var(--space-lg);
	border-radius: var(--radius-card);
	border: 1px solid transparent;
	box-shadow: var(--shadow-default);
	flex-grow: 1;
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base),
		background-color var(--transition-base),
		border-color var(--transition-base);
}

/* GPU acceleration optimizations - desktop only */
@media (width > 768px) and (hover: hover) and (pointer: fine) {
	.solutions-grid .column-card {
		-webkit-font-smoothing: subpixel-antialiased;
	}
}

/* Card flex sizing - default 3 columns */
.solutions-grid .column-card {
	flex: 1;
	min-width: 0;
	will-change: transform;
}

/* Two-column layout: cards fill ~half the row instead of the hardcoded 33%.
   Desktop only — tablet (<= 991px) and mobile handle stacking separately. */
@media (width > 991px) {
	.solutions-grid .cards-2 .column-card {
		flex-basis: 48%;
		max-width: 48%;
	}
}

/* HCP subsite only (.cingal-hcp = blog ID 2): taller 2-up image cards.
   Scoped to .cingal-hcp so the patient/main site is unaffected. */
.cingal-hcp .solutions-grid .cards-2 .column-card.has-card-bg {
	min-height: 550px;
}

/* ==========================================================================
   Card Width Expansion on Hover
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	.solutions-grid .solutions-card-container {
		flex-wrap: nowrap;
		container-type: inline-size;
		container-name: cards-row;
	}

	/* Use flex-grow for true layout expansion - siblings shrink as hovered card grows.
	   Skipped when the block's "Grow Card on Hover?" toggle is off (.no-grow on the
	   container) — columns then stay a fixed, even width regardless of hover. */
	.solutions-grid .solutions-card-container:not(.no-grow) .column-card.has-cta:hover {
		flex-grow: 1.15;
	}

	/* Subtle lift in place of the grow effect when disabled — same -4px upward
	   shift as .carousel-card in blocks/content-card-carousel/style.css. The
	   base .column-card transition (line ~60) already animates `transform`. */
	.solutions-grid .solutions-card-container.no-grow .column-card.has-cta:hover {
		transform: translateY(-4px);
	}
}

/* Lock text width relative to container to prevent re-wrapping during the
   hover flex-grow animation. Width is per-column-count so text keeps its wrap
   points even as the card widens: 3-up ≈ 32cqi, 2-up ≈ 48cqi. */
@media (hover: hover) and (pointer: fine) and (width >= 1200px) {
	.solutions-grid .cards-3 .column-card.has-card-bg .column-title,
	.solutions-grid .cards-3 .column-card.has-card-bg .column-content {
		width: calc(32cqi - var(--space-lg) * 2);
		min-width: calc(32cqi - var(--space-lg) * 2);
	}

	.solutions-grid .cards-2 .column-card.has-card-bg .column-title,
	.solutions-grid .cards-2 .column-card.has-card-bg .column-content {
		width: calc(48cqi - var(--space-lg) * 2);
		min-width: calc(48cqi - var(--space-lg) * 2);
	}
}

/* Hover effects for cards with CTAs (non-background-image cards) */
.solutions-grid .column-card.has-cta:not(.has-card-bg):hover,
.solutions-grid .column-card.has-cta:not(.has-card-bg):has(:focus-visible) {
	background-color: rgb(255 255 255 / 96%);
	transform: scale(var(--card-hover-scale, 1.05)) translateZ(0);
}

/* ==========================================================================
   Clickable Cards - Visual indicator for JS-powered card links
   ========================================================================== */

/* Note: Card click handling is done via JavaScript because the .btn-arrow
   has transform: translateY() for hover animation, which creates a containing
   block that prevents CSS stretched link pattern from working. */

.solutions-grid .column-card.has-cta {
	cursor: pointer;
}

/* Focus visible state for keyboard navigation on clickable cards */
.solutions-grid .column-card.has-cta:focus {
	outline: none;
}

.solutions-grid .column-card.has-cta:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: var(--outline-offset);
	box-shadow: var(--shadow-focus);
}

/* Focus visible for cards with background images - use white outline for contrast */
.solutions-grid .column-card.has-card-bg:focus-visible {
	outline-color: var(--color-white);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 30%);
}

/* ==========================================================================
   Card Background Image
   ========================================================================== */

/* Border is reset to 0 here. The base .column-card sets a 1px border whose
   declared colour is transparent but which resolves to an opaque grey on the
   rendered page (measured rgb(91, 103, 112)); with no border, the background
   <img> and the ::before overlay clip to exactly the same rounded box. */
.solutions-grid .column-card.has-card-bg {
	position: relative;
	overflow: hidden;
	border: 0;
	min-height: 480px;
	justify-content: flex-end;
	padding: var(--space-md) var(--space-lg);
}

/* Two-column layout: wider cards read better a bit shorter, with extra bottom
   padding to keep the bottom-anchored text off the card edge. Desktop only —
   matches the 48% width scope; tablet/mobile keep the default sizing. */
@media (width > 991px) {
	.solutions-grid .cards-2 .column-card.has-card-bg {
		min-height: 380px;
		padding-bottom: var(--space-xl);
	}
}

/* Card background image: real <img> (with srcset) filling the card behind the overlay */
.solutions-grid .column-card-bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

/* Gradient overlay for text readability.
   inset: 0 + inherited radius so the overlay clips to exactly the same rounded
   box as the card's background image (see the border: 0 note above). */
.solutions-grid .column-card.has-card-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--wp--preset--gradient--gradient-overlay);
	z-index: 1;
	pointer-events: none;
}

/* Ensure card content appears above overlay (the background image stays beneath it) */
.solutions-grid .column-card.has-card-bg > :not(.column-card-bg-image) {
	position: relative;
	z-index: 2;
}

.solutions-grid .column-card.has-card-bg > .column-card-icon {
	position: absolute;
}

/* Title styling - white, at bottom */
.solutions-grid .column-card.has-card-bg .column-title {
	margin-top: auto;
	color: var(--color-white);
	text-shadow: 0 2px 4px rgb(0 0 0 / 30%);
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
	margin-bottom: var(--space-md);
}

/* Titles on step-number cards size to their own text.
   This rule previously reserved a fixed multi-line title box so descriptions
   would start at the same y-position across a row. That reservation was
   inert from the day it was written: `calc(2 * var(--line-height-heading) * 1em)`
   multiplied an em value by another em, producing an invalid two-unit calc()
   that browsers dropped to `auto`. Correcting the math (and simultaneously
   raising it 2 lines → 3) made it apply for the first time, which forced
   ~124px of box around ~37px single-line titles and opened a visible gap
   above each description.
   Step-number cards are used only where every title is a single line, so the
   reservation has no alignment work to do and only creates dead space. If a
   title ever wraps and descriptions need re-aligning, reserve the real number
   of lines — `calc(2 * var(--line-height-heading))`, no trailing `* 1em` —
   rather than restoring a 3-line box. */
.solutions-grid .column-card.has-card-bg.has-step-number .column-title {
	display: flex;
	align-items: flex-start;
}

/* Editor preview: ensure white title on background image cards.
   Specificity is boosted with .sg-card-title.h4 (and -webkit-text-fill-color is
   set) so this beats the base ACF-heading color rules in admin/editor-styles.css,
   which color block headings var(--blue-dark)/inherit at up to (0,6,0)!important
   because the solutions-grid card classes aren't in their card-exclusion :not() lists. */
.editor-styles-wrapper .solutions-grid .column-card.has-card-bg .column-title.sg-card-title.h4 {
	color: var(--color-white) !important;
	-webkit-text-fill-color: var(--color-white) !important;
}

/* Description styling */
.solutions-grid .column-card.has-card-bg .column-content {
	color: rgb(255 255 255 / 90%);
	margin-bottom: 0;
	flex-grow: 0;
	text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Editor preview: ensure white content on background image cards */
.editor-styles-wrapper .solutions-grid .column-card.has-card-bg .column-content {
	color: rgb(255 255 255 / 90%) !important;
}

/* Blockquotes on background-image cards.
   The global blockquote rule in frontend-child.css paints text with a
   background-clipped gradient plus -webkit-text-fill-color: transparent. That
   reads fine on white, but these cards sit on a dark blue image, leaving green
   text on blue — effectively unreadable. The global dark reset can't catch this
   because it keys off [data-dark-bg]/[data-section-dark-bg], and the darkness
   here comes from the card's own background image, not a section setting.
   So undo the gradient fill and follow the card's white-text convention. */
.solutions-grid .column-card.has-card-bg blockquote,
.editor-styles-wrapper .solutions-grid .column-card.has-card-bg blockquote {
	background: none;
	-webkit-text-fill-color: var(--color-white);
	color: var(--color-white);
	text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
	border-image-source: none;
	border-left-color: var(--color-white);
	border-left-width: 2px;
}

/* The global rule paints the gradient on the blockquote's child <p>, so the <p>
   needs `background: none` here too — not just a fill-color reset. Without it the
   gradient keeps painting and the white fill below never shows. */
.solutions-grid .column-card.has-card-bg blockquote p,
.editor-styles-wrapper .solutions-grid .column-card.has-card-bg blockquote p {
	background: none;
	-webkit-text-fill-color: var(--color-white);
	color: var(--color-white);
}

/* Arrow link - hidden by default, fades up on hover */
.solutions-grid .column-card.has-card-bg .btn-arrow {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
		transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
	pointer-events: none;
	margin-top: var(--space-xs);
	white-space: normal;
	min-height: 3em;
	display: flex;
	align-items: center;
	color: var(--color-white);
	text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
	line-height: 1.2em;
}

/* Arrow icon styling */
.solutions-grid .column-card.has-card-bg .btn-arrow svg {
	filter: brightness(0) invert(1);
}

/* Hide underline on background image cards */
.solutions-grid .column-card.has-card-bg .btn-arrow::before {
	display: none;
}

/* ==========================================================================
   Card Hover Effects - Blue Overlay
   ========================================================================== */

.stagger-animate.solutions-grid .column-card.has-card-bg {
	transition:
		box-shadow 1s ease,
		flex-grow 0.5s ease,
		transform var(--transition-base);
	transition-delay: 0s;
}

.solutions-grid .column-card.has-card-bg::before {
	transition: opacity 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
	/* Gradient overlay intensifies on hover - only when card has a CTA */
	.solutions-grid .column-card.has-card-bg.has-cta:hover::before {
		opacity: 1;
	}

	/* Arrow link fades up into place on hover */
	.solutions-grid .column-card.has-card-bg.has-cta:hover .btn-arrow {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Shift the whole text group up to make room for the CTA fading in on
	   hover. The step-number badge MUST be in this list on the eyebrow/no-
	   step-number anchor paths, where it (or the eyebrow) still carries
	   `margin-top: auto` as the bottom-anchor for the group — if the text
	   below it shifts up and the badge doesn't, the title slides underneath
	   the badge. Moving all four together keeps the group's internal
	   spacing intact.

	   Excluded when the "Show Links by Default" toggle (.always-show-cta) is
	   on: the CTA already has permanent, reserved layout space in that case
	   (see .always-show-cta rules below), so there's nothing to "make room"
	   for — this shift would just move the text without the card lifting to
	   match, reading as broken rather than as a hover effect. */
	.solutions-grid .solutions-card-container:not(.always-show-cta) .column-card.has-card-bg.has-cta:hover .sg-card-step-number,
	.solutions-grid .solutions-card-container:not(.always-show-cta) .column-card.has-card-bg.has-cta:hover .sg-card-eyebrow,
	.solutions-grid .solutions-card-container:not(.always-show-cta) .column-card.has-card-bg.has-cta:hover .column-title,
	.solutions-grid .solutions-card-container:not(.always-show-cta) .column-card.has-card-bg.has-cta:hover .column-content {
		transform: translateY(calc(var(--space-lg) * -1));
	}
}

/* "Show Links by Default" block toggle — reproduces the hover-revealed state
   permanently (no :hover required) when the editor enables it. Mirrors the
   three hover rules above exactly, so the two stay in sync if either changes. */
.solutions-grid .solutions-card-container.always-show-cta .column-card.has-card-bg.has-cta::before {
	opacity: 1;
}

.solutions-grid .solutions-card-container.always-show-cta .column-card.has-card-bg.has-cta .btn-arrow {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Unlike the hover case, the text group does NOT need to shift up here: the
   CTA link already reserves its own layout space at all times (min-height:
   3em, plus margin-top: auto anchoring it to the card bottom), so there is
   no "make room" step required. The hover version needs the shift purely as
   a visual flourish tied to the reveal transition; permanently-visible CTAs
   have nothing to reveal, so shifting badge/eyebrow/title/content up here
   only pushed the step-number badge above the card's top padding with no
   matching effect at the bottom — this is the fix for that misalignment. */

/* Card Eyebrow — sits directly above the title, matching the card text color.
   Overrides the global .eyebrow-text accent/uppercase treatment so it reads as
   part of the same text group as the title/description. */
.solutions-grid .sg-card-eyebrow {
	margin-bottom: var(--space-2xs);
	color: inherit;
}

/* On background-image cards the content group is anchored to the bottom via
   .column-title { margin-top: auto }. When an eyebrow is present it becomes the
   top of that group, so move the auto-margin anchor to the eyebrow and match the
   white card text. */
.solutions-grid .column-card.has-card-bg .sg-card-eyebrow {
	margin-top: auto;
	color: var(--color-white);
	margin-bottom: 10px;
}

.solutions-grid .column-card.has-card-bg .sg-card-eyebrow + .column-title {
	margin-top: 0;
}

.editor-styles-wrapper .solutions-grid .column-card.has-card-bg .sg-card-eyebrow {
	color: var(--color-white) !important;
}

/* ==========================================================================
   Step Numbers
   Toggle via ACF "Show Step Numbers on Cards?" field.
   Renders left-aligned above the card title (below the eyebrow if present).
   ========================================================================== */

/* White rounded-square badge with a gradient-filled number, left-aligned above
   the title. Matches the icon-text-box-grid badge, inverted (white bg / colored
   digit) so it reads against the dark card imagery. The digit uses the primary
   brand gradient via text-clip on an inner element (the outer badge keeps its
   white background, so the gradient can't live on the same element). */
.solutions-grid .sg-card-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-md);
	background: var(--color-white);
	border-radius: var(--radius-button);
	font-size: var(--font-size-lead);
	font-weight: var(--font-weight-bold);
	line-height: 1;

	/* Flex item: without this the 44px box is squashed when the card's content
	   column runs short on space. */
	flex: 0 0 auto;

	/* Matches .column-title / .column-content exactly, so the badge glides with
	   the rest of the text group on hover instead of snapping into place. */
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.solutions-grid .sg-card-step-number__value {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Top-anchor chain on background-image cards with step numbers:
   badge, eyebrow, and title pack tightly at the TOP of the card (all
   margin-top: 0) so the badge and the description's start position stay
   fixed regardless of description length. The CTA link carries the sole
   margin-top: auto (see .btn-arrow below), consuming whatever vertical
   space is left and landing at a consistent bottom position — any
   description-length difference between cards shows up as varying space
   directly above the CTA, not as a shift of the badge/title/description.
   (Previously the anchor lived on the badge instead, which bottom-packed
   the whole group as one rigid block — since only the CTA's position
   needs to tolerate variable description length, not the badge/title, the
   anchor belongs on the CTA.) */
.solutions-grid .column-card.has-card-bg.has-step-number .sg-card-step-number,
.solutions-grid .column-card.has-card-bg.has-step-number .sg-card-eyebrow,
.solutions-grid .column-card.has-card-bg.has-step-number .column-title {
	margin-top: 0;
}

.solutions-grid .column-card.has-card-bg.has-step-number .btn-arrow {
	margin-top: auto;
}

/* Content Elements */
.solutions-grid .column-title {
	margin-top: 0;
}

.solutions-grid .column-content {
	margin-bottom: var(--space-lg);
	flex-grow: 1;
}

/* Prevent Gutenberg text color from affecting headings */
section.solutions-grid.has-text-color .section-title,
section.solutions-grid.has-text-color .section-subtitle {
	color: inherit;
}

section.solutions-grid.has-text-color .column-card:not(.has-card-bg) .column-title {
	color: var(--color-heading) !important;
}

/* Bottom CTA */
.solutions-grid .section-bottom-cta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-xl);
}

/* Button positioning */
.solutions-grid .column-card .btn {
	margin-top: auto;
	align-self: flex-start;
}

.solutions-grid[data-has-bg-image="true"] .section-title {
	max-width: var(--max-width-content-md);
	text-wrap: unset;
}

/* Text shadow for section title/subtitle when background image is present */
.solutions-grid[data-has-bg-image="true"] .section-title,
.solutions-grid[data-has-bg-image="true"] .section-subtitle {
	text-shadow: 0 1px 3px rgb(255 255 255 / 80%),
		0 2px 6px rgb(255 255 255 / 60%);
}

.solutions-grid .column-card .column-content ul {
	padding-left: 0;
	margin-left: var(--space-sm) !important;
}

/* Excludes custom WYSIWYG list styles (checkmarks-list, x-list, and their
   outlined/white variants, both raw and .is-style- Gutenberg forms) - the
   class lives on the <ul>, not the <li>, and those variants already reserve
   their own padding-left for their icon-based ::before bullet in
   frontend-child.css, which must not be overridden here. This rule only
   concerns the plain/default bullet list, whose global gradient dot bullet
   (frontend-child.css, ul.wp-block-list li::before) needs padding-left room
   that this block's tighter card layout had reduced to near zero. */
.solutions-grid .column-content ul:not([class*="checkmarks-list"], [class*="x-list"]) li {
	position: relative;
	padding-left: var(--space-md);
	margin-bottom: var(--space-xs);
}

/* Card Icon - top-right corner */
.solutions-grid .column-card-icon {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	width: 70px;
	height: 70px;
	flex-shrink: 0;
	z-index: 2;
}

.solutions-grid .column-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==========================================================================
   Row Alignment Across Any-Up Cards With Step Numbers (subgrid)
   Any site, any column count, step-number cards with no CTA (:has() guard —
   CTA cards keep the flex grow-on-hover behavior). Pins badge/eyebrow/title/
   content to shared rows so they line up across the row regardless of
   description length ("The Treatment Process" on /what-to-expect/).

   Excludes .cingal-hcp .cards-2 — the dedicated 2-up subgrid below already
   owns that case with its own row scheme.

   Spacer row is FIRST (1fr, then 4 auto) so the text group stays
   bottom-anchored like the original flex layout, not pinned to the top.
   min-height lives on the CONTAINER, not the card — once a card is a
   row-spanning subgrid item its own min-height no longer constrains
   anything, so the container needs it instead (matches .has-card-bg's
   min-height: 480px).
   ========================================================================== */
@media (width > 991px) {
	@supports (grid-template-rows: subgrid) {
		.solutions-grid .solutions-card-container.has-step-number-cards:not(:has(.column-card.has-cta), .cingal-hcp .cards-2) {
			display: grid;
			grid-template-columns: repeat(var(--sg-card-count, 3), minmax(0, 1fr));
			grid-template-rows: 1fr repeat(4, auto);
			gap: 0 var(--row-gap);
			min-height: 480px;
		}

		.solutions-grid .solutions-card-container.has-step-number-cards:not(:has(.column-card.has-cta), .cingal-hcp .cards-2) .column-card {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: subgrid;
			grid-row: 1 / -1;
			grid-column: auto / span 1;
			max-width: none;
		}

		.solutions-grid .solutions-card-container.has-step-number-cards:not(:has(.column-card.has-cta), .cingal-hcp .cards-2) .sg-card-step-number {
			grid-row: 2;
			margin-top: 0;
		}

		.solutions-grid .solutions-card-container.has-step-number-cards:not(:has(.column-card.has-cta), .cingal-hcp .cards-2) .sg-card-eyebrow {
			grid-row: 3;
			margin-top: 0;
		}

		.solutions-grid .solutions-card-container.has-step-number-cards:not(:has(.column-card.has-cta), .cingal-hcp .cards-2) .column-title {
			grid-row: 4;
			margin-top: 0;
		}

		.solutions-grid .solutions-card-container.has-step-number-cards:not(:has(.column-card.has-cta), .cingal-hcp .cards-2) .column-content {
			grid-row: 5;
		}
	}
}

/* ==========================================================================
   Row Alignment Across 2-up Cards (subgrid)
   HCP subsite, 2-card grids whose cards have no CTAs (the :has() guard —
   CTA cards keep the flex grow-on-hover behavior, which grid would break).
   Aligns the text rows horizontally across both cards even when one title
   wraps to two lines and the other doesn't: eyebrow, title, and description
   each share a row, so their tops match.

   The container defines one 6-row scheme for every instance: a flexible
   spacer (bottom-anchors the text group, replacing the flex margin-top: auto
   anchors), then eyebrow / title / content, plus two extra rows used only by
   the About Cingal ".no-grow" variant below — unused auto rows collapse to
   zero height, so plain grids are unaffected by them.

   Desktop only (cards stack below 992px) with a @supports guard, so
   everything else falls back to the existing flex layout untouched.
   ========================================================================== */
@media (width > 991px) {
	@supports (grid-template-rows: subgrid) {
		/* min-height matches the .cingal-hcp cards-2 card min-height above —
		   it makes the spacer row expansion definite, keep the two in sync. */
		.cingal-hcp .solutions-grid .solutions-card-container.cards-2:not(:has(.column-card.has-cta)) {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: 1fr repeat(5, auto);

			/* Column gap only — a row gap would open space between every text
			   row (e.g. under a lead line); margins handle vertical rhythm. */
			gap: 0 var(--row-gap);
			min-height: 550px;
		}

		.cingal-hcp .solutions-grid .cards-2:not(:has(.column-card.has-cta)) .column-card {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: subgrid;
			grid-row: 1 / -1;

			/* Defeat the grid system's .col-4 { grid-column: span 4 } — each
			   card occupies exactly one of the two columns defined above. */
			grid-column: auto / span 1;
			max-width: none;
		}

		/* Pin each text element to its shared row. margin-top: auto anchors
		   are reset — the spacer row now does that job. */
		.cingal-hcp .solutions-grid .cards-2:not(:has(.column-card.has-cta)) .sg-card-eyebrow {
			grid-row: 2;
			margin-top: 0;
		}

		.cingal-hcp .solutions-grid .cards-2:not(:has(.column-card.has-cta)) .column-title {
			grid-row: 3;
			margin-top: 0;

			/* Neutralize the 48cqi hover-grow width lock (inapplicable
			   without CTAs) — a fixed cqi width overflows the 1fr column. */
			width: auto;
			min-width: 0;
		}

		.cingal-hcp .solutions-grid .cards-2:not(:has(.column-card.has-cta)) .column-content {
			grid-row: 4;
		}

		/* ------------------------------------------------------------------
		   ".no-grow" variant (About Cingal "How Cingal Works"): card content
		   structured as lead line / paragraph / blockquote. The content
		   wrapper dissolves so those three children join the shared rows
		   (4/5/6) individually — the shorter paragraph's slack lands ABOVE
		   the blockquote, putting "Onset" / "Duration" on a common baseline.
		   ------------------------------------------------------------------ */

		/* Inherited props (color, text-shadow) still flow through a
		   display: contents element. */
		.cingal-hcp .solutions-grid .cards-2.no-grow .column-card.has-card-bg .column-content {
			display: contents;
		}

		/* The dissolved wrapper's children are no longer matched by the
		   `.has-card-bg > *` stacking rule, so lift them back above the
		   card's ::before gradient overlay (z-index: 1). */
		.cingal-hcp .solutions-grid .cards-2.no-grow .column-card.has-card-bg .column-content > * {
			position: relative;
			z-index: 2;
		}

		/* Lead line (bold first paragraph): body copy starts directly under
		   it — no blank line. */
		.cingal-hcp .solutions-grid .cards-2.no-grow .column-card.has-card-bg .column-content > p:nth-of-type(1) {
			grid-row: 4;
			margin-bottom: 0;
		}

		.cingal-hcp .solutions-grid .cards-2.no-grow .column-card.has-card-bg .column-content > p:nth-of-type(2) {
			grid-row: 5;
			margin-top: 0;
		}

		/* Verdict quote: one clear line of space under the longest paragraph;
		   the shorter card's slack accumulates above this shared row. */
		.cingal-hcp .solutions-grid .cards-2.no-grow .column-card.has-card-bg .column-content > blockquote {
			grid-row: 6;
			margin-top: var(--space-lg);
			margin-bottom: 0;
		}
	}
}

/* ==========================================================================
   Responsive - Medium Browsers (768px - 1350px)
   ========================================================================== */

@media (width <= 1350px) and (width > 768px) {
	.solutions-grid .column-card.has-card-bg .column-title {
		font-size: var(--font-size-h5);
	}
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media (width <= 991px) {
	.solutions-grid .solutions-card-container {
		flex-wrap: wrap;
		gap: var(--space-sm);
	}

	.solutions-grid .column-card {
		box-shadow: none;
	}

	.solutions-grid .column-card.has-card-bg {
		padding: var(--space-md);
		min-height: 400px;
	}

	/* Show buttons on tablet (no hover capability expected) */
	.solutions-grid .column-card.has-card-bg .btn-arrow {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Shift the text group up to accommodate the always-visible button.
	   Includes the step-number badge for the same reason as the desktop hover
	   rule above — it is the group's bottom-anchor, so leaving it behind makes
	   the title collide with it. On tablet this state is permanent (no hover),
	   so the overlap would be visible at rest rather than only on interaction. */
	.solutions-grid .column-card.has-card-bg .sg-card-step-number,
	.solutions-grid .column-card.has-card-bg .sg-card-eyebrow,
	.solutions-grid .column-card.has-card-bg .column-title,
	.solutions-grid .column-card.has-card-bg .column-content {
		transform: translateY(calc(var(--space-lg) * -1));
	}

	/* Gradient overlay on tablet (matches desktop hover state) */
	.solutions-grid .column-card.has-card-bg::before {
		opacity: 1;
	}

	.solutions-grid .column-card-icon {
		height: 50px;
		width: 50px;
	}
}

/* ==========================================================================
   Responsive - Mobile (1-column layout)
   ========================================================================== */

@media (width <= 768px) {
	.cingal-hcp .solutions-grid .cards-2 .column-card.has-card-bg {
		min-height: 275px;
	}

	.solutions-grid .section-subtitle {
		margin-bottom: var(--space-xl);
	}

	.solutions-grid .column-content {
		margin-bottom: var(--space-sm);
	}

	/* Disable 3D perspective on mobile */
	.solutions-grid .solutions-card-container {
		perspective: none;
		flex-direction: column;
	}

	/* Force single column on mobile */
	.solutions-grid .column-card {
		transform: none;
		backface-visibility: visible;
		flex: 0 0 100%;
		width: 100%;
	}

	.solutions-grid .column-card .btn {
		align-self: center;
	}

	/* Mobile: Use cover for background */
	.solutions-grid[data-has-bg-image="true"].bg-loaded {
		background-size: cover;
		background-position: center;
	}

	.solutions-grid .column-card.has-card-bg {
		min-height: 220px;
	}

	/* Mobile: Disable hover effects */
	.solutions-grid .solutions-card-container:has(.column-card.has-card-bg):hover .column-card.has-card-bg,
	.solutions-grid .column-card.has-card-bg:hover {
		transform: none;
	}
}

@media (width <= 640px) {
	.solutions-grid .column-card.has-card-bg {
		padding: var(--space-xl);
	}
}