/* Structure only.
 *
 * framework/banner is the band container: a full-bleed strip of colour or
 * photography, its content held to the content column, with its own padding
 * and an optional negative pull over the band above it. Almost every page in
 * almost every build is a stack of these.
 *
 * As with every block in the starter, the design is NOT here. The three type
 * treatments below are named roles with no values attached; the build sets
 * them from its own design work, whether that is a Figma file or an existing
 * site being rebuilt. Asserting a font-size here would mean every site that
 * used a band inherited a decision nobody made for it.
 *
 * Spacing and sizing are exposed as --fw-banner-* custom properties, set per
 * instance by render.php from the block's attributes.
 */

.fw-banner {
	background: var(--fw-banner-bg, transparent);
	padding: var(--fw-banner-pt, 0) 0 var(--fw-banner-pb, 0);
	/* A band pulled up over its neighbour still has to paint over it. */
	margin-top: var(--fw-banner-mt, 0);
	position: relative;
}

.fw-banner__inner {
	max-width: var(--fw-banner-max-width, 1200px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fw-banner-gap, 0);
}

/* A band whose design is a photograph. The image is its own full-bleed layer
   inside the band's padding rather than the background of the whole section,
   so the band keeps its air above and below the picture. */
/* The background image sits BEHIND the band's content (Owen, 13 Oct). It was
   built as a separate full-bleed strip stacked above the content, so choosing
   a background image added a picture on top of the text rather than behind
   it. No band on the site had ever used it (0 of 15), so the behaviour could
   change without moving any existing content.

   The layer now covers the whole band, padding included, and the content sits
   over it. Minimum height moves to the band itself, so a band with a picture
   and little text still shows the picture; with more text the band simply
   grows and the image keeps covering it. */
.fw-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--fw-banner-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}
.fw-banner--image {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--fw-banner-min, 240px);
	overflow: hidden;
}
.fw-banner--image > .fw-banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;
}
.fw-banner--image .fw-banner__inner:empty { display: none; }

/* The three treatment sizes centre their headings; `plain` asserts nothing,
   which is what a band holding ordinary content needs. */
.fw-banner--announcement .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6),
.fw-banner--statement .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6),
.fw-banner--headline .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	text-align: center;
}
.fw-banner--plain .fw-banner__inner {
	display: block;
	gap: 0;
}
/* A container band (see render.php) takes the page's own layout, so its
   inner drops the band's width cap and these heading and paragraph rules do
   not apply to it. :where() keeps every selector at its old specificity, so
   the style variants that override them still do. */
.fw-banner--container > .fw-banner__inner {
	max-width: none;
	margin: 0;
	/* WordPress zeroes padding on a has-global-padding nested inside another,
	   so the root padding the page content gets has to be stated here. */
	padding-left: var(--wp--style--root--padding-left, 20px);
	padding-right: var(--wp--style--root--padding-right, 20px);
}

.fw-banner--plain:where(:not(.fw-banner--container)) .fw-banner__inner > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

/* Paragraph rhythm. The block set none, so spacing came only from the style
   variants and the per page Figma rules, and no two agreed: 28px on the green
   band, 0 on the bulletin, 21.5px and 10px on three page-id rules. A band with
   no such rule had its paragraphs flush. This is the baseline they all still
   override, deliberately left at low specificity. (Owen, 13 Oct.) */
:where(.fw-banner:not(.fw-banner--container)) > .fw-banner__inner > p + p { margin-top: var(--fw-banner-para-gap, 16px); }

.fw-banner .wp-block-buttons { margin: 0; justify-content: center; }

@media (max-width: 1239px) {
	.fw-banner__inner { padding: 0 20px; }
}