/**
 * LFBC Get Updates pattern
 *
 * Newsletter + LinkedIn callout placed near the bottom of most pages. Intended
 * to be inserted once and then promoted to a synced pattern via the inserter so
 * URL edits on the LinkedIn link and Newsletter button propagate site-wide.
 *
 * Layout uses container queries (matching hero / 5050 / grant-callout): the
 * `.lfbc-get-updates` section is the container; the inner content stacks
 * vertically on narrow widths and laps into a single row on lg+ (≥ 1024px).
 *
 * Figma reference: node 9163:9241 in `LFBC-for-Development---Content`.
 */

.lfbc-get-updates {
	container-type: inline-size;
	padding: 40px 24px;
	margin-top: 20px;
	border-block: 1px solid #FFF;
}

/* The footer embeds this pattern via a `core/shortcode` block, whose render
 * callback runs `wpautop()` over the shortcode output — that manufactures a
 * stray empty <p> after the intro (never present in the synced pattern's saved
 * content). W3TC's HTML minifier strips it for logged-out visitors, so it only
 * surfaces in the uncached/logged-in render. Hide any empty paragraph in the
 * pattern so its spacing can't leak in regardless of how it was introduced. */
.lfbc-get-updates :where(p):empty {
	display: none;
}

.lfbc-get-updates__inner {
	max-width: 1280px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

/* The inner group is a flow-layout block, so WP injects a block-gap
 * `margin-block-start` on the __actions sibling that stacks on top of the flex
 * `gap` above — pushing the space below the text past 20px on mobile. Zero it
 * so only the explicit 20px flex gap controls the text-to-button spacing. */
.lfbc-get-updates__inner > * {
	margin-block: 0;
}

.lfbc-get-updates__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.lfbc-get-updates__title {
	margin: 0;
	/* Design has no mobile/desktop size step for this heading, so pin it to a
	   constant 24px instead of the fluid clamp the .display-4 class applies. */
	font-size: 1.5rem;
}

.lfbc-get-updates__intro {
	margin: 0;
	line-height: 1.5;
}

.lfbc-get-updates__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap;
}

.lfbc-get-updates__newsletter.wp-block-buttons {
	margin: 0;
}

/* LinkedIn social link: 46px black circle with a custom white "in" glyph.
 *
 * We keep `core/social-link` (so the URL stays editable via the standard
 * block-editor URL flow) but swap out the icon visual: WP's default SVG is
 * the rounded-square LinkedIn logo, the design calls for the bare "in"
 * lettering. We hide core's inline SVG and paint our own `linkedin.svg`
 * (white, 17×16) onto the anchor as a centered background-image. */
.lfbc-get-updates__social.wp-block-social-links {
	margin: 0;
	gap: 0;
}

.lfbc-get-updates__social .wp-social-link {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	margin: 0;
	padding: 0;
}

.lfbc-get-updates__social .wp-social-link a,
.lfbc-get-updates__social .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background-image: url(../../images/patterns/get-updates-linkedin.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 16px;
}

.lfbc-get-updates__social .wp-social-link svg {
	display: none;
}

/* Desktop (lg+, ≥ 1024px container width).
 *
 * Title + intro lay out in a single row on the left, with the CTA cluster on
 * the right. Matches the Figma "desktop-full" variant. The intro stays nowrap
 * here since at this container size there's room for the full sentence on one
 * line (the underlying breakpoint guarantees enough horizontal real estate). */
@container (min-width: 1024px) {

	.lfbc-get-updates__inner {
		flex-direction: row;
		justify-content: center;
		gap: 32px;
		text-align: left;
	}

	.lfbc-get-updates__text {
		flex-direction: row;
		align-items: center;
		gap: 20px;
	}

	.lfbc-get-updates__intro {
		white-space: nowrap;
	}
}