/*
 * Player profile photos — one look everywhere (desktop + mobile).
 * Markup comes from ckc_avatar_img() / ckc_avatar_tag() in functions.php.
 * Loaded after style.css / mobile/style.css so equal-specificity container rules
 * (e.g. ".match-report img") don't resize avatars.
 *
 * Sizes: xs 28 · sm 36 · md 44 · lg 60 · xl 96 · xxl 128 · hero 200
 * Variants: --accent (club-blue ring, for featured photos)
 */
img.ckc-avatar {
	display: inline-block;
	width: var(--ckc-avatar-size, 44px);
	height: var(--ckc-avatar-size, 44px);
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(49, 65, 119, 0.2);
	box-sizing: border-box;
	background: #fff;
	vertical-align: middle;
	flex-shrink: 0;
}

img.ckc-avatar--xs   { --ckc-avatar-size: 28px; border-width: 1px; }
img.ckc-avatar--sm   { --ckc-avatar-size: 36px; }
img.ckc-avatar--md   { --ckc-avatar-size: 44px; }
img.ckc-avatar--lg   { --ckc-avatar-size: 60px; }
img.ckc-avatar--xl   { --ckc-avatar-size: 96px; border-width: 3px; }
img.ckc-avatar--xxl  { --ckc-avatar-size: 128px; border-width: 3px; }
img.ckc-avatar--hero { --ckc-avatar-size: 200px; border-width: 3px; box-shadow: 0 2px 8px rgba(49, 65, 119, 0.2); }

img.ckc-avatar--accent {
	border-color: var(--ckc-color-primary, #314177);
}

/* Block-level, centred (tiles, squad grids, scorer cells) */
img.ckc-avatar--block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* U18 placeholder badge (ckc_u18_badge_wrap): red pill over the circle's top-left edge, scales with avatar size.
   --ckc-u18-scale shrinks it per site (mobile/style.css sets 0.75). */
.ckc-u18-avatar {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
	flex-shrink: 0;
}
.ckc-u18-avatar--block {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
.ckc-u18-avatar__badge {
	position: absolute;
	top: -0.35em;
	left: calc(-0.6em + 4px);
	z-index: 2;
	padding: 0.2em 0.45em;
	border-radius: 0.4em;
	background: #c62828;
	color: #fff;
	font: 700 calc(max(7px, var(--ckc-avatar-size, 44px) * 0.1) * var(--ckc-u18-scale, 1))/1.1 var(--ckc-font-stack, verdana, sans-serif);
	white-space: nowrap;
	box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, 0.25);
	pointer-events: none;
}
/* Hero (player profile): sit fully inside the box so the page edge doesn't crop it */
.ckc-u18-avatar:has(> img.ckc-avatar--hero) .ckc-u18-avatar__badge {
	top: 0.3em;
	left: 0.4em;
}