/* -------------------------------------------------------------------------
   8.5 Editor blocks inside pages (.prose)
   Columns, coloured groups, quotes, buttons and separators added by the
   owner in the block editor (Advisory, About…).
   ------------------------------------------------------------------------- */

/* --- Columns (image + text) --------------------------------------------- */

.prose .wp-block-columns {
	gap: var(--space-4);
	margin: var(--space-5) 0;
}

.prose .wp-block-column > :first-child {
	margin-top: 0;
}

.prose .wp-block-column .wp-block-image,
.prose .wp-block-column img {
	margin: 0;
}

/* --- Group with a background colour (e.g. Stone) ------------------------ */

.prose .wp-block-group.has-background {
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-4) var(--space-3);
}

.prose .wp-block-group.has-background > :first-child {
	margin-top: 0;
}

.prose .wp-block-group h3 {
	margin-top: var(--space-3);
	margin-bottom: var(--space-1);
}

/* Column left empty (e.g. an Image block with no file chosen yet, which
   WordPress does not output): hide it, the other column then takes the whole
   width (its inline flex-basis needs !important) */
.prose .wp-block-column:empty {
	display: none;
}

.prose .wp-block-columns:has(> .wp-block-column:empty) > .wp-block-column {
	flex-basis: 100% !important;
}

/* Coloured group with several sub-sections (e.g. "Our advisory services"):
   two columns on wide screens, the h2 across both. WordPress caps and
   centres the children of a "constrained" group (with !important), undone
   here so they fill their column. */
@media (min-width: 900px) {
	.prose .wp-block-group.has-background {
		column-count: 2;
		column-gap: var(--space-5);
	}

	.prose .wp-block-group.has-background > * {
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.prose .wp-block-group.has-background > h2 {
		column-span: all;
		margin-bottom: var(--space-2);
	}

	.prose .wp-block-group.has-background > h3 {
		break-after: avoid;
	}

	.prose .wp-block-group.has-background > p {
		break-inside: avoid;
	}

	.prose .wp-block-group.has-background > h3:first-of-type {
		margin-top: 0;
	}
}

/* --- Quote (press quote, testimonial) ----------------------------------- */

.prose .wp-block-quote {
	margin: var(--space-5) 0;
	padding: 0 0 0 var(--space-3);
	font-family: var(--font-serif);
	font-size: var(--size-l);
	line-height: 1.35;
	border-left: 1px solid var(--ink);
}

.prose .wp-block-quote p {
	margin: 0;
}

.prose .wp-block-quote cite {
	display: block;
	margin-top: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--size-s);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
}

/* --- Separator ---------------------------------------------------------- */

.prose .wp-block-separator {
	margin: var(--space-5) 0;
	border: 0;
	border-top: 1px solid var(--line);
}

/* --- Buttons: same look as .button / .button--ghost --------------------- */

.prose .wp-block-buttons {
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.prose .wp-block-buttons .wp-block-button > .wp-block-button__link {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--paper);
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0;
	transition: background 0.2s, color 0.2s;
}

.prose .wp-block-buttons .wp-block-button > .wp-block-button__link:hover {
	color: var(--ink);
	background: var(--paper);
}

/* "Outline" style in the editor sidebar = ghost button */
.prose .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--ink);
	background: transparent;
}

.prose .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--paper);
	background: var(--ink);
}

/* --- Inline contact icon (e.g. WhatsApp before a phone number) ---------- */

/* Reset the .prose image margins so the icon sits on the text line */
.prose .contact-icon img {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin: 0 0.15em 0 0;
	vertical-align: -0.2em;
	transition: opacity 0.25s ease;
}

.prose .contact-icon:hover img {
	opacity: 0.6;
}