/*
 * compliance.css — Home page: "Environmental Compliance Is Too Important
 * for Spreadsheets" section.
 *
 * Left-aligned heading + a 3-column feature grid (icon, title, description
 * per card), fed from the compliance_items repeater.
 *
 * Only enqueued on the front page / Home Page template (see inc/enqueue.php).
 *
 * @package Greenova
 */

.compliance {
	background-color: #30AEE412;
	padding-block:     120px;
}

.compliance__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      80px;
	font-weight:    500;
	line-height:    100px;
	letter-spacing: -4px;
	color:          #000000;
	text-align:     left;
	margin:         0 0 64px;
}

/* =============================================================================
   Feature grid
   ============================================================================= */

.compliance__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap:            80px;
	row-gap:               48px;
}

.compliance__card {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.compliance__icon {
	width:      48px;
	height:     48px;
	object-fit: contain;
}

.compliance__card-title {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 600;
	line-height: 24px;
	color:       #000000;
	margin:      0;
}

.compliance__card-desc {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 24px;
	color:       #000000;
	margin:      0;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 1199.98px ) {
	.compliance {
		padding-block: 88px;
	}

	.compliance__heading {
		font-size:      3rem;
		line-height:    1.1;
		letter-spacing: -0.03em;
		margin-bottom:  48px;
	}

	.compliance__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap:            48px;
		row-gap:               40px;
	}
}

@media ( max-width: 767.98px ) {
	.compliance {
		padding-block: 64px;
	}

	.compliance__heading {
		font-size:   2rem;
		line-height: 1.2;
		text-align:  center;
	}

	.compliance__grid {
		grid-template-columns: 1fr;
		row-gap:               40px;
	}

	.compliance__card {
		align-items: center;
		text-align:  center;
	}
}