/**
 * Features Staggered styles.
 * "Tailored. Supportive. Proven." section with connecting lines and images
 *
 * @package NexioEducation
 */

.features-staggered {
	padding: 0 142px 342px;
	position: relative;
}

.features-staggered-grid {
	display: grid;
	grid-template-columns: 57% 43%;
	grid-template-rows: auto auto auto auto auto;
	gap: 0;
	position: relative;
	/* 7 connecting dashed lines between cards */
	background-image:
		/* 1: vertical dashed — header bottom → Personalized Guidance top */
		repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.25) 0px, rgba(6, 77, 142, 0.25) 6px, transparent 6px, transparent 12px),
		/* 2: horizontal dashed — Personalized Guidance → A Boutique Experience */
		repeating-linear-gradient(to right, rgba(6, 77, 142, 0.25) 0px, rgba(6, 77, 142, 0.25) 6px, transparent 6px, transparent 12px),
		/* 3: vertical dashed — A Boutique Experience → Honest Pricing */
		repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.25) 0px, rgba(6, 77, 142, 0.25) 6px, transparent 6px, transparent 12px),
		/* 4: vertical dashed — Honest Pricing → Quote */
		repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.25) 0px, rgba(6, 77, 142, 0.25) 6px, transparent 6px, transparent 12px),
		/* 5: horizontal dashed — Quote → left image */
		repeating-linear-gradient(to right, rgba(6, 77, 142, 0.25) 0px, rgba(6, 77, 142, 0.25) 6px, transparent 6px, transparent 12px),
		/* 6: horizontal dashed — Quote → right */
		repeating-linear-gradient(to right, rgba(6, 77, 142, 0.25) 0px, rgba(6, 77, 142, 0.25) 6px, transparent 6px, transparent 12px),
		/* 7: horizontal dashed — Honest Pricing mid → right */
		repeating-linear-gradient(to right, rgba(6, 77, 142, 0.25) 0px, rgba(6, 77, 142, 0.25) 6px, transparent 6px, transparent 12px);
	background-size:
		1px 327px,
		93px 1px,
		1px 195px,
		1px 90px,
		118px 1px,
		212px 1px,
		230px 1px;
	background-position:
		516px 190px,
		567px 549px,
		988px 575px,
		757px 1039px,
		472px 1235px,
		944px 1180px,
		963px 905px;
	background-repeat: no-repeat;
	z-index: 2;
	padding-bottom: 200px;
}

/* Left vertical line (dashed) */
.features-staggered-grid::before {
	content: "";
	position: absolute;
	left: 0;
	top: -25px;
	width: 1px;
	height: 1595px;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

/* Right vertical line (dashed) */
.features-staggered-grid::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 33.17%, rgba(0, 0, 0, 0.5) 66.83%, rgba(0, 0, 0, 0.25) 100%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 33.17%, rgba(0, 0, 0, 0.5) 66.83%, rgba(0, 0, 0, 0.25) 100%);
}

/* Header: top left */
.features-staggered-header {
	grid-column: 1;
	grid-row: 1;
	padding: 24px;
	position: relative;
	z-index: 1;
	background: #fffefa;
	height: 190px;
	width: 708px;
	overflow: visible;
	border-top: 1px solid rgba(6, 77, 142, 0.25);
	border-bottom: 1px solid rgba(6, 77, 142, 0.25);
}

/* Header right dashed border (no fading) */
.features-staggered-header::before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

/* Header left dashed border */
.features-staggered-header::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

.features-staggered-title {
	font-family: 'Apris Trial', serif;
	font-size: 48px;
	font-weight: 400;
	font-style: normal;
	line-height: 58px;
	color: #064d8e;
	margin: 0 0 12px;
}

.features-staggered-intro {
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: rgba(6, 77, 142, 0.75);
	margin: 0;
	max-width: 543px;
}


/* Image 1: top right */
.features-staggered-image-1 {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	justify-self: end;
	align-self: start;
	max-width: 505px;
	position: relative;
	z-index: 1;
	top: 47px;
}

.features-staggered-image-1 img {
	width: 100%;
	height: 377px;
	object-fit: cover;
	display: block;
}

/* Feature 1: A Boutique Experience */
.feature-item-1 {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	padding: 18px 24px 24px;
	background: #fffefa;
	border: none;
	border-bottom: 1px solid rgba(6, 77, 142, 0.25);
	top: 47px;
	max-width: 501px;
	position: relative;
	z-index: 2;
}

.feature-item-1::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

.feature-item-1::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

/* Feature 2: Personalized Guidance */
.feature-item-2 {
	grid-column: 1;
	grid-row: 2;
	left: 118px;
	top: 140px;
	padding: 24px;
	border: none;
	background: #fffefa;
	border-top: 1px solid rgba(6, 77, 142, 0.25);
	border-bottom: 1px solid rgba(6, 77, 142, 0.25);
	max-width: 448px;
	position: relative;
	z-index: 1;
}

