/**
 * block-styles.css — Gutenberg Block Style Varianten
 *
 * Verknüpft die Citelayer Design-Styles mit Gutenberg Core Blocks.
 * Nutzt die Theme-Tokens aus theme.css (--space-*, --radius-*, --font-*)
 * mit px-Fallbacks für den Editor-Kontext.
 *
 * @package citelayer
 * @since 1.0.0
 */

/* ══════════════════════════════════════════════════════════════
	CALLOUTS (core/group Block Styles)
	Gutenberg rendert: <div class="wp-block-group is-style-callout-*">
	══════════════════════════════════════════════════════════════ */

.is-style-callout-info,
.is-style-callout-tip,
.is-style-callout-warning {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
	padding: var(--space-5, 20px);
	border-radius: var(--radius-m, 12px);
	margin: var(--space-8, 32px) 0;
}

/* ── Callout Info ─────────────────────────────────────────── */

.is-style-callout-info {
	background: var(--md-secondary-container);
	border: 1px solid color-mix(in srgb, var(--md-on-secondary-container) 15%, transparent);
}

.is-style-callout-info p {
	color: var(--md-on-secondary-container);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	margin-bottom: 0;
}

.is-style-callout-info > *:first-child,
.is-style-callout-info > .wp-block-group__inner-container > *:first-child {
	font-family: var(--font-display, 'Google Sans', sans-serif);
	font-weight: 700;
	font-size: 13px;
	color: var(--md-on-secondary-container);
	margin-bottom: var(--space-1, 4px);
}

/* ── Callout Tip ──────────────────────────────────────────── */

.is-style-callout-tip {
	background: var(--md-tertiary-container);
	border: 1px solid color-mix(in srgb, var(--md-on-tertiary-container) 15%, transparent);
}

.is-style-callout-tip p {
	color: var(--md-on-tertiary-container);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	margin-bottom: 0;
}

.is-style-callout-tip > *:first-child,
.is-style-callout-tip > .wp-block-group__inner-container > *:first-child {
	font-family: var(--font-display, 'Google Sans', sans-serif);
	font-weight: 700;
	font-size: 13px;
	color: var(--md-on-tertiary-container);
	margin-bottom: var(--space-1, 4px);
}

/* ── Callout Warning ──────────────────────────────────────── */

.is-style-callout-warning {
	background: var(--md-error-container);
	border: 1px solid color-mix(in srgb, var(--md-on-error-container) 15%, transparent);
}

.is-style-callout-warning p {
	color: var(--md-on-error-container);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	margin-bottom: 0;
}

.is-style-callout-warning > *:first-child,
.is-style-callout-warning > .wp-block-group__inner-container > *:first-child {
	font-family: var(--font-display, 'Google Sans', sans-serif);
	font-weight: 700;
	font-size: 13px;
	color: var(--md-on-error-container);
	margin-bottom: var(--space-1, 4px);
}

/* ── Callout Links erben Container-Farbe ──────────────────── */

.is-style-callout-info a { color: var(--md-secondary); }
.is-style-callout-tip a { color: var(--md-tertiary); }
.is-style-callout-warning a { color: var(--md-error); }

/* ══════════════════════════════════════════════════════════════
	CODE BLOCK (core/code)
	Gutenberg rendert: <pre class="wp-block-code"><code>…</code></pre>
	══════════════════════════════════════════════════════════════ */

.wp-block-code {
	background: var(--code-bg, var(--md-surface-container, #F3EDF7));
	border: 1px solid var(--code-border, var(--md-outline-variant, #E6E0E9));
	border-radius: var(--radius-m, 12px);
	padding: var(--space-5, 20px) var(--space-6, 24px);
	overflow-x: auto;
	margin: var(--space-6, 24px) 0;
}

.wp-block-code code {
	font-family: var(--font-mono, 'Roboto Mono', monospace);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--md-on-surface);
	background: none;
	border: none;
	padding: 0;
}

/*

 * Citelayer Code — optionale Variante mit stärkerem Kontrast.

 */
.wp-block-code.is-style-citelayer {
	background: var(--md-surface-container-high, #2B2930);
	border-color: var(--md-outline-variant);
}

.wp-block-code.is-style-citelayer code {
	color: var(--md-on-surface);
}

/* ══════════════════════════════════════════════════════════════
	BLOCKQUOTE (core/quote)
	Gutenberg rendert: <blockquote class="wp-block-quote"><p>…</p></blockquote>
	══════════════════════════════════════════════════════════════ */

.wp-block-quote {
	border-left: 4px solid var(--blockquote-border, var(--md-primary, #D0BCFF));
	background: var(--md-primary-container);
	border-radius: 0 var(--radius-m, 12px) var(--radius-m, 12px) 0;
	padding: var(--space-5, 20px) var(--space-6, 24px);
	margin: var(--space-8, 32px) 0;
}

.wp-block-quote p {
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.65;
	color: var(--md-on-primary-container);
	margin-bottom: 0;
}

.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	color: color-mix(in srgb, var(--md-on-primary-container) 70%, transparent);
	margin-top: var(--space-3, 12px);
}

.wp-block-quote cite::before,
.wp-block-quote .wp-block-quote__citation::before {
	content: '— ';
}

/* ── Highlight Quote Variante ─────────────────────────────── */

.wp-block-quote.is-style-highlight {
	border-left: none;
	background: var(--md-primary-container);
	border-radius: var(--radius-m, 12px);
	padding: var(--space-8, 32px);
	text-align: center;
}

.wp-block-quote.is-style-highlight p {
	font-size: 1.25rem;
	font-weight: 500;
	font-style: normal;
	color: var(--md-on-primary-container);
}

.wp-block-quote.is-style-highlight cite,
.wp-block-quote.is-style-highlight .wp-block-quote__citation {
	margin-top: var(--space-4, 16px);
}