/**
 * Figma Kid portrait composition.
 *
 * The exact exported border, mask, and pattern assets are layered around two
 * copies of the dynamic ACF Kid image. The clipped copy ends at the shaped
 * panel while the upper copy lets the Kid overlap its top edge.
 */
.kb-kid-portrait.x-col {
	--kb-kid-shape-left: 8.218%;
	--kb-kid-shape-width: 84.169%;
	--kb-kid-shape-height: 92.164%;
	--kb-kid-shape-color: #ff3aa3;
	--kb-kid-pattern-color: #bd2878;
	position: relative;
	display: block;
	align-self: flex-start;
	isolation: isolate;
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: 1655 / 1123;
	overflow: visible;
}

.kb-kid-portrait.x-col::before,
.kb-kid-portrait.x-col::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

/*
 * Figma node 2:4120: the outline surrounding the shape. Reuse the pattern
 * color variable so one ACF color controls both the stars and the border.
 */
.kb-kid-portrait.x-col::before {
	z-index: 0;
	left: 7.553%;
	bottom: -0.98%;
	width: 85.499%;
	height: 94.123%;
	background-color: var(--kb-kid-pattern-color);
	-webkit-mask: url("assets/kb-kid-portrait-border.svg") center / 100% 100% no-repeat;
	mask: url("assets/kb-kid-portrait-border.svg") center / 100% 100% no-repeat;
}

/* Figma node 2:4127: the #ff3aa3 panel clipped to the exact shape. */
.kb-kid-portrait.x-col::after {
	z-index: 1;
	left: var(--kb-kid-shape-left);
	bottom: 0;
	width: var(--kb-kid-shape-width);
	height: var(--kb-kid-shape-height);
	background-color: var(--kb-kid-shape-color);
	-webkit-mask: url("assets/kb-kid-portrait-mask.svg") center / 100% 100% no-repeat;
	mask: url("assets/kb-kid-portrait-mask.svg") center / 100% 100% no-repeat;
}

.kb-kid-portrait > .kb-kid-portrait__image.x-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	background: transparent;
}

.kb-kid-portrait > .kb-kid-portrait__image.x-image img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	object-fit: contain;
	object-position: top center;
}

/*
 * Figma nodes 2:4123–2:4161: both the pattern and the lower image are
 * clipped by the same shape, so the Kid stops cleanly at its bottom edge.
 */
.kb-kid-portrait > .kb-kid-portrait__image--clipped.x-image {
	z-index: 2;
	-webkit-mask: url("assets/kb-kid-portrait-mask.svg") center bottom /
		var(--kb-kid-shape-width) var(--kb-kid-shape-height) no-repeat;
	mask: url("assets/kb-kid-portrait-mask.svg") center bottom /
		var(--kb-kid-shape-width) var(--kb-kid-shape-height) no-repeat;
}

/* Figma node 2:4146: the oversized pattern is rotated inside the mask. */
.kb-kid-portrait > .kb-kid-portrait__image--clipped.x-image::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	width: 277.134%;
	aspect-ratio: 1;
	background-color: var(--kb-kid-pattern-color);
	-webkit-mask: url("assets/kb-kid-portrait-pattern.svg") center / contain no-repeat;
	mask: url("assets/kb-kid-portrait-pattern.svg") center / contain no-repeat;
	transform: translate(-50%, -50%) rotate(-32.41deg);
	transform-origin: center;
	pointer-events: none;
}

/* Figma node 2:4162: reveal only the portion above the shaped mask. */
.kb-kid-portrait > .kb-kid-portrait__image--overlap.x-image {
	z-index: 3;
	/* Extend into the masked copy so anti-aliasing cannot leave a head seam. */
	clip-path: inset(0 0 80% 0);
}

/*
 * Profile-grid cards use the same portrait composition as the single page.
 * Legacy published profiles without a Kid Image remain in the USA category;
 * keep them out of the visual grid until an image is assigned.
 */
.kb-kids-profile-grid .kb-kid-profile-card {
	margin-bottom: clamp(3rem, 4vw, 4.5rem);
	text-decoration: none;
	transition: transform 180ms ease;
}

.kb-kids-profile-grid .kb-kid-profile-card__name {
	position: absolute !important;
	z-index: 5;
	top: calc(100% + clamp(0.4rem, 1vw, 0.75rem));
	right: 0;
	bottom: auto !important;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: var(--kb-kid-pattern-color) !important;
	text-align: center;
}

.kb-kids-profile-grid .kb-kid-profile-card__name,
.kb-kids-profile-grid .kb-kid-profile-card__name * {
	color: var(--kb-kid-pattern-color) !important;
}

.kb-kids-profile-grid .kb-kid-profile-card__name .x-text {
	margin: 0 !important;
}

.kb-kids-profile-grid .kb-kid-profile-card:hover,
.kb-kids-profile-grid .kb-kid-profile-card:focus-visible {
	transform: translateY(-6px);
}

@supports selector(:has(*)) {
	.kb-kids-profile-grid .kb-kid-profile-card:not(:has(img)) {
		display: none;
	}
}

@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
	.kb-kid-portrait.x-col::after,
	.kb-kid-portrait > .kb-kid-portrait__image--clipped.x-image {
		clip-path: inset(8% 8% 0 8% round 18%);
	}
}