/* Rating card — dark navy panel, left corners rounded (Figma 177:343). */

.rating-card {
	position: relative;
	/* Own stacking context, so the tile can drop its graphic to z-index -1. */
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
	min-height: 490px;
	padding: 28px 24px 24px;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(180px 245px at 50% 50%, #2b3b5e 0%, #1a294a 100%),
		#1A294A;
}

.rating-card__rating {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
}

.rating-card__score {
	color: var(--color-neutral-7);
	font-family: var(--font-heading);
	font-size: var(--h2-size);
	line-height: var(--h2-lh);
}

.rating-card__stars {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 115px;
}

.rating-card__stars img { width: 115px; height: 17px; }

.rating-card__count {
	color: var(--color-neutral-1);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: var(--btn-ls);
}

/* The orbit graphic is a transparent PNG that floats behind the copy. */
.rating-card__image {
	position: absolute;
	left: 0;
	top: calc(50% + 18px);
	transform: translateY(-50%);
	width: 100%;
	max-width: 360px;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	pointer-events: none;
}

.rating-card__link {
	position: relative;
	z-index: 1;
	margin-top: auto;
}

/*
 * Tile variant — the ninth cell of the services grid (Figma 356:2663).
 * Same panel, card-sized: 247px tall, all four corners rounded, and the orbit
 * graphic pushed right so it sits behind the empty right half of the card.
 */

.rating-card--tile {
	height: 100%;
	min-height: 247px;
}

/*
 * Figma centres a 394px orbit graphic 106.5px right of the card centre, which
 * slices the outer avatars in half against the right edge. Pulled in to 300px
 * and closer to the middle on the client's call, so the faces orbit the Google
 * mark whole instead of being cropped.
 */
.rating-card--tile .rating-card__image {
	left: calc(50% + 74px);
	right: auto;
	top: calc(50% + 12px);
	width: 258px;
	max-width: none;
	transform: translate(-50%, -50%);
}

/*
 * Whole tile is clickable — the CTA anchor is stretched over it, the same trick
 * the service cards use. For inset:0 to resolve against the card the anchor has
 * to be unpositioned, so the orbit graphic drops behind the content instead
 * (`isolation` on the card keeps it above the card's own background).
 */
.rating-card--tile .rating-card__image { z-index: -1; }

.rating-card--tile .rating-card__link {
	position: static;
	z-index: auto;
}

.rating-card--tile .rating-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
}

.rating-card--tile { transition: transform .25s ease, box-shadow .25s ease; }

.rating-card--tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(16, 33, 71, .12);
}

@media (prefers-reduced-motion: reduce) {
	.rating-card--tile { transition: none; }
	.rating-card--tile:hover { transform: none; }
}

/* The score/stars block is inert text — let clicks through to the stretched link. */
.rating-card--tile .rating-card__rating { pointer-events: none; }