/* ==========================================================================
   .trust-strip — the four buyer facts in one row
   --------------------------------------------------------------------------
   Rendered by includes/trust-strip.php under the homepage hero's CTAs and
   under every model page's price. Two variants: --hero sits over a photo and
   its scrim (light type, hairline separators), --band sits on a surface.
   Legacy `* { color }` and `button` globals reach in here (docs/gotchas.md),
   so every colour is set explicitly at (0,2,0) or better.
   ========================================================================== */

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 0;
    margin: clamp(1rem, 2vw, 1.5rem) 0 0;
    padding: 0;
    list-style: none;
    font-size: clamp(.78rem, .9vw, .9rem);
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.3;
}

.trust-strip__item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 .9rem 0 0;
}

.trust-strip__item + .trust-strip__item {
    padding-left: .9rem;
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.trust-strip__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    white-space: nowrap;
}

.trust-strip--hero .trust-strip__link,
.trust-strip--hero .trust-strip__text {
    color: rgba(255, 255, 255, .86);
}

.trust-strip--hero a.trust-strip__link:hover .trust-strip__text,
.trust-strip--hero a.trust-strip__link:focus-visible .trust-strip__text {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .18em;
}

.trust-strip--hero .trust-strip__num {
    color: #fff;
    font-weight: 650;
}

.trust-strip__stars {
    color: #f5b301;
    font-size: .92em;
    letter-spacing: .04em;
}

.trust-strip__icon {
    font-size: .95em;
    color: rgba(255, 255, 255, .7);
}

.trust-strip--hero .trust-strip__item + .trust-strip__item {
    border-left-color: rgba(255, 255, 255, .22);
}

/* On a surface: the ladder's own type colours and a hairline from the tokens. */
.trust-strip--band .trust-strip__link,
.trust-strip--band .trust-strip__text {
    color: var(--theme-text-muted, rgba(255, 255, 255, .72));
}

.trust-strip--band .trust-strip__num {
    color: var(--theme-text-strong, #fff);
    font-weight: 650;
}

.trust-strip--band .trust-strip__item + .trust-strip__item {
    border-left-color: rgba(255, 255, 255, .14);
}

.trust-strip__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

@media (max-width: 700px) {
    .trust-strip {
        gap: .45rem 0;
    }

    .trust-strip__item {
        padding-right: .65rem;
    }

    .trust-strip__item + .trust-strip__item {
        padding-left: .65rem;
    }

    /* Two facts a row on a phone: the rating and the warranty lead, the
       credentials wrap under them. */
    .trust-strip__item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}
