/**
* Card - core/group and core/post-template
*/

:is(.wp-block-group,.wp-block-post-template).is-style-card-photo {
	--card--image--aspect-ratio: 543 / 327;
}

.wp-block-post-template.is-style-card-photo .wp-block-post {
	display: grid;
	grid-row: auto / span 3;
}

:is(.wp-block-post-template.is-style-card-photo .wp-block-post, .wp-block-group.is-style-card-photo) {
	grid-template-rows: subgrid;
	gap: 0;
	row-gap: 0;
	block-size: 100%;
	padding-block-end: var(--wp--preset--spacing--30);
	border: 4px solid var(--wp--preset--color--accent-2);
	border-block-end-width: 8px;
	border-radius: 16px;
	overflow: hidden;
}

:is(.wp-block-post-template.is-style-card-photo .wp-block-post,.wp-block-group.is-style-card-photo) > * {
	inline-size: 100%;
}

/* Doesn't have a photo */
:is(.wp-block-post-template.is-style-card-photo .wp-block-post,
.wp-block-group.is-style-card-photo):not(:has(.wp-block-post-featured-image, .wp-block-image)) {
	padding-block-start: var(--wp--preset--spacing--30);
}

/* Media */
figure.wcs-card__media {
	position: relative;
	inline-size: 100%;
	margin-block-end: var(--wp--preset--spacing--40);
	overflow: hidden;
	aspect-ratio: var(--card--image--aspect-ratio);
}

figure.wcs-card__media {
	--image--border--radius: 0;
	--border--radius: 0;
}

figure.wcs-card__media img {
	position: absolute;
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
	object-position: center;
}

:is(.wcs-card__content, .wcs-card__cta) {
	max-inline-size: calc(100% - var(--wp--preset--spacing--resp-24-32) * 2) !important;
	margin-inline: auto;
}

/* Content */
.wp-block-group.wcs-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	max-inline-size: calc(100% - var(--wp--preset--spacing--resp-24-32) * 2);
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* CTA */
:is(.wp-block-buttons, .wp-block-read-more).wcs-card__cta {
	margin-block-start: 0;
}


/* Editor */
.wcs-card__media :is(.components-placeholder, .components-resizable-box__container) {
	block-size: 100% !important;
	max-block-size: 100%;
	inline-size: 100% !important;
	max-inline-size: none !important;
}