/* Sketch Suite — Google Reviews trust badge
   Standalone, larger companion to the header pill (widget.css). Used by the home
   hero in place of the eyebrow line, but self-contained so any module can drop it in.

   Everything sits on one line: Google mark · rating · stars · caption.

   Two styles:
     .skgr-badge--glass  frosted white glass, for placing over imagery (the hero)
     .skgr-badge--light  solid white, the classic Google review badge look */

.skgr-badge {
	/* Frosted white: enough white pulls through that dark text stays legible over
	   whatever image sits behind it, while the backdrop blur keeps it glassy. */
	--skgr-badge-fg: #14181f;
	--skgr-badge-muted: #4a5260;
	--skgr-badge-bg: rgba(255, 255, 255, 0.72);
	--skgr-badge-border: rgba(255, 255, 255, 0.85);
	--skgr-badge-track: rgba(20, 24, 31, 0.16);
	--skgr-badge-star: #f5a623;

	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 12px;
	background: var(--skgr-badge-bg);
	border: 1px solid var(--skgr-badge-border);
	border-radius: 9999px;
	color: var(--skgr-badge-fg);
	text-decoration: none;
	font-family: var(--sk-font, "Saans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.14);
	/* Desaturating the backdrop stops the frost picking up the colour cast of
	   whatever photo is behind it, so the pill still reads as white. */
	-webkit-backdrop-filter: blur(24px) saturate(60%) brightness(1.15);
	backdrop-filter: blur(24px) saturate(60%) brightness(1.15);
	transition:
		transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.22s ease;
}

/* No backdrop-filter (older Firefox): lean on a more opaque white so the badge
   never degrades into unreadable dark-text-on-photo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.skgr-badge--glass {
		--skgr-badge-bg: rgba(255, 255, 255, 0.9);
	}
}

.skgr-badge--light {
	--skgr-badge-bg: #ffffff;
	--skgr-badge-border: #e6e8ec;
	--skgr-badge-muted: #5b6471;
	--skgr-badge-track: #e5e7eb;

	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}

a.skgr-badge:hover,
a.skgr-badge:focus-visible {
	transform: translateY(-2px);
}
a.skgr-badge--glass:hover,
a.skgr-badge--glass:focus-visible {
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 8px 26px rgba(15, 23, 42, 0.18);
}
a.skgr-badge--light:hover,
a.skgr-badge--light:focus-visible {
	border-color: #ec5446;
	box-shadow: 0 10px 26px rgba(236, 84, 70, 0.18);
}

.skgr-badge__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.skgr-badge__logo svg {
	width: 19px;
	height: 19px;
}

/* Single row: rating + stars, then the caption after a dot separator. */
.skgr-badge__body {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.skgr-badge__top {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.skgr-badge__rating {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--skgr-badge-fg);
}

/* Stars — overlay technique so decimal ratings fill proportionally */
.skgr-badge__stars {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}
.skgr-badge__stars-bg,
.skgr-badge__stars-fill {
	display: inline-flex;
	gap: 1.5px;
	line-height: 0;
}
.skgr-badge__stars-bg {
	color: var(--skgr-badge-track);
}
.skgr-badge__stars-fill {
	position: absolute;
	inset: 0 auto 0 0;
	color: var(--skgr-badge-star);
	overflow: hidden;
	white-space: nowrap;
}
.skgr-badge__stars svg {
	width: 14px;
	height: 14px;
}

.skgr-badge__caption {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--skgr-badge-muted);
}
.skgr-badge__caption::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.skgr-badge {
		gap: 7px;
		padding: 6px 13px 6px 10px;
	}
	.skgr-badge__body { gap: 6px; }
	.skgr-badge__logo svg { width: 17px; height: 17px; }
	.skgr-badge__rating { font-size: 14px; }
	.skgr-badge__stars svg { width: 12.5px; height: 12.5px; }
	.skgr-badge__caption { font-size: 11.5px; gap: 6px; }
}

/* Very narrow phones: the caption is the first thing that can go. */
@media (max-width: 400px) {
	.skgr-badge__caption::before { display: none; }
	.skgr-badge__body { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
	.skgr-badge { transition: none; }
	a.skgr-badge:hover,
	a.skgr-badge:focus-visible { transform: none; }
}