/* Stories Section */
	/* .section { */
	/* 	padding: 60px 0; */
	/* } */



	.lead {
		font-size: 16px;
		color: #666;
	}

	/* Slider wrapper */
	.story-slider-wrapper {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
	}

	.story-slider {
		overflow: hidden;
		position: relative;
	}

	.story-grid {
		display: flex;
		transition: transform 0.5s ease-in-out;
		will-change: transform;
	}

	.story-card {
		flex: 0 0 calc(33.333% - 11px);
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 16px;
		padding: 24px;
		margin-right: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		/* 👇 KEY FIX: Make card a flex container */
		display: flex;
		flex-direction: column;
		min-height: 280px; /* Ensures consistent card height */
	}

		.story-card:hover {
			transform: translateY(-4px);
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		}

	.story-stars {
		font-size: 16px;
		color: #f5b300;
		margin-bottom: 12px;
		letter-spacing: 2px;
		flex-shrink: 0; /* Prevents stars from shrinking */
	}

	.story-text {
		font-size: 15px;
		color: #333;
		line-height: 1.6;
		margin: 0 0 16px;
		/* 👇 3-line ellipsis - works in all modern browsers */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		word-break: break-word;
		/* 👇 Allows text to take available space */
		flex-grow: 1;
		min-height: 72px; /* Ensures space for 3 lines (15px * 1.6 * 3 ≈ 72px) */
		max-height: 72px; /* Prevents text from expanding beyond 3 lines */
	}

	/* Customer section */
	.story-user {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: auto; /* 👈 KEY FIX: Pushes user section to bottom */
		padding-top: 16px;
		/* border-top: 1px solid #f0f0f0; */
		flex-shrink: 0; /* Prevents user section from shrinking */
	}

		.story-user img {
			width: 44px;
			height: 44px;
			border-radius: 50%;
			object-fit: cover;
			border: 2px solid #f0f0f0;
			flex-shrink: 0;
			font-size:39px;
		}

	.story-user-info {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0; /* 👈 Allows text to wrap/truncate properly */
		flex: 1;
	}

	.story-user-name {
		font-size: 14px;
		font-weight: 600;
		color: #111;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.story-user-location {
		font-size: 13px;
		color: #777;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Dots */
	.story-dots {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 32px;
	}

		.story-dots button {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			border: none;
			background: #ddd;
			cursor: pointer;
			transition: all 0.3s ease;
			padding: 0;
		}

			.story-dots button:hover {
				background: #999;
				transform: scale(1.2);
			}

			.story-dots button.active {
				background: #111;
				width: 28px;
				border-radius: 5px;
			}

	/* Tablet */
	@media (max-width: 900px) {
		.story-card {
			flex: 0 0 calc(50% - 8px);
		}

		.section-head h2 {
			font-size: 28px;
		}
	}

	/* Mobile */
	@media (max-width: 600px) {
		.story-card {
			flex: 0 0 100%;
			margin-right: 0;
		}

		.story-grid {
			gap: 16px;
		}

		.section-head h2 {
			font-size: 24px;
		}

		.lead {
			font-size: 14px;
		}
	}

	.story-stars {
		font-size: 18px;
	}

	.star {
		color: #ccc;
	}

		.star.filled {
			color: #f5b301;
		}

	.story-text {
		font-size: 14px;
		line-height: 1.6;
		white-space: normal;
	}

	.dots {
		margin-right: 4px;
	}

	.see-more {
		color: #1a73e8;
		cursor: pointer;
		font-weight: 500;
		margin-left: 4px;
		white-space: nowrap;
	}

		.see-more:hover {
			text-decoration: underline;
		}

	.story-user-location {
		font-size: 13px;
		color: #777;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		align-items: center;
		gap: 6px; /* space between name/platform/date parts */
		line-height: 1.4;
	}

	.separator {
		color: #d0d0d0;
		font-weight: normal;
		user-select: none;
		margin: 0 2px;
	}

	.review-platform {
		color: #555;
		font-weight: 500; /* slightly bolder to stand out as source */
		text-transform: capitalize; /* Google → Google, trustpilot → Trustpilot, etc. */
	}

	.review-date {
		color: #888;
		font-weight: 400;
	}

	/* Optional: shorten on very small screens */
	@media (max-width: 600px) {
		.story-user-location {
			font-size: 12.5px;
			gap: 4px;
		}
		/* Hide date or platform if too crowded – pick one */
		.review-date {
			display: none; /* ← most common choice */
		}
		/* .review-platform { display: none; } */ /* alternative */
	}


	.story-user-avatar {
		position: relative;
		width: 44px;
		height: 44px;
		flex-shrink: 0;
	}

	/* The image itself */
	.avatar-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid #f0f0f0;
		display: block;
	}

	/* Fallback circle with initial */
	.avatar-fallback {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #6b7280; /* gray-500 – nice neutral default */
		color: white;
		font-size: 20px; /* adjust based on your preference */
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid #f0f0f0;
		text-transform: uppercase;
	}