/**
 * ZARE Card Recipe Family.
 *
 * Card-specific anatomy stays separate from the generic recipe foundation.
 * Visual values resolve through ZARE/WordPress semantic tokens; collections
 * own Grid/List/Carousel arrangement in DS-5P4.
 */

:is(.zare-recipe--card-simple, .zare-recipe--card-surface, .zare-recipe--card-cover) {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--zare-experience--shape--surface);
}

.zare-recipe--card-simple {
	color: inherit;
	background: transparent;
	box-shadow: none;
}

.zare-recipe--card-surface,
.zare-recipe--card-cover {
	color: var(--wp--preset--color--card-foreground);
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--zare-experience--border--width) solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--zare-experience--elevation--surface);
}

.zare-recipe__card-media,
.zare-recipe__card-content,
.zare-recipe__card-facts,
.zare-recipe__card-action-region,
.zare-recipe__card-separator-frame,
.zare-recipe__card-action-surface,
.zare-recipe__card-action-strip,
.zare-recipe__card-action-left,
.zare-recipe__card-actions,
.zare-recipe__card-media-overlay,
.zare-recipe__card-media-top-start,
.zare-recipe__card-media-bottom-start {
	box-sizing: border-box;
	min-inline-size: 0;
}

.zare-recipe__card-media {
	overflow: clip;
}

.zare-recipe__card-media :where(img, video, .wp-block-cover__image-background) {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.zare-recipe__card-media > .wp-block-cover {
	min-block-size: var(--wp--custom--zare-experience--card--media-block-size);
}

.zare-recipe--card-media-inset .zare-recipe__card-media {
	margin-block-start: var(--zare-recipe-padding-default);
	margin-inline: var(--zare-recipe-padding-default);
	border-radius: var(--wp--custom--zare-experience--shape--media);
}

.zare-recipe--card-media-edge .zare-recipe__card-media {
	border-radius: var(--wp--custom--zare-experience--radius--none);
}

.zare-recipe__card-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--zare-recipe-gap-default);
	padding-block: var(--zare-recipe-padding-default);
	padding-inline: var(--zare-recipe-padding-default);
}

.zare-recipe__card-content > *,
.zare-recipe__card-facts > *,
.zare-recipe__card-action-strip > *,
.zare-recipe__card-action-left > *,
.zare-recipe__card-actions > * {
	margin-block: 0;
}

.zare-recipe__card-badge,
.zare-recipe__card-title,
.zare-recipe__card-description {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.zare-recipe__card-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--zare-recipe-action-gap) var(--zare-recipe-gap-default);
}

.zare-recipe__card-action-region {
	margin-block-start: auto;
}

.zare-recipe__card-action-region > * + * {
	margin-block-start: 0;
}

.zare-recipe__card-separator-frame {
	padding-inline: var(--zare-recipe-padding-default);
}

.zare-recipe__card-separator-frame > * {
	margin-block: 0;
}

:root .wp-block-separator.zare-recipe__card-separator {
	inline-size: 100%;
	max-inline-size: none;
	margin-block: 0;
	color: var(--wp--preset--color--border);
}

.zare-recipe__card-action-surface {
	padding-block: var(--zare-recipe-padding-default);
	padding-inline: var(--zare-recipe-padding-default);
}

.zare-recipe__card-action-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--zare-recipe-action-gap) var(--zare-recipe-gap-default);
}

.zare-recipe__card-action-left,
.zare-recipe__card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--zare-recipe-action-gap);
}

.zare-recipe__card-actions {
	margin-inline-start: auto;
	justify-content: flex-end;
}

.zare-recipe--card-media-highlights .wp-block-cover__inner-container {
	min-block-size: var(--wp--custom--zare-experience--card--media-block-size);
}

.zare-recipe__card-media-overlay {
	display: flex;
	min-block-size: var(--wp--custom--zare-experience--card--media-block-size);
	flex-direction: column;
	justify-content: space-between;
	gap: var(--zare-recipe-gap-default);
	padding-block: var(--zare-recipe-padding-default);
	padding-inline: var(--zare-recipe-padding-default);
}

.zare-recipe__card-media-top-start,
.zare-recipe__card-media-bottom-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--zare-recipe-action-gap);
}