.feature-item-2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

.feature-item-2::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

/* Image 2: center (passion project photo) */
.features-staggered-image-2 {
	grid-column: 1;
	grid-row: 3;
	margin: 0;
	top: 109px;
	left: 259px;
	justify-self: center;
	align-self: center;
	max-width: 259px;
	position: relative;
	z-index: 1;
}

.features-staggered-image-2 img {
	width: 258px;
	height: 263px;
	object-fit: cover;
	display: block;
	animation: compassFadeIn 0.6s ease forwards;
}

@keyframes compassFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Feature 3: Honest Pricing */
.feature-item-3 {
	grid-column: 2;
	grid-row: 3;
	padding: 24px 24px 24px 48px;
	background: #fffefa;
	border: none;
	border-top: 1px solid rgba(6, 77, 142, 0.25);
	border-bottom: 1px solid rgba(6, 77, 142, 0.25);
	top: 235px;
	left: 33px;
	max-width: 330px;
	position: relative;
}

.feature-item-3::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

.feature-item-3::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

/* Feature item styles */
.feature-item-title {
	font-family: 'Apris Trial', serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 28px;
	color: #064d8e;
	margin: 0 0 8px;
	font-style: normal;
}

.feature-item-text {
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: rgba(6, 77, 142, 0.75);
	margin: 0;
}

.feature-item-cta {
	margin-top: 16px;
}

.feature-item-cta .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(6, 77, 142, 0.25);
	color: #064d8e;
	padding: 8px 32px;
	border-radius: 30px;
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.feature-item-cta .wp-block-button__link::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3464 7.50716C12.6186 7.19494 13.0924 7.16249 13.4046 7.43468L17.9929 11.4347C18.1562 11.5771 18.25 11.7833 18.25 12C18.25 12.2168 18.1562 12.4229 17.9929 12.5653L13.4046 16.5653C13.0924 16.8375 12.6186 16.8051 12.3464 16.4929C12.0742 16.1806 12.1067 15.7069 12.4189 15.4347L15.4984 12.75H6.5C6.08579 12.75 5.75 12.4142 5.75 12C5.75 11.5858 6.08579 11.25 6.5 11.25H15.4984L12.4189 8.56534C12.1067 8.29315 12.0742 7.81938 12.3464 7.50716Z' fill='%23064D8E'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.feature-item-cta .wp-block-button__link:hover {
	background: #064d8e;
	color: #fffefa;
	border-color: #064d8e;
}

.feature-item-cta .wp-block-button__link:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3464 7.50716C12.6186 7.19494 13.0924 7.16249 13.4046 7.43468L17.9929 11.4347C18.1562 11.5771 18.25 11.7833 18.25 12C18.25 12.2168 18.1562 12.4229 17.9929 12.5653L13.4046 16.5653C13.0924 16.8375 12.6186 16.8051 12.3464 16.4929C12.0742 16.1806 12.1067 15.7069 12.4189 15.4347L15.4984 12.75H6.5C6.08579 12.75 5.75 12.4142 5.75 12C5.75 11.5858 6.08579 11.25 6.5 11.25H15.4984L12.4189 8.56534C12.1067 8.29315 12.0742 7.81938 12.3464 7.50716Z' fill='%23FFFEFA'/%3E%3C/svg%3E");
}

/* Quote section: bottom */
.features-staggered-quote {
	grid-column: 1 / 3;
	grid-row: 4;
	display: flex;
	align-items: stretch;
	gap: 0;
	position: relative;
	z-index: 1;
	top: 293px;
	left: 142px;
	/* margin-top: 48px; */
}

.features-staggered-image-3 {
	margin: 0;
	max-width: 330px;
	flex-shrink: 0;
}

.features-staggered-image-3 img {
	width: 100%;
	height: 338px;
	object-fit: cover;
	display: block;
}

.features-staggered-quote-text {
	font-family: 'Apris Trial', serif;
	font-size: 32px;
	font-weight: 300;
	font-style: normal;
	line-height: 38px;
	color: #064d8e;
	margin: 0;
	left: 118px;
	top: 32px;
	padding: 24px;
	width: 308px;
	height: 158px;
	border: none;
	border-top: 1px solid rgba(6, 77, 142, 0.25);
	border-bottom: 1px solid rgba(6, 77, 142, 0.25);
	background: transparent;
	display: flex;
	align-items: center;
	position: relative;
}

.features-staggered-quote-text::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

.features-staggered-quote-text::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: repeating-linear-gradient(180deg, rgba(6, 77, 142, 0.5) 0px, rgba(6, 77, 142, 0.5) 6px, transparent 6px, transparent 12px);
}

/* Responsive - padding scales to keep 1156px content area */
@media (max-width: 1440px) {
	.features-staggered {
		padding-left: max(60px, calc((100vw - 1156px) / 2));
		padding-right: max(60px, calc((100vw - 1156px) / 2));
	}
}

