/* ────────────────────────────────────────────────────────────
   03-text-columns.css — Text Column patterns (1–4 col)
   Class chain: core/group outer (bg via Style panel)
                → gb element .text-columns.text-{N}col
                → gb element .text-columns__inner
                → core/columns (for 2–4 col variants)
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
.text-columns {
	padding: var(--spacing-4xl) var(--spacing-md);
}

/* ── Inner: max-width container ───────────────────────────── */
.text-columns__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
}

/* ── Heading ──────────────────────────────────────────────── */
/* Global 01-base.css covers font-family, weight, color, line-height.
   Only bottom margin scoped here. */
.text-columns h2 {
	margin-bottom: var(--spacing-lg);
}

.text-columns h3 {
	color: var(--color-black-soft);
}

/* ── Column gap ───────────────────────────────────────────── */
.text-columns .wp-block-columns {
	gap: var(--spacing-xl);
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ── Dark-bg overrides ────────────────────────────────────── */
/* is-style-bg-dark is on core/group outer; .text-columns is on
   the inner GB element — descendant selector required.
   GB text h2 does not carry .wp-block-heading so the global
   inversion in 02-style-variations.css does not reach it. */
.is-style-bg-dark .text-columns h2,
.is-style-bg-dark .text-columns h3 {
	color: var(--color-text-body-inverse);
}

.is-style-bg-dark .text-columns a,
.is-style-bg-dark .text-columns a:hover {
	color: var(--color-white);
}

.is-style-bg-dark .text-columns a:hover {
	text-decoration: none;
}

/* ── Single Column Text ────────────────────────────────────── */
.text-1col {
	max-width: var(--container-narrow);
	margin-left: auto;
	margin-right: auto;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
	.text-columns {
		padding: var(--spacing-2xl) var(--spacing-sm);
	}

	/* Override WP core's below-782px full-width stack for these variants */

	/* 3-column: stay 3-across */
	.text-3col .wp-block-columns .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}

	/* 4-column: 2×2 */
	.text-4col .wp-block-columns .wp-block-column {
		flex-basis: calc(50% - var(--spacing-xl)) !important;
		flex-grow: 1 !important;
	}
}

/* ── Editor: centering ─────────────────────────────────────────
   On the front end, the GP content area provides the centering context.
   In the editor canvas there is no equivalent wrapper, so re-declare
   centering with .editor-styles-wrapper scope to win specificity.
*/
.editor-styles-wrapper .text-columns__inner {
    margin-left: auto;
    margin-right: auto;
}

.editor-styles-wrapper .text-columns .wp-block-columns {
    margin-block: 0;
}