.zare-recipe__card-media-highlight {
	--zare-media-highlight-padding-block: var(--wp--custom--zare-experience--density--control-block-padding);
	--zare-media-highlight-padding-inline: var(--wp--custom--zare-experience--density--control-inline-padding);
	--zare-media-highlight-gap: var(--zare-theme-icon-standard-inline-gap);
	--zare-media-highlight-font-size: var(--wp--preset--font-size--sm);
	--zare-media-highlight-strong-font-size: var(--wp--preset--font-size--base);
	--zare-media-highlight-icon-size: var(--zare-theme-icon-standard-inline-size);
	display: inline-flex;
	inline-size: fit-content;
	align-items: center;
	gap: var(--zare-media-highlight-gap);
	padding-block: var(--zare-media-highlight-padding-block);
	padding-inline: var(--zare-media-highlight-padding-inline);
	border-radius: var(--wp--custom--zare-experience--shape--pill);
}

.zare-recipe__card-media-highlight > * {
	margin-block: 0;
}

:root .zare-recipe__card-media-highlight p {
	font-size: var(--zare-media-highlight-font-size);
	line-height: 1.2;
}

:root .zare-recipe__card-media-highlight--strong p {
	font-size: var(--zare-media-highlight-strong-font-size);
}

.zare-recipe__card-media-highlight .wp-block-icon {
	inline-size: var(--zare-media-highlight-icon-size);
	block-size: var(--zare-media-highlight-icon-size);
}


.zare-media-highlight-size-compact {
	--zare-media-highlight-padding-block: var(--wp--preset--spacing--1);
	--zare-media-highlight-padding-inline: var(--wp--preset--spacing--2);
	--zare-media-highlight-gap: var(--zare-theme-icon-compact-inline-gap);
	--zare-media-highlight-font-size: var(--wp--preset--font-size--xs);
	--zare-media-highlight-strong-font-size: var(--wp--preset--font-size--sm);
}

.zare-media-highlight-size-default,
.zare-media-highlight-size-auto {
	--zare-media-highlight-font-size: var(--wp--preset--font-size--sm);
	--zare-media-highlight-strong-font-size: var(--wp--preset--font-size--base);
}

.zare-media-highlight-size-large {
	--zare-media-highlight-padding-block: var(--wp--preset--spacing--2);
	--zare-media-highlight-padding-inline: var(--wp--preset--spacing--4);
	--zare-media-highlight-gap: var(--wp--preset--spacing--2);
	--zare-media-highlight-font-size: var(--wp--preset--font-size--base);
	--zare-media-highlight-strong-font-size: var(--wp--preset--font-size--lg);
}

@container (max-width: 480px) {
	.zare-media-highlight-size-auto {
		--zare-media-highlight-padding-block: var(--wp--preset--spacing--1);
		--zare-media-highlight-padding-inline: var(--wp--preset--spacing--2);
		--zare-media-highlight-gap: var(--zare-theme-icon-standard-inline-gap);
		--zare-media-highlight-font-size: var(--wp--preset--font-size--xs);
		--zare-media-highlight-strong-font-size: var(--wp--preset--font-size--sm);
	}
}

.zare-recipe--card-cover > .zare-recipe__card-media {
	display: flex;
	flex: 1 1 auto;
	inline-size: 100%;
}

.zare-recipe--card-cover > .zare-recipe__card-media > .wp-block-cover {
	inline-size: 100%;
	min-block-size: var(--wp--custom--zare-experience--card--cover-min-block-size);
	border-radius: var(--wp--custom--zare-experience--radius--none);
}

.zare-recipe--card-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-inline-size: 0;
}

.zare-recipe--card-cover .zare-recipe__card-content {
	flex: 0 1 auto;
}

.zare-recipe--card-cover .zare-recipe__card-separator {
	color: currentColor;
}

@media (max-width: 480px) {
	.zare-recipe__card-media-overlay,
	.zare-recipe__card-media-top-start,
	.zare-recipe__card-media-bottom-start {
		align-items: flex-start;
	}

	.zare-recipe__card-actions {
		margin-inline-start: 0;
		justify-content: flex-start;
	}
}