/* Local extension: the shared set has no star-rating meter, no row of
   linked platform tiles and no brand lockup for the review hero. Shared
   components supply every appearance value (review hero heading and lead
   stat, cards, labels, snapshot stats); local rules cover arrangement, the
   hero surface, logo and star geometry, the tile hover/focus highlight and
   the block-owned star fill. Every selector is rooted at the block class. */

.social-proof-stats-v2-block .social-proof-stats-v2__stack {
    display: grid;
    gap: var(--clvr-space-6);
}

.social-proof-stats-v2-block .social-proof-stats-v2__hero {
    margin: 0;
    border: 1px solid var(--clvr-color-border-subtle);
    background: var(--clvr-color-surface-muted);
}

.social-proof-stats-v2-block .social-proof-stats-v2__hero p {
    margin: 0;
}

/* Brand lockup: a large mark beside the name and tag. */
.social-proof-stats-v2-block .social-proof-stats-v2__brand {
    display: flex;
    align-items: center;
    gap: var(--clvr-space-4);
    min-width: 0;
}

.social-proof-stats-v2-block .social-proof-stats-v2__mark {
    display: block;
    width: 3.5rem;
    height: 4.43rem;
    flex: none;
}

.social-proof-stats-v2-block .social-proof-stats-v2__brand-text {
    display: grid;
    gap: var(--clvr-space-1);
    min-width: 0;
}

.social-proof-stats-v2-block .social-proof-stats-v2__brand-name {
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

.social-proof-stats-v2-block .social-proof-stats-v2__brand-tag {
    color: var(--clvr-color-text-secondary);
}

/* A wider rating column than the shared 12rem keeps the review count on
   one line and moves the divider left. */
.social-proof-stats-v2-block .social-proof-stats-v2__hero {
    grid-template-columns: minmax(0, 1fr) 20rem;
}

/* Rating, stars and count stack on an even, roomier rhythm. */
.social-proof-stats-v2-block .social-proof-stats-v2__lead {
    display: grid;
    justify-items: start;
    gap: var(--clvr-space-4);
}

.social-proof-stats-v2-block .social-proof-stats-v2__lead > strong {
    margin: 0;
}

.social-proof-stats-v2-block .social-proof-stats-v2__lead p {
    color: var(--clvr-color-text-secondary);
}

/* Platform tiles: one row on wide containers, stacking as width runs out. */
.social-proof-stats-v2-block .social-proof-stats-v2__platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--clvr-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-proof-stats-v2-block .social-proof-stats-v2__platform {
    display: flex;
    margin: 0;
    padding: 0;
}

.social-proof-stats-v2-block .social-proof-stats-v2__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--clvr-space-3);
    color: var(--clvr-color-text);
    text-decoration: none;
    transition: border-color var(--clvr-duration-fast) ease, box-shadow var(--clvr-duration-fast) ease, transform var(--clvr-duration-fast) ease;
}

/* The highlight stats share the platform tiles' hover treatment. */
.social-proof-stats-v2-block .social-proof-stats-v2__highlights .clvr-stat {
    transition: border-color var(--clvr-duration-fast) ease, box-shadow var(--clvr-duration-fast) ease, transform var(--clvr-duration-fast) ease;
}

.social-proof-stats-v2-block .social-proof-stats-v2__highlights .clvr-stat:hover {
    border-color: var(--clvr-color-primary);
    box-shadow: var(--clvr-shadow-lg);
    transform: translateY(-2px);
}

/* Hover and keyboard focus lift the tile and outline it in the primary color. */
.social-proof-stats-v2-block .social-proof-stats-v2__card:hover,
.social-proof-stats-v2-block a.social-proof-stats-v2__card:focus-visible {
    border-color: var(--clvr-color-primary);
    box-shadow: var(--clvr-shadow-lg);
    color: var(--clvr-color-text);
    text-decoration: none;
    transform: translateY(-2px);
}

.social-proof-stats-v2-block a.social-proof-stats-v2__card:focus-visible {
    outline: 2px solid var(--clvr-color-primary);
    outline-offset: 3px;
}

