/* ====================================================================
   Callout component
   ====================================================================
   Tinted block with title + meta + flexible action slot. Inline,
   non-modal advisories that prompt a recovery action or surface a
   contextual call-to-attention.

   See README.md for the full spec, anatomy, and best practices.
   See example.html for the live canonical render.
   ==================================================================== */

.callout {
  padding: var(--s-5);
  border: 1px solid;
  border-radius: var(--r-card);
}

.callout--info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}
.callout--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.callout--danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}
.callout--success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.callout-line {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.callout-line strong { font-weight: var(--weight-semibold); }

.callout-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Action-prompt variant — title block + cta on right. */
.callout--prompt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.callout--prompt .callout-actions { margin-top: 0; }