/* ==========================================================================
   Simple Features Block
   Ports the style-one card layout from the theme's cards block,
   without slider/Slick dependencies.
   ========================================================================== */

.block--simple-features {
	padding-top: 100px;
	padding-bottom: 84px;

	/* Anchor offset */
	#features {
		scroll-margin-top: 180px;
	}

	/* Heading */
	.simple-features-heading {
		margin-bottom: 1rem;
	}

	/* Track wrapper — holds the diagonal stripe ::before */
	.icon-cards-track {
		position: relative;
		padding: 2rem 0;
	}

	/* Diagonal stripe background pattern (mirrors theme .slick-list::before) */
	.icon-cards-track::before {
		content: "";
		position: absolute;
		display: block;
		top: 50%;
		/* left: 18%; */
		right: 0;
		z-index: 0;
		height: 100%;
		width: 50%;
		background-image: linear-gradient(
			90deg,
			rgba(50, 15, 255, 0.08) 4.55%,
			transparent 4.55%,
			transparent 50%,
			rgba(50, 15, 255, 0.08) 50%,
			rgba(50, 15, 255, 0.08) 54.55%,
			transparent 54.55%,
			transparent 100%
		);
		background-size: 44px 44px;
		transform: translateY(-50%) skewX(-30deg);
		pointer-events: none;
	}

	/* Card grid row */
	.icon-cards.style-one {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 0 !important;
		margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
		margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
	}

	/* Individual card */
	.icon-card {
		flex: 1 1 0;
		min-width: 0;
		height: stretch;
		padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.25);
		padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.25);
		position: relative;
		z-index: 1;
	}

	.icon-card .wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 22px;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0px 4px 28px 9px rgba(50, 15, 255, 0.07);
	}

	/* Icon */
	.icon-card .icon {
		height: 60px;
		width: 60px;
		margin-bottom: 0.75rem;
		flex-shrink: 0;
	}

	.icon-card .icon img {
		height: 100%;
		width: 100%;
		object-fit: contain;
	}

	/* Content */
	.icon-card .content {
		display: flex;
		flex-direction: column;
		flex: 0 1 auto;
	}

	.icon-card .content .title {
		font-size: 1rem;
		font-weight: 700;
		margin-bottom: 0.5rem;
	}

	.icon-card .content p {
		font-size: 1rem;
		margin-bottom: 0;
	}

	/* CTA button */
	.simple-features-cta {
		margin-top: 1.5rem;
	}

	/* Responsive — 2 columns at < 992px */
	@media (max-width: 991.98px) {
		.icon-cards.style-one {
			flex-wrap: wrap;
		}

		.icon-card {
			flex: 0 0 50%;
			max-width: 50%;
			margin-bottom: 1rem;
		}
		.icon-card .wrapper {
			max-width: calc(100% - 2rem);
			margin-left: auto;
			margin-right: auto;
		}

		.icon-cards-track::before {
			/* left: 0; */
			width: 110%;
		}
	}

	/* Responsive — 1 column at < 576px */
	@media (max-width: 575.98px) {
		.icon-card {
			flex: 0 0 100%;
			max-width: 100%;
		}
	}

	/* ==========================================================================
	   Video Modal (Vimeo CTA)
	   ========================================================================== */

	/* Backdrop — full-screen dark overlay */
	.sf-video-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 2000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		cursor: pointer;
	}

	/* Video modal container */
	.sf-video-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2010;
		width: 60vw;
		aspect-ratio: 16 / 9;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		pointer-events: none;
	}

	/* Video player area */
	.sf-video-player {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #000;
		background-size: cover;
		background-position: center;
		/* border: 2px solid #fff; */
		border-radius: 5px;
	}

	.sf-video-player iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 5px;
	}

	/* Close button */
	.sf-video-close {
		position: absolute;
		top: -2.5rem;
		right: 0;
		color: #fff;
		background: none;
		border: none;
		font-size: 1.5rem;
		line-height: 1;
		cursor: pointer;
		z-index: 1;
	}

	.sf-video-close:hover {
		opacity: 0.8;
	}

	/* Expanded state */
	&.sf-video-expanded .sf-video-backdrop {
		opacity: 1;
		visibility: visible;
	}

	&.sf-video-expanded .sf-video-modal {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Responsive — full width on smaller screens */
	@media (max-width: 991.98px) {
		.sf-video-modal {
			width: 90vw;
		}
	}
}

@media screen and (max-width: 1000px) {
	#features {
		scroll-margin-top: 150px;
	}
}