/* =============================================================
   UTP Commercial Impact
   utp-commercial-impact.css

   Ported from the static prototype (UTP-testing/commercial-impact/), scoped
   under .uci and driven by the CSS custom properties below — the widget's
   Elementor controls set these per-instance via {{WRAPPER}} .uci selectors.
   ============================================================= */

.uci {
	--uci-row-gap: 50px;
	--uci-column-gap: 80px;
	--uci-content-gap: 40px;
	--uci-text-gap: 16px;
}

.uci * {
	box-sizing: border-box;
}

.uci__no-results {
	text-align: center;
	color: #999999;
}

/* ── Row 1: content + image ──────────────────────────────────── */

.uci__row--top {
	display: flex;
	align-items: center;
	gap: var(--uci-column-gap);
	margin-bottom: var(--uci-row-gap);
}

.uci__content {
	flex: 1 1 480px;

	display: flex;
	flex-direction: column;
	gap: var(--uci-content-gap);
}

.uci__media {
	flex: 1 1 500px;
}

.uci__image {
	display: block;
	width: 100%;
	height: 397px;
	object-fit: cover;
	border-radius: 4px;
}

.uci__image[hidden] {
	display: none;
}

/* ── Tabs ─────────────────────────────────────────────────────── */

.uci__tabs {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.uci__tab {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;

	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #b3b3b3;

	transition: color 0.2s ease;
}

.uci__tab:hover {
	color: #054c7f;
}

.uci__tab-underline {
	width: 100%;
	height: 3px;
	background: transparent;
	transition: background 0.2s ease;
}

.uci__tab.active {
	color: #054c7f;
}

.uci__tab.active .uci__tab-underline {
	background: #c88a12;
}

.uci__row .uci__tab{
    background-color: transparent;
    border: none;
    padding: 0;
}

.uci__row .uci__tab:hover,
.uci__row .uci__tab:active{
    background: transparent;
}

.uci__row .uci__tab:focus{
    outline:none;
	background: transparent;
}

.uci__row .uci__tab span:hover{
    color: #004B85;
}

/* ── Heading + description ───────────────────────────────────── */

.uci__text-wrap {
	position: relative;
}

.uci__text-panel[hidden] {
	display: none;
}

.uci__heading {
	margin: 0;
	color: #054c7f;
	font-size: 32px;
	font-weight: 700;
	line-height: 120%;
}

.uci__description {
	margin: var(--uci-text-gap) 0 0;
	color: #404040;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
}

/* ── Row 2: stat cards ────────────────────────────────────────── */

.uci__cards-wrap {
	position: relative;
}

.uci__cards[hidden] {
	display: none;
}

.uci__cards {
	display: flex;
	gap: 20px;
}

.uci__card {
	flex: 1 1 0;
	padding: 32px;

	display: flex;
	flex-direction: column;
	gap: 16px;

	background: #f5f2ec;
}

.uci__card-number {
	color: #054c7f;
	font-size: 44px;
	font-weight: 800;
	line-height: 100%;
}

.uci__card-title {
	color: #054c7f;
	font-size: 17px;
	font-weight: 700;
	line-height: 130%;
}

.uci__card-description {
	color: #4d4d4d;
	font-size: 14px;
	font-weight: 400;
	line-height: 150%;
}

/* ── Fade transition when switching tabs ─────────────────────── */

.uci--fade-in {
	animation: uciFadeIn 0.25s ease;
}

@keyframes uciFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* =============================================================
   RESPONSIVE
   Gaps/sizes are controlled by Elementor's own responsive controls
   (see the widget's Layout, Tabs, Image, and Cards style sections)
   at Elementor's breakpoints. These media queries just switch the
   structural stacking, which isn't exposed as a control.
   ============================================================= */

@media (max-width: 900px) {
	.uci__row--top {
		flex-direction: column-reverse;
		gap: 32px;
	}

	.uci__content,
	.uci__media {
		flex: none;
		width: 100%;
	}

	.uci__cards {
		flex-direction: column;
	}
}

@media (max-width: 560px) {
	.uci__tabs {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.uci__heading {
		font-size: 26px;
	}

	.uci__image {
		height: 260px;
	}
}