.sus-services-grid {
	--services-card-bg: #f4e6d8;
	--services-image-height: 320px;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.sus-services-grid.alignwide {
	gap: 2.5rem;
	padding-left: var(--sus-content-gutter, clamp(1.5rem, 5vw, 2.5rem));
	padding-right: var(--sus-content-gutter, clamp(1.5rem, 5vw, 2.5rem));
	box-sizing: border-box;
}

.sus-services-grid.alignfull {
	gap: 2.5rem;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: var(--sus-content-gutter, clamp(1.5rem, 5vw, 2.5rem));
	padding-right: var(--sus-content-gutter, clamp(1.5rem, 5vw, 2.5rem));
	box-sizing: border-box;
}

/* Ensure the grid inside respects the container */
.sus-services-grid.alignfull .sus-services-grid__grid,
.sus-services-grid.alignwide .sus-services-grid__grid {
	max-width: 100%;
}

/* When inside a constrained post-content, ensure it breaks out properly */
.wp-block-post-content .sus-services-grid.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Wide blocks need to break out of constrained containers and use wide size */
/* When inside a constrained layout, break out and center properly */
.wp-block-post-content.is-layout-constrained > .sus-services-grid.alignwide,
.is-layout-constrained > .sus-services-grid.alignwide {
	/* Break out of container to viewport edges */
	width: 100vw !important;
	max-width: 1400px !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	position: relative;
	/* Center the 1400px block: position at viewport center, then offset by half block width */
	left: 50vw !important;
	transform: translateX(-50%) !important;
}

/* On screens smaller than wide size, use full width */
@media (max-width: 1400px) {
	.wp-block-post-content.is-layout-constrained > .sus-services-grid.alignwide,
	.is-layout-constrained > .sus-services-grid.alignwide {
		left: 0 !important;
		transform: none !important;
		max-width: 100vw !important;
	}
}

/* On mobile, prevent alignwide from breaking out - stay within container */
@media (max-width: 782px) {
	.wp-block-post-content.is-layout-constrained > .sus-services-grid.alignwide,
	.is-layout-constrained > .sus-services-grid.alignwide,
	.sus-services-grid.alignwide {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
		transform: none !important;
		position: relative !important;
	}
	
	/* Reduce padding on mobile for alignwide blocks */
	.sus-services-grid.alignwide {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

.sus-services-grid__intro {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sus-services-grid__intro:empty {
	display: none;
}

.sus-services-grid__heading {
	margin: 0;
	font-size: clamp(2rem, 3vw, 2.5rem);
}

.sus-services-grid__description {
	margin: 0 auto;
	font-size: 1.125rem;
	line-height: 1.6;
	color: inherit;
}

.sus-services-grid__grid {
	display: grid;
	/* Always 3 columns - automatically wraps to 2 rows (3x2) for 6 cards, 3 rows (3x3) for 9 cards */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

/* Special layout for 5 cards: first row with 3 cards, second row with 2 cards (both rows full width) */
/* Use a 6-column grid to allow first 3 cards to span 2 columns each, last 2 cards to span 3 columns each */
.sus-services-grid__grid[data-card-count="5"] {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(1),
.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(2),
.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(3) {
	/* First 3 cards: each spans 2 of 6 columns = 1/3 width each */
	grid-column: span 2;
}

.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(4),
.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(5) {
	/* Last 2 cards: each spans 3 of 6 columns = 1/2 width each */
	grid-column: span 3;
}

.sus-services-grid__card {
	background: var(--services-card-bg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sus-services-grid__card--linked {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.sus-services-grid__card:focus,
.sus-services-grid__card:focus-within,
.sus-services-grid__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 45px rgba(10, 37, 74, 0.12);
	outline: none;
}

.sus-services-grid__image-wrapper {
	height: var(--services-image-height);
	overflow: hidden;
	transition: height 0.4s ease;
	background: #f2f2f2;
}

.sus-services-grid__image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	display: block;
}

.sus-services-grid__card:hover .sus-services-grid__image-wrapper,
.sus-services-grid__card:focus .sus-services-grid__image-wrapper,
.sus-services-grid__card:focus-within .sus-services-grid__image-wrapper {
	height: calc(var(--services-image-height) * 0.62);
}

.sus-services-grid__card:hover .sus-services-grid__image-wrapper img,
.sus-services-grid__card:focus .sus-services-grid__image-wrapper img,
.sus-services-grid__card:focus-within .sus-services-grid__image-wrapper img {
	transform: scale(1.05);
}

.sus-services-grid__image-placeholder {
	height: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	text-align: center;
	padding: 1rem;
	color: #4f4f4f;
	background: rgba(0, 0, 0, 0.04);
}

.sus-services-grid__content {
	padding: 1.5rem;
	background: var(--services-card-bg);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sus-services-grid__card-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.sus-services-grid__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	overflow: hidden;
	max-height: 0;
	margin-top: 0;
	opacity: 0;
	transform: translateY(0.5rem);
	pointer-events: none;
	transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease;
}

.sus-services-grid__card:hover .sus-services-grid__card-body,
.sus-services-grid__card:focus .sus-services-grid__card-body,
.sus-services-grid__card:focus-within .sus-services-grid__card-body {
	max-height: 600px;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	margin-top: 0.75rem;
}

.sus-services-grid__card-copy {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sus-services-grid__card-copy > * {
	margin: 0;
	line-height: 1.6;
	font-size: 1rem;
}

.sus-services-grid__card-link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-weight: 600;
}

.sus-services-grid__card-link a,
.sus-services-grid__card-link-label {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.sus-services-grid__card-link a::after,
.sus-services-grid__card-link-label::after {
	content: '›';
	font-size: 1.25em;
	line-height: 1;
	transition: transform 0.3s ease;
}

.sus-services-grid__card:hover .sus-services-grid__card-link a::after,
.sus-services-grid__card:hover .sus-services-grid__card-link-label::after,
.sus-services-grid__card:focus .sus-services-grid__card-link a::after,
.sus-services-grid__card:focus .sus-services-grid__card-link-label::after,
.sus-services-grid__card:focus-within .sus-services-grid__card-link a::after,
.sus-services-grid__card:focus-within .sus-services-grid__card-link-label::after {
	transform: translateX(4px);
}

.sus-services-grid__card-link-url {
	font-size: 0.8125rem;
	color: rgba(10, 37, 74, 0.6);
	word-break: break-word;
}

@media (hover: none) {
	.sus-services-grid__card {
		transform: none !important;
		box-shadow: none !important;
	}

	.sus-services-grid__card,
	.sus-services-grid__card:focus,
	.sus-services-grid__card:focus-within,
	.sus-services-grid__card:hover {
		transform: none;
	}

	.sus-services-grid__image-wrapper {
		height: calc(var(--services-image-height) * 0.72);
	}

	.sus-services-grid__card-body {
		max-height: none;
		opacity: 1;
		margin-top: 0.75rem;
		transform: none;
		pointer-events: auto;
	}
}

@media (max-width: 1080px) {
	.sus-services-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	/* Reset 5-card layout to normal 2-column responsive behavior */
	.sus-services-grid__grid[data-card-count="5"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(1),
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(2),
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(3),
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(4),
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(5) {
		grid-column: span 1;
	}
}

@media (max-width: 720px) {
	.sus-services-grid__grid {
		grid-template-columns: 1fr;
	}
	
	/* Reset 5-card layout to normal 1-column responsive behavior */
	.sus-services-grid__grid[data-card-count="5"] {
		grid-template-columns: 1fr;
	}
	
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(1),
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(2),
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(3),
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(4),
	.sus-services-grid__grid[data-card-count="5"] .sus-services-grid__card:nth-child(5) {
		grid-column: span 1;
	}

	.sus-services-grid__card:hover .sus-services-grid__image-wrapper,
	.sus-services-grid__card:focus .sus-services-grid__image-wrapper,
	.sus-services-grid__card:focus-within .sus-services-grid__image-wrapper {
		height: var(--services-image-height);
	}

	.sus-services-grid__card-body {
		max-height: none;
		opacity: 1;
		margin-top: 0.75rem;
		transform: none;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sus-services-grid,
	.sus-services-grid * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}