/**
 * "Követeink" ambassador grid ([charitable_ambassadors]) — split out of
 * donation-form.css (which is scoped to the dark form panel). This component
 * lives on the LIGHT page surface, not the form: people-cards (photo + name)
 * linking to each ambassador's own page. No progress/donate clutter.
 *
 * Markup is <div role="list"> / <div role="listitem"> (not <ul>/<li>) so the
 * theme's `ul li` bullets and list margins never apply — structural props win
 * by source order on plain class selectors, no !important needed.
 */
.charitable-supercharged-ambassadors-grid {
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1.5rem;
}
.charitable-supercharged-ambassadors-grid > .charitable-supercharged-ambassador-card {
	margin: 0;
	padding: 0;
	text-align: center;
	background: none;
}
.charitable-supercharged-ambassadors-heading {
	margin: 1.5rem 0 0.5rem;
}
.charitable-supercharged-ambassador-link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
}
/* Keyboard focus ring (WCAG 2.4.7). The active theme strips outlines globally,
   so set an explicit, visible focus ring — matches the donation-form pattern. */
/* Keyboard focus ring (WCAG 2.4.7): the active theme strips outlines globally. */
.charitable-supercharged-ambassador-link:focus-visible {
	outline: 2px solid var(--pswp-accent, #8AC4D0);
	outline-offset: 3px;
}
/* The photo wrapper caps the size so a full-width card can't blow the avatar up;
   the img/avatar fills it. width is the absolute ceiling, max-width the relative
   one — on a wide single-column card 70% would exceed 132px, so width clamps it. */
.charitable-supercharged-ambassador-photo {
	display: block;
	width: 132px;
	max-width: 70%;
	margin: 0 auto 0.75rem;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Interactive feedback (hover + keyboard focus, one rule via :is()). The photo is
   the dominant click target, so it lifts + rings; the name underlines. */
.charitable-supercharged-ambassador-link:is(:hover, :focus-visible) .charitable-supercharged-ambassador-photo {
	transform: translateY(-3px);
}
.charitable-supercharged-ambassador-link:is(:hover, :focus-visible) .charitable-supercharged-ambassador-img {
	box-shadow: 0 0 0 3px var(--pswp-accent, #8AC4D0);
}
.charitable-supercharged-ambassador-link:is(:hover, :focus-visible) .charitable-supercharged-ambassador-name {
	text-decoration: underline;
}
/* The photo helper always stamps .charitable-supercharged-ambassador-img on the
   element — both the post-thumbnail and the get_avatar() fallback pass it as the
   class arg — so a single class selector covers every case (no `photo img` /
   `.avatar` fallbacks needed). */
.charitable-supercharged-ambassador-img {
	/* Force a square box even though get_the_post_thumbnail() stamps the portrait's
	   native width/height HTML attrs: `height: auto` clears the attr-derived height
	   so aspect-ratio governs the box (without it the attrs win and the avatar
	   renders as a tall ellipse). object-fit:cover then centre-crops the portrait. */
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	transition: box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* ADR-0018 D5 fallback: when no face was detected, the surface gets the baked
   face-centred rendition instead (already framed, no hint needed). This top-bias
   applies ONLY when detection found nothing — right on average for a portrait whose
   face sits in the upper third, so the centre-crop doesn't guillotine the chin. */
.charitable-supercharged-ambassador-img.charitable-sc-face-fallback {
	object-position: 50% 25%;
}
/* P3: reserve two lines of label height so a wrapped long name doesn't push its
   card baseline below single-line neighbours — keeps the row bottoms even.
   text-wrap: balance evens the wrap when it does happen. */
.charitable-supercharged-ambassador-name {
	display: block;
	font-weight: 600;
	min-height: 2.4em;
	text-wrap: balance;
}

/* P1: on a single-column phone layout the 70% cap still yields a ~290px avatar —
   one face per scroll. Tighten the photo so the directory stays scannable. */
@media (max-width: 480px) {
	.charitable-supercharged-ambassador-photo {
		width: 104px;
	}
}

/* Reduced motion: drop the lift transition (the ring + underline still convey
   interactivity). The shadow ring stays — it's not motion. */
@media (prefers-reduced-motion: reduce) {
	.charitable-supercharged-ambassador-photo {
		transition: none;
	}
	.charitable-supercharged-ambassador-link:is(:hover, :focus-visible) .charitable-supercharged-ambassador-photo {
		transform: none;
	}
}