/* Speakers directory — reuses members-grid + member-card styles. */

.members-grid--speakers {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
	.members-grid--speakers {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.members-grid--speakers {
		grid-template-columns: 1fr;
	}
}

/* Green format badge — mirrors .badge-hire visual weight. */
.badge-speaker-format {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 163, 42, 0.10);
	color: #007a1f;
}

/* ============================================================
 * Speaker card — "Light Stage" treatment.
 *
 * Keeps all the theatrical creativity (mic watermark, spotlight
 * glow at top, avatar halo, audio wave under the name) but on a
 * light background that matches the rest of the site. Photos stay
 * readable regardless of luminance, cards scan fast in the grid,
 * and the page still feels distinct from /folks/ thanks to the
 * speaker-specific decorations.
 *
 * Scoped entirely under .speaker-card so the generic .member-card
 * styling used on /folks/ stays untouched.
 * ============================================================ */
.speaker-card {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(33, 69, 230, 0.08) 0%, rgba(33, 69, 230, 0) 55%),
		linear-gradient(160deg, #ffffff 0%, #f7f9ff 100%);
	border: 1px solid var(--color-border, #dcdcde);
	padding: 28px 22px 24px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* 1. Large decorative mic anchored bottom-right, slightly tilted.
 *    Watermark-style in brand blue, low opacity at rest, brighter
 *    on hover. Doubles as "this is a speaker card" at a glance. */
.speaker-card__mic {
	position: absolute;
	right: -14px;
	bottom: -18px;
	width: 130px;
	height: 130px;
	color: rgba(33, 69, 230, 0.08);
	transform: rotate(14deg);
	transition: color 0.35s ease, transform 0.5s ease;
	pointer-events: none;
	z-index: 0;
}
.speaker-card:hover .speaker-card__mic {
	color: rgba(33, 69, 230, 0.18);
	transform: rotate(6deg) scale(1.06);
}

/* 2. Stage glow — soft radial brand-blue light from top-center,
 *    reads like a spotlight shining down onto the avatar. */
.speaker-card__stage-glow {
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: 260px;
	pointer-events: none;
	background: radial-gradient(
		ellipse at 50% 0%,
		rgba(33, 69, 230, 0.14) 0%,
		rgba(33, 69, 230, 0.04) 40%,
		transparent 70%
	);
	opacity: 0.8;
	transition: opacity 0.35s ease, transform 0.35s ease;
	z-index: 0;
}
.speaker-card:hover .speaker-card__stage-glow {
	opacity: 1;
	transform: translateX(-50%) scale(1.1);
}

/* 3. Ensure content sits above the decorative backdrops. */
.speaker-card > *:not(.speaker-card__mic):not(.speaker-card__stage-glow) {
	position: relative;
	z-index: 1;
}

/* 4. Avatar halo — brand-blue ring, visible at rest, brighter on
 *    hover. Matches the halo now on /folks/ for consistency. */
.speaker-card__avatar-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 4px;
}
.speaker-card__avatar-wrap::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(33, 69, 230, 0.25);
	transition: box-shadow 0.3s ease;
	pointer-events: none;
}
.speaker-card:hover .speaker-card__avatar-wrap::before {
	box-shadow: 0 0 0 3px rgba(33, 69, 230, 0.45), 0 0 22px rgba(33, 69, 230, 0.25);
}

/* 5. Format badge — keep the green pill at its current intensity. */
.speaker-card .badge-speaker-format {
	letter-spacing: 0.5px;
}

/* 6. Audio wave — 7 brand-blue bars under the name. Static at
 *    rest, dances in sequence on hover. */
