/**
 * Pull quote + citation from TinyMCE dialog (.sher-edling-quote / .sher-edling-quote-cite).
 * Enqueued on the front and via add_editor_style so TinyMCE (mce-content-body) matches.
 * Layout + type per Figma SE-Website node 549:895 (dev).
 * Colors: quote band = highlight, text = navy (theme.json).
 */

.prose blockquote.sher-edling-quote,
.mce-content-body blockquote.sher-edling-quote {
	display: flex;
	flex-direction: column;
	gap: 1.625rem; /* 26px — space between quote and citation */
	margin-block: 2rem;
	border: 0;
	padding: 1.5rem;
	font-style: normal;
	font-family:
		"Host Grotesk", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--highlight);
	box-shadow: none;
}

/*
 * Bleed to prose column edges on the public site only.
 * TinyMCE sets `prose` on `body.mce-content-body`, so `.prose blockquote` would match there too.
 * Block editor canvas uses `html.block-editor-iframe__html` — exclude as well.
 */
html:not(.block-editor-iframe__html) body:not(.mce-content-body) .prose blockquote.sher-edling-quote {
	/* margin-inline: -1.5rem; */
}

@media (width >= 48rem) {
	.prose blockquote.sher-edling-quote,
	.mce-content-body blockquote.sher-edling-quote {
		padding: 2.5rem; /* 40px Figma */
	}

	html:not(.block-editor-iframe__html) body:not(.mce-content-body) .prose blockquote.sher-edling-quote {
		/* margin-inline: -3.5rem; */
	}
}

/* Inner paragraph: Figma H2-style quote line (Host Grotesk SemiBold 32 / 36) */
.prose blockquote.sher-edling-quote p,
.mce-content-body blockquote.sher-edling-quote p {
	margin: 0;
	font-family: inherit;
	font-size: 1.25rem; /* text-xl (down from text-2xl / 1.5rem) */
	line-height: 1.75rem;
	font-weight: 600;
}

@media (width >= 48rem) {
	.prose blockquote.sher-edling-quote p,
	.mce-content-body blockquote.sher-edling-quote p {
		font-size: 1.875rem; /* text-3xl (down from ~2rem) */
		line-height: 2.25rem;
	}
}

/* Citation: Figma P lg (Host Grotesk Medium 24 / 28) */
.prose blockquote.sher-edling-quote cite.sher-edling-quote-cite,
.prose cite.sher-edling-quote-cite,
.mce-content-body cite.sher-edling-quote-cite {
	display: block;
	margin: 0;
	font-family:
		"Host Grotesk", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem; /* text-base (down from text-lg / 1.125rem) */
	line-height: 1.5rem;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	font-style: normal;
}

@media (width >= 48rem) {
	.prose blockquote.sher-edling-quote cite.sher-edling-quote-cite,
	.prose cite.sher-edling-quote-cite,
	.mce-content-body cite.sher-edling-quote-cite {
		font-size: 1.25rem; /* text-xl (down from text-2xl / 1.5rem) */
		line-height: 1.75rem;
	}
}