/*
 * Defaults for every --st-* custom property are supplied as the second
 * argument of var() at each usage site below, NOT as a block declared here
 * on .st-section/.st-card. Elementor's per-instance Style tab overrides are
 * written to the *ancestor* .elementor-element-{id} wrapper so they can
 * cascade down via inheritance; declaring a same-named default directly on
 * a descendant element would take precedence over the inherited value at
 * that exact element regardless of the ancestor rule's specificity,
 * silently breaking every custom-property-based Style control on this
 * widget. Do not add a defaults block here.
 */

.st-section {
	background-color: var(--st-section-bg, #3d0a7a);
	padding: 60px 24px;
	box-sizing: border-box;
}

/*
 * No overflow:hidden anywhere in this widget - unlike the Customer Story
 * Carousel, this is a static grid with no slide-clipping requirement, so a
 * hovered/enlarged card's shadow/scale never needs clipping headroom tricks.
 * The .st-section padding above is sufficient room for the grid's own edge
 * cards to grow into on hover.
 */
.st-grid {
	display: grid;
	grid-template-columns: repeat(var(--st-columns, 4), 1fr);
	gap: var(--st-gap, 24px);
	max-width: 1400px;
	margin: 0 auto;
}

@media (max-width: 1024px) {
	.st-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.st-grid {
		grid-template-columns: 1fr;
	}
}

.st-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 28px;
	background-color: var(--st-card-bg, #ffffff);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(17, 17, 20, 0.08);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/*
 * Scaling up (rather than translateY) keeps the card's center fixed, so it
 * doesn't visually shift into its neighbor. A slight z-index bump stops the
 * scaled card from being rendered under its still-normal-size neighbors.
 * Copied verbatim from .ocs-card:hover in oms-customer-story-carousel.css.
 */
.st-card:hover,
.st-card:focus-visible {
	position: relative;
	z-index: 1;
	transform: scale(1.04);
	box-shadow: 0 20px 40px rgba(17, 17, 20, 0.22);
}

/*
 * Compound selectors are deliberate: this theme's global `body.orbit h3`,
 * `body.orbit p`, and `body.orbit a:not(.elementor-button-link)` resets
 * carry higher specificity than a single class here would have. Two classes
 * beats them outright regardless of the element-selector's specificity.
 * Don't simplify these back to single-class selectors.
 */
.st-card .st-card__title {
	position: relative;
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	/*
	 * !important: Elementor bakes this instance's Style-tab default
	 * (`.elementor-element-{id} .st-card__title`) into the page's own
	 * generated CSS at the same two-class specificity, loaded after this
	 * stylesheet - without !important that per-instance rule wins the
	 * source-order tie and the title falls back to its old #1a1a1a.
	 */
	color: #8017e1 !important;
}

/*
 * Right caret, same technique as `body.orbit a.cta-link::after` (Font
 * Awesome 5 Free \f105, positioned absolute with no offsets so it just
 * trails the text inline) - sized down from the button's 20px to sit as a
 * quiet accent after the bold card title instead of a full CTA glyph.
 */
.st-card .st-card__title::after {
	content: '\f105';
	display: inline-block;
	font-family: "Font Awesome 5 Free", sans-serif;
	font-size: 14px;
	position: absolute;
	opacity: 1;
	margin-left: 6px;
	/*
	 * vertical-align doesn't get it there - the icon glyph's own font metrics
	 * sit well below the bold title's true visual center. top/transform
	 * centers against the title's actual box height instead, independent of
	 * either font's baseline/x-height. `top` alone (no left/right) doesn't
	 * touch the horizontal static position, so margin-left above still holds.
	 */
	top: 50%;
	transform: translateY(-50%);
	transition: margin 0.3s;
}

.st-card:hover .st-card__title::after,
.st-card:focus-visible .st-card__title::after {
	margin-left: 10px;
}

.st-card .st-card__body {
	flex: 1 1 auto;
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: #5a5a5a;
}

.st-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.st-card__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.st-card__stat-value {
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	color: var(--st-pink, #e83e8c);
}

.st-card__stat-description {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	color: #5a5a5a;
}

.st-card__icon {
	flex: 0 0 auto;
	display: block;
	width: 40px;
	height: 40px;
	color: var(--st-pink, #e83e8c);
}

.st-card__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * The site-wide new-window icon (appended to every target="_blank" link by
 * accessibility.js) is pulled out of the card's flex column and pinned to
 * the bottom-right corner. Declared against the card, not the link text, so
 * it doesn't depend on where the footer's stat or icon ends up.
 */
.st-card .new-window-icon {
	position: absolute;
	right: 28px;
	bottom: 24px;
	padding-left: 0;
}

.st-card {
	position: relative;
}

/*
 * Compound selector is deliberate: a higher-specificity Elementor/theme rule
 * (targeting p elements inside the widget container) was overriding the
 * margin shorthand's auto values with margin-left/right: 0, leaving the text
 * itself centered (text-align survived) but the whole paragraph box pinned
 * to the left edge instead of centered. Two classes beats it outright. Don't
 * simplify this back to `.st-footer-text`.
 */
.st-section .st-footer-text {
	max-width: 900px;
	margin: 10px auto 0;
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
	color: #c9bfe0;
}

@media (max-width: 767px) {
	.st-card {
		padding: 22px;
	}
}