/* Local extension: the card is the shared money-flow surface (hero figure,
   segmented meter, chart legend) and the footnote is the shared callout. This
   file owns only what those components have no pattern for: the company header
   (its sample-size badge is a shared positive label), the tooltip beside the eyebrow, the resale row
   above the meter, the larger markup figure, the callout's icon layout, the two-up card grid and the
   small print. Type sizes and weights come from the shared classes; this file
   declares none. Every selector stays inside .ibuyer-kpi-cards-block.

   Spacing rule: surfaces own their padding and every space between parts is a
   grid or flex gap. Nothing inside the card adds its own margin or padding;
   the margin: 0 declarations below only neutralise host-theme defaults. */

.ibuyer-kpi-cards-block {
    container-type: inline-size;
}

.ibuyer-kpi-cards-block .ibuyer-kpi-cards {
    display: grid;
    gap: var(--clvr-space-6);
    min-width: 0;
}

/* The shared surface is already a grid with a space-4 gap. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__card {
    min-width: 0;
    align-content: start;
}

/* Caption, meter and legend sit on the card's own rhythm. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__chart {
    display: grid;
    gap: inherit;
    min-width: 0;
    margin: 0;
}

/* Company name with its sample-size badge beside it, wrapping when narrow. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--clvr-space-2) var(--clvr-space-3);
    min-width: 0;
}

/* Confirmed host conflict: the LWC theme gives every figcaption a 1em block
   margin and centres its text. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__caption {
    margin: 0;
    text-align: start;
}

/* The shared eyebrow is a bare span; the tooltip trigger sits beside it. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__eyebrow {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--clvr-space-2);
}

/* The tooltip sits inside the uppercase, letter-spaced eyebrow; the shared
   tooltip sets its own font but not case or tracking, so reset those. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__eyebrow .clvr-tooltip__content {
    letter-spacing: normal;
    text-transform: none;
}

/* The markup is the card's conclusion, so it takes the brand colour. The
   shared figcaption strong rule sets text colour at higher specificity. */
.ibuyer-kpi-cards-block .clvr-money-flow figcaption strong.ibuyer-kpi-cards__figure {
    color: var(--clvr-color-primary);
}

/* The resale price is the whole bar, so it sits above the meter as a one-row
   shared legend at the same size as the rows below, with no colour key. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__total dt::before {
    display: none;
}

/* The markup is the card's point, so its figure steps up to the shared metric
   value size; the label stays the shared legend's. The shared legend mutes
   every dd span, so the figure restores the text colour. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__markup .clvr-metric__value {
    margin: 0;
    color: var(--clvr-color-text);
}

/* The callout gains a leading icon tile; the shared callout stacks its
   children, so this lays them side by side. Its padding stays the shared one. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__footnote {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--clvr-space-3);
}

.ibuyer-kpi-cards-block .ibuyer-kpi-cards__footnote-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: var(--clvr-radius-md);
    /* The shared info-label colour pair, matching the callout's blue accent. */
    background: var(--clvr-color-label-info-bg);
    color: var(--clvr-color-label-info-text);
}

.ibuyer-kpi-cards-block .ibuyer-kpi-cards__footnote p {
    margin: 0;
}

.ibuyer-kpi-cards-block .ibuyer-kpi-cards__footnote strong {
    color: var(--clvr-color-text);
}

/* Host themes style bare paragraphs; keep the block's small print on the brand
   body face rather than inheriting article typography. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__source {
    margin: 0;
    color: var(--clvr-color-text-muted);
    font-family: var(--clvr-font-body);
    line-height: 1.6;
}

/* Two cards side by side once there is room for two readable columns. */
.ibuyer-kpi-cards-block .ibuyer-kpi-cards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--clvr-space-6);
}