/**
 * LFBC Notification Block pattern
 *
 * White rounded card for short callout notifications. Reuses the LFBC ring
 * logo (from rich-content), the `display-4` heading style, the `body-base`
 * paragraph size, and the global `is-style-arrow-links` list style (poppy
 * bold + trailing arrow) from assets/css/typography.css.
 *
 * Layout (container-driven, like hero / 5050 / grant-callout / get-updates):
 *   Mobile (< 1024px container):
 *     Single centered column — logo, title, intro, links stack vertically.
 *   Desktop (≥ 1024px container):
 *     Three columns — logo, fixed 171px title, and a flex-grow content
 *     column with intro paragraph + arrow-link list. Title and content
 *     text-tops are nudged up to align with the logo's top edge — see the
 *     `text-box-trim` rule at the bottom of the desktop block.
 *
 * Figma reference: node 9163:8249 in `LFBC-for-Development---Content`.
 */

.lfbc-notification-block {
	container-type: inline-size;
	padding: 20px 12px;
}

.lfbc-notification-block__card {
	background-color: var(--wp--preset--color--white);
	border-radius: 40px;
	max-width: 1055px;
	margin-inline: auto;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 19px;
	text-align: center;
}

/* Zero out WP's `:where(.is-layout-flow) > * + * { margin-block-start: <gap> }`
   on the first paragraph in the card. `:first-of-type` matches the first
   <p> regardless of preceding non-<p> siblings (e.g. the logo figure), so
   `:first-child` doesn't fire here. */
.lfbc-notification-block__card > p:first-of-type {
	margin-block-start: 0;
}

.lfbc-notification-block__logo {
	margin: 0;
	flex: 0 0 auto;
}

.lfbc-notification-block__logo img {
	width: 57px;
	height: auto;
	display: block;
}

/* Title width of 171px is from the Figma comp — on mobile it intentionally
   wraps "Open Funding / Opportunities" onto two lines. */
.lfbc-notification-block__title {
	margin: 0;
	max-width: 171px;
}

.lfbc-notification-block__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
	margin-block-start: 0 !important;
}

.lfbc-notification-block__intro {
	margin: 0;
	line-height: 1.5;
	font-size: 1rem !important;
}

/* Arrow-link list — visual styling (poppy bold + trailing arrow + 12px row
   gap) comes from the shared `is-style-arrow-links` style. Inherited
   `text-align: center` on mobile centers each anchor; desktop overrides to
   left below.

   The chained `ul.wp-block-list` selector (specificity 0,2,1) overrides
   typography.css's global `ul.wp-block-list { padding-inline-start: 28px }`
   (specificity 0,1,1) which would otherwise indent the arrow-link list and
   misalign it with the intro above. `.is-style-arrow-links { padding: 0 }`
   exists globally but loses on specificity to that bulleted-list rule. */
ul.wp-block-list.lfbc-notification-block__links {
	width: 100%;
	padding-inline-start: 0;
}

/* -------------------------------------------------------------------------
 * Desktop: container ≥ 760px wide. Three-column row.
 * ------------------------------------------------------------------------- */
@container (min-width: 760px) {

	.lfbc-notification-block__card {
		flex-direction: row;
		align-items: center;
		text-align: left;
		padding: 40px;
		/* 19px gap keeps the logo visually adjacent to the title (it labels
		   it). Between the title column and the content column we want
		   40px — the content column adds `margin-inline-start: 21px` below
		   so the effective separation there is 19 + 21 = 40px. */
		gap: 19px;
	}

	.lfbc-notification-block__title {
		flex: 0 0 171px;
	}

	.lfbc-notification-block__content {
		flex: 1 1 0;
		min-width: 0;
		align-items: flex-start;
		margin-inline-start: 21px;
	}
}