/*
 * Testimonials — tab explorer shell (sticky tabbar + panel shell)
 * Depends on: design-tokens.css, log-test-featured.css
 * Page: body.log-testimonials-page
 */

.explorer {
	max-width: 1160px;
	margin: 0 auto;
	padding: 30px 20px 70px;
}

.explorer-tabbar-wrap {
	position: sticky;
	/* log-header.js tracks the real on-screen header height (marquee +
	   nav row, shrink state, mobile breakpoint) into this var — avoids
	   guessing fixed px offsets that drift when the header changes. A
	   fixed em/% value can't track that and drifts out of sync with the
	   header at some resolutions (the bug this was fixing). */
	top: var(--site-header-h, 84px);
	z-index: 59;
	background: var(--paper);
	padding: 20px 0 22px;
}

.explorer-tabbar {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: visible;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 6px 2px 22px;
}

.explorer-tabbar::-webkit-scrollbar {
	display: none;
	height: 0;
}

.etab {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--white);
	border: 1.4px solid var(--line);
	color: var(--ink-700);
	padding: 11px 18px;
	border-radius: var(--r-pill);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	transition: all .3s var(--ease);
	appearance: none;
	box-shadow: none;
	outline: none;
}

.etab .icon {
	width: 14px;
	height: 14px;
	color: var(--sage-700);
	transition: transform .3s var(--ease);
}

.etab:hover {
	border-color: var(--plum-600);
	color: var(--plum-700);
	transform: translateY(-2px);
}

.etab.active {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: #fdf8f4;
	box-shadow: 0 10px 22px -6px rgba(20, 35, 31, .35);
}

.etab.active .icon {
	color: var(--sage-400);
	transform: rotate(-8deg);
}

.epanel-shell {
	position: relative;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	overflow: visible;
	min-height: 360px;
}

.epanel {
	display: none;
	padding: 30px 28px 32px;
	animation: testPanelIn .5s var(--ease);
}

.epanel.active {
	display: block;
}

@keyframes testPanelIn {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.99);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.epanel-head {
	margin-bottom: 20px;
}

.ep-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sage-700);
	margin-bottom: 8px;
}

.ep-eyebrow::before {
	content: '';
	width: 18px;
	height: 2px;
	background: var(--sage-600);
	display: inline-block;
}

.ep-title {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.2;
	color: var(--ink-900);
}

.ep-title em {
	font-style: italic;
	font-weight: 600;
	color: var(--plum-700);
}

/* line-height !important: beats log-parent-reset.css's .page .type-page .entry-content p
   {line-height:inherit} (0,3,1) — this is a <p>, so it otherwise loses to that reset. */
.ep-sub {
	color: var(--gray-600);
	font-size: 13.5px;
	margin-top: 7px;
	max-width: 600px;
	line-height: 1.6 !important;
}

@media(max-width:640px) {
	.epanel {
		padding: 22px 16px 26px;
	}
}