.block-trust-badges {
    position: relative;
    /* mockup section: overflow-hidden — clips the 600px hairline on narrow
       viewports instead of forcing horizontal scroll */
    overflow: hidden;
    /* mockup: py-14 md:py-20 → 56px / 80px */
    padding-block: 56px;
    /* Same light background as Our Services above — the sections flow into one
       another seamlessly, exactly as in the mockup (no hard colour break). */
    background: var(--wp--preset--color--background-100, #f6f5f4);
}

@media (min-width: 768px) {
    .block-trust-badges {
        padding-block: 80px;
    }
}

/* Hairline accent at the very top edge of the section — mockup:
   `absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-px`, a soft orange
   tint fading to transparent at both ends. 600px centered (not full-width),
   centered via auto margins so `transform` stays free for the scroll-reveal. */
.block-trust-badges__divider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 600px;
    margin-inline: auto;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 160, 107, 0.3),
        transparent
    );
}

/* Optional header */
.block-trust-badges__header {
    max-width: 640px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.block-trust-badges__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--text-primary);
}

.block-trust-badges__desc {
    margin: 0.75rem 0 0;
    line-height: 1.6;
    color: var(--wp--preset--color--text-secondary);
}

/* Grid — 2 columns on mobile, configurable from tablet up */
.block-trust-badges__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* mockup: gap-8 md:gap-10 → 32px / 40px (uniform) */
    gap: 32px;
}

@media (min-width: 768px) {
    .block-trust-badges__grid {
        gap: 40px;
    }

    .block-trust-badges--cols-2 .block-trust-badges__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .block-trust-badges--cols-3 .block-trust-badges__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .block-trust-badges--cols-4 .block-trust-badges__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Item */
.block-trust-badges__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

/* Icon tile — mockup: w-14 h-14 rounded-xl bg-white text-primary-500 (no shadow) */
.block-trust-badges__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #fff;
    color: var(--wp--preset--color--primary, #c64c01);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* mockup icon: ri-* at text-xl (20px) */
.block-trust-badges__icon svg {
    width: 20px;
    height: 20px;
}

/* mockup hover: group-hover:bg-primary-500 text-white scale-105 */
@media (hover: hover) {
    .block-trust-badges__item:hover .block-trust-badges__icon {
        background: var(--wp--preset--color--primary, #c64c01);
        color: #fff;
        transform: scale(1.05);
    }
}

/* Label — mockup: text-[14px] md:text-[15px] font-semibold text-foreground-800 */
.block-trust-badges__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #2c2e31;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .block-trust-badges__label {
        font-size: 15px;
    }
}