/*
 * Section Divider Patterns — Editorial Break + Narrative Bridge.
 *
 * Pattern 1 — Editorial Break: centered group, kicker + italic line + short rule.
 *   Inherits page background; all text elements are placeholder/deletable.
 * Pattern 2 — Narrative Bridge: full-width cover image, warm-dark scrim, quote overlay.
 *   Customer uploads image via the block editor; text is placeholder/editable.
 *
 * Two-class selectors (0,2,0) beat WP layout rules (0,1,0) without !important.
 *
 * Tokens read:
 *   color.terracotta.500           — kicker
 *   semantic.color.text.primary    — transition line, short rule
 *   semantic.color.text.inverse    — bridge quote, attribution
 *   semantic.typography.display    — transition line, bridge quote (Cormorant)
 *   semantic.typography.body       — kicker, attribution (Jost)
 *   space.3 – 9
 */

/* ── Pattern 1: Editorial Break ───────────────────────────────────────── */

.wpdl-divider-editorial.wp-block-group {
	padding-block: var(--wp--custom--space--9);
	margin-block: 0;
}

.wpdl-divider-editorial__kicker {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-divider-editorial__transition {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.125rem, 0.8rem + 1.49vw, 1.625rem);
	font-weight: 500;
	font-style: italic;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--6);
}

.wpdl-divider-editorial__rule.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--text--primary);
	inline-size: 3.75rem;
	margin-inline: auto;
	margin-block: 0;
	opacity: 1;
}

/* ── Pattern 2: Narrative Bridge ──────────────────────────────────────── */

.wpdl-divider-bridge.wp-block-cover {
	min-block-size: 9.375rem;
}

/* Warm-dark scrim — overrides WP's default black dim */
.wpdl-divider-bridge.wp-block-cover .wp-block-cover__background {
	background-color: rgb(43 38 34 / 28%);
	opacity: 1;
}

.wpdl-divider-bridge__content.wp-block-group {
	gap: var(--wp--custom--space--3);
	margin-block: 0;
}

.wpdl-divider-bridge__quote {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(0.9375rem, 0.7rem + 1.07vw, 1.25rem);
	font-weight: 500;
	font-style: italic;
	color: var(--wp--custom--semantic--color--text--inverse);
	margin-block: 0;
}

.wpdl-divider-bridge__attribution {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--inverse);
	opacity: 0.8;
	margin-block: 0;
}

/* ── Tablet (< 64em / 1024px) ────────────────────────────────────────── */

@media (width < 64em) {
	.wpdl-divider-editorial.wp-block-group {
		padding-block: var(--wp--custom--space--8);
	}

	.wpdl-divider-bridge.wp-block-cover {
		min-block-size: 7.5rem;
	}
}

/* ── Mobile (< 40em / 640px) ─────────────────────────────────────────── */

@media (width < 40em) {
	.wpdl-divider-editorial.wp-block-group {
		padding-block: var(--wp--custom--space--7);
	}

	.wpdl-divider-bridge.wp-block-cover {
		min-block-size: 6.25rem;
	}
}