/**
 * Block Editor Styles
 * Custom styles for WordPress block extensions
 */

/**
 * Media & Text Block - Responsive Width Styles
 * Applies custom image widths for different screen sizes using CSS custom properties
 */

 .block-editor-block-inspector .components-base-control:where(:not(:last-child)), .block-editor-block-inspector .components-radio-control:where(:not(:last-child)) {
	margin-bottom: 0;
 }

/* Desktop (≥1000px) - Based on Tailwind 'md' breakpoint */
@media (min-width: 1000px) {
	.wp-block-media-text[data-image-width-desktop] {
		grid-template-columns: var(--image-width-desktop) 1fr !important;
	}

	/* Also apply in the editor */
	.editor-styles-wrapper .wp-block-media-text[data-image-width-desktop] {
		grid-template-columns: var(--image-width-desktop) 1fr !important;
	}

	/* Handle media-on-right layout - flip the grid columns when image is on the right */
	.wp-block-media-text.has-media-on-the-right[data-image-width-desktop] {
		grid-template-columns: 1fr var(--image-width-desktop) !important;
	}
}

/* Tablet (540px - 999px) - Based on Tailwind 'sm' to 'md' range */
@media (min-width: 540px) and (max-width: 999px) {
	.wp-block-media-text[data-image-width-tablet] {
		grid-template-columns: var(--image-width-tablet) 1fr !important;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-width-tablet] {
		grid-template-columns: var(--image-width-tablet) 1fr !important;
	}

	/* Handle media-on-right layout */
	.wp-block-media-text.has-media-on-the-right[data-image-width-tablet] {
		grid-template-columns: 1fr var(--image-width-tablet) !important;
	}
}

/* Mobile (≤539px) - Based on Tailwind 'mobile' breakpoint */
@media (max-width: 539px) {
	/* Only apply grid columns if NOT stacked on mobile */
	.wp-block-media-text[data-image-width-mobile]:not(.is-stacked-on-mobile) {
		grid-template-columns: var(--image-width-mobile) 1fr !important;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-width-mobile]:not(.is-stacked-on-mobile) {
		grid-template-columns: var(--image-width-mobile) 1fr !important;
	}

	/* If stacked on mobile, apply width directly to the image */
	.wp-block-media-text[data-image-width-mobile].is-stacked-on-mobile .wp-block-media-text__media {
		width: var(--image-width-mobile);
		max-width: 100%;
	}

	.wp-block-media-text[data-image-width-mobile].is-stacked-on-mobile .wp-block-media-text__media img,
	.wp-block-media-text[data-image-width-mobile].is-stacked-on-mobile .wp-block-media-text__media video {
		width: 100%;
		height: auto;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-width-mobile].is-stacked-on-mobile .wp-block-media-text__media {
		width: var(--image-width-mobile);
		max-width: 100%;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-width-mobile].is-stacked-on-mobile .wp-block-media-text__media img,
	.editor-styles-wrapper .wp-block-media-text[data-image-width-mobile].is-stacked-on-mobile .wp-block-media-text__media video {
		width: 100%;
		height: auto;
	}

	/* Mobile Image Alignment - Stacked Layout */
	/* Left alignment */
	.wp-block-media-text.is-stacked-on-mobile[data-image-alignment-mobile="left"] .wp-block-media-text__media {
		justify-self: start;
	}

	.editor-styles-wrapper .wp-block-media-text.is-stacked-on-mobile[data-image-alignment-mobile="left"] .wp-block-media-text__media {
		justify-self: start;
	}

	/* Center alignment (default) */
	.wp-block-media-text.is-stacked-on-mobile[data-image-alignment-mobile="center"] .wp-block-media-text__media,
	.wp-block-media-text.is-stacked-on-mobile[data-image-width-mobile]:not([data-image-alignment-mobile]) .wp-block-media-text__media {
		justify-self: center;
	}

	.editor-styles-wrapper .wp-block-media-text.is-stacked-on-mobile[data-image-alignment-mobile="center"] .wp-block-media-text__media,
	.editor-styles-wrapper .wp-block-media-text.is-stacked-on-mobile[data-image-width-mobile]:not([data-image-alignment-mobile]) .wp-block-media-text__media {
		justify-self: center;
	}

	/* Right alignment */
	.wp-block-media-text.is-stacked-on-mobile[data-image-alignment-mobile="right"] .wp-block-media-text__media {
		justify-self: end;
	}

	.editor-styles-wrapper .wp-block-media-text.is-stacked-on-mobile[data-image-alignment-mobile="right"] .wp-block-media-text__media {
		justify-self: end;
	}

	/* Mobile Image Alignment - Non-Stacked Layout (side-by-side) */
	/* Left alignment */
	.wp-block-media-text[data-image-alignment-mobile="left"]:not(.is-stacked-on-mobile) .wp-block-media-text__media {
		justify-self: start;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-alignment-mobile="left"]:not(.is-stacked-on-mobile) .wp-block-media-text__media {
		justify-self: start;
	}

	/* Center alignment */
	.wp-block-media-text[data-image-alignment-mobile="center"]:not(.is-stacked-on-mobile) .wp-block-media-text__media {
		justify-self: center;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-alignment-mobile="center"]:not(.is-stacked-on-mobile) .wp-block-media-text__media {
		justify-self: center;
	}

	/* Right alignment */
	.wp-block-media-text[data-image-alignment-mobile="right"]:not(.is-stacked-on-mobile) .wp-block-media-text__media {
		justify-self: end;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-alignment-mobile="right"]:not(.is-stacked-on-mobile) .wp-block-media-text__media {
		justify-self: end;
	}

	/* Handle media-on-right layout */
	.wp-block-media-text.has-media-on-the-right[data-image-width-mobile]:not(.is-stacked-on-mobile) {
		grid-template-columns: 1fr var(--image-width-mobile) !important;
	}
}

/**
 * Ensure text content fills remaining space
 * This ensures auto-complement behavior
 */
.wp-block-media-text[data-image-width-desktop] .wp-block-media-text__content,
.wp-block-media-text[data-image-width-tablet] .wp-block-media-text__content,
.wp-block-media-text[data-image-width-mobile] .wp-block-media-text__content {
	justify-self: stretch;
	width: 100%;
}

/**
 * Prevent layout break on very small widths
 * Ensure minimum usable space for text content
 */
.wp-block-media-text {
	min-height: auto;
}

.wp-block-media-text .wp-block-media-text__media {
	min-width: 0; /* Allow flex/grid item to shrink below content size */
}

.wp-block-media-text .wp-block-media-text__content {
	min-width: 0; /* Prevent overflow */
	overflow-wrap: break-word;
}

/**
 * Image Margins - Responsive Breakpoints
 * Custom margins override alignment auto margins when explicitly set
 */

/* Desktop margins (≥1000px) */
@media (min-width: 1000px) {
	.wp-block-media-text[data-image-margin-desktop] .wp-block-media-text__media {
		margin: var(--image-margin-desktop) !important;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-margin-desktop] .wp-block-media-text__media {
		margin: var(--image-margin-desktop) !important;
	}
}

/* Tablet margins (540px - 999px) */
@media (min-width: 540px) and (max-width: 999px) {
	.wp-block-media-text[data-image-margin-tablet] .wp-block-media-text__media {
		margin: var(--image-margin-tablet) !important;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-margin-tablet] .wp-block-media-text__media {
		margin: var(--image-margin-tablet) !important;
	}
}

/* Mobile margins (≤539px) */
@media (max-width: 539px) {
	.wp-block-media-text[data-image-margin-mobile] .wp-block-media-text__media {
		margin: var(--image-margin-mobile) !important;
	}

	.editor-styles-wrapper .wp-block-media-text[data-image-margin-mobile] .wp-block-media-text__media {
		margin: var(--image-margin-mobile) !important;
	}
}

/**
 * Disable Image Shadow
 * Removes box-shadow when user toggles off image shadow
 * Must override: .prose-blog :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) img
 */
.prose-blog .wp-block-media-text[data-disable-image-shadow] figure img,
.prose-blog .wp-block-media-text[data-disable-image-shadow] .wp-block-media-text__media img {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

/* Also apply in the editor */
.editor-styles-wrapper .prose-blog .wp-block-media-text[data-disable-image-shadow] figure img,
.editor-styles-wrapper .prose-blog .wp-block-media-text[data-disable-image-shadow] .wp-block-media-text__media img {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}