/**
 * Services Grid Section Styles - MINIMAL
 * Only contains: grid layout, positioning, dividers, responsive
 * Typography and colors are handled by inline block styles
 */

/* ==========================================================================
   Services Grid Container - Layout
   ========================================================================== */

.services-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	gap: 0;
	max-width: 1765px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--medium-padding) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--background);
}

/* ==========================================================================
   Service Item (Column) - Layout
   ========================================================================== */

.services-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 31px;
	text-align: center;
	padding: 0 40px;
}

.services-grid__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* ==========================================================================
   Link hover state
   ========================================================================== */

.services-grid__link a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.services-grid__link a:hover,
.services-grid__link a:focus {
	color: var(--wp--preset--color--secondary);
}

/* ==========================================================================
   Vertical Dividers
   ========================================================================== */

.services-grid__divider {
	width: 1px;
	height: 325px;
	background-color: var(--wp--preset--color--secondary);
	align-self: center;
}

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

@media (max-width: 1440px) {
	.services-grid {
		padding: var(--wp--preset--spacing--small-padding) var(--wp--preset--spacing--40);
	}

	.services-grid__item {
		padding: 0 30px;
	}
}

@media (max-width: 1280px) {
	.services-grid__item {
		padding: 0 24px;
		gap: 24px;
	}

	.services-grid__divider {
		height: 280px;
	}
}

@media (max-width: 1024px) {
	.services-grid {
		grid-template-columns: 1fr auto 1fr auto 1fr;
		padding: 80px var(--wp--preset--spacing--30);
	}

	.services-grid__item {
		padding: 0 16px;
		gap: 20px;
	}

	.services-grid__divider {
		height: 240px;
	}
}

@media (max-width: 768px) {
	.services-grid {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 60px 24px;
	}

	.services-grid__item {
		padding: 40px 20px;
	}

	/* Hide vertical dividers on mobile */
	.services-grid__divider {
		display: none;
	}

	/* Add horizontal dividers between items - REQUIRES CSS (pseudo-element) */
	.services-grid__item:not(:last-child)::after {
		content: '';
		display: block;
		width: 200px;
		height: 1px;
		background-color: var(--wp--preset--color--secondary);
		margin-top: 40px;
	}
}

@media (max-width: 375px) {
	.services-grid {
		padding: 48px 20px;
	}

	.services-grid__item {
		padding: 32px 16px;
		gap: 16px;
	}

	.services-grid__item:not(:last-child)::after {
		width: 150px;
		margin-top: 32px;
	}
}

@media (max-width: 320px) {
	.services-grid {
		padding: 40px 16px;
	}

	.services-grid__item {
		padding: 28px 12px;
		gap: 14px;
	}

	.services-grid__item:not(:last-child)::after {
		width: 120px;
		margin-top: 28px;
	}
}