/* ─── CTA Card (phone) ───────────────────────
   Molecule — biały box z borderem, ikoną w czerwonym kółku + body z label
   + numerem telefonu. Tekst klikalny jako link tel:.

   Reużywalna. Hover zmienia kolor numeru na --konsultacja-accent jeśli
   rodzic ustawi zmienną.

   Reuse atomów:
   - .kordit-card (background + radius + shadow) — opcjonalnie
   - .kordit-icon-chip.is-md.is-accent-soft (zamiast __icon — patrz markup)
   ============================================ */
.kordit-cta-card.wp-block-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--wp--preset--spacing--md);
    padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
    border: 1px solid var(--wp--custom--color--primary-tint-12);
    border-radius: 14px;
    background: var(--wp--preset--color--white);
    box-shadow: var(--wp--custom--shadow--card);
    width: max-content;
    max-width: 100%;
    /* Karta na ciemnym tle dziedziczy color:white z rodzica patternu —
       wewnątrz karty wymuszamy primary text żeby był widoczny na białym tle. */
    color: var(--wp--preset--color--primary);
}

/* __icon zostawione dla backwards compat — może być replaced przez kordit-icon-chip.is-md.is-accent-soft */
.kordit-cta-card__icon.wp-block-image {
    width: var(--wp--custom--size--avatar--md);
    height: var(--wp--custom--size--avatar--md);
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--wp--custom--color--accent-2-tint-10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.kordit-cta-card__icon img {
    width: var(--wp--custom--size--icon--md);
    height: var(--wp--custom--size--icon--md);
    margin: 0;
    display: block;
}

.kordit-cta-card__body.wp-block-group {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xs);
    margin: 0;
}

.kordit-cta-card__body > * {
    margin: 0;
}

/* __label, __phone: BEZ typografii lokalnej.
   - __label MUSI mieć w markup również klasę .kordit-eyebrow → atom dostarcza
     uppercase + letter-spacing + accent-2 color z theme.json tokenów.
   - __phone MUSI być tagiem <h3> (lub h2/h4) → theme.json elements.heading
     dostarcza lineHeight, letterSpacing, fontWeight, fontFamily, color.
     Markup decyduje o rozmiarze przez has-heading-3-font-size preset.
   Layout: tylko margin reset + reset koloru linku. */
.kordit-cta-card__label,
.kordit-cta-card__phone {
    margin: 0;
}

.kordit-cta-card__phone a {
    color: inherit;
    text-decoration: none;
}

.kordit-cta-card__phone a:hover,
.kordit-cta-card__phone a:focus {
    color: var(--konsultacja-accent, var(--wp--preset--color--accent-2));
}