/**
 * Audience Explorer — "seats at the table" SVG diagram + swappable panel.
 * Typography via utility classes in markup; this file holds layout, SVG styling
 * (SVG text can't use HTML utilities), interaction states, and animation.
 */

.flexible-section.wws-explore {
	background: var(--color-bg2);
}

.wws-explore-grid {
	display: grid;
	grid-template-columns: minmax(300px, 460px) 1fr;
	gap: clamp(36px, 3vw + 20px, 75px);
	align-items: center;
	max-width: 1350px;
}

/* ── SVG round-table ─────────────────────────────── */
.wws-table-wrap {
	position: relative;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}

.wws-table {
	width: 100%;
	height: auto;
	display: block;
}

.wws-hint {
	text-align: center;
	margin: 0 0 14px 0;
}
.wws-seat { cursor: pointer; }

.wws-seat .seat-ring {
	fill: var(--color-bg);
	stroke: var(--color-navy);
	stroke-width: 1.5;
	transition: fill 0.25s ease, stroke 0.25s ease, stroke-width 0.25s ease;
}

.wws-seat .seat-dot {
	fill: var(--color-border);
	transition: fill 0.25s ease;
}

/* SVG text — styled here (utility classes only apply to HTML). Scales with the SVG. */
.wws-seat .seat-label {
	fill: var(--color-text3);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: var(--fw-700);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: fill 0.25s ease;
}

.wws-seat:hover .seat-ring,
.wws-seat:focus-visible .seat-ring { stroke: var(--color-gold2); }

/*
 * Active seat. The v8 mockup (2026-07-26) fills the ring with the navy gradient
 * (SVG `<linearGradient id="uonavy">`, emitted in audience_explorer.php) and
 * blinks the ring + dot so the current selection reads as "live".
 * `!important` matches the mockup and beats the base `.seat-ring` fill.
 * `transform-box: fill-box` is what makes transform-origin resolve inside an SVG
 * shape rather than against the whole viewBox.
 */
.wws-seat.is-active .seat-ring {
	fill: url(#uonavy) !important;
	stroke: var(--color-gold2);
	stroke-width: 2;
	animation: seatblink 1.5s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.wws-seat.is-active .seat-dot {
	fill: var(--color-gold2);
	animation: seatblink 1.5s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.wws-seat.is-active .seat-label { fill: var(--color-navy); }

@keyframes seatblink {
	0%,
	100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.wws-conn {
	stroke: var(--color-border);
	stroke-width: 2;
	transition: stroke 0.25s ease;
}

.wws-conn.is-active { stroke: var(--color-gold2); }

/* ── Detail panel ────────────────────────────────── */
.wws-panel-item { display: none; }
.wws-panel-item.is-active { display: block; animation: wwsfade 0.35s ease; }

.p-ey {
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.wws-panel h2 {
	margin: 0 0 16px;
}

.p-body {
	max-width: 650px;
	margin: 0 0 clamp(18px, 1vw + 12px, 24px);
}

.p-lbl {
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.wws-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: clamp(18px, 1vw + 12px, 24px);
}

.wws-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 3px;
	padding: 7px 13px;
}

.wws-chip .d,
.wws-proof .d {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-gold2);
	flex-shrink: 0;
}

.wws-proof {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}

.wws-proof .d { width: 7px; height: 7px; }

.p-link {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

@keyframes wwsfade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* ── Responsive: stack the diagram above the panel ── */
@media (max-width: 900px) {
	.wws-explore-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.wws-panel { text-align: center; }
	.wws-chips,
	.wws-proof { justify-content: center; }
	.p-body { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.wws-seat .seat-ring,
	.wws-seat .seat-dot,
	.wws-conn { transition: none; }
	.wws-panel-item.is-active { animation: none; }

	/* The mockup kills the seat blink here too — an infinite pulse is exactly
	   what this preference is for. The gradient fill stays. */
	.wws-seat.is-active .seat-ring,
	.wws-seat.is-active .seat-dot { animation: none; }
}