/*
 * core/columns — "Banda full-width" style + reverse-on-mobile.
 * Registered from src/columns-band/index.js. Replaces the ali/split-band block.
 */

/* ── The band ──
 * `alignfull` is not enough on templates that render the_content() without
 * core's layout wrapper: the columns block still stops at the theme's wideSize
 * (1140px on ali.ong) and leaves gutters where the neighbouring ali-block
 * sections run edge to edge. The 100vw escape is unconditional because it is
 * correct either way — on a template where alignfull already works, it resolves
 * to the same width. */
.wp-block-columns.is-style-ali-band {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 80px max(40px, calc(50vw - 570px));
	gap: 48px;
	/* No align-items here on purpose: core's own verticalAlignment classes carry
	   the same specificity, and this stylesheet loads after core's, so setting a
	   default would silently beat the editor's choice. */
}

/* Core sets flex-basis on each column from its width attribute, which is what
   gives the ratio; nothing to add here. Vertical alignment likewise comes from
   core's own verticalAlignment support. */

/* ── Children ──
 * Every ali-block is a *section*: it carries 80–90px of its own padding and its
 * own background. Both are wrong inside a column of a band that already
 * provides them, so the band neutralises them. */
.wp-block-columns.is-style-ali-band .wp-block-column > section,
.wp-block-columns.is-style-ali-band .wp-block-column > div[class*="wp-block-ali-"] {
	padding: 0;
	background: transparent;
}
.wp-block-columns.is-style-ali-band .alignfull {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.wp-block-columns.is-style-ali-band .cs-tools-inner,
.wp-block-columns.is-style-ali-band .cs-text-sidebar-inner,
.wp-block-columns.is-style-ali-band .cs-form-embed-inner,
.wp-block-columns.is-style-ali-band .ali-faq-section-inner,
.wp-block-columns.is-style-ali-band .cs-partner-inner,
.wp-block-columns.is-style-ali-band .ali-content-block-inner {
	max-width: none;
	padding: 0;
}

/* Ink on a dark band, from the same token the rest of the library uses. */
.wp-block-columns.is-style-ali-band.has-navy-background-color,
.wp-block-columns.is-style-ali-band.has-navy-background-color h2,
.wp-block-columns.is-style-ali-band.has-navy-background-color h3 {
	color: var(--block-dark-ink, #fff);
}
.wp-block-columns.is-style-ali-band.has-navy-background-color p {
	color: var(--block-dark-ink-soft, rgba(255, 255, 255, .85));
}

@media (max-width: 900px) {
	.wp-block-columns.is-style-ali-band {
		padding: 56px 24px;
		gap: 32px;
	}
	/* column-reverse rather than ordering an nth-child: a column can hold more
	   than one block, so "the second column" is not reliably a particular
	   child. Reversing the flow needs no counting. Scoped to the stacked state,
	   which is what core's isStackedOnMobile produces. */
	.wp-block-columns.ali-reverse-mobile:not(.is-not-stacked-on-mobile) {
		display: flex;
		flex-direction: column-reverse;
	}
}