/**
 * Tutoring Academic styles - matches Figma design specs.
 *
 * @package NexioEducation
 */

.tutoring-academic {
	padding: 0 142px;
	position: relative;
	min-height: 1099px;
	max-width: 1440px;
	margin: 0 auto;
}

/* Gradient line at top of section */
.tutoring-academic::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1440px;
	height: 1px;
	background: linear-gradient(90deg, rgba(6, 77, 142, 0.05) 0%, rgba(6, 77, 142, 0.50) 15%, rgba(6, 77, 142, 0.50) 85%, rgba(6, 77, 142, 0.05) 100%);
}

/* Vertical dashed lines on both sides */
.tutoring-academic::after {
	content: '';
	position: absolute;
	top: -26px;
	left: 142px;
	right: 142px;
	height: 1323px;
	background-image:
		url('../images/tutoring/vertical-dashed-line.svg'),
		url('../images/tutoring/vertical-dashed-line.svg');
	background-position: 0 0, 100% 0;
	background-size: 1px 1099px, 1px 1099px;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Header Row */
.tutoring-academic-header {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	padding: 24px 0 31px 0;
	border-bottom: 1px solid rgba(6, 77, 142, 0.25);
}

.tutoring-academic-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 48px;
	font-weight: 400;
	line-height: 58px;
	color: #064d8e;
	margin: 0 0 0 22px !important;
	flex-shrink: 0;
}

.tutoring-academic-description {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: rgba(6, 77, 142, 0.75);
	margin: 8px 10px 0 25px !important;
	flex: 1;
}

.tutoring-academic-description strong {
	font-weight: 700;
	color: #064d8e;
}

/* Features Row */
.tutoring-features {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 24px 0 64px 0;
	border-bottom: 1px solid rgba(6, 77, 142, 0.25);
}

.tutoring-feature {
	flex: 1;
	padding-right: 0;
	position: relative;
	margin: 0 0 0 22px !important;
}

.tutoring-feature:nth-child(2) {
	padding-right: 16px;
	padding-left: 23px;
}

.tutoring-feature:last-child {
	padding-right: 12px;
	padding-left: 0px;
}

/* Arrow on Feedback Loop card */
.tutoring-feature:last-child::before {
	content: '';
	position: absolute;
	right: 12px;
	bottom: -49px;
	width: 48px;
	height: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.9857 24.6929C33.6102 25.2373 33.6751 26.1848 33.1307 26.8092L25.1307 35.9857C24.8458 36.3125 24.4335 36.5 24 36.5C23.5665 36.5 23.1542 36.3125 22.8694 35.9857L14.8694 26.8092C14.325 26.1848 14.3899 25.2373 15.0143 24.6929C15.6388 24.1485 16.5863 24.2134 17.1307 24.8378L22.5 30.9968L22.5 13C22.5 12.1716 23.1716 11.5 24 11.5C24.8284 11.5 25.5 12.1716 25.5 13L25.5 30.9968L30.8694 24.8378C31.4137 24.2134 32.3613 24.1485 32.9857 24.6929Z' fill='%23064D8E'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 48px 48px;
}

.tutoring-feature:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -19px;
	top: -24px;
	bottom: -64px;
	width: 2px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='246' viewBox='0 0 2 246' fill='none'%3E%3Cpath d='M1 0L1 246' stroke='%23064D8E' stroke-opacity='0.25' stroke-width='2' stroke-miterlimit='16' stroke-dasharray='6 4'/%3E%3C/svg%3E");
	background-repeat: repeat-y;
}

.tutoring-feature:nth-child(2)::after {
	right: 5px;
}

.tutoring-feature-title {
	font-family: var(--wp--preset--font-family--heading, 'Apris Trial', serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 28px;
	color: #064d8e;
	margin: 0 0 8px;
}

.tutoring-feature-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;
}

.tutoring-feature-text strong {
	font-weight: 700;
	color: #064d8e;
}

/* Arrow */
.tutoring-arrow {
	display: none;
}

/* Subjects Grid */
.subjects-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: rgba(255, 254, 250, 0.25);
	position: relative;
}

/* Horizontal gradient lines on top and bottom */
.subjects-grid::before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 1440px;
	height: 100%;
	top: 0;
	background-image:
		linear-gradient(90deg, rgba(6, 77, 142, 0.05) 0%, rgba(6, 77, 142, 0.50) 15%, rgba(6, 77, 142, 0.50) 85%, rgba(6, 77, 142, 0.05) 100%),
		linear-gradient(90deg, rgba(6, 77, 142, 0.05) 0%, rgba(6, 77, 142, 0.50) 15%, rgba(6, 77, 142, 0.50) 85%, rgba(6, 77, 142, 0.05) 100%);
	background-size: 100% 1px, 100% 1px;
	background-position: top, bottom;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 2;
}

.subjects-row {
	display: flex;
	gap: 24px;
}

/* First row border bottom */
.subjects-row:first-child {
	/* margin-bottom: 24px; */
	border-bottom: 1px solid rgba(6, 77, 142, 0.25);
}

/* First row - Mathematics (large) + Sciences (small) */
.subjects-row:first-child .subject-card:first-child {
	flex: 1.5;
}

/* Vertical dashed line on right side of Mathematics card */
.subjects-row:first-child .subject-card:first-child::before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 2px;
	height: 319px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='319' viewBox='0 0 2 319' fill='none'%3E%3Cpath d='M1.00001 0L0.999987 319' stroke='url(%23paint0_linear_1504_8789)' stroke-width='2' stroke-miterlimit='16' stroke-dasharray='6 6'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1504_8789' x1='0.999993' y1='204.858' x2='1.00009' y2='204.858' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23064D8E' stop-opacity='0.45'/%3E%3Cstop offset='0.375' stop-color='%23064D8E'/%3E%3Cstop offset='1' stop-color='%23064D8E' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	background-repeat: no-repeat;
	z-index: 2;
}

