/**
 * Big Leap Reviews — front-end carousel styles.
 *
 * Based on Mockup 8 (Logo-led Rail). Multi-source ready.
 * All selectors are prefixed with .bigleap- so we don't collide with theme CSS.
 */

.bigleap-reviews {
	--bigleap-primary: #143d55;
	--bigleap-primary-soft: #2a5575;
	--bigleap-secondary: #3087b4;
	--bigleap-cta: #ea4335;
	--bigleap-cta-hover: #d2382b;
	--bigleap-bg-card: #ffffff;
	--bigleap-bg-rail: #eef3f8;
	--bigleap-text: #143d55;
	--bigleap-muted: #5a6679;
	--bigleap-rule: #dde4ec;
	--bigleap-star: #f59e0b;
	--bigleap-clutch: #ef4335;

	max-width: 980px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--bigleap-text);
	box-sizing: border-box;
	/* Pin the widget's base font-size so child em-units render consistently regardless of theme. */
	font-size: 16px;
	line-height: 1.5;
}
.bigleap-reviews *,
.bigleap-reviews *::before,
.bigleap-reviews *::after {
	box-sizing: border-box;
}

.bigleap-reviews .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Header above the carousel ------------------------------------------- */

.bigleap-reviews__head {
	text-align: center;
	margin-bottom: 28px;
}
.bigleap-reviews__kicker {
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	/* #2C7DA5 passes WCAG AA Normal (4.51:1) on white; --bigleap-secondary (#3087b4) does not. */
	color: #2C7DA5;
	margin: 0 0 6px;
}
/* Title — defensive overrides against theme h2/h3 cascades that would otherwise
   blow up the font-size and inject borders/padding/transforms. */
.bigleap-reviews .bigleap-reviews__title {
	font-size: 1.75em !important;
	font-weight: 700 !important;
	margin: 0 0 12px !important;
	color: var(--bigleap-primary) !important;
	line-height: 1.2 !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-align: center !important;
}
.bigleap-reviews__summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 0.95em;
	flex-wrap: wrap;
}
.bigleap-reviews__avg {
	font-weight: 700;
	font-size: 1.1em;
	color: var(--bigleap-primary);
}
.bigleap-reviews__count {
	color: var(--bigleap-muted);
}
.bigleap-stars {
	color: var(--bigleap-star);
	letter-spacing: 2px;
}

/* Carousel container -------------------------------------------------- */

.bigleap-carousel {
	position: relative;
}
.bigleap-carousel:focus-visible {
	outline: 2px solid var(--bigleap-primary);
	outline-offset: 4px;
	border-radius: 14px;
}

/* Slide --------------------------------------------------------------- */

.bigleap-slide {
	display: none;
	grid-template-columns: 280px 1fr;
	background: var(--bigleap-bg-card);
	border: 1px solid var(--bigleap-rule);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 22px rgba(20, 61, 85, 0.06);
	min-height: 340px;
	position: relative;
	/* Force consistent card width regardless of quote length / theme cascading. */
	width: 100% !important;
	box-sizing: border-box !important;
}
.bigleap-slide.is-active {
	/* !important so a theme rule like `article { display: inline-block }` can't break the grid. */
	display: grid !important;
}
/* Prevent the body cell from sizing to its longest unbroken content (which can blow out the grid). */
.bigleap-body {
	min-width: 0;
}

/* Rail ---------------------------------------------------------------- */

