/* ==========================================================================
   Callout — Совет / Важно / Ошибка / Решение
   ========================================================================== */

.callout {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border: 1px solid;
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.callout__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.15em;
}
.callout__icon svg { width: 20px; height: 20px; }

.callout__body { min-width: 0; }
.callout__body p { margin: 0; color: inherit; }
.callout__body p + p { margin-top: var(--space-2); }

.callout__title {
	display: block;
	font-weight: 700;
	margin-bottom: var(--space-1);
}

.callout--tip {
	background: var(--color-info-bg);
	border-color: var(--color-info-border);
	color: #1e3a8a;
}
.callout--tip .callout__icon { color: var(--color-info); }

.callout--warning {
	background: var(--color-warning-bg);
	border-color: var(--color-warning-border);
	color: #78350f;
}
.callout--warning .callout__icon { color: var(--color-warning); }

.callout--error {
	background: var(--color-danger-bg);
	border-color: var(--color-danger-border);
	color: #7f1d1d;
}
.callout--error .callout__icon { color: var(--color-danger); }

.callout--success {
	background: var(--color-success-bg);
	border-color: var(--color-success-border);
	color: #064e3b;
}
.callout--success .callout__icon { color: var(--color-success); }