/* Collection owns arrangement; Card owns one item. */

.zare-collection {
	--zare-collection-columns: 1;
	--zare-collection-gap: var(--zare-recipe-gap-default);
	box-sizing: border-box;
	min-inline-size: 0;
}

.zare-collection--grid,
.zare-collection--carousel-fallback {
	display: grid;
	grid-template-columns: repeat(var(--zare-collection-columns), minmax(0, 1fr));
	gap: var(--zare-collection-gap);
	align-items: stretch;
}

.zare-collection--grid > *,
.zare-collection--carousel-fallback > * {
	box-sizing: border-box;
	min-inline-size: 0;
}

.zare-collection--grid > :is(
	.zare-recipe--card-simple,
	.zare-recipe--card-surface,
	.zare-recipe--card-cover
),
.zare-collection--carousel-fallback > .zare-theme-carousel__item > :is(
	.zare-recipe--card-simple,
	.zare-recipe--card-surface,
	.zare-recipe--card-cover
) {
	block-size: 100%;
}

.zare-collection--carousel-fallback > .zare-theme-carousel__item {
	display: flex;
}

.zare-collection--carousel-fallback > .zare-theme-carousel__item > * {
	inline-size: 100%;
}

.zare-collection--list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--zare-collection-gap);
	container-name: zare-collection-list;
	container-type: inline-size;
	--zare-collection-list-card-min-block-size: auto;
}

.zare-collection--list.zare-collection-list-card-size-compact {
	--zare-collection-list-card-min-block-size: var(--wp--custom--zare-experience--collection--list-card-min-block-size-compact);
}

.zare-collection--list.zare-collection-list-card-size-default {
	--zare-collection-list-card-min-block-size: var(--wp--custom--zare-experience--collection--list-card-min-block-size-default);
}

.zare-collection--list.zare-collection-list-card-size-comfortable {
	--zare-collection-list-card-min-block-size: var(--wp--custom--zare-experience--collection--list-card-min-block-size-comfortable);
}

/* Mirror Gutenberg InnerBlocks wrappers for editor/frontend List parity. */
.zare-collection--list > .block-editor-inner-blocks,
.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout {
	min-inline-size: 0;
}

.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--zare-collection-gap);
}


.zare-collection-cols-mobile-1 {
	--zare-collection-columns: 1;
}

.zare-collection-cols-mobile-2 {
	--zare-collection-columns: 2;
}

.zare-collection-gap-mobile-compact {
	--zare-collection-gap: var(--zare-recipe-gap-compact);
}

.zare-collection-gap-mobile-default {
	--zare-collection-gap: var(--zare-recipe-gap-default);
}

.zare-collection-gap-mobile-spacious {
	--zare-collection-gap: var(--zare-recipe-gap-spacious);
}

@media (min-width: 481px) and (max-width: 782px) {
	.zare-collection-cols-tablet-1 { --zare-collection-columns: 1; }
	.zare-collection-cols-tablet-2 { --zare-collection-columns: 2; }
	.zare-collection-cols-tablet-3 { --zare-collection-columns: 3; }
	.zare-collection-cols-tablet-4 { --zare-collection-columns: 4; }

	.zare-collection-gap-tablet-compact { --zare-collection-gap: var(--zare-recipe-gap-compact); }
	.zare-collection-gap-tablet-default { --zare-collection-gap: var(--zare-recipe-gap-default); }
	.zare-collection-gap-tablet-spacious { --zare-collection-gap: var(--zare-recipe-gap-spacious); }
}

@media (min-width: 783px) {
	.zare-collection-cols-desktop-1 { --zare-collection-columns: 1; }
	.zare-collection-cols-desktop-2 { --zare-collection-columns: 2; }
	.zare-collection-cols-desktop-3 { --zare-collection-columns: 3; }
	.zare-collection-cols-desktop-4 { --zare-collection-columns: 4; }
	.zare-collection-cols-desktop-5 { --zare-collection-columns: 5; }
	.zare-collection-cols-desktop-6 { --zare-collection-columns: 6; }

	.zare-collection-gap-desktop-compact { --zare-collection-gap: var(--zare-recipe-gap-compact); }
	.zare-collection-gap-desktop-default { --zare-collection-gap: var(--zare-recipe-gap-default); }
	.zare-collection-gap-desktop-spacious { --zare-collection-gap: var(--zare-recipe-gap-spacious); }
}

@container zare-collection-list (min-width: 48rem) {
	.zare-collection--list > :is(.zare-recipe--card-simple, .zare-recipe--card-surface),
	.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) {
		display: grid;
		grid-template-areas:
			"media content"
			"media actions";
		grid-template-columns: minmax(var(--wp--custom--zare-experience--collection--list-media-min-inline-size), 38%) minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		align-items: stretch;
		min-block-size: var(--zare-collection-list-card-min-block-size);
	}

	.zare-collection--list > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-media,
	.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-media {
		grid-area: media;
		align-self: stretch;
		inline-size: 100%;
		block-size: 100%;
		min-block-size: 0;
		aspect-ratio: auto;
		contain: size;
		overflow: clip;
	}

	.zare-collection--list > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-media > :where(.wp-block-cover, figure, a, .wp-block-gallery, .zare-media-gallery-runtime),
	.zare-collection--list > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-media > :where(.wp-block-cover, figure, a, .wp-block-gallery, .zare-media-gallery-runtime) > :where(img, .zare-media-gallery-runtime__track),
	.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-media > :where(.wp-block-cover, figure, a, .wp-block-gallery, .zare-media-gallery-runtime),
	.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-media > :where(.wp-block-cover, figure, a, .wp-block-gallery, .zare-media-gallery-runtime) > :where(img, .zare-media-gallery-runtime__track) {
		inline-size: 100%;
		block-size: 100%;
		min-block-size: 0;
	}

	.zare-collection--list > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-content,
	.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-content {
		grid-area: content;
	}

	.zare-collection--list > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-action-region,
	.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) > .zare-recipe__card-action-region {
		grid-area: actions;
		margin-block-start: 0;
	}

	.zare-collection--list.zare-collection-list-media-end > :is(.zare-recipe--card-simple, .zare-recipe--card-surface),
	.zare-collection--list.zare-collection-list-media-end > .block-editor-inner-blocks > .block-editor-block-list__layout > :is(.zare-recipe--card-simple, .zare-recipe--card-surface) {
		grid-template-areas:
			"content media"
			"actions media";
		grid-template-columns: minmax(0, 1fr) minmax(var(--wp--custom--zare-experience--collection--list-media-min-inline-size), 38%);
	}

	.zare-collection--list > :is(.zare-recipe--card-simple, .zare-recipe--card-surface):not(:has(> .zare-recipe__card-media)),
	.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout > :is(.zare-recipe--card-simple, .zare-recipe--card-surface):not(:has(.zare-recipe__card-media)) {
		grid-template-areas:
			"content"
			"actions";
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Collection owns item spacing. Core Flow margins on direct children must not
 * stack with the responsive Collection gap or stagger Grid/List rows. */
.zare-collection:is(.zare-collection--grid, .zare-collection--list, .zare-collection--carousel-fallback) > *,
.zare-collection--list > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
	margin-block: 0;
}