/*
 * Shared styles for blocks from the Edit Content block editor on single
 * Interviews, Findings and Yappings. Loaded after each page's own
 * stylesheet; the #id scope outranks the older per-page rules so one design
 * applies everywhere.
 */

/* ---------- Pull quote ----------
 * The "Pull quote" block (.wp-block-quote) and plain <blockquote> in older posts.
 */

/* Compact: a dark rule on the left, quote and name left-aligned beside it. */
:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) blockquote {
	position: relative;
	box-sizing: border-box;
	max-width: none;
	margin: 36px 0;
	padding: 4px 0 4px 28px;
	border: 0;
	border-left: 3px solid var(--bricks-color-xgaskf, #191919);
	background: none;
	text-align: left;
	font-family: "Gilda Display", serif;
	font-size: inherit;
	font-style: normal;
}

/* The older page styles drew a large quote mark here. */
:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) blockquote::before {
	content: none;
	display: none;
}

:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) blockquote p {
	margin: 0;
	padding: 0;
	color: var(--bricks-color-xgaskf, #191919);
	font-family: "Gilda Display", serif;
	font-size: clamp(21px, 14px + 0.9vw, 26px);
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
}

/* Small Gilda quote mark before the first word. */
:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) blockquote p:first-of-type::before {
	content: "\201C";
	margin-right: 0.08em;
	color: var(--bricks-color-nsigro, #5e5e5e);
	font-family: "Gilda Display", serif;
}

:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) blockquote p + p {
	margin-top: 0.4em;
}

:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) blockquote cite {
	display: block;
	margin-top: 12px;
	color: var(--bricks-color-nsigro, #5e5e5e);
	font-family: Poppins, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 3px;
	line-height: 1.4;
	opacity: 1;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) blockquote {
		margin: 28px 0;
		padding-left: 20px;
	}

	:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) blockquote p {
		font-size: clamp(19px, 15px + 1.2vw, 21px);
	}
}

/* ---------- Info box ----------
 * Event details or other side information: a Group block (.bbv-note) with an
 * optional H4 title. Title and text are 1px smaller than the paragraph text
 * at every breakpoint (paragraphs: 15 / 14 / 14 / 13-14px).
 */

:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) .bbv-note {
	box-sizing: border-box;
	margin: 40px 0;
	padding: 32px 36px;
	background: var(--bricks-color-cwosey, rgba(231, 224, 218, 0.5));
}

:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) .bbv-note .bbv-note-title {
	margin: 0 0 10px;
	padding: 0;
	color: var(--bricks-color-xgaskf, #191919);
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-synthesis: weight style;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
}

:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) .bbv-note p {
	margin: 0 0 12px;
	padding: 0;
}

:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) :is(.bbv-note .bbv-note-title, .bbv-note p) {
	font-size: 14px;
}

:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) .bbv-note > :last-child {
	margin-bottom: 0;
}

@media (max-width: 1200px) {
	:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) :is(.bbv-note .bbv-note-title, .bbv-note p) {
		font-size: 13px;
	}
}

@media (max-width: 767px) {
	:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) .bbv-note {
		margin: 32px 0;
		padding: 26px 24px;
	}
}

@media (max-width: 478px) {
	:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) .bbv-note {
		padding: 22px 18px;
	}

	:is(#bbv-interview-content, #bbv-finding-content, #bbv-yapping-content) :is(.bbv-note .bbv-note-title, .bbv-note p) {
		font-size: clamp(12px, 9.9747px + 0.632911vw, 13px);
	}
}