/* =========================================================

   Services Showcase - Front-end styles

   ========================================================= */



.ssp-grid {

	display: grid;

	grid-template-columns: repeat(var(--ssp-columns, 3), 1fr);

	gap: 10px;

}



@media (max-width: 900px) {

	.ssp-grid {

		grid-template-columns: repeat(2, 1fr);

	}

}



@media (max-width: 600px) {

	.ssp-grid {

		grid-template-columns: 1fr;

	}

}



.ssp-card {

	position: relative;

	background: linear-gradient(180deg, #f4f7f8 0%, #ffffff 100%);

	border: 1px solid #e7ebee;

	border-radius: 14px;

	overflow: hidden;

	transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;

	display: flex;

	flex-direction: column;

}



.ssp-card:hover {

	border-color: #d7dde2;

	box-shadow: 0 18px 40px rgba(20, 20, 40, 0.12);

	transform: translateY(-4px);

}



/* Image zoom-out (scale in) on hover, clipped by overflow:hidden wrapper */

.ssp-card-image-wrap {

	overflow: hidden;

	display: block;

}



.ssp-card-image {

	display: block;

	width: 100%;

	height: 200px;

	object-fit: cover;

	transform: scale(1);

	transition: transform 0.45s ease;

}



.ssp-card:hover .ssp-card-image {

	transform: scale(1.08);

}



.ssp-card-image-placeholder {

	background: linear-gradient(135deg, #e7ebee 0%, #d7dde2 100%);

}



.ssp-card-body {

	padding: 15px 15px 15px;

	flex: 1;

	display: flex;

	flex-direction: column;

}



.ssp-card-title {

	margin: 0 0 14px;

	font-size: 1.2rem;

	line-height: 1.25;

	font-weight: 700;

}



.ssp-card-title a {

	color: #14142b;

	text-decoration: none;

}



.ssp-card-title a:hover {

	text-decoration: underline;

}



.ssp-card-desc {

	margin: 0 0 20px;

	color: #6b7280;

	font-size: 1rem;

	line-height: 1.6;

	flex: 1;

}



.ssp-learn-more {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	color: #6b7280;

	font-weight: 600;

	text-decoration: none;

	width: fit-content;

}



.ssp-learn-more .ssp-arrow {

	display: inline-block;

	transition: transform 0.3s ease;

}



.ssp-learn-more:hover {

	color: #14142b;

}



.ssp-learn-more:hover .ssp-arrow {

	transform: translateX(5px);

}



.ssp-no-services {

	padding: 20px;

	text-align: center;

	color: #6b7280;

}



/* =========================================================

   Single / Archive page styles

   ========================================================= */



.ssp-single-service,

.ssp-archive-services {


	margin: 0 auto;

	padding: 40px 20px;

}



.ssp-single-image {

	width: 100%;

	max-height: 480px;

	object-fit: cover;

	border-radius: 14px;

	margin-bottom: 24px;

}



.ssp-single-title {

	font-size: 2.4rem;

	font-weight: 800;

	color: #14142b;

	margin-bottom: 8px;

}



.ssp-single-date {

	color: #6b7280;

	font-size: 0.95rem;

	margin-bottom: 24px;

	display: block;

}



.ssp-single-content {

	font-size: 1.1rem;

	line-height: 1.75;

	color: #33333f;

}



.ssp-single-content p {

	margin-bottom: 1.2em;

}



.ssp-archive-title {

	font-size: 2.2rem;

	font-weight: 800;

	margin-bottom: 30px;

	color: #14142b;

}



.ssp-back-link {

	display: inline-block;

	margin-bottom: 24px;

	color: #6b7280;

	text-decoration: none;

	font-weight: 600;

}



.ssp-back-link:hover {

	color: #14142b;

}