/**
 * core/group - Overlay Card
 */


.wp-block-group.wcs-overlay-card {
	--card--border--bottom--radius: var(--wp--custom--border--radius--10);

	border-radius: var(--wp--custom--border--radius--10) var(--wp--custom--border--radius--10) var(--card--border--bottom--radius) var(--card--border--bottom--radius);
	box-shadow: 0 var(--card--border--bottom--size, 4px) 0 0 var(--wp--preset--color--accent-4);
	color: var(--wp--preset--color--white);
	overflow: clip;
	transition: box-shadow var(--wp--custom--transition--hover-slow), border-radius var(--wp--custom--transition--hover-slow);
	z-index: 1;
	will-change: box-shadow, border-radius;
}

.wp-block-group.wcs-overlay-card:not(.block-editor-block-list__block) {
	container: overlay-card / inline-size;
}

.wcs-overlay-card__inner {
	--card--image--aspect-ratio: 327 / 450;

	display: grid;
	position: relative;
	padding: 0;
	aspect-ratio: var(--card--image--aspect-ratio);
}

.wp-block-group.wcs-overlay-card.block-editor-block-list__block {
	block-size: 100%;
	background-color: #677584;
}

.wp-block-group.wcs-overlay-card :is(.wp-block-image, .wcs-overlay-card__content) {
	grid-area: 1 / 1;
}

/* Content */
.wcs-overlay-card__content {
	display: grid;
	align-content: end;
	align-items: end;
	block-size: 100%;
	inline-size: 100%;
	margin: 0 !important;
	padding: var(--wp--preset--spacing--30);
	z-index: 1;
}

.wp-block-group .wcs-overlay-card__content .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--10);
}

.wcs-overlay-card__subheading {
	margin-block-start: 10px !important;
}

.wp-block-group.wcs-overlay-card .wp-block-button.is-style-plain .wp-block-button__link {
	--button--color--text-hover: var(--wp--preset--color--accent-4);
}

.wcs-overlay-card__bottom {
	display: block !important;
	margin: 0 !important;
	padding-block-start: var(--wp--preset--spacing--10);
	overflow: hidden;
}

.wcs-overlay-card__desc:not(.block-editor-block-list__block) {
	block-size: 0;
	overflow: hidden;
	visibility: hidden;
}

/* Image */
.wp-block-group.wcs-overlay-card .wp-block-image {
	block-size: 100%;
	inline-size: 100%;
	border-radius: var(--wp--custom--border--radius--10);
	overflow: hidden;
	z-index: 0;
}

.wp-block-group.wcs-overlay-card .wp-block-image :where(> div, img) {
	block-size: 100%;
	inline-size: 100%;
}

.wp-block-group.wcs-overlay-card .wp-block-image img {
	transition: scale var(--wp--custom--transition--hover-slow);
	object-fit: cover;
}

.wp-block-group.wcs-overlay-card .wp-block-image.block-editor-block-list__block {
	min-block-size: 300px;
}

.wcs-overlay-card__content-inner {
	align-items: end;
}

@container overlay-card (width >= 250px) {
	.wcs-overlay-card__bottom {
		padding-block-start: 0;
	}

	.wp-block-group.wcs-overlay-card__content {
		block-size: 100%;
	}

	.wcs-overlay-card__desc:not(.block-editor-block-list__block) {
		block-size: auto;
		padding-block-start: var(--wp--preset--spacing--10);
		overflow: visible;
		visibility: visible;
	}
}

/* Hover */
@media (hover: hover) {
	.wcs-overlay-card__content-inner {
		min-block-size: var(--card--dimensions--min-block-size);
		translate: 0 var(--card--bottom--dimensions--block-size);
		opacity: 0;
		transition: translate var(--wp--custom--transition--hover-slow), opacity var(--wp--custom--transition--hover-slow);
	}

	.wcs-overlay-card__bottom {
		max-inline-size: 100%;
		opacity: 0;
		transition: opacity var(--wp--custom--transition--hover-slow);
	}

	.wcs-overlay-card:is(:hover) {
		--card--border--bottom--size: 16px;
		--card--border--bottom--radius: var(--wp--preset--spacing--20);
	}

	.wcs-overlay-card:is(:hover) .wp-block-heading.is-style-ornamental::before {
		--decoration--inline-size: 32px;
	}

	.wcs-overlay-card:is(:hover) .wcs-overlay-card__content-inner {
		translate: 0 0;
	}

	.wcs-overlay-card:is(:hover) .wcs-overlay-card__bottom {
		opacity: 1;
	}

	.wcs-overlay-card:is(:hover) .wp-block-image img {
		scale: 1.05;
	}

	.wcs-overlay-card.is-ready .wcs-overlay-card__content-inner {
		opacity: 1;
	}
}

@container overlay-card (width >= 452px) {
	.wcs-overlay-card__content {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}
}

@media (width >= 1200px) {
	.wcs-overlay-card__inner {
		--card--image--aspect-ratio: 395 / 600;
	}
}