/*
 * Focal-point + zoom image framing (shared by the front-end carousel and the admin preview).
 *
 * The frame (.totie-focus-frame) keeps whatever size the layout gives it (the carousel is
 * always 400px tall). The image is first scaled to "cover" that frame, then multiplied by
 * --z (zoom, 1-3x) and positioned so the chosen focal point (--fx / --fy, 0-1 of the image)
 * sits in the middle of the frame, never leaving empty edges.
 *
 * Inputs set inline on the <img>:  --r (width/height ratio)  --fx  --fy  --z
 */
.totie-focus-frame {
	position: relative;
	overflow: hidden;
	container-type: size;
}

.totie-focus-img {
	--w: calc(max(100cqw, 100cqh * var(--r, 1.5)) * var(--z, 1));
	--h: calc(max(100cqh, 100cqw / var(--r, 1.5)) * var(--z, 1));
	position: absolute;
	display: block;
	max-width: none !important;
	width: var(--w) !important;
	height: var(--h) !important;
	left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--fx, 0.5) * var(--w)), 0px);
	top: clamp(calc(100cqh - var(--h)), calc(50cqh - var(--fy, 0.5) * var(--h)), 0px);
	user-select: none;
	-webkit-user-drag: none;
}

/* Very old browsers without container query units: plain cover + object-position + zoom. */
@supports not (width: 1cqw) {
	.totie-focus-img {
		left: 0;
		top: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		object-position: calc(var(--fx, 0.5) * 100%) calc(var(--fy, 0.5) * 100%);
		transform: scale(var(--z, 1));
		transform-origin: calc(var(--fx, 0.5) * 100%) calc(var(--fy, 0.5) * 100%);
	}
}