/* Header Overlay Block: full-width image under the site header, with a
   light card overlapping its lower part — text on the left, an optional
   embed (e.g. a donation widget) on the right. The card rises over the
   bottom 40% of the image, whatever height the image is at this width. */
.header-overlay-block {
	--image-height: clamp(360px, 48vw, 683px);

	margin-top: 0 !important;
	padding-top: var(--navbar-height);

	.image {
		border-radius: 0 0 8px 8px;
		height: var(--image-height);
		overflow: hidden;

		img {
			display: block;
			height: 100%;
			object-fit: cover;
			width: 100%;
		}
	}

	.card {
		background-color: var(--wp--preset--color--light-green);
		border-radius: 8px;
		color: var(--wp--preset--color--green);
		column-gap: 80px;
		display: grid;
		grid-template-columns: 1fr;
		margin: calc(var(--image-height) * -0.4) auto 0;
		padding: 75px 60px 85px 50px;
		position: relative;
		width: min(var(--wp--style--global--wide-size), 100% - 2 * var(--padding-x));
	}

	&.has-embed .card {
		grid-template-columns: 1fr 440px;
	}

	/* Text column: the last block (the highlighted line) sits at the bottom,
	   level with the bottom of the embed. ACF wraps the blocks in
	   .acf-innerblocks-container, which fills the column. */
	.card-content {
		display: flex;
		flex-direction: column;
	}

	.acf-innerblocks-container {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		row-gap: 40px;
	}

	.acf-innerblocks-container > :last-child:not(:first-child) {
		margin-top: auto;
		@media(width > 992px) {
			padding-top: 40px;
		}
	}

	.card-content p {
		line-height: 1.85;
		margin: 0;
	}

	.card-content strong {
		font-weight: 900;
	}

	.embed {
		min-height: 460px;

		iframe {
			border: 0;
			max-width: 100%;
			width: 100%;
		}
	}

	.embed-placeholder {
		align-items: center;
		background-color: var(--wp--preset--color--green);
		color: var(--wp--preset--color--light-green);
		display: flex;
		font-size: 16px;
		justify-content: center;
		padding: 24px;
		text-align: center;
	}

	@media (width <= 992px) {
		.card,
		&.has-embed .card {
			grid-template-columns: 1fr;
			margin-top: -80px;
			padding: 40px 24px 40px;
			row-gap: 40px;
		}

		.card-content p {
			font-size: 22px !important;
		}

		.embed {
			min-height: 0;
		}

		.embed-placeholder {
			min-height: 300px;
		}
	}
}