/* ==========================================================================
   Block: Pull Quote

   Loaded on both sides — the editor through `editor_style`, the front end
   through `style` — so a writer sees the quote as a reader will. Scoped to
   the block's own class rather than `.arena`, because the editor canvas
   has no theme wrapper around it.
   ========================================================================== */

.arena-pullquote {
	--arena-pullquote-accent: var(--arena-accent, #c8102e);
	margin: 32px 0;
	padding: 0;
	/* The type lives on the wrapper, not on the quote. Core's Typography
	   and Colour panels style the block's outer element, so anything set
	   here is what they override - put font-size on .arena-pullquote__quote
	   instead and the panel appears to do nothing. */
	color: var(--arena-ink, #14181d);
	font-family: var(--arena-font-head, Georgia, "Times New Roman", serif);
	font-size: clamp(20px, 2.4vw, 26px);
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
}

.arena-pullquote__quote {
	margin: 0;
	padding: 0;
	border: 0;
	/* Inherit everything, so the panels reach it. */
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.arena-pullquote__quote p:first-child { margin-top: 0; }
.arena-pullquote__quote p:last-child  { margin-bottom: 0; }

.arena-pullquote__cite {
	margin: 14px 0 0;
	color: var(--arena-ink-soft, #6b7280);
	font-family: var(--arena-font, system-ui, sans-serif);
	/* Relative, so it keeps its proportion when the quote is resized. An
	   inline font-size from the block's own setting overrides this. */
	font-size: .55em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.4;
}

/* ── Accent bar ─────────────────────────────────────────────────────── */

.arena-pullquote--bar {
	/* Logical, so the bar moves to the right edge on an RTL site with no
	   companion stylesheet. */
	border-inline-start: 4px solid var(--arena-pullquote-accent);
	padding-inline-start: 22px;
}

/* ── Quotation marks ────────────────────────────────────────────────── */

.arena-pullquote--marks .arena-pullquote__quote::before {
	content: "\201C";
	display: block;
	margin-bottom: -.25em;
	color: var(--arena-pullquote-accent);
	font-size: 3em;
	line-height: 1;
	/* Decoration, not content: a screen reader announcing "left double
	   quotation mark" before every pull quote is noise. */
	speak: never;
}

/* ── Centred ────────────────────────────────────────────────────────── */

.arena-pullquote--center {
	text-align: center;
}

.arena-pullquote--center.arena-pullquote--bar {
	/* A left bar under centred text reads as a mistake, so the accent
	   becomes a rule above it instead. */
	border-inline-start: 0;
	padding-inline-start: 0;
	border-block-start: 4px solid var(--arena-pullquote-accent);
	padding-block-start: 22px;
}

/* ── In the editor ──────────────────────────────────────────────────── */

.arena-pullquote__quote[data-rich-text-placeholder]::after,
.arena-pullquote__cite[data-rich-text-placeholder]::after {
	opacity: .55;
}