/*
 * Round company-logo avatar — single source of truth.
 *
 * DOM:
 *   <span class="bgl-company-avatar">
 *     <span class="bgl-company-avatar__pan">
 *       <img class="bgl-company-avatar__img">
 *     </span>
 *   </span>
 *
 * Saved per-company state (DB columns, set by editor):
 *   --bgl-logo-ox, --bgl-logo-oy: pan as 0–100 (50 = centered).
 *     Translate on the pan wrapper: ((value - 50) * 1%) of disc width.
 *   --bgl-logo-zoom (z): 0.4–3.0. Transform scale on the img.
 *
 * Math (contain baseline):
 *   The img element has natural ratio with max-100% on both axes (object-fit:contain semantics).
 *   At z = 1 the long axis equals D, so the entire logo is visible inside the disc.
 *   At z < 1 scale shrinks it → more white space around the logo.
 *   At z > 1 scale enlarges it past fit; it eventually fills (z = max(r, 1/r)) and crops.
 *   pan + zoom are independent transforms on different elements; they never fight.
 */

.bgl-company-avatar {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	vertical-align: middle;
	flex-shrink: 0;
	width: var(--bgl-company-avatar-size, 40px);
	height: var(--bgl-company-avatar-size, 40px);
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	/* Outer ring stays visible when the logo fills the disc (inset rings sit under the img). */
	--bgl-company-avatar-ring: rgba(0, 26, 31, 0.14);
	box-shadow: 0 0 0 1px var(--bgl-company-avatar-ring);
}

.bgl-company-avatar--fill {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

.bgl-company-avatar.bgl-company-avatar--rect-4x3 {
	border-radius: 12px;
	box-shadow: none;
}

.bgl-company-avatar.bgl-company-avatar--rect-4x3.bgl-company-avatar--fill {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

.bgl-company-avatar__pan {
	position: absolute;
	inset: 0;
	transform: translate(
		calc((var(--bgl-logo-ox, 50) - 50) * 1%),
		calc((var(--bgl-logo-oy, 50) - 50) * 1%)
	);
	pointer-events: none;
}

/*
 * The img element ALWAYS has the disc size as its layout box; the natural image
 * is positioned inside that box via object-fit:contain. Two reasons:
 *
 * 1. Consistency across disc sizes: with width:auto + max-width:100% (intrinsic
 *    sizing), a natural 145×145 logo in a 168 disc renders at 145 (no clamp,
 *    long axis ≠ disc), but in a 60 disc renders at 60 (clamped). Same z=1.17
 *    then produces visually different overflow → the editor preview (large
 *    disc) shows the full logo while small avatars on other pages clip. By
 *    pinning width/height to 100% we anchor the long axis to disc width
 *    everywhere — z=1 always means "long axis = D".
 *
 * 2. !important locks against page-level overrides like
 *      .opp-role-card-visual img { width:100%; height:100%; object-fit:cover; }
 *      .saved-card-thumb img    { width:100%; height:100%; object-fit:contain; }
 *    which would otherwise win on specificity (0,1,1 > 0,1,0) and switch the
 *    fit mode that the zoom math depends on.
 */
.bgl-company-avatar__img {
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	object-fit: contain !important;
	transform: translate(-50%, -50%) scale(var(--bgl-logo-zoom, 1));
	transform-origin: center center;
	pointer-events: none;
	display: block;
}