/* ==========================================================================
   COMPONENT: callout boxes (info / tip / warning / note)
   ========================================================================== */
.bc-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    border-radius: var(--radius-lg);
    border-left: 3px solid;
    background: var(--bg-surface-1);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.bc-callout__icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    font-family: var(--font-mono);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.bc-callout__body { color: var(--text-primary); }
.bc-callout__body strong { font-weight: var(--fw-bold); }
.bc-callout__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
    font-weight: var(--fw-bold);
}
.bc-callout--info {
    border-left-color: var(--info-400);
    background: linear-gradient(to right, rgba(96,165,250,0.08), transparent);
}
.bc-callout--info .bc-callout__icon { background: var(--info-400); color: #000; }
.bc-callout--info .bc-callout__label { color: var(--info-400); }
.bc-callout--tip {
    border-left-color: var(--accent-primary);
    background: linear-gradient(to right, rgba(253,224,71,0.08), transparent);
}
.bc-callout--tip .bc-callout__icon { background: var(--accent-primary); color: var(--navy-950); }
.bc-callout--tip .bc-callout__label { color: var(--accent-primary); }
.bc-callout--warning {
    border-left-color: var(--warning-400);
    background: linear-gradient(to right, rgba(251,191,36,0.08), transparent);
}
.bc-callout--warning .bc-callout__icon { background: var(--warning-400); color: #000; }
.bc-callout--warning .bc-callout__label { color: var(--warning-400); }
.bc-callout--note {
    border-left-color: var(--accent-secondary);
    background: linear-gradient(to right, rgba(34,211,238,0.08), transparent);
}
.bc-callout--note .bc-callout__icon { background: var(--accent-secondary); color: var(--navy-950); }
.bc-callout--note .bc-callout__label { color: var(--accent-secondary); }