/* Main container - 3 column grid */
.wp-block-acf-card-grid-block {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 2fr;
	gap: 16px;
}

/* Individual card styling */
.wp-block-acf-card-grid-block .card-grid-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e9e9e9; /* gray-100 */
	overflow: hidden;
	background: white;
}

/* Stacked column container for right column cards */
.wp-block-acf-card-grid-block .card-grid-stacked-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Cards inside the stacked column - horizontal layout */
.wp-block-acf-card-grid-block .card-grid-stacked-column .card-grid-card {
	flex-direction: row;
	height: 220px;
	overflow: visible;
}

/* Image container within each card */
.wp-block-acf-card-grid-block .card-grid-image {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

/* First two cards use full card width with square images */
.wp-block-acf-card-grid-block > .card-grid-card .card-grid-image {
	width: 100%;
	height: auto;
}

/* Stacked column cards - horizontal images with max-width */
.wp-block-acf-card-grid-block .card-grid-stacked-column .card-grid-card .card-grid-image {
	width: 220px;
	max-width: 220px;
	height: auto;
}

.wp-block-acf-card-grid-block .card-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Content area within each card */
.wp-block-acf-card-grid-block .card-grid-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	flex: 1; /* Allow content to fill available space */
}

.wp-block-acf-card-grid-block .card-grid-content-inner {
	flex: 1;
}

/* Right column cards: tighter content and intentionally visible overflow */
.wp-block-acf-card-grid-block .card-grid-stacked-column .card-grid-card .card-grid-content {
	padding: 0.75rem;
	gap: 0.5rem;
	overflow: visible;
}

.wp-block-acf-card-grid-block .card-grid-stacked-column .card-grid-card .card-grid-content-inner {
	overflow: visible;
}
.wp-block-acf-card-grid-block .card-grid-content-inner p {
	font-size: var(--wp--preset--font-size--small);
	margin: 0.5em 0;
	display: -webkit-box;
	line-clamp: 4;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wp-block-acf-card-grid-block .card-grid-content-inner > p:first-child {
	margin-top: 0;
}

.wp-block-acf-card-grid-block .card-grid-content-inner > p:last-child {
	margin-bottom: 0;
}

/* Button styling */
.wp-block-acf-card-grid-block .wp-block-buttons {
	margin-top: auto;
}

/* Outline button variation styles from theme.json */
.wp-block-acf-card-grid-block .wp-block-button__link {
	border-radius: var(--wp--custom--button--border-radius);
	border-width: var(--wp--custom--button--border-width);
	border-style: solid;
	border-color: var(--wp--custom--button--outline-border-color);
	background-color: var(--wp--custom--button--outline-background);
	color: var(--wp--custom--button--outline-text);
	padding-top: calc(0.5rem - 1px);
	padding-bottom: calc(0.5rem - 1px);
	padding-left: calc(1rem - 1px);
	padding-right: calc(1rem - 1px);
}

.wp-block-acf-card-grid-block .wp-block-button__link:hover {
	border-color: var(--wp--custom--button--outline-border-color-hover);
	background-color: var(--wp--custom--button--outline-background-hover);
	color: var(--wp--custom--button--outline-text-hover);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
	.wp-block-acf-card-grid-block {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Third column (stacked cards) spans full width below first two */
	.wp-block-acf-card-grid-block .card-grid-stacked-column {
		grid-column: 1 / -1;
	}
	.wp-block-acf-card-grid-block .card-grid-content-inner p {
		display: -webkit-box;
		line-clamp: 3;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

@media (max-width: 768px) {
	.wp-block-acf-card-grid-block {
		grid-template-columns: 1fr;
	}

	/* All columns stack vertically */
	.wp-block-acf-card-grid-block .card-grid-stacked-column {
		grid-column: 1;
	}

	/* Keep horizontal layout for stacked cards on mobile */
	.wp-block-acf-card-grid-block .card-grid-stacked-column .card-grid-card {
		flex-direction: row;
	}

	/* Adjust stacked card images for mobile */
	.wp-block-acf-card-grid-block .card-grid-stacked-column .card-grid-card .card-grid-image {
		width: 150px;
		max-width: 150px;
		height: auto;
	}
	.wp-block-acf-card-grid-block .card-grid-stacked-column .card-grid-card {
		height: 150px;
	}
	.wp-block-acf-card-grid-block .card-grid-content {
		padding: 1rem;
	}
	.wp-block-acf-card-grid-block .card-grid-content-inner p {
		display: -webkit-box;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Editor Styles */
.block-editor-block-list__block[data-type="acf/card-grid-block"].wp-block-acf-card-grid-block {
	display: block;
}
.block-editor-block-list__block[data-type="acf/card-grid-block"].wp-block-acf-card-grid-block.acf-block-preview > div {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 2fr;
	gap: 16px;
}