/** Firm review — identity block (logo, badge, dates, H1, rating, credits). */

.pfg-rv-identity {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.pfg-rv-identity__top {
	display: flex;
	align-items: center;
	gap: 12px 18px;
	flex-wrap: wrap;
	min-width: 0;
}

.pfg-rv-identity__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.pfg-rv-identity__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-weight: 400;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--rv-text-1, #F2F3F8);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

@media (max-width: 760px) {
	.pfg-rv-identity__title {
		font-size: clamp(23px, 6.6vw, 30px);
	}
}

.pfg-rv-identity__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	font-size: clamp(13.5px, 0.78vw, 16px);
	color: var(--rv-text-2, #C6CBDD);
}

.pfg-rv-identity__stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	color: var(--rv-star, #F6C453);
}

/* ------------------------------------------------------------- credits */

.pfg-rv-identity__credits {
	display: flex;
	align-items: center;
	gap: 4px 18px;
	flex-wrap: wrap;
	margin-top: 6px;
	min-width: 0;
}

.pfg-rv-identity__creditlead {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	letter-spacing: 0.1em;
}

.pfg-rv-credit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	min-width: 0;
}

.pfg-rv-credit__av {
	display: grid;
	place-items: center;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--acc, var(--wp--preset--color--accent, #A79FFF));
	color: var(--rv-on-acc, #14161F);
	font-size: 10px;
	font-weight: 800;
}

.pfg-rv-credit__av--check {
	background: rgba(64, 214, 154, 0.12);
	border: 1.5px solid rgba(64, 214, 154, 0.55);
	color: var(--rv-pos, #40D69A);
}

.pfg-rv-credit__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pfg-rv-credit__role {
	font-size: clamp(9.5px, 0.55vw, 11.5px);
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rv-text-label, #9AA1B5);
}

.pfg-rv-credit__name {
	font-size: clamp(12.5px, 0.72vw, 14.5px);
	font-weight: 700;
	color: var(--rv-text-1, #F2F3F8);
	white-space: nowrap;
}

/*
 * A LINKED BYLINE IS STILL A BYLINE. `.claude/rules/design.md` lists where the
 * accent may go — the price, the grade seal, the CTA, the coupon pill, the
 * active pill, a market dot — and a credit is on none of them, so this link
 * takes the same ink as the name it replaces. The hint that it is a link is a
 * hairline underline, brightening to the text colour on hover and focus, which
 * is the site's one hover idiom.
 *
 * The <a> is the same element as the name rather than a wrapper around it:
 * `text-decoration` propagates from an ancestor and cannot be turned off by a
 * descendant, so nesting would have made the underline unremovable — the
 * defect both authors stylesheets record from the /authors/ pages.
 */
.pfg-rv-credit__link,
.pfg-rv-credit__link:link,
.pfg-rv-credit__link:visited {
	/* WCAG 2.2 SC 2.5.8. The name's own line box is 21px here, and this is not
	   a link in a sentence, so the inline exception does not cover it. The row
	   already reserves 34px, so the extra three pixels a side change nothing
	   visible and make the target 24px. Measured, not assumed. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--rv-text-1, #F2F3F8);
	text-decoration: underline;
	text-decoration-color: var(--border-strong, rgba(255, 255, 255, 0.14));
	text-underline-offset: 2px;
}

.pfg-rv-credit__link:hover,
.pfg-rv-credit__link:focus-visible {
	text-decoration-color: currentColor;
}

/*
 * Below 760px the credits row becomes a swipe rail with a trailing fade, which
 * is how the design keeps three cells on a 390px screen without wrapping into a
 * tall stack. It is a scroll container, so it is focusable.
 */
@media (max-width: 760px) {
	.pfg-rv-identity__credits {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 14px;
		padding-bottom: 2px;
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
	}

	.pfg-rv-identity__credits::-webkit-scrollbar {
		display: none;
	}

	/* The fade is a mask, and a mask clips the focus ring painted outside the
	   box along with everything else: measured, the rail took focus with no
	   visible indicator. The fade stands down while the rail has keyboard
	   focus, so the ring the base stylesheet draws is seen. */
	.pfg-rv-identity__credits:focus-visible {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.pfg-rv-identity__credits > * {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------- tooltip */

.pfg-rv-tipwrap {
	position: relative;
	cursor: help;
}

.pfg-rv-tip {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	z-index: 20;
	width: min(292px, calc(100vw - 40px));
	padding: 11px 13px;
	border-radius: 12px;
	background: #262B38;
	border: 1px solid var(--rv-b3, rgba(255, 255, 255, 0.10));
	box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.72);
	color: var(--rv-text-2, #C6CBDD);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
	opacity: 0;
	transform: translateY(-2px);
	pointer-events: none;
	transition: opacity 150ms ease, transform 150ms ease;
}

.pfg-rv-tipwrap:hover .pfg-rv-tip,
.pfg-rv-tipwrap:focus-visible .pfg-rv-tip,
.pfg-rv-tipwrap:focus-within .pfg-rv-tip {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 760px) {
	.pfg-rv-tip {
		width: min(230px, calc(100vw - 48px));
		left: auto;
		right: 0;
	}
}