/* Brentwood "Newspaper Columns" — see inc/bw-newspaper.php.
 *
 * The row wrapper (.kb-row-layout-wrap) gets .bw-newspaper-flow (and .bw-news-3
 * for three columns). We flow the row's single column of content into balanced
 * newspaper columns.
 *
 * CRITICAL: Kadence renders the column's inner wrapper (.kt-inside-inner-col) as
 * display:flex; flex-direction:column. `column-count` is IGNORED on a flex box,
 * so we MUST force it back to display:block first — that was the missing piece in
 * the earlier attempt. We also override Kadence's own column-gap on that element.
 *
 * Selectors are 3+ classes deep and use !important on the multicol properties so
 * they reliably beat Kadence's per-column inline <style> (which is emitted in the
 * body, after this stylesheet, at equal specificity). This is an opt-in class, so
 * winning decisively is intended.
 *
 * Column count is driven by the inherited --bw-news-cols custom property so the
 * one rule serves both the 2- and 3-column variants. */

.bw-newspaper-flow {
	--bw-news-cols: 2;
	--bw-news-gap: 2.5rem;
}
.bw-newspaper-flow.bw-news-3 {
	--bw-news-cols: 3;
}

/* The flow container: the row's own single column inner wrapper. */
.bw-newspaper-flow .kt-row-column-wrap .kt-inside-inner-col {
	display: block !important;                        /* undo Kadence's flex so multicol works */
	column-count: var( --bw-news-cols, 2 ) !important;
	column-gap: var( --bw-news-gap, 2.5rem ) !important;
	column-fill: balance;                             /* even column heights */
}

/* Leave NESTED Row Layouts alone — restore Kadence's default on their inner
 * wrappers so nested content isn't dragged into the multicol flow. (Descendant
 * combinator excludes the top row itself, which IS .bw-newspaper-flow.) */
.bw-newspaper-flow .kb-row-layout-wrap .kt-row-column-wrap .kt-inside-inner-col {
	display: flex !important;
	column-count: initial !important;
}

/* Don't let headings, figures, images or tables be sliced across a column break;
 * body paragraphs still flow/split naturally (that's the newspaper effect). */
.bw-newspaper-flow .kt-row-column-wrap .kt-inside-inner-col > :is( h1, h2, h3, h4, h5, h6, figure, img, table, .wp-block-image, .wp-block-table ) {
	break-inside: avoid;
}

/* First block flush to the top so the two columns start level. */
.bw-newspaper-flow .kt-row-column-wrap .kt-inside-inner-col > :first-child {
	margin-top: 0;
}

/* Phones: one column — newspaper columns are unreadable on a narrow screen. */
@media ( max-width: 767px ) {
	.bw-newspaper-flow .kt-row-column-wrap .kt-inside-inner-col {
		column-count: 1 !important;
	}
}