/**
 * SH Services widget styles.
 *
 * Structural rules only. Colours, spacing, typography, radius and gradients are
 * driven by Elementor controls through CSS custom properties and selector based
 * rules, so editing in the panel stays fully in charge of the look.
 */

/* Wrapper ------------------------------------------------------------------- */
/* Keep the widget inside its container so it can never spill past the screen. */
.sh-services {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Grid ---------------------------------------------------------------------- */
.sh-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 24px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Box ----------------------------------------------------------------------- */
.sh-services__box {
	/* Defaults act as a safety net if the panel colours are ever empty. */
	--sh-box-grad-start: #16294D;
	--sh-box-grad-end: #0C1730;
	--sh-box-grad-angle: 145deg;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	padding: 28px;
	border-radius: 16px;
	background-image: linear-gradient(
		var(--sh-box-grad-angle),
		var(--sh-box-grad-start),
		var(--sh-box-grad-end)
	);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	height: 100%;
	box-sizing: border-box;
	/* Allow the box to shrink inside its grid track instead of forcing overflow. */
	min-width: 0;
}

/* Make the whole card clickable while keeping text readable. */
a.sh-services__box {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.sh-services__box--linked:hover {
	transform: translateY(-4px);
}

/* Image --------------------------------------------------------------------- */
.sh-services__image {
	flex: 0 0 auto;
	width: 110px;
	max-width: 40%;
}

.sh-services__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Content ------------------------------------------------------------------- */
.sh-services__content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Icon ---------------------------------------------------------------------- */
.sh-services__icon {
	--sh-icon-bg-start: #2E6DF6;
	--sh-icon-bg-end: #1E4FD6;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	margin-bottom: 14px;
	background-image: linear-gradient(145deg, var(--sh-icon-bg-start), var(--sh-icon-bg-end));
	line-height: 1;
}

.sh-services__icon svg {
	width: 22px;
	height: 22px;
	fill: #FFFFFF;
}

.sh-services__icon i {
	font-size: 22px;
	color: #FFFFFF;
}

/* Title --------------------------------------------------------------------- */
.sh-services__title {
	margin: 0 0 12px;
	color: #FFFFFF;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	/* Long words wrap instead of stretching the card past the screen. */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Description ---------------------------------------------------------------- */
.sh-services__description {
	margin: 0;
	color: #9FB3D1;
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Button -------------------------------------------------------------------- */
.sh-services__button-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.sh-services__button {
	--sh-btn-bg-start: #3A86F0;
	--sh-btn-bg-end: #2563EB;

	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 34px;
	border-radius: 10px;
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
	background-image: linear-gradient(90deg, var(--sh-btn-bg-start), var(--sh-btn-bg-end));
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
	cursor: pointer;
}

.sh-services__button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

.sh-services__button-arrow {
	fill: #FFFFFF;
	transition: transform 0.2s ease;
}

.sh-services__button:hover .sh-services__button-arrow {
	transform: translateX(3px);
}

/* Responsive ---------------------------------------------------------------- */
/*
 * The laptop tier keeps all three cards on a single row for screens in the
 * 1025px to 1366px band (this covers 1280px laptops). To do that the image,
 * padding, gaps and type are trimmed so the row fits without spilling past the
 * viewport. Elementor prints its own per element rules for these same
 * properties at a high specificity, so the trims below carry !important to stay
 * in charge inside this band only. Colours and gradients are untouched, and
 * every other breakpoint continues to honour the panel controls.
 */
@media (min-width: 1025px) and (max-width: 1366px) {
	.sh-services__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 16px !important;
		row-gap: 16px !important;
	}

	.sh-services__box {
		padding: 20px !important;
		gap: 14px !important;
	}

	.sh-services__image {
		width: 72px !important;
	}

	.sh-services__icon {
		width: 42px !important;
		height: 42px !important;
		margin-bottom: 12px !important;
	}

	.sh-services__icon svg {
		width: 20px !important;
		height: 20px !important;
	}

	.sh-services__icon i {
		font-size: 20px !important;
	}

	.sh-services__title {
		font-size: 17px !important;
		margin-bottom: 10px !important;
	}

	.sh-services__description {
		font-size: 14px !important;
	}
}

/* Tablet: drop to two columns. */
@media (min-width: 768px) and (max-width: 1024px) {
	.sh-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: a single column, with the image scaled down to save room. */
@media (max-width: 767px) {
	.sh-services__grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.sh-services__box {
		gap: 16px;
	}

	.sh-services__image {
		width: 90px;
	}
}

/* Small phones: stack the image above the text so nothing is cramped. */
@media (max-width: 480px) {
	.sh-services__box {
		flex-direction: column;
		align-items: flex-start;
	}

	.sh-services__image {
		width: 80px;
		max-width: 100%;
	}
}