.subjects-row:first-child .subject-card:last-child {
	flex: 1;
}

/* Second row - Humanities (small) + Languages (large) */
.subjects-row:last-child .subject-card:first-child {
	flex: 1;
}

.subjects-row:last-child .subject-card:last-child {
	flex: 1.5;
}

.subject-card {
	background: #064d8e;
	padding: 24px;
	position: relative;
	min-height: 320px;
}

.subject-card-title {
	font-family: var(--wp--preset--font-family--heading, 'Apris Trial', serif);
	font-size: 32px;
	font-weight: 300;
	line-height: 38px;
	color: #fffefa;
	margin: 0 0 24px;
}

.subject-card-divider {
	border: none;
	border-top: 1px solid rgba(255, 254, 250, 0.25);
	margin: 0 0 32px;
}

.subject-card-list,
.subject-card-list.wp-block-group-is-layout-flex {
	display: grid !important;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 24px 72px;
	justify-content: start;
}

.subject-card-list.is-layout-flex > :is(*, div),
.subject-card-list > p {
	margin: 0 !important;
}

.subject-card-list p {
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: #fffefa;
	margin: 0;
	width: auto;
}

/* Languages grid - 3 columns */
.subject-card-languages .subject-card-list {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: repeat(2, auto);
	gap: 24px 56px;
	justify-content: end;
}

.subject-card-languages .subject-card-list p {
	text-align: left;
	width: auto;
}

/* Decorative paper shapes overlay */
.subject-card {
	overflow: hidden;
}

.subject-card::after {
	content: '';
	position: absolute;
	right: -150px;
	bottom: -124px;
	width: 536px;
	height: 279px;
	background-image: url('../images/tutoring/decorative-shapes.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom right;
	pointer-events: none;
	z-index: 1;
}

/* Hide decoration on smaller cards to avoid clutter */
.subjects-row:first-child .subject-card:last-child::after,
.subjects-row:last-child .subject-card:first-child::after {
	display: none;
}

/* Languages card - different decorative shapes */
.subject-card-languages::after {
	left: 0;
	right: auto;
	bottom: 0;
	width: 473px;
	height: 164px;
	background-image: url('../images/tutoring/decorative-shapes-languages.svg');
}

/* Vertical dashed line on left side of Languages card */
.subject-card-languages::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 319px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='319' viewBox='0 0 2 319' fill='none'%3E%3Cpath d='M1.00001 0L0.999987 319' stroke='url(%23paint0_linear_1504_8789)' stroke-width='2' stroke-miterlimit='16' stroke-dasharray='6 6'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1504_8789' x1='0.999993' y1='204.858' x2='1.00009' y2='204.858' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23064D8E' stop-opacity='0.45'/%3E%3Cstop offset='0.375' stop-color='%23064D8E'/%3E%3Cstop offset='1' stop-color='%23064D8E' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	background-repeat: no-repeat;
	z-index: 2;
}


/* Responsive - Tablet */
@media (max-width: 1200px) {
	.tutoring-academic {
		padding: 0 60px;
	}

	/* Update vertical dashed lines to match padding */
	.tutoring-academic::after {
		left: 60px;
		right: 60px;
	}

	.tutoring-academic-header {
		gap: 24px;
	}

	.tutoring-feature {
		padding-right: 24px;
	}

	.tutoring-feature:nth-child(2),
	.tutoring-feature:last-child {
		padding-left: 24px;
	}

	.subject-card-list {
		grid-template-columns: auto auto;
		gap: 18px 40px;
	}

	.subject-card-languages .subject-card-list {
		gap: 18px 40px;
	}
}

@media (max-width: 900px) {
	.tutoring-academic {
		padding: 0 24px;
	}

	/* Hide vertical dashed lines on mobile */
	.tutoring-academic::after {
		display: none;
	}

	.tutoring-academic-header {
		flex-direction: column;
		gap: 16px;
	}

	.tutoring-academic-title {
		font-size: 36px;
		line-height: 44px;
	}

	.tutoring-features {
		flex-direction: column;
		gap: 24px;
		border-bottom: none;
	}

	.subjects-grid::before {
		display: none;
	}

	.tutoring-feature {
		padding: 0 0 24px;
		border-bottom: 1px solid rgba(6, 77, 142, 0.25);
	}

	.tutoring-feature:not(:last-child)::after {
		display: none;
	}

	.tutoring-feature:nth-child(2),
	.tutoring-feature:last-child {
		padding-left: 0;
		padding-right: 0;
	}

	.tutoring-feature:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.subjects-row {
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}

	.subjects-row.is-nowrap {
		flex-wrap: wrap !important;
	}

	.subjects-row:first-child .subject-card,
	.subjects-row:last-child .subject-card {
		flex: 1;
		width: 100%;
	}

	.subject-card {
		min-height: auto;
		padding: 24px;
	}

	.subject-card-title {
		font-size: 28px;
		line-height: 34px;
	}

	.subject-card-list {
		grid-template-columns: auto auto;
		gap: 16px 24px;
	}

	.subject-card-languages .subject-card-list {
		display: grid !important;
		grid-template-columns: repeat(3, auto);
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		gap: 16px 24px;
		justify-content: start;
	}

	.subject-card-languages::after {
		visibility: hidden;
	}
}

@media (max-width: 480px) {
	.tutoring-academic-title {
		font-size: 28px;
		line-height: 34px;
	}

	.tutoring-feature-title {
		font-size: 20px;
		line-height: 24px;
	}

	.subject-card-list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.subject-card-languages .subject-card-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 580px) {
	.subject-card::after {
		display: none;
	}
}