/*
 * ds-popup-banner-manager banner strip — .dsbpm-banner is only ever
 * present on banner-layout ct_content_block markup (PopupBannerRepository
 * ::buildPopupContent()); popups get their own dsbpm-popup class instead
 * (popup.css), so nothing here touches popup styling.
 *
 * 2026-07-10 rework: the image is now the full-bleed background of the
 * whole strip (position:absolute, object-fit:cover) rather than a boxed
 * element beside the text. Heading/body/button render as a centered
 * overlay on top via .dsbpm-banner__content, and an optional scrim can
 * sit between the image and the content for readability.
 */

.dsbpm-banner {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	padding-inline: 24px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: var(--dsbpm-banner-min-height, 100px);
	box-sizing: border-box;
}

/*
 * Blocksy's global content-spacing rule (main.min.css, compiled from
 * content-spacing.scss) applies margin-block-end: var(--theme-content-spacing)
 * to every non-heading direct child of .is-layout-constrained/.is-layout-flow,
 * with no :last-child exemption (unlike headings, which do get one). Since
 * .dsbpm-banner is the sole child of the .entry-content.is-layout-constrained
 * wrapper Blocksy puts around hook-type Content Blocks, it inherits that
 * trailing margin, showing as a white gap below the banner. Scoped to
 * .dsbpm-banner only — .is-layout-constrained is reused by real post content
 * and the other hook content blocks, which may rely on the default spacing.
 */
.entry-content.is-layout-constrained > .dsbpm-banner {
	margin-block-end: 0;
}

.dsbpm-banner:not([data-dsbpm-banner-tint="no"])::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.5) 100%);
	z-index: 1;
	pointer-events: none;
}

.dsbpm-banner .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.dsbpm-banner .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dsbpm-banner__hitarea {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
}

.dsbpm-banner__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: min(100%, 960px);
	gap: 34px;
	max-width: 960px;
	padding: 10px 20px;
}

.dsbpm-banner__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dsbpm-banner[data-dsbpm-banner-clickable="yes"] .dsbpm-banner__content {
	pointer-events: none;
}

.dsbpm-banner[data-dsbpm-banner-clickable="yes"] .wp-block-button,
.dsbpm-banner[data-dsbpm-banner-clickable="yes"] .wp-block-button__link {
	pointer-events: auto;
}

