/* Process Rows for Elementor (WoodMart) — v1.0.0
   Every colour / size below is a CSS variable that the Elementor controls override. */

.wpr-list {
	--wpr-row-h: 160px;
	--wpr-gap: 52px;
	--wpr-border: #ddd;
	--wpr-bw: 1px;
	--wpr-fill: #0c97ca;
	--wpr-dur: 400ms;

	--wpr-ibox: 60px;
	--wpr-isize: 30px;
	--wpr-irad: 8px;
	--wpr-ibg: #d9f3fc;
	--wpr-ic: #0b4f8a;
	--wpr-ibg-h: #fff;
	--wpr-ic-h: #0b4f8a;

	--wpr-title: #000;
	--wpr-title-h: #fff;
	--wpr-desc: #6f6f6f;
	--wpr-desc-h: #fff;
	--wpr-num: #ccc;
	--wpr-num-h: #fff;
	--wpr-num-m: #a9d6e8;

	--wpr-img-w: 320px;
	--wpr-img-h: 192px;
	--wpr-img-r: 208px;
	--wpr-img-rad: 16px;

	--wpr-m-bg: #f3fafd;
	--wpr-m-border: #d9eef7;
	--wpr-m-rad: 18px;
	--wpr-m-space: 14px;
	--wpr-m-img-h: 190px;
	--wpr-m-img-rad: 12px;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	font-family: "Arimo", Arial, Helvetica, sans-serif;
}

.wpr-list *,
.wpr-list *::before,
.wpr-list *::after {
	box-sizing: border-box;
}

/* ---------------- ROW (desktop / tablet) ---------------- */
.wpr-row {
	position: relative;
	display: grid;
	grid-template-columns: var(--wpr-ibox) minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--wpr-gap);
	min-height: var(--wpr-row-h);
	padding: 0 100px 0 56px;
	border-top: var(--wpr-bw) solid var(--wpr-border);
	z-index: 1;
}

.wpr-row:last-child {
	border-bottom: var(--wpr-bw) solid var(--wpr-border);
}

/* The blue fill — fades in on hover */
.wpr-row::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wpr-fill);
	opacity: 0;
	transition: opacity var(--wpr-dur) ease;
	z-index: 0;
	pointer-events: none;
}

.wpr-row > * {
	position: relative;
	z-index: 1;
}

/* Icon */
.wpr-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wpr-ibox);
	height: var(--wpr-ibox);
	border-radius: var(--wpr-irad);
	background: var(--wpr-ibg);
	color: var(--wpr-ic);
	font-size: var(--wpr-isize);
	line-height: 1;
	transition: background-color var(--wpr-dur) ease, color var(--wpr-dur) ease;
}

.wpr-icon svg,
.wpr-icon img {
	display: block;
	width: var(--wpr-isize);
	height: var(--wpr-isize);
	max-width: none;
}

.wpr-icon i {
	font-size: var(--wpr-isize);
	line-height: 1;
}

.wpr-recolor .wpr-icon svg,
.wpr-recolor .wpr-icon svg path,
.wpr-recolor .wpr-icon svg circle,
.wpr-recolor .wpr-icon svg rect,
.wpr-recolor .wpr-icon svg polygon,
.wpr-recolor .wpr-icon svg ellipse,
.wpr-recolor .wpr-icon svg g {
	fill: currentColor;
}

/* Text */
.wpr-content {
	min-width: 0;
}

.wpr-title {
	margin: 0 0 10px;
	padding: 0;
	font-family: "Arimo", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpr-title);
	text-transform: none;
	letter-spacing: 0;
	transition: color var(--wpr-dur) ease;
}

.wpr-desc {
	margin: 0;
	padding: 0;
	font-family: "Arimo", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--wpr-desc);
	transition: color var(--wpr-dur) ease;
}

/* Number */
.wpr-num {
	font-family: "Arimo", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	color: var(--wpr-num);
	text-align: right;
	white-space: nowrap;
	transition: color var(--wpr-dur) ease;
}