@media (max-width: 1280px) {
	.features-staggered-image-1,
	.feature-item-1 {
		max-width: 100%;
	}
}

@media (max-width: 1200px) {
	.features-staggered {
		padding-bottom: 145px;
	}

	.features-staggered-grid {
		background-size:
			1px 220px,
			238px 1px,
			1px 158px,
			1px 72px,
			60px 1px,
			400px 1px,
			700px 1px;
		background-position:
			281px 190px,
			414px 459px,
			714px 508px,
			642px 954px,
			340px 1177px,
			708px 1120px,
			500px 810px;
	}

	.features-staggered-grid::before {
		height: 1350px;
	}

	.features-staggered-header {
		width: auto;
	}

	.features-staggered-title {
		font-size: 40px;
		line-height: 50px;
	}

	.features-staggered-image-1 img {
		height: 310px;
	}

	.feature-item-2 {
		left: 60px;
		top: 100px;
		max-width: 380px;
	}

	.features-staggered-image-2 {
		left: 160px;
		top: 80px;
	}

	.features-staggered-image-2 img {
		width: 220px;
		height: 224px;
	}

	.feature-item-3 {
		left: 0;
		top: 180px;
		max-width: 280px;
	}

	.features-staggered-quote {
		top: 220px;
		left: 60px;
	}

	.features-staggered-image-3 {
		max-width: 280px;
	}

	.features-staggered-image-3 img {
		height: 280px;
	}

	.features-staggered-quote-text {
		font-size: 26px;
		line-height: 32px;
		left: 60px;
		width: 260px;
		height: auto;
		max-height: 150px;
	}
}

@media (max-width: 1050px) {
	.features-staggered-header {
		width: 100%;
		height: auto;
	}
}

@media (max-width: 900px) {
	.features-staggered {
		padding: 0 24px 60px;
	}

	.features-staggered-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0 40px;
		counter-reset: feature-counter;
		background-image: none;
		padding-bottom: 0;
	}

	.features-staggered-grid::before,
	.features-staggered-grid::after {
		display: none;
	}

	/* Header - card style matching feature items */
	.features-staggered-header {
		padding: 24px 0 24px 20px;
		height: auto;
		width: auto;
		border: none;
		border-left: 3px solid #064d8e;
		border-bottom: 1px solid rgba(6, 77, 142, 0.1);
		margin-bottom: 0;
		counter-increment: feature-counter;
	}

	.features-staggered-header::before {
		content: "0" counter(feature-counter);
		position: static;
		display: block;
		width: auto;
		height: auto;
		background: none;
		font-family: 'Manrope', sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: rgba(6, 77, 142, 0.4);
		margin-bottom: 8px;
	}

	.features-staggered-header::after {
		display: none;
	}

	.features-staggered-title {
		font-size: 32px;
		line-height: 40px;
		margin-bottom: 12px;
	}

	/* Feature cards with left accent + counter */
	.feature-item-1,
	.feature-item-2,
	.feature-item-3 {
		max-width: 100%;
		top: 0;
		left: 0;
		border: none;
		border-left: 3px solid #064d8e;
		padding: 24px 0 24px 20px;
		position: relative;
		counter-increment: feature-counter;
		border-bottom: 1px solid rgba(6, 77, 142, 0.1);
	}

	.feature-item-1::before,
	.feature-item-2::before,
	.feature-item-3::before {
		content: "0" counter(feature-counter);
		position: static;
		display: block;
		width: auto;
		height: auto;
		background: none;
		font-family: 'Manrope', sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: rgba(6, 77, 142, 0.4);
		margin-bottom: 8px;
	}

	.feature-item-1::after,
	.feature-item-2::after,
	.feature-item-3::after {
		display: none;
	}

	.feature-item-3 {
		border-bottom: none;
	}

	/* Hide grid images, show quote image */
	.features-staggered-image-1,
	.features-staggered-image-2 {
		display: none;
	}

	.features-staggered-image-3 {
		display: block;
		max-width: 100%;
	}

	.features-staggered-image-3 img {
		width: 100%;
		height: 200px;
		border-radius: 4px;
	}

	/* Quote section */
	.features-staggered-quote {
		flex-direction: column;
		gap: 0;
		margin-top: 32px;
		top: 0;
		left: 0;
	}

	.features-staggered-quote-text {
		font-size: 24px;
		line-height: 32px;
		padding: 24px 0 0;
		left: 0;
		width: 100%;
		height: auto;
		min-height: 0;
		border: none;
		border-top: 1px solid rgba(6, 77, 142, 0.15);
	}

	.features-staggered-quote-text::before,
	.features-staggered-quote-text::after {
		display: none;
	}
}

@media (max-width: 768px) {
	.features-staggered-grid {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 0;
	}
}