/*
 * ALL SERVICE - external platform ratings block (homepage).
 *
 * Two rating cards (Google, 2GIS). The rating, review count and destination
 * URL of each card are plain markup inside the homepage Elementor HTML widget
 * 51063dd (section 44b77f2). They are static values maintained by hand - they
 * are not fetched from any platform and the markup does not describe them as
 * live. No JavaScript, no iframe, no third-party requests.
 *
 * Card, border, shadow, hover and CTA-button tokens are reused from the
 * homepage service-card system (allservice-service-categories/categories.css)
 * so the block looks native to the site.
 *
 * Layout is intentionally 2 cards per row at every width (desktop, tablet,
 * mobile). minmax(0,1fr) + overflow-wrap keep long content from widening a
 * grid column (the same trap that bit the service grid on narrow screens).
 */
.aspr {
	--aspr-star: 26px;
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
}

.aspr,
.aspr *,
.aspr *::before,
.aspr *::after {
	box-sizing: border-box;
}

.aspr__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

a.aspr__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	padding: 30px 24px 26px;
	text-align: center;
	color: #333333;
	background: linear-gradient(180deg, #fcfdfe 0%, #eaf1f5 100%);
	border: 1px solid #d6e0e6;
	border-radius: 16px;
	box-shadow: 0 4px 14px rgba(0, 40, 80, 0.11);
	-webkit-tap-highlight-color: rgba(0, 156, 216, 0.12);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* Theme/Elementor set underline + colors on bare `a` states; the card is a
   link wrapper only, so keep it visually neutral in every state. */
a.aspr__card,
a.aspr__card:hover,
a.aspr__card:focus,
a.aspr__card:active,
a.aspr__card:visited {
	text-decoration: none !important;
}

@media (hover: hover) {
	a.aspr__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 30px rgba(0, 40, 80, 0.17);
		border-color: rgba(0, 156, 216, 0.35);
	}
}

a.aspr__card:focus-visible {
	outline: 2px solid #009CD8;
	outline-offset: 3px;
	box-shadow: 0 12px 30px rgba(0, 40, 80, 0.17);
	border-color: rgba(0, 156, 216, 0.35);
}

/* Platform logo: both source files are 300x300 transparent PNG marks. */
.aspr .aspr__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	margin-bottom: 14px;
}

.aspr .aspr__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Stars: grey track + gold fill clipped to the rating percentage
   (--aspr-fill, set inline per card). Decorative - the number carries
   the information, so the element is aria-hidden in the markup. */
.aspr .aspr__stars {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: calc(var(--aspr-star) * 5);
	height: var(--aspr-star);
	margin-bottom: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D3DCE3' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") 0 0 / var(--aspr-star) var(--aspr-star) repeat-x;
}

.aspr .aspr__stars::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: var(--aspr-fill, 100%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFA600' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") 0 0 / var(--aspr-star) var(--aspr-star) repeat-x;
}

.aspr .aspr__score {
	display: block;
	margin-bottom: 4px;
	font-size: 46px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -1px;
	color: #003F63;
}

.aspr .aspr__count {
	display: block;
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.3;
	color: #4f5d68;
	overflow-wrap: anywhere;
}

/* CTA: a span styled as the site's standard compact button (same fill,
   asymmetric corner and uppercase treatment as the service-card CTA). It is
   not a second link - the whole card is the single <a>, so there is no
   nested interactive element. */
.aspr .aspr__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: 100%;
	margin-top: auto;
	padding: 10px 22px;
	background: #009CD8;
	color: #ffffff;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 0 14px 0 14px;
	box-shadow: 0 3px 10px rgba(0, 156, 216, 0.3);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.aspr .aspr__cta svg {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

a.aspr__card:hover .aspr__cta,
a.aspr__card:focus-visible .aspr__cta {
	background: #003F63;
	box-shadow: 0 5px 14px rgba(0, 63, 99, 0.35);
}

a.aspr__card:hover .aspr__cta svg,
a.aspr__card:focus-visible .aspr__cta svg {
	transform: translateX(3px);
}

/* Visually hidden text: platform name + new-tab notice for screen readers. */
.aspr .aspr__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Tablet */
@media (max-width: 1024px) {
	.aspr {
		--aspr-star: 24px;
	}
	.aspr__grid {
		gap: 20px;
	}
	a.aspr__card {
		padding: 26px 20px 24px;
	}
}

/* Mobile: still 2 cards per row - everything inside gets compact. */
@media (max-width: 767px) {
	.aspr {
		--aspr-star: 17px;
	}
	.aspr__grid {
		gap: 10px;
	}
	a.aspr__card {
		padding: 18px 10px 16px;
		border-radius: 14px;
	}
	.aspr .aspr__logo {
		width: 44px;
		height: 44px;
		margin-bottom: 10px;
	}
	.aspr .aspr__stars {
		margin-bottom: 8px;
	}
	.aspr .aspr__score {
		font-size: 32px;
		letter-spacing: -0.5px;
	}
	.aspr .aspr__count {
		margin-bottom: 14px;
		font-size: 12.5px;
	}
	.aspr .aspr__cta {
		width: 100%;
		gap: 4px;
		padding: 8px 6px;
		font-size: 11px;
		letter-spacing: 0.2px;
	}
}

/* Narrow phones (360-399px): a 2-up card is only ~150-165px wide, and the
   bold uppercase CTA label alone measures ~114px at 11px. Tighten side
   padding and drop the label to 10px so label + arrow stay on one line. */
@media (max-width: 399px) {
	a.aspr__card {
		padding: 16px 8px 14px;
	}
	.aspr .aspr__cta {
		gap: 3px;
		padding: 8px 4px;
		font-size: 10px;
		letter-spacing: 0;
	}
}

/* Very narrow (<=339px, outside the supported 360px floor but kept graceful):
   no room for the arrow next to the label. */
@media (max-width: 339px) {
	.aspr .aspr__cta svg {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.aspr__card,
	.aspr .aspr__cta,
	.aspr .aspr__cta svg {
		transition: none;
	}
	a.aspr__card:hover {
		transform: none;
	}
	a.aspr__card:hover .aspr__cta svg,
	a.aspr__card:focus-visible .aspr__cta svg {
		transform: none;
	}
}