/* Pop-up image (desktop) */
.wpr-pop {
	position: absolute;
	top: 50%;
	right: var(--wpr-img-r);
	width: var(--wpr-img-w);
	height: var(--wpr-img-h);
	border-radius: var(--wpr-img-rad);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
	opacity: 0;
	transform: translateY(-50%) scale(0.94);
	transition: opacity var(--wpr-dur) ease, transform var(--wpr-dur) ease;
	pointer-events: none;
	z-index: 3 !important;
	will-change: opacity, transform;
}

.wpr-pop img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* Mobile image is hidden on desktop */
.wpr-mimg {
	display: none;
}

/* ---------------- HOVER (desktop / tablet only) ---------------- */
@media (min-width: 768px) {
	.wpr-row:hover,
	.wpr-row:focus-within {
		z-index: 5;
	}

	.wpr-row:hover::before,
	.wpr-row:focus-within::before {
		opacity: 1;
	}

	.wpr-row:hover .wpr-icon,
	.wpr-row:focus-within .wpr-icon {
		background: var(--wpr-ibg-h);
		color: var(--wpr-ic-h);
	}

	.wpr-row:hover .wpr-title,
	.wpr-row:focus-within .wpr-title {
		color: var(--wpr-title-h);
	}

	.wpr-row:hover .wpr-desc,
	.wpr-row:focus-within .wpr-desc {
		color: var(--wpr-desc-h);
	}

	.wpr-row:hover .wpr-num,
	.wpr-row:focus-within .wpr-num {
		color: var(--wpr-num-h);
	}

	.wpr-row:hover .wpr-pop,
	.wpr-row:focus-within .wpr-pop {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

/* ---------------- TABLET ---------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.wpr-list {
		--wpr-row-h: 130px;
		--wpr-gap: 28px;
		--wpr-ibox: 54px;
		--wpr-isize: 28px;
		--wpr-img-w: 240px;
		--wpr-img-h: 150px;
		--wpr-img-r: 130px;
	}

	.wpr-row {
		padding: 0 40px 0 32px;
	}

	.wpr-num {
		font-size: 44px;
	}
}

/* ---------------- MOBILE: static cards, no animation ---------------- */
@media (max-width: 767px) {
	.wpr-list {
		--wpr-gap: 16px;
		--wpr-ibox: 52px;
		--wpr-isize: 26px;
		display: flex;
		flex-direction: column;
		gap: var(--wpr-m-space);
	}

	.wpr-row {
		grid-template-columns: var(--wpr-ibox) minmax(0, 1fr);
		grid-template-areas:
			"icon content"
			"mimg mimg";
		align-items: start;
		row-gap: 16px;
		min-height: 0;
		padding: 20px 18px 20px 22px;
		background: var(--wpr-m-bg);
		border: 1px solid var(--wpr-m-border);
		border-radius: var(--wpr-m-rad);
		overflow: hidden;
		box-shadow: 0 6px 18px rgba(12, 151, 202, 0.08);
	}

	.wpr-row:last-child {
		border-bottom: 1px solid var(--wpr-m-border);
	}

	/* kill all animation & hover visuals */
	.wpr-row::before,
	.wpr-pop {
		display: none !important;
	}

	.wpr-row *,
	.wpr-row {
		transition: none !important;
		animation: none !important;
	}

	/* accent bar on the left edge */
	.wpr-row::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 4px;
		background: var(--wpr-fill);
		z-index: 2;
	}

	.wpr-icon {
		grid-area: icon;
	}

	.wpr-content {
		grid-area: content;
		padding-top: 2px;
	}

	.wpr-title {
		font-size: 17px;
		padding-right: 44px; /* room for the number */
	}

	.wpr-desc {
		font-size: 14px;
	}

	.wpr-num {
		font-size: 30px;
		position: absolute !important;
		top: 12px;
		right: 18px;
		color: var(--wpr-num-m);
		line-height: 1;
	}

	.wpr-mimg {
		display: block;
		grid-area: mimg;
		width: 100%;
		height: var(--wpr-m-img-h);
		border-radius: var(--wpr-m-img-rad);
		overflow: hidden;
	}

	.wpr-mimg img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		object-fit: cover;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpr-row::before,
	.wpr-pop,
	.wpr-icon,
	.wpr-title,
	.wpr-desc,
	.wpr-num {
		transition-duration: 1ms;
	}
}