/**
 * Photo Frame — shape geometry & photo fit.
 *
 * Numeric tuning (width, aspect ratio, corner radius, arch, position, zoom,
 * shadow) is injected per-widget by Elementor via the controls' `selectors`.
 * This file defines the base layout and the per-shape geometry.
 */

.pf-frame {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 3 / 4; /* generic default; overridden per shape below */
	overflow: hidden;
	line-height: 0;
}

.pf-frame .pf-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pf-x, 50%) var(--pf-y, 50%);
	transform: scale(var(--pf-zoom, 1));
	transform-origin: center center;
}

/* Shapes that read best as a square by default.
   Listed AFTER the generic default so they win at equal specificity. */
.pf-shape-circle,
.pf-shape-square,
.pf-shape-rounded_square,
.pf-shape-hexagon,
.pf-shape-diamond {
	aspect-ratio: 1;
}

/* --- Rounded / border-radius shapes --- */
.pf-shape-circle {
	border-radius: 50%;
}

.pf-shape-ellipse {
	border-radius: 50%;
}

.pf-shape-rounded_square {
	border-radius: 22%;
}

.pf-shape-arch {
	border-radius: 50% 50% 0 0;
}

.pf-shape-blob {
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}

/* --- Clip-path (polygon) shapes --- */
.pf-shape-hexagon {
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

.pf-shape-diamond {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Editor placeholder when no photo is chosen. */
.pf-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	padding: 1em;
	font-size: 14px;
	line-height: 1.4;
	color: #7a7a7a;
	background: repeating-linear-gradient(
		45deg,
		#f3f3f4,
		#f3f3f4 10px,
		#ececed 10px,
		#ececed 20px
	);
}