/**
 * Benefits Table - "What Makes Us Different" comparison
 * Matches Figma design with highlighted Nexio column
 *
 * @package NexioEducation
 */

.benefits-table {
	background-color: var(--wp--preset--color--dark-blue, #010d18);
	padding: 120px 142px;
}

.benefits-table-heading {
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	font-size: 48px;
	font-weight: 800;
	line-height: 58px;
	color: var(--wp--preset--color--white, #fffefa);
	margin: 0 0 120px;
}

.benefits-table-wrapper {
	position: relative;
}

/* Header row */
.benefits-table-header {
	gap: 0 !important;
	margin-bottom: 0;
	position: relative;
}

.benefits-table-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-image: repeating-linear-gradient(
		to right,
		rgba(255, 254, 250, 0.3) 0,
		rgba(255, 254, 250, 0.3) 6px,
		transparent 6px,
		transparent 12px
	);
}

.benefits-table-header .benefits-table-label p {
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	font-size: 18px;
	font-weight: 800;
	line-height: 29px;
	color: var(--wp--preset--color--white, #fffefa);
	margin: 0;
}

.benefits-table-header .benefits-table-nexio {
	background: rgba(255, 254, 250, 0.08);
	border-radius: 16px 16px 0 0;
	padding: 16px 24px;
}

.benefits-table-header .benefits-table-nexio p {
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	font-size: 18px;
	font-weight: 800;
	line-height: 29px;
	color: var(--wp--preset--color--white, #fffefa);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Nexio logo before text */
.benefits-table-header .benefits-table-nexio p::before {
	content: '';
	display: inline-block;
	width: 36px;
	height: 45px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='45' viewBox='0 0 36 45' fill='none'%3E%3Cpath d='M0 0H36L18 22.5L36 45H0L18 22.5L0 0Z' fill='%23064D8E'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

.benefits-table-header .benefits-table-other p {
	font-family: 'Apris Trial', serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 29px;
	color: rgba(255, 254, 250, 0.7);
	margin: 0;
}

/* Data rows */
.benefits-table-row {
	gap: 0 !important;
	margin-bottom: 0;
	position: relative;
}

.benefits-table-row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-image: repeating-linear-gradient(
		to right,
		rgba(255, 254, 250, 0.15) 0,
		rgba(255, 254, 250, 0.15) 6px,
		transparent 6px,
		transparent 12px
	);
}

/* Column sizing */
.benefits-table-header > .wp-block-column,
.benefits-table-row > .wp-block-column {
	flex-basis: 0 !important;
	flex-grow: 1;
}

.benefits-table-label {
	padding: 36px 0;
}

.benefits-table-label p {
	font-family: 'Apris Trial', serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	color: rgba(255, 254, 250, 0.6);
	margin: 0;
}

/* Nexio column (highlighted) */
.benefits-table-nexio {
	background: rgba(255, 254, 250, 0.08);
	padding: 36px 24px;
}

.benefits-table-nexio p {
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	color: var(--wp--preset--color--white, #fffefa);
	margin: 0;
}

/* Other services column */
.benefits-table-other {
	padding: 36px 24px;
}

.benefits-table-other p {
	font-family: 'Apris Trial', serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 18px;
	color: rgba(255, 254, 250, 0.5);
	margin: 0;
}

/* Last row - round bottom of Nexio column */
.benefits-table-row:last-child .benefits-table-nexio {
	border-radius: 0 0 16px 16px;
}

/* Responsive */
@media (max-width: 1200px) {
	.benefits-table {
		padding: 80px 60px;
	}

	.benefits-table-heading {
		font-size: 36px;
		line-height: 44px;
		margin-bottom: 60px;
	}
}

@media (max-width: 900px) {
	.benefits-table {
		padding: 60px 24px;
	}

	.benefits-table-heading {
		font-size: 28px;
		line-height: 36px;
		margin-bottom: 40px;
	}

	.benefits-table-header,
	.benefits-table-row {
		flex-direction: column !important;
	}

	.benefits-table-header > .wp-block-column,
	.benefits-table-row > .wp-block-column {
		width: 100%;
	}

	.benefits-table-label {
		padding: 16px 0 8px;
	}

	.benefits-table-nexio {
		padding: 8px 16px 8px;
		border-radius: 8px;
	}

	.benefits-table-header .benefits-table-nexio {
		border-radius: 8px;
	}

	.benefits-table-row:last-child .benefits-table-nexio {
		border-radius: 8px;
	}

	.benefits-table-other {
		padding: 8px 16px 16px;
	}
}