/* SamSam Step Cards Block - front end styles */

.ssc-section {
	background: #eaf3ee;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	position: relative;
}

/* Full-bleed: break the section out of whatever max-width/boxed
   container Elementor's page, section or column settings put around
   it, so the background colour and waves always reach both edges of
   the browser window. The inner .ssc-container keeps its own
   comfortable max-width regardless — only the background stretches. */
.ssc-section-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* ---------- Top wave divider (convex hill) ---------- */
/* Sits at the very top of the section, before the container. Its own
   box is filled with "wave_top_color" (the colour that sits above the
   section). The <path> is filled with the section's own background
   colour and bulges upward in the middle, so the section appears to
   rise into a rounded hill at the top-centre. */
.ssc-wave-top {
	display: block;
	width: 100%;
	height: 70px;
	line-height: 0;
	overflow: hidden;
	background-color: #ffffff;
}

.ssc-wave-top svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ssc-wave-top path {
	fill: #eaf3ee;
}

/* ---------- Bottom wave divider (concave bite) ---------- */
/* Sits at the very bottom of the section. Its own box is filled with
   "wave_bottom_color" (the colour that shows through underneath —
   usually the page background, or whatever colour sits directly
   below). The <path> is filled with the section's own background
   colour and is full depth at the left/right edges but pulls up
   sharply in the centre, carving a concave "bite" out of the
   bottom-middle of the section. */
.ssc-wave-bottom {
	display: block;
	width: 100%;
	height: 70px;
	line-height: 0;
	overflow: hidden;
	background-color: #ffffff;
}

.ssc-wave-bottom svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ssc-wave-bottom path {
	fill: #eaf3ee;
}

@media (max-width: 600px) {
	.ssc-wave-top,
	.ssc-wave-bottom {
		height: 40px;
	}
}

.ssc-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 70px 24px;
}

.ssc-heading {
	margin: 0 0 18px;
	color: #4a9b7f;
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

.ssc-subheading {
	max-width: 760px;
	margin: 0 auto 50px;
	color: #333333;
	font-size: 15px;
	line-height: 1.7;
	text-align: center;
}

/* ---------- Cards grid ---------- */
.ssc-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
	align-items: start;
}

.ssc-card {
	display: flex;
	flex-direction: column;
}

.ssc-card-media {
	position: relative;
	margin-bottom: 22px;
}

/* Auto-crop: whatever size or aspect ratio the uploaded image is,
   it is cropped (never stretched or distorted) to fill this fixed
   frame, centered on its middle. Adjust the frame height from the
   widget's Style tab if you want taller/shorter cards. */
.ssc-card-media img,
.ssc-card-media-placeholder {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: center center;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.ssc-card-media-placeholder {
	background: rgba(0, 0, 0, 0.06);
}

/* ---------- Step badge (STEP 1 / STEP 2 / STEP 3) ---------- */
/* Position is fully adjustable from the widget's Style tab:
   horizontal alignment (left/center/right) and vertical offset
   (negative = floats above the photo, positive = sits on the photo). */
.ssc-badge {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #4a9b7f;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.2;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	z-index: 2;
}

.ssc-card-title {
	margin: 0 0 12px;
	color: #4a9b7f;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.ssc-card-description p {
	margin: 0 0 12px;
	color: #333333;
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}

.ssc-card-description p:last-child {
	margin-bottom: 0;
}

/* ---------- Call to action button ---------- */
.ssc-cta-wrap {
	margin-top: 40px;
	text-align: center;
}

.ssc-btn {
	display: inline-block;
	background: #4a9b7f;
	color: #ffffff;
	text-decoration: none;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 15px 34px;
	border-radius: 24px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.ssc-btn:hover,
.ssc-btn:focus {
	background: #3f8870;
	color: #ffffff;
	transform: translateY(-1px);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.ssc-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ssc-container {
		padding: 50px 20px;
	}

	.ssc-cards {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}