.dsbpm-banner .wp-block-heading {
	margin: 0;
	color: var(--dsbpm-heading-text-colour, #fff);
	line-height: 1.1;
	font-family: var(--dsbpm-heading-font-family, var(--theme-font-family));
	font-size: var(--dsbpm-heading-font-size, inherit);
	font-weight: var(--dsbpm-heading-font-weight, inherit);
	font-style: var(--dsbpm-heading-font-style, normal);
}

.dsbpm-banner p {
	margin: 0;
	color: var(--dsbpm-body-text-colour, #fff);
	line-height: 1.2;
	font-family: var(--dsbpm-body-font-family, var(--theme-font-family));
	font-size: var(--dsbpm-body-font-size, inherit);
	font-weight: var(--dsbpm-body-font-weight, inherit);
	font-style: var(--dsbpm-body-font-style, normal);
}

.dsbpm-banner .wp-block-button__link {
	padding: 10px 16px;
	color: var(--dsbpm-button-text-colour, #fff);
	line-height: 1;
	font-family: var(--dsbpm-button-font-family, var(--theme-font-family));
	font-size: var(--dsbpm-button-font-size, inherit);
	font-weight: var(--dsbpm-button-font-weight, 700);
	font-style: var(--dsbpm-button-font-style, normal);
}

.dsbpm-banner .wp-block-buttons {
	margin: 0;
	flex-shrink: 0;
}

/* "Solid colour only, no image" — a genuine content choice now (not a
 * mobile-only space-saving treatment), so it applies at every breakpoint,
 * not just inside the mobile media query below. */
.dsbpm-banner[data-dsbpm-mobile-display="text_only"] .wp-block-image {
	display: none;
}

@media (max-width: 1024px) {
	.dsbpm-banner {
		padding-inline: 20px;
	}

	.dsbpm-banner__content {
		width: min(100%, 760px);
		max-width: 760px;
		gap: 28px;
		padding: 8px 16px;
	}
}

/* Tablet-only (excludes the <=689.98px mobile block below, which has its own layout) — heading/
   body/button text 20% smaller than desktop. The multiplier is applied to the admin-configured
   --dsbpm-*-font-size custom property itself (falling back to the plugin's own PHP defaults,
   PopupBannerRepository::typographyDefaults() — 18px/13px/14px) rather than a hardcoded px
   value, so this stays correct however an admin sets a given banner's desktop text size. */
@media (min-width: 690px) and (max-width: 1024px) {
	.dsbpm-banner .wp-block-heading {
		font-size: calc(var(--dsbpm-heading-font-size, 18px) * 0.8);
	}

	.dsbpm-banner p {
		font-size: calc(var(--dsbpm-body-font-size, 13px) * 0.8);
	}

	.dsbpm-banner .wp-block-button__link {
		font-size: calc(var(--dsbpm-button-font-size, 14px) * 0.8);
	}
}

/* Mobile — reuses Blocksy's own breakpoint (blocksy/inc/dynamic-css.php),
 * not an invented one. */
@media (max-width: 689.98px) {
	.dsbpm-banner {
		min-height: var(--dsbpm-banner-mobile-min-height, 100px);
		padding: 10px 12px;
	}

	.dsbpm-banner__content {
		align-items: center;
		flex-direction: row;
		justify-content: center;
		gap: 22px;
		margin-inline: auto;
		padding: 6px 10px;
		width: fit-content;
		max-width: calc(100% - 24px);
	}

	.dsbpm-banner__text,
	.dsbpm-banner[data-dsbpm-banner-align="left"] .dsbpm-banner__text,
	.dsbpm-banner[data-dsbpm-banner-align="right"] .dsbpm-banner__text,
	.dsbpm-banner[data-dsbpm-banner-align="center"] .dsbpm-banner__text {
		align-items: center;
		flex: 0 1 auto;
		gap: 3px;
		min-width: 0;
		text-align: center;
	}

	.dsbpm-banner .wp-block-buttons {
		flex: 0 0 auto;
	}

	.dsbpm-banner .wp-block-button__link {
		padding: 8px 14px;
		white-space: nowrap;
	}

	/* Heading/body/button text 40% smaller than desktop — same admin-configurable-value
	   scaling approach as the tablet override above, just a bigger multiplier. */
	.dsbpm-banner .wp-block-heading {
		font-size: calc(var(--dsbpm-heading-font-size, 18px) * 0.6);
	}

	.dsbpm-banner p {
		font-size: calc(var(--dsbpm-body-font-size, 13px) * 0.6);
	}

	.dsbpm-banner .wp-block-button__link {
		/* Bumped from *0.6 to *0.66 (+10%) per explicit request re: mobile "Read More" text. */
		font-size: calc(var(--dsbpm-button-font-size, 14px) * 0.759);
	}
}



.dsbpm-banner[data-dsbpm-banner-align="left"] {
	justify-content: flex-start;
}

.dsbpm-banner[data-dsbpm-banner-align="left"] .dsbpm-banner__content {
	justify-content: flex-start;
}

.dsbpm-banner[data-dsbpm-banner-align="left"] .dsbpm-banner__text {
	align-items: flex-start;
	text-align: left;
}

.dsbpm-banner[data-dsbpm-banner-align="right"] {
	justify-content: flex-end;
}

.dsbpm-banner[data-dsbpm-banner-align="right"] .dsbpm-banner__content {
	justify-content: flex-end;
}

.dsbpm-banner[data-dsbpm-banner-align="right"] .dsbpm-banner__text {
	align-items: flex-end;
	text-align: right;
}

.dsbpm-banner[data-dsbpm-banner-align="center"] .dsbpm-banner__text {
	align-items: center;
	text-align: center;
}