.bigleap-rail {
	background: var(--bigleap-bg-rail);
	padding: 30px 26px;
	border-right: 1px solid var(--bigleap-rule);
	position: relative;
	display: flex;
	flex-direction: column;
}
.bigleap-rail::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--bigleap-primary);
}
.bigleap-logo {
	width: 80px;
	height: 80px;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid var(--bigleap-rule);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 8px;
}
.bigleap-logo img,
.bigleap-logo svg {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.bigleap-reviewer__name {
	font-weight: 700;
	color: var(--bigleap-primary);
	font-size: 1.05em;
	margin-bottom: 2px;
	line-height: 1.3;
}
.bigleap-reviewer__title {
	color: var(--bigleap-primary);
	font-weight: 600;
	font-size: 0.88em;
	margin-bottom: 2px;
}
.bigleap-reviewer__company {
	color: var(--bigleap-primary);
	font-weight: 600;
	font-size: 0.88em;
	margin-bottom: 12px;
}
.bigleap-reviewer__meta {
	color: var(--bigleap-muted);
	font-size: 0.82em;
	font-weight: 400;
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bigleap-reviewer__meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.3;
}
.bigleap-reviewer__meta-row svg {
	flex-shrink: 0;
	color: var(--bigleap-secondary);
	width: 13px;
	height: 13px;
	display: block;
}

.bigleap-rail__spacer {
	flex: 1;
	min-height: 16px;
}
.bigleap-rail__source {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--bigleap-rule);
}
.bigleap-source__label {
	display: block;
	font-size: 0.68em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--bigleap-muted);
	font-weight: 600;
	margin-bottom: 4px;
}
.bigleap-source__brand {
	font-weight: 800;
	font-size: 1em;
	letter-spacing: -0.02em;
	font-variant-ligatures: none;
}
.bigleap-source__brand--clutch {
	/* Neutral grey signals we're no longer styled in Clutch brand red,
	   since we're no longer a paid Clutch client. */
	color: #666;
}
.bigleap-source__brand--google {
	letter-spacing: -0.01em;
}
.bigleap-source__brand--google .gb { color: #4285F4; }
.bigleap-source__brand--google .gr { color: #EA4335; }
.bigleap-source__brand--google .gy { color: #FBBC04; }
.bigleap-source__brand--google .gg { color: #34A853; }
.bigleap-source__brand--other {
	color: var(--bigleap-primary);
}
.bigleap-source__brand--image {
	display: inline-block;
	line-height: 0;
}
.bigleap-source__brand--image img {
	display: block;
	height: 20px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}

/* Body ---------------------------------------------------------------- */

.bigleap-body {
	padding: 36px 40px 32px;
	display: flex;
	flex-direction: column;
}
.bigleap-body__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
	gap: 16px;
	flex-wrap: wrap;
}
.bigleap-body__rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.bigleap-body__score {
	font-size: 1.4em;
	font-weight: 800;
	color: var(--bigleap-primary);
	line-height: 1;
}
.bigleap-body__stars {
	font-size: 1.1em;
}
.bigleap-body__date {
	font-size: 0.76em;
	color: var(--bigleap-muted);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
}
/* Blockquote — defensive overrides against theme defaults that commonly
   add gray backgrounds, decorative quotes, large padding, italic, etc. */
.bigleap-reviews .bigleap-body__quote {
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 1.55em !important;
	line-height: 1.45 !important;
	color: var(--bigleap-primary) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	padding: 0 0 0 20px !important;
	border-top: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-left: 3px solid var(--bigleap-secondary) !important;
	margin: 0 0 28px !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	quotes: none !important;
	text-align: left !important;
}
.bigleap-reviews .bigleap-body__quote::before,
.bigleap-reviews .bigleap-body__quote::after {
	content: none !important;
	display: none !important;
}
.bigleap-body__footer {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}

/* CTA button ---------------------------------------------------------- */

.bigleap-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	background: var(--bigleap-primary);
	border-radius: 8px;
	text-decoration: none;
	color: #fff;
	font-size: 0.9em;
	font-weight: 700;
	border: 1.5px solid var(--bigleap-primary);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.bigleap-cta:hover,
.bigleap-cta:focus {
	background: var(--bigleap-primary-soft);
	border-color: var(--bigleap-primary-soft);
	color: #fff;
}
.bigleap-cta:focus-visible {
	outline: 2px solid var(--bigleap-cta);
	outline-offset: 2px;
}

/* Prev / next --------------------------------------------------------- */

.bigleap-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--bigleap-rule);
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(20, 61, 85, 0.12);
	z-index: 2;
	color: var(--bigleap-primary);
	padding: 0;
}
.bigleap-nav:hover {
	background: var(--bigleap-primary);
	color: #fff;
	border-color: var(--bigleap-primary);
}
.bigleap-nav:focus-visible {
	outline: 2px solid var(--bigleap-cta);
	outline-offset: 2px;
}
.bigleap-nav--prev { left: -22px; }
.bigleap-nav--next { right: -22px; }

/* Dots ---------------------------------------------------------------- */

.bigleap-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}
.bigleap-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0;
	background: #c9d0db;
	cursor: pointer;
	padding: 0;
	transition: width 0.2s ease, background 0.2s ease, border-radius 0.2s ease;
}
.bigleap-dot[aria-current="true"] {
	background: var(--bigleap-primary);
	width: 28px;
	border-radius: 5px;
}
.bigleap-dot:focus-visible {
	outline: 2px solid var(--bigleap-cta);
	outline-offset: 2px;
}

/* Responsive ---------------------------------------------------------- */

/* Pull the prev/next buttons inside the card at any viewport where the carousel
   takes the full available width — otherwise they get clipped by the page edge.
   Carousel max-width is 980px, so 1040px is the natural transition point. */
@media (max-width: 1040px) {
	.bigleap-nav--prev { left: 6px; }
	.bigleap-nav--next { right: 6px; }
}

@media (max-width: 820px) {
	.bigleap-slide {
		grid-template-columns: 1fr;
	}
	/* Card-level accent stripe at the very top of the stacked card. */
	.bigleap-slide::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 4px;
		background: var(--bigleap-primary);
		z-index: 1;
	}
	/* Body (stars + quote + button) comes first on mobile. */
	.bigleap-body {
		order: 1;
		padding: 24px 22px;
	}
	/* Rail (reviewer info, source) below, with a top divider. */
	.bigleap-rail {
		order: 2;
		padding: 24px 22px;
		border-right: 0;
		border-bottom: 0;
		border-top: 1px solid var(--bigleap-rule);
	}
	/* Hide the rail's own stripe on mobile — the slide has the card-level stripe. */
	.bigleap-rail::before {
		display: none;
	}
	.bigleap-body__quote {
		font-size: 1.25em;
	}
	.bigleap-body__footer {
		justify-content: flex-start;
	}
	.bigleap-nav--prev { left: 6px; }
	.bigleap-nav--next { right: 6px; }
}

/* Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bigleap-cta,
	.bigleap-nav,
	.bigleap-dot {
		transition: none;
	}
}