/* ─── Trust strip (compact inline + social proof) ─────
   Molecule używana w hero-import. Może być reużywana.

   Layout:
   1. Strip — inline items (ikona + label) rozdzielone kropką ::after
   2. Social proof — stack 3 avatarów + count + sub

   Typo, color → theme.json.
   Tu tylko: layout (flex), positioning (overlap avatarów), dot separator. */

.kordit-hero-trust {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--lg);
}

/* Inline strip z dot separatorem */
.kordit-hero-trust__strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--md);
}

.kordit-hero-trust__item.wp-block-group {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    margin: 0;
    position: relative;
}

/* Dot separator po każdym item poza ostatnim */
.kordit-hero-trust__item.wp-block-group::after {
    content: "•";
    margin-left: var(--wp--preset--spacing--md);
    color: var(--wp--custom--color--primary-tint-12);
    font-size: var(--wp--preset--font-size--text-small);
    line-height: 1;
}

.kordit-hero-trust__item.wp-block-group:last-child::after {
    display: none;
}

/* Ikona w stripie — inline svg, bez chip background */
.kordit-hero-trust__icon.wp-block-image {
    width: var(--wp--custom--size--icon--lg);
    height: var(--wp--custom--size--icon--lg);
    margin: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
}

.kordit-hero-trust__label {
    margin: 0;
}

/* ━━ Social proof (avatary + count) ━━━━━━━━━ */
.kordit-hero-trust__social.wp-block-group {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--wp--preset--spacing--md);
    margin: 0;
}

.kordit-hero-trust__avatars.wp-block-group {
    display: inline-flex;
    flex-direction: row;
    margin: 0;
    gap: 0;
}

/* Avatar stack — overlap przez ujemny margin */
.kordit-hero-trust__avatar.wp-block-image {
    width: var(--wp--custom--size--avatar--md);
    height: var(--wp--custom--size--avatar--md);
    margin: 0 0 0 calc(-1 * var(--wp--preset--spacing--sm));
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    border: var(--wp--custom--size--border--default) solid var(--wp--preset--color--white);
    background: var(--wp--preset--color--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &:first-child {
        margin-left: 0;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 999px;
    }
}

.kordit-hero-trust__text.wp-block-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

/* __count, __sub: typo z theme.json. */
.kordit-hero-trust__count {
    margin: 0;
}

.kordit-hero-trust__sub {
    margin: 0;
}

@media (max-width: 600px) {
    .kordit-hero-trust__strip {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wp--preset--spacing--lg);
    }

    .kordit-hero-trust__item.wp-block-group::after {
        display: none;
    }
}