/* callout.css — tip / note / warning / danger boxes (12 §5): 4 px left border + tinted background.
   Also used for the "quick answer" box at the top of posts (.callout--answer). */

.callout {
  --callout-c: var(--info);
  --callout-bg: var(--info-tint);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-left: var(--accent-w) solid var(--callout-c);
  border-radius: var(--r-sm);
  background: var(--callout-bg);
  color: var(--text);
}

.callout__icon { color: var(--callout-c); font-size: var(--icon-md); line-height: var(--lh-body); }

.callout__title {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--callout-c);
}

.callout__body > * + * { margin-top: var(--sp-2); }

.callout--tip, .callout--answer { --callout-c: var(--success); --callout-bg: var(--success-tint); }
.callout--note { --callout-c: var(--info); --callout-bg: var(--info-tint); }
.callout--warning { --callout-c: var(--warning); --callout-bg: var(--warning-tint); }
.callout--danger { --callout-c: var(--danger); --callout-bg: var(--danger-tint); }

.callout--answer { font-size: var(--fs-lead); }