/**
 * ZARE generic media presentation grammar.
 *
 * Core Gallery remains the media source. Theme owns static Showcase/fallback
 * geometry and Card media overlay zones; optional Companion owns interaction.
 */

.zare-media-gallery,
.zare-media-showcase,
.zare-recipe__card-media-gallery-stage,
.zare-recipe__card-media-fixed-overlays {
	box-sizing: border-box;
	min-inline-size: 0;
}

.zare-recipe__card-media-gallery-stage {
	position: relative;
	min-block-size: var(--wp--custom--zare-experience--card--media-block-size);
	overflow: clip;
	container-type: inline-size;
}

.zare-recipe__card-media-gallery-stage > :where(.wp-block-gallery, .zare-media-gallery-runtime) {
	min-block-size: var(--wp--custom--zare-experience--card--media-block-size);
}

.zare-recipe__card-media-gallery-stage :where(.wp-block-gallery, .zare-media-gallery-runtime__track, .wp-block-image, img) {
	max-inline-size: 100%;
}

.zare-recipe__card-media-fixed-overlays {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--zare-recipe-gap-default);
	padding: var(--zare-recipe-padding-default);
	pointer-events: none;
}

.zare-recipe__card-media-fixed-overlays > * {
	pointer-events: none;
}

/*
 * Static Companion-off Showcase presentation.
 *
 * Showcase is a bounded five-tile mosaic: one lead image plus up to four
 * supporting images. Any additional Core Gallery images remain part of the
 * authored source and Lightbox collection, but are visually hidden from the
 * Showcase surface.
 *
 * Core Gallery uses high-specificity frontend/editor layout selectors. Keep the
 * adapter scoped to opted-in Showcase galleries and mirror enough specificity
 * to own presentation without !important or render-time style rewriting.
 */
.wp-block-gallery.has-nested-images.zare-media-showcase {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(12rem, 1fr));
	gap: var(--zare-media-showcase-gap, var(--wp--custom--zare-experience--gallery--showcase-gap-default));
	margin: 0;
	overflow: clip;
	border-radius: var(--wp--custom--zare-experience--shape--media);
}


.zare-media-showcase-gap-none { --zare-media-showcase-gap: var(--wp--custom--zare-experience--gallery--showcase-gap-none); }
.zare-media-showcase-gap-tight { --zare-media-showcase-gap: var(--wp--custom--zare-experience--gallery--showcase-gap-tight); }
.zare-media-showcase-gap-compact { --zare-media-showcase-gap: var(--wp--custom--zare-experience--gallery--showcase-gap-compact); }
.zare-media-showcase-gap-default { --zare-media-showcase-gap: var(--wp--custom--zare-experience--gallery--showcase-gap-default); }
.zare-media-showcase-gap-roomy { --zare-media-showcase-gap: var(--wp--custom--zare-experience--gallery--showcase-gap-roomy); }
.zare-media-showcase-gap-wide { --zare-media-showcase-gap: var(--wp--custom--zare-experience--gallery--showcase-gap-wide); }

/* Gutenberg inserts one editor-only wrapper between Gallery and Image blocks. */
.zare-media-showcase > .block-editor-inner-blocks {
	grid-column: 1 / -1;
	min-inline-size: 0;
}

.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(12rem, 1fr));
	gap: var(--zare-media-showcase-gap, var(--wp--custom--zare-experience--gallery--showcase-gap-default));
}

.wp-block-gallery.has-nested-images.zare-media-showcase.zare-media-gallery > figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.zare-media-showcase.zare-media-gallery > .block-editor-inner-blocks > .block-editor-block-list__layout > figure.wp-block-image:not(#individual-image) {
	min-inline-size: 0;
	min-block-size: 12rem;
	inline-size: 100%;
	width: 100%;
	max-width: none;
	flex-basis: auto;
	margin: 0;
	overflow: clip;
	align-self: stretch;
	justify-self: stretch;
}

.zare-media-showcase > .wp-block-image:first-child,
.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child {
	grid-column: 1;
	grid-row: 1 / span 2;
	min-block-size: 100%;
}

.zare-media-showcase > .wp-block-image :where(a, img),
.zare-media-showcase > .wp-block-image > img,
.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image :where(a, img),
.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image > img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Showcase is intentionally bounded to one lead + four supporting images. */
.zare-media-showcase > .wp-block-image:nth-child(n + 6),
.wp-block-gallery.zare-media-showcase > figure.wp-block-image:not(#individual-image):nth-child(n + 6),
.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout > figure.wp-block-image:not(#individual-image):nth-child(n + 6) {
	display: none;
}

@container (max-width: 28rem) {
	.zare-recipe__card-media-fixed-overlays {
		gap: var(--zare-recipe-gap-compact);
		padding: var(--zare-recipe-padding-compact);
	}
}

@media (max-width: 782px) {
	.wp-block-gallery.has-nested-images.zare-media-showcase,
	.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto repeat(2, minmax(9rem, 1fr));
	}

	.zare-media-showcase > .wp-block-image:first-child,
	.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
		min-block-size: clamp(14rem, 40vw, 22rem);
	}
}

@media (max-width: 480px) {
	.wp-block-gallery.has-nested-images.zare-media-showcase,
	.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto repeat(2, minmax(8rem, 1fr));
	}

	.zare-media-showcase > .wp-block-image,
	.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image {
		min-block-size: 8rem;
	}

	.zare-media-showcase > .wp-block-image:first-child,
	.zare-media-showcase > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
		min-block-size: clamp(14rem, 52vw, 20rem);
	}
}