/**
 * Oyolloo Elements — rating and trust badge.
 *
 * Figma reference: "Trust Pilot Micro Combo" (nodes 473:14565 desktop,
 * 471:1287 reviews header) and the 5-star row inside each review card.
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-rating {
	--oe-rating-color: var(--oe-color-brand);
	--oe-rating-size: 24px;

	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--oe-rating-color);
}

.oe-rating__star {
	display: inline-flex;
	width: var(--oe-rating-size);
	height: var(--oe-rating-size);
	flex-shrink: 0;
}

.oe-rating__star svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.oe-rating__star--empty {
	color: var(--oe-color-neutral-300);
}

/* Review stars are the provider's orange (Figma 471:1283, star-fill #f68c2a),
   not the brand yellow the hero and trust-rating widgets use. */
.oe-rating--review {
	--oe-rating-color: var(--oe-color-star);
}

.oe-rating--sm {
	--oe-rating-size: 18px;
}

/* -- Trust badge --------------------------------------------------------- */

/* The badge renders as an <a> whenever it has somewhere to point — always, in
   live mode, where it carries the attribution link back to the Google listing.
   Without these two the theme's link colour and underline land on the score and
   the count, and the pill stops matching the div-form beside it. */
.oe-trust {
	display: inline-flex;
	align-items: center;
	gap: var(--oe-space-xs);
	color: inherit;
	text-decoration: none;
}

/* Figma "Trust Pilot Micro Combo" (471:1287): 46px tall pill, 12/24 padding,
   8px gap, 14px radius on the neutral-100 surface. */
.oe-trust--pill {
	gap: var(--oe-space-2xs);
	padding: var(--oe-space-xs) var(--oe-space-md);
	border: 1px solid var(--oe-color-neutral-300);
	border-radius: 14px;
	background-color: var(--oe-color-neutral-100);
}

.oe-trust--pill .oe-rating {
	--oe-rating-size: 20px;

	gap: 0;
}

/* Figma 473:14565 — the hero runs the same pill on black: an 8% white wash,
   a 10% white hairline, white type and a wider 13px rhythm. */
.oe-trust--dark {
	gap: 13px;
	border-color: rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.08);
}

.oe-trust--dark .oe-trust__score,
.oe-trust--dark .oe-trust__meta {
	color: var(--oe-color-white);
}

.oe-trust--dark .oe-rating {
	--oe-rating-size: 18px;
}

.oe-trust__score {
	font-family: var(--oe-font-body);
	font-size: var(--oe-body-size);
	font-weight: 700;
	line-height: 19px;
	color: var(--oe-color-black);
}

.oe-trust__meta {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-size: var(--oe-body-size);
	line-height: 19px;
	color: var(--oe-color-black);
}

.oe-trust__count {
	font-weight: 700;
}

.oe-trust__logo {
	display: inline-flex;
	align-items: center;
	height: 20px;
}

.oe-trust__logo img,
.oe-trust__logo svg {
	height: 100%;
	width: auto;
}

@media (max-width: 767px) {
	.oe-rating {
		--oe-rating-size: 18px;
	}

	.oe-trust {
		gap: var(--oe-space-2xs);
	}

	.oe-trust--pill {
		flex-wrap: nowrap;
	}

	.oe-trust__score,
	.oe-trust__meta {
		font-size: var(--oe-body-sm-size);
		white-space: nowrap;
	}

	.oe-trust__logo {
		flex-shrink: 0;
	}
}

/*
 * The pill is sized to fill the 345px column exactly at the design's 393px
 * frame, so every narrower phone overruns it — at 350 the contents ran 51px
 * past the padding box and the Google mark hung over the page edge. Everything
 * scales with the viewport and lands back on the design's values at 393.
 */
@media (max-width: 392px) {
	.oe-trust--pill {
		padding-inline: 10px;
	}

	.oe-trust--pill,
	.oe-trust--dark {
		gap: var(--oe-space-3xs);
        width: 100%;
        justify-content: space-around;
	}

	.oe-trust--pill .oe-rating,
	.oe-trust--dark .oe-rating {
		--oe-rating-size: clamp(15px, 4.6vw, 18px);
	}

	.oe-trust__score,
	.oe-trust__meta {
		font-size: clamp(12px, 3.6vw, 14px);
	}

	.oe-trust__logo {
		height: clamp(16px, 5.1vw, 20px);
	}

	/* .oe-blog-grid{
		overflow: hidden;
	}
	.oe-blog-grid .oe-slider__track {
		overflow: visible;
	} */
}