/*
 * OCNARK Hero member facepile.
 *
 * Sits directly under the hero stat row, inside .hero-content, so it inherits
 * the left column's grid alignment rather than declaring its own. The only
 * spacing it introduces is its own margin-top; nothing above it moves.
 *
 * Deliberately not a component. No card, no box, no border around the group,
 * no background, no gradient, no decorative shadow. It reuses the hero's own
 * palette tokens (--teal and --navy are published globally by the plugin's
 * brand style block; --teal-pale and --muted are not, so they carry the
 * theme's literal values as fallbacks) and the hero's muted body styling. The
 * intent is that it reads as something that was always there.
 */

.elementor-widget-ocnark-hero .aqn-facepile {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.elementor-widget-ocnark-hero .aqn-facepile-stack {
	display: flex;
	align-items: center;
	/* Never let the faces compress; the copy is what gives way. */
	flex-shrink: 0;
}

/*
 * 40px sits in the middle of the 38 to 42 the brief allows.
 *
 * The white ring is a border rather than a box-shadow on purpose: the brief
 * rules out shadows unless a neighbouring element already uses one, and this
 * is a separation device, not a lift. box-sizing keeps the ring inside the
 * 40px so the rhythm of the row does not depend on it.
 */
.elementor-widget-ocnark-hero .aqn-facepile-av,
.elementor-widget-ocnark-hero .aqn-facepile-more {
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #fff;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * overflow belongs to the photo variant only. On the "+X" circle it silently
 * clipped four-digit remainders: at 4,000-odd members "+4,208" rendered as
 * "4,20" with both ends shaved off by the border radius.
 */
.elementor-widget-ocnark-hero .aqn-facepile-av {
	overflow: hidden;
	/* Neutral ground so a face that has not decoded yet is a soft disc rather
	   than a hole in the row. Invisible once the image paints. */
	background: #eef3f7;
}

/* Slight overlap. Later faces paint over earlier ones, which is what the
   white ring is there to keep legible. */
.elementor-widget-ocnark-hero .aqn-facepile-av + .aqn-facepile-av,
.elementor-widget-ocnark-hero .aqn-facepile-more {
	margin-left: -10px;
}

.elementor-widget-ocnark-hero .aqn-facepile-av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

/*
 * No photo means initials, never a stock or generated face. Pale teal ground,
 * dark teal letters: the same pairing the kicker badge already uses, so it
 * does not read as a new colour.
 */
.elementor-widget-ocnark-hero .aqn-facepile-av--initials {
	background: var( --teal-pale, #e6f7f6 );
	color: var( --teal, #15807d );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * A circle while the remainder is short, a pill once it is not.
 *
 * min-width holds the 40px circle for the "+8" and "+96" cases that most of
 * the site's life will be, and auto width with a little side padding lets
 * "+4,208" through intact instead of clipping it. border-radius:999px keeps
 * the ends fully round at either length, so it never reads as a rectangle.
 */
.elementor-widget-ocnark-hero .aqn-facepile-more {
	width: auto;
	min-width: 40px;
	padding: 0 7px;
	border-radius: 999px;
	background: var( --teal-pale, #e6f7f6 );
	color: var( --teal, #15807d );
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
}

/*
 * Quiet and credible, not a promotional badge: the same muted grey the hero
 * already uses for secondary copy, with only the figure stepped up to navy.
 * min-width:0 is what guarantees the line wraps inside its own flex item
 * instead of forcing the row wider than the column.
 */
.elementor-widget-ocnark-hero .aqn-facepile-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var( --muted, #7a8fa6 );
}

.elementor-widget-ocnark-hero .aqn-facepile-text strong {
	color: var( --navy, #0e1f33 );
	font-weight: 700;
}

/*
 * Mobile: smaller faces, tighter overlap, same one-line stack. The copy is
 * free to wrap onto its own line, and min-width:0 above means it can always
 * shrink to fit, so there is no horizontal overflow at any width.
 */
@media ( max-width: 600px ) {
	.elementor-widget-ocnark-hero .aqn-facepile {
		gap: 10px;
		margin-top: 16px;
	}

	.elementor-widget-ocnark-hero .aqn-facepile-av,
	.elementor-widget-ocnark-hero .aqn-facepile-more {
		width: 34px;
		height: 34px;
	}

	.elementor-widget-ocnark-hero .aqn-facepile-more {
		width: auto;
		min-width: 34px;
		padding: 0 6px;
	}

	.elementor-widget-ocnark-hero .aqn-facepile-av + .aqn-facepile-av,
	.elementor-widget-ocnark-hero .aqn-facepile-more {
		margin-left: -9px;
	}

	.elementor-widget-ocnark-hero .aqn-facepile-av--initials {
		font-size: 11.5px;
	}

	.elementor-widget-ocnark-hero .aqn-facepile-more {
		font-size: 11.5px;
	}

	.elementor-widget-ocnark-hero .aqn-facepile-text {
		font-size: 13.5px;
	}
}

/*
 * Signup link.
 *
 * The whole component is one anchor, so the appearance must not change: no
 * underline, no link colour, no box. Only the copy shifts on hover, which is
 * enough of an affordance without turning a piece of social proof into a
 * button.
 */
.elementor-widget-ocnark-hero a.aqn-facepile {
	text-decoration: none;
	color: inherit;
}

.elementor-widget-ocnark-hero a.aqn-facepile:hover .aqn-facepile-text {
	color: var( --navy, #0e1f33 );
}

/*
 * Keyboard focus is deliberately louder than hover: a mouse user already knows
 * where the pointer is, a keyboard user does not. :focus-visible so it appears
 * for keyboard traversal and not on tap or click.
 */
.elementor-widget-ocnark-hero a.aqn-facepile:focus-visible {
	outline: 2px solid var( --teal, #15807d );
	outline-offset: 4px;
	border-radius: 8px;
}

/* Names the destination for screen readers without printing it on the page. */
.elementor-widget-ocnark-hero .aqn-facepile-cta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/*
 * Mobile spacing. Sits after the sizing block above so these two values win
 * below 600px while the avatar sizing there still applies.
 */
@media ( max-width: 767px ) {
	.elementor-widget-ocnark-hero .aqn-facepile {
		margin-top: 28px;
		gap: 15px;
	}
}