.speaker-card__wave {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 16px;
	margin: 2px auto 6px;
}
.speaker-card__wave span {
	display: block;
	width: 3px;
	background: var(--color-primary, #2145e6);
	border-radius: 2px;
	opacity: 0.45;
	transition: opacity 0.2s ease;
}
.speaker-card__wave span:nth-child(1) { height: 30%; }
.speaker-card__wave span:nth-child(2) { height: 70%; }
.speaker-card__wave span:nth-child(3) { height: 100%; }
.speaker-card__wave span:nth-child(4) { height: 85%; }
.speaker-card__wave span:nth-child(5) { height: 60%; }
.speaker-card__wave span:nth-child(6) { height: 40%; }
.speaker-card__wave span:nth-child(7) { height: 25%; }
.speaker-card:hover .speaker-card__wave span {
	opacity: 0.9;
}

/* 7. Card hover lift + soft blue shadow. */
.speaker-card:hover {
	transform: translateY(-3px);
	border-color: rgba(33, 69, 230, 0.3);
	box-shadow: 0 14px 36px -14px rgba(33, 69, 230, 0.3);
}

/* 8. Motion choreography — avatar halo breathes gently, wave bars
 *    dance staggered on hover. All gated by prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	.speaker-card__avatar-wrap::before {
		animation: wpfolks-stage-halo 3.5s ease-in-out infinite;
	}
	@keyframes wpfolks-stage-halo {
		0%, 100% { box-shadow: 0 0 0 2px rgba(33, 69, 230, 0.22); }
		50%      { box-shadow: 0 0 0 2px rgba(33, 69, 230, 0.38); }
	}

	.speaker-card:hover .speaker-card__wave span {
		animation: wpfolks-wave-bounce 0.9s ease-in-out infinite;
	}
	.speaker-card:hover .speaker-card__wave span:nth-child(1) { animation-delay: 0s;    }
	.speaker-card:hover .speaker-card__wave span:nth-child(2) { animation-delay: 0.08s; }
	.speaker-card:hover .speaker-card__wave span:nth-child(3) { animation-delay: 0.16s; }
	.speaker-card:hover .speaker-card__wave span:nth-child(4) { animation-delay: 0.24s; }
	.speaker-card:hover .speaker-card__wave span:nth-child(5) { animation-delay: 0.32s; }
	.speaker-card:hover .speaker-card__wave span:nth-child(6) { animation-delay: 0.40s; }
	.speaker-card:hover .speaker-card__wave span:nth-child(7) { animation-delay: 0.48s; }
	@keyframes wpfolks-wave-bounce {
		0%, 100% { transform: scaleY(1);   transform-origin: bottom; }
		50%      { transform: scaleY(1.7); transform-origin: bottom; }
	}
}

/* ──────────────────────────────────────────────────────────
   Speaker card actions row (1.22.452)
   The row has 3 buttons (View / Watch their talks / Follow).
   The middle one's long text combined with white-space:nowrap
   from the shared .member-card__actions rules was overflowing
   into the Follow button at any viewport where the 3 buttons
   couldn't fit nowrap (mobile + many tablet/desktop card widths).
   Fix: always allow wrap + text-wrap on speaker cards. When the
   row fits all 3 inline, they sit inline; when they don't, the
   third (Follow) drops cleanly to a second row. Scoped to
   .speaker-card so the 2-button folks-directory cards don't
   change behaviour.
   ────────────────────────────────────────────────────────── */
.speaker-card .member-card__actions {
	flex-wrap: wrap;
	gap: 6px;
	/* 1.22.485 — keep all 3 buttons the same height in the row so a
	   future longer label (or i18n string that wraps) can't break
	   alignment again. align-items: stretch makes flex children fill
	   the row's cross-axis. */
	align-items: stretch;
}
.speaker-card .member-card__actions .btn,
.speaker-card .member-card__actions .wpf-follow-btn {
	white-space: normal;
	line-height: 1.25;
	min-width: 0;
	/* Vertically center the label text so a single-line button visually
	   matches a wrapped one when align-items: stretch forces them to
	   share the row's height. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 520px) {
	/* Phone — stack all 3 buttons vertically full-width. Cleaner than
	   the 2+1 wrap, which produced uneven heights when the middle
	   label wrapped to two lines. Each button gets its full width on
	   its own row, content fits on one line. */
	.speaker-card .member-card__actions {
		flex-direction: column;
	}
	.speaker-card .member-card__actions .btn,
	.speaker-card .member-card__actions .wpf-follow-btn {
		flex: 1 1 auto;
		width: 100%;
		padding: 9px 14px;
		font-size: 13px;
	}
}