/* ─── Pill atom — białe rounded box z ikoną + tytułem ──────
   Reużywalny w karta CTA, hero callout, porownanie left col itd.

   Struktura BEM:
     .kordit-pill              — wrapper flex (ikona + content)
       .kordit-pill__icon      — figure z img (opcjonalne)
       .kordit-pill__title     — heading albo paragraph

   Modyfikatory:
     .is-inline                — max-width: max-content (nie rozciąga się)
     .is-floating              — z większym shadow (--shadow-elevated)

   Tokeny edytowalne z _tokens.scss --pill-* — projektant zmienia
   tam, NIE w pattern SCSS.

   Typografia idzie z theme.json fontSize preset (block comment).
   Atom NIE narzuca size/weight tytułu. */
.kordit-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--pill-gap);
    background: var(--pill-bg);
    border-radius: var(--pill-radius);
    padding: var(--pill-padding-y) var(--pill-padding-x);
    box-shadow: var(--pill-shadow);
    font-size: 10px !important;
    margin-bottom: 8px;

    a &:hover {
        text-decoration: none;
    }

    &.is-inline {
        max-width: max-content;
    }

    &.is-floating {
        box-shadow: var(--shadow-elevated);
    }

    &__icon {
        flex-shrink: 0;
        margin: 0;

        img {
            display: block;
            width: var(--icon-md);
            height: var(--icon-md);
            object-fit: contain;
        }
    }

    &__title {
        margin: 0;

        em {
            font-style: normal;
            color: var(--accent-2);
        }
    }
}