.social-proof-stats-v2-block a.social-proof-stats-v2__card:hover .clvr-card__title,
.social-proof-stats-v2-block a.social-proof-stats-v2__card:focus-visible .clvr-card__title {
    color: var(--clvr-color-primary);
}

.social-proof-stats-v2-block .social-proof-stats-v2__platform-name {
    display: flex;
    align-items: center;
    gap: var(--clvr-space-2);
}

.social-proof-stats-v2-block .social-proof-stats-v2__logo {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
}

.social-proof-stats-v2-block .social-proof-stats-v2__score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--clvr-space-2);
}

.social-proof-stats-v2-block .social-proof-stats-v2__score .clvr-metric__value,
.social-proof-stats-v2-block .social-proof-stats-v2__score .clvr-card__copy {
    margin: 0;
}

/* The badge sits at the foot of the tile so badges align across a row. */
.social-proof-stats-v2-block .social-proof-stats-v2__card .clvr-label {
    margin-top: auto;
}

/* Star meter: a muted track with a filled copy clipped to the rating. The
   fill spans each whole star plus its gap, then the fraction of the next
   star alone, so a 4.5 fills exactly half of the fifth star. */
.social-proof-stats-v2-block .social-proof-stats-v2__stars {
    --social-proof-stats-v2-block-star: 1.125rem;
    position: relative;
    display: inline-block;
    line-height: 0;
}

.social-proof-stats-v2-block .social-proof-stats-v2__stars-track,
.social-proof-stats-v2-block .social-proof-stats-v2__stars-fill {
    display: flex;
    gap: var(--clvr-space-1);
}

.social-proof-stats-v2-block .social-proof-stats-v2__stars-track {
    color: var(--clvr-color-border);
}

.social-proof-stats-v2-block .social-proof-stats-v2__stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--social-proof-stats-v2-block-whole, 5) * (var(--social-proof-stats-v2-block-star) + var(--clvr-space-1)) + var(--social-proof-stats-v2-block-frac, 0) * var(--social-proof-stats-v2-block-star));
    overflow: hidden;
    color: var(--clvr-color-label-warning-strong);
}

.social-proof-stats-v2-block .social-proof-stats-v2__star {
    display: block;
    width: var(--social-proof-stats-v2-block-star);
    height: var(--social-proof-stats-v2-block-star);
    flex: none;
    fill: currentColor;
}

.social-proof-stats-v2-block .social-proof-stats-v2__lead .social-proof-stats-v2__stars {
    --social-proof-stats-v2-block-star: 1.375rem;
}

/* The shared .clvr-review-explorer__lead > span rule (block display, body
   font, 1.6 line height) would otherwise reach the meter, a direct span
   child of the lead; this selector outranks it. */
.social-proof-stats-v2-block .social-proof-stats-v2__lead > .social-proof-stats-v2__stars {
    display: inline-block;
    line-height: 0;
}

@container (max-width: 600px) {
    .social-proof-stats-v2-block .social-proof-stats-v2__hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .social-proof-stats-v2-block .social-proof-stats-v2__lead {
        gap: var(--clvr-space-3);
    }

    .social-proof-stats-v2-block .social-proof-stats-v2__mark {
        width: 2.75rem;
        height: 3.48rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-proof-stats-v2-block .social-proof-stats-v2__card,
    .social-proof-stats-v2-block .social-proof-stats-v2__highlights .clvr-stat {
        transition: none;
    }

    .social-proof-stats-v2-block .social-proof-stats-v2__highlights .clvr-stat:hover,
    .social-proof-stats-v2-block .social-proof-stats-v2__card:hover,
    .social-proof-stats-v2-block a.social-proof-stats-v2__card:focus-visible {
        transform: none;
    }
}

@media (forced-colors: active) {
    .social-proof-stats-v2-block .social-proof-stats-v2__stars-fill {
        color: CanvasText;
    }

    .social-proof-stats-v2-block .social-proof-stats-v2__stars-track {
        color: GrayText;
    }
}