/*
 * Position and zoom for Image blocks (inc/image-crop.php, assets/js/image-crop.js).
 *
 * The picture moves and scales inside its own frame: span.ylb-crop on the site
 * (so a caption is never covered), and the figure itself in the editor, where
 * the picture sits directly in the block. --ylb-fx / --ylb-fy is the point
 * that stays in view. --ylb-zoom above 1 zooms in inside the frame; below 1 the
 * whole framed picture, border and all, gets smaller.
 */

.wp-block-image.has-ylb-crop .ylb-crop {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
	line-height: 0;
}

.wp-block-image.has-ylb-crop .ylb-crop,
.wp-block-image.has-ylb-crop:has(> img) {
	overflow: hidden;
	/* Zooming out shrinks the frame itself, so its border shrinks with the picture. */
	transform: scale(min(var(--ylb-zoom, 1), 1));
	transform-origin: 50% 50%;
}

/* Editor: a caption stays readable above a zoomed picture. */
.wp-block-image.has-ylb-crop:has(> img) > figcaption {
	position: relative;
	z-index: 1;
}

/*
 * The whole picture (contain) grows by --ylb-cover so it fills the frame like a
 * normal cropped image, and by the zoom when zooming in.
 */
.wp-block-image.has-ylb-crop img {
	object-fit: contain !important;
	object-position: var(--ylb-fx, 50%) var(--ylb-fy, 50%);
	transform: scale(calc(max(var(--ylb-zoom, 1), 1) * var(--ylb-cover, 1)));
	transform-origin: var(--ylb-fx, 50%) var(--ylb-fy, 50%);
}

/* Images that fill their figure (full-width styles) keep doing so in the frame. */
.wp-block-image.has-ylb-crop:not(.is-resized) .ylb-crop {
	display: block;
}

/*
 * "Show whole image in the gold ring" (the Position and zoom switch) and the
 * "Gold ring – whole image" block style put the theme's gold ring around the
 * whole picture, in the picture's own shape (a rectangle with softly rounded
 * corners, not an oval), on any image.
 */
.wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole):not(.has-ylb-crop) img {
	border: 6px solid #e0a63a;
	border-radius: clamp(10px, 1.2vw, 16px);
	box-shadow: 0 4px 14px rgba(150, 90, 20, 0.35);
	box-sizing: border-box;
}

html.darkify_dark_mode_enabled.darkify_dark_mode_enabled .wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole):not(.has-ylb-crop) img {
	border-color: #d9ad5a;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/*
 * Gold ring portraits (and whole-image rings): the ring moves from the picture
 * to its frame, so it stays the same size while the picture zooms inside it.
 */
.wp-block-image.is-style-ylb-ring.has-ylb-crop .ylb-crop,
.wp-block-image.is-style-ylb-ring.has-ylb-crop:has(> img),
.wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole).has-ylb-crop .ylb-crop,
.wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole).has-ylb-crop:has(> img) {
	display: block;
	border: 6px solid #e0a63a;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(150, 90, 20, 0.35);
	box-sizing: border-box;
}

/* Whole-image frames keep the picture's rectangle while zooming. */
.wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole).has-ylb-crop .ylb-crop,
.wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole).has-ylb-crop:has(> img) {
	border-radius: clamp(10px, 1.2vw, 16px);
}

.wp-block-image.is-style-ylb-ring.has-ylb-crop img,
.wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole).has-ylb-crop img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

html.darkify_dark_mode_enabled.darkify_dark_mode_enabled .wp-block-image.is-style-ylb-ring.has-ylb-crop .ylb-crop,
html.darkify_dark_mode_enabled.darkify_dark_mode_enabled .wp-block-image.is-style-ylb-ring.has-ylb-crop:has(> img),
html.darkify_dark_mode_enabled.darkify_dark_mode_enabled .wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole).has-ylb-crop .ylb-crop,
html.darkify_dark_mode_enabled.darkify_dark_mode_enabled .wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole).has-ylb-crop:has(> img) {
	border-color: #d9ad5a;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/*
 * "Show whole image (original shape)": the picture keeps its own proportions,
 * so nothing is cut off and the frame (and the gold ring) follows its shape.
 */
.wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole) {
	--ylb-cover: 1 !important;
}

.wp-block-image:is(.has-ylb-fit, .is-style-ylb-ring-whole) img {
	aspect-ratio: auto !important;
	height: auto !important;
	object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
	.editor-styles-wrapper .wp-block-image.has-ylb-crop img {
		transition: transform 0.15s ease, object-position 0.15s ease;
	}

	.editor-styles-wrapper .wp-block-image.has-ylb-crop:has(> img) {
		transition: transform 0.15s ease;
	}
}