/*
 * patterns/text-banner.css — "Text Banner"
 * Markup: wp-content/themes/fcs/patterns/text-banner.php
 * Root:   .fcs-text-banner
 *
 * Figma 3469:8840 (master), 3469:8860 (mobile), 7989:6630 (canonical usage),
 * 10075:8025 (split). ~100 instances sitewide — the most-used section.
 *
 * NOT .fcs-header-cta, the header's "Your Journey Starts Here" band, which Figma
 * also calls a Text banner. That one is styled in layout/header.css.
 *
 * STRUCTURE
 * ---------
 *   .fcs-text-banner              alignfull section, background from the sidebar
 *     .fcs-text-banner__inner     alignwide (1240px) — everything stacks in here
 *       .fcs-text-banner__copy    eyebrow / heading / body, capped at 1024px
 *       .fcs-text-banner__actions buttons
 *       …anything else            media the editor adds: image, gallery, columns
 *
 * Every piece is optional — editors delete what a given instance doesn't use —
 * so all spacing is margin on the element that follows, never a gap on the
 * parent. Deleting a block never leaves a hole.
 *
 * SECTION PADDING is not declared here at any size — Medium and Large belong to
 * the editor's Dimensions panel, Small is pinned in layout/spacing.css. See
 * CLAUDE.md § "Section padding".
 */

/* Stack ---------------------------------------------------------------- */

.fcs-text-banner__inner {
	text-align: center;
}

.fcs-text-banner__inner > * {
	margin-block: 0;
}

/*
 * 40px ahead of anything that isn't the copy or the buttons — the photo row in
 * 8009:11537, the full-width image in 10148:9598. The copy → buttons gap is the
 * tighter 28px (Figma Padding-LG) below.
 */
.fcs-text-banner__inner > * + * {
	margin-block-start: 40px;
}

.fcs-text-banner__copy + .fcs-text-banner__actions {
	margin-block-start: 28px;
}

/* Copy ----------------------------------------------------------------- */

/*
 * Figma's "Headline copy" frame is 1024px inside the 1240px container, centred.
 * A few instances run it wider or narrower (896 / 1184); 1024 is the default
 * and the one most of them use.
 */
.fcs-text-banner__copy {
	max-width: 1024px;
	margin-inline: auto;
}

.fcs-text-banner__copy > * {
	margin-block: 0;
}

.fcs-text-banner__copy > * + * {
	margin-block-start: 20px;
}

/* Figma Padding-SM: the eyebrow sits 8px above its headline. */
.fcs-text-banner__eyebrow + * {
	margin-block-start: 8px;
}

/*
 * Heading type is NOT set here — theme.json owns the scale, and the editor picks
 * the level (and the Display size for page-title banners) per instance.
 */

/*
 * An image inside the copy is an icon or a logo — the cross above the scripture
 * quote (10112:14316). It stays at its own size and follows the text alignment,
 * which core's inline <img> already does; only the figure margin needs zeroing.
 */
.fcs-text-banner__copy .wp-block-image {
	margin-block: 0;
}

/* Buttons -------------------------------------------------------------- */

/*
 * Centred by the buttons block's own justification (set in the markup), so the
 * editor's Justify control still works. Full width on Small comes from
 * components/buttons.css.
 */

/* Media ---------------------------------------------------------------- */

/*
 * Photographs under the copy get the 12px radius used across the design (same
 * value as image-with-text.css and multicolumn.css). Scoped to images outside
 * the copy so a logo or icon in the copy keeps square corners.
 */
.fcs-text-banner__inner > .wp-block-image img,
.fcs-text-banner__inner > :not( .fcs-text-banner__copy ) .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.fcs-text-banner__inner .wp-block-image {
	margin-block-end: 0;
}

/* Option: split -------------------------------------------------------- */

/*
 * Set from the sidebar's Layout control (fcs-core/src/text-banner.js), which adds
 * .fcs-text-banner--split to the section. Figma 10075:8025 / 10082:10436 /
 * 10114:14444: copy left at 768px, button(s) right, vertically centred.
 *
 * DERIVED (no mobile design exists for this arrangement): below 1024px there is
 * no room for the side-by-side row, so it stacks — copy, then buttons — and
 * keeps the left alignment rather than falling back to centred. That keeps the
 * split look recognisably different from the centred one on a phone. The
 * buttons go full width below 768px as everywhere else.
 */
.fcs-text-banner--split .fcs-text-banner__inner {
	text-align: start;
}

.fcs-text-banner--split .fcs-text-banner__copy {
	margin-inline: 0;
}

/*
 * .wp-block-buttons is repeated for weight: core's own
 * .wp-block-buttons.is-content-justification-center ties with a two-class
 * selector, and would win or lose on load order alone.
 */
.fcs-text-banner--split .fcs-text-banner__actions.wp-block-buttons {
	justify-content: flex-start;
}

@media ( min-width: 1024px ) {
	.fcs-text-banner--split .fcs-text-banner__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		column-gap: 40px;
	}

	.fcs-text-banner--split .fcs-text-banner__copy {
		flex: 0 1 768px;
	}

	.fcs-text-banner--split .fcs-text-banner__copy + .fcs-text-banner__actions {
		flex: 0 0 auto;
		margin-block-start: 0;
	}

	/* Media under a split banner still takes the full row beneath it. */
	.fcs-text-banner--split .fcs-text-banner__inner > :not( .fcs-text-banner__copy ):not( .fcs-text-banner__actions ) {
		flex: 0 0 100%;
	}
}