/**
 * Shared callout system — used by both single posts (.prose) and legal pages (.legal-prose).
 *
 * Variants: --teal (info), --gold (warning), --pink (highlight), --key (key idea).
 * Selectors are prefixed with both content wrappers so they win specificity
 * against `.prose p` / `.legal-prose p` without needing !important.
 *
 * @package Enraizando_la_Nube
 */

/* Base */
.prose .callout,
.legal-prose .callout {
	border-radius: var(--radius-xl);
	padding: 24px 28px;
	margin: 32px 0;
}

.prose .callout strong,
.legal-prose .callout strong {
	color: var(--eln-midnight);
}

.prose .callout p:not(.callout__label),
.legal-prose .callout p:not(.callout__label) {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.65;
}

/* Optional label (title above the content) */
.prose .callout__label,
.legal-prose .callout__label {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 2px;
}

/* Kill the top margin of the paragraph right after the label so they sit together */
.prose .callout__label + p,
.legal-prose .callout__label + p {
	margin-top: 0;
}

/* ── Teal (info / tip) ── */
.prose .callout--teal,
.legal-prose .callout--teal {
	background: var(--eln-teal-50);
	border-left: 4px solid var(--eln-cyan);
}
.prose .callout--teal .callout__label,
.legal-prose .callout--teal .callout__label { color: var(--eln-cyan); }
.prose .callout--teal p:not(.callout__label),
.legal-prose .callout--teal p:not(.callout__label) { color: var(--eln-midnight); }

/* ── Gold (warning) ── */
.prose .callout--gold,
.legal-prose .callout--gold {
	background: var(--eln-gold-100);
	border-left: 4px solid var(--eln-gold);
}
.prose .callout--gold .callout__label,
.legal-prose .callout--gold .callout__label { color: var(--eln-gold); }
.prose .callout--gold p:not(.callout__label),
.legal-prose .callout--gold p:not(.callout__label) { color: var(--fg-1); }

/* ── Pink (highlight) ── */
.prose .callout--pink,
.legal-prose .callout--pink {
	background: var(--eln-pink-50);
	border-left: 4px solid var(--eln-magenta);
}
.prose .callout--pink .callout__label,
.legal-prose .callout--pink .callout__label { color: var(--eln-magenta); }
.prose .callout--pink p:not(.callout__label),
.legal-prose .callout--pink p:not(.callout__label) { color: var(--fg-1); }

/* ── Key (dark, script) ── */
.prose .callout--key,
.legal-prose .callout--key {
	background: var(--eln-midnight);
	border-left: 0;
	padding: 32px 36px;
}
.prose .callout--key .callout__label,
.legal-prose .callout--key .callout__label { color: rgba(255, 255, 255, 0.4); }
.prose .callout--key p:not(.callout__label),
.legal-prose .callout--key p:not(.callout__label) {
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--font-script);
	font-size: 1.2rem;
	line-height: 1.4;
}
.prose .callout--key strong,
.legal-prose .callout--key strong { color: var(--eln-gold); }