/* Shared by this block and the core quote block (with a "Citaat" style, or followed by a paragraph).
   The theme styles every blockquote (icon, padding, background, font size), partly with !important,
   hence the resets. --quote-color comes from the block's wrapper or a block style's inline CSS. */
:is(.quote-paragraph__quote, .wp-block-quote[class*="is-style-citaat-"], .wp-block-quote:has(+ p)) {
	position: static;
	width: auto;
	max-width: none !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: none !important;
	color: var(--quote-color);
	text-align: left;
}

:is(.quote-paragraph__quote, .wp-block-quote[class*="is-style-citaat-"], .wp-block-quote:has(+ p))::before {
	content: "";
	display: block;
	position: static;
	width: auto;
	height: 4px;
	margin: 0 0 24px;
	background: var(--quote-color);
}

:is(.quote-paragraph__quote, .wp-block-quote[class*="is-style-citaat-"], .wp-block-quote:has(+ p)) p {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 24px !important;
	font-weight: 500;
	line-height: 32px !important;
	letter-spacing: -.01em;
}

:is(.quote-paragraph__quote, .wp-block-quote[class*="is-style-citaat-"], .wp-block-quote:has(+ p)) cite {
	display: block;
	margin-top: 16px;
	color: #000;
	font-size: 14px;
	font-style: normal;
	line-height: 1.5;
}

/* Block */

.quote-paragraph {
	display: flow-root;
	margin-bottom: 32px;
}

:is(.quote-paragraph__text, .quote-paragraph__text .acf-innerblocks-container) > :last-child {
	margin-bottom: 0;
}

/* The theme bolds the article's intro with p:first-of-type, which also hits the first paragraph in here. */
body.single-post .post-content-normal .quote-paragraph__text p:first-of-type {
	font-weight: inherit;
}

/* Side by side: the quote floats left and sticks out into the gutter, up to 64px but clear of the 200px TOC
   (same 224px as the story slider). The text next to it is flow-root, so it never wraps under the quote. */
@media (min-width: 992px) {
	/* Doubled classes to outrank the shared reset's margin above. */
	:is(.quote-paragraph__quote.quote-paragraph__quote, .wp-block-quote.wp-block-quote:has(+ p)) {
		--quote-outdent: clamp(0px, (100vw - 448px - 100%) / 2, 64px);

		float: left;
		width: calc((100% - 32px) * .3 + var(--quote-outdent));
		margin: 0 32px 0 calc(var(--quote-outdent) * -1) !important;
	}

	.wp-block-quote.wp-block-quote:has(+ p) {
		margin-bottom: 32px !important;
	}

	:is(.quote-paragraph__text, .wp-block-quote + p) {
		display: flow-root;
	}

	.wp-block-quote + p + * {
		clear: both;
	}
}