/*
 * Full-bleed section. Header is the same two-column "Atom / Section
 * header" pattern as linking-cards-section/program-filter-section/
 * people-section (heading on the left, a fixed-width intro column on the
 * right - straight from this block's own Figma "Header" instance, node
 * 975:29258) - not the single stacked column it used to be. Defaults to
 * white; editable via the block's own "Background color" panel
 * (supports.color.background in block.json).
 *
 * Figma's own export shows this heading in "Abhaya Libre" rather than
 * every other section's "IvyPresto Headline" - almost certainly a
 * Figma font-substitution artifact (a missing font falling back to
 * whatever's next in that file), not a deliberate one-off type choice, so
 * this uses the same IvyPresto heading token as every other section
 * instead, for consistency with the rest of the site.
 */
.wp-block-andrei-saguna-notice-list-section {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--12);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--base-white);
}

/*
 * This block's editor.js wraps a live wp.serverSideRender preview inside
 * its own useBlockProps() div, whose auto-derived className is the exact
 * same one render.php's own get_block_wrapper_attributes() output already
 * carries - the editor canvas is the only place this class ever nests
 * inside itself. Resetting full-bleed on the INNER copy (plain descendant
 * selector, not a ":not()" guard on the outer one) keeps the outer copy's
 * own rule at the same specificity as every other full-bleed section, so
 * the editor's generic preview-width cap still treats it consistently -
 * see people-section/style.css for the full writeup of the regression this
 * avoids from the start.
 */
.wp-block-andrei-saguna-notice-list-section .wp-block-andrei-saguna-notice-list-section {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.wp-block-andrei-saguna-notice-list-section__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-andrei-saguna-notice-list-section__header {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
}

h2.wp-block-andrei-saguna-notice-list-section__heading {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.1;
	color: #002547;
}

.wp-block-andrei-saguna-notice-list-section__intro {
	flex: 0 0 424px;
	width: 424px;
}

/* Same text styling as linking-cards-section's own header intro (font-size--body-base, line-height 1.5, #3f4a5a), by request. */
.wp-block-andrei-saguna-notice-list-section__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
	color: #3f4a5a;
}

/*
 * Rows list - same "each row carries its own full border, the wrapper only
 * clips the stack's square corners into the design's rounded-md shape"
 * pattern already established by document-tab/style.css.
 */
.wp-block-andrei-saguna-notice-list-section__rows {
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

/*
 * The whole row is a real <a> (Figma's own "Molecule / Row" docs: "Hover
 * covers the whole row... the link inside is the affordance, not a second
 * target") - simpler than document-row's separate click-through script,
 * since a notice row has nothing else inside it that also needs to stay
 * independently clickable. Alternating background (odd = surface, even =
 * white) matches the Figma source's own row-by-row instance overrides.
 */
.wp-block-andrei-saguna-notice-list-section__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--border-subtle);
	background-color: var(--wp--preset--color--base-white);
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.wp-block-andrei-saguna-notice-list-section__row:nth-child(odd) {
	background-color: var(--wp--preset--color--surface-subtle);
}

.wp-block-andrei-saguna-notice-list-section__row:hover {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-500);
}

.wp-block-andrei-saguna-notice-list-section__content {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	min-width: 0;
}

.wp-block-andrei-saguna-notice-list-section__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	font-weight: 500;
	line-height: 1.5;
	color: #002547;
}

.wp-block-andrei-saguna-notice-list-section__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.4;
	letter-spacing: 0.28px;
	color: #5d6979;
}

.wp-block-andrei-saguna-notice-list-section__deadline {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.4;
	letter-spacing: 0.28px;
	color: #5d6979;
	white-space: nowrap;
}

.wp-block-andrei-saguna-notice-list-section__action {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--ui-interactive);
	font-weight: 700;
	letter-spacing: 0.14px;
	color: var(--wp--preset--color--accent-500);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/*
 * Bottom button uses the site's own design-system button look (Big Primary/
 * Secondary/Outline) - render.php picks the variation via "is-style-
 * {ctaStyle}", chosen in the block's own Inspector ("Big Secondary" by
 * default). Flex centering/height/hover/disabled come for free from the
 * theme's own style.css "Design-system button styles" block, which is
 * hand-written against these same plain "is-style-*" class names.
 *
 * The base color/background/border/padding do NOT come for free, though:
 * those are declared only in theme.json's core/button "variations" (styles.
 * blocks.core/button.variations), and WordPress only ever emits that
 * variation CSS for style names it actually sees on a REAL core/button
 * block in the current request's content - plus, because this theme also
 * registers the very same variation names a second time via
 * register_block_style() in functions.php, whatever CSS it does emit gets
 * an unpredictable "--N" collision-avoidance suffix appended to the
 * selector (e.g. "is-style-big-primary--7"), which this hand-rendered <a>'s
 * own plain class never matches either way. Net effect: every option in
 * the "Button style" picker rendered identically (no color/border landed
 * at all) - the button only ever looked like its Big Secondary default.
 * Same root cause already diagnosed and worked around in
 * program-filter-section/style.css; duplicated here the same way, scoped to
 * the plain class names, which stay stable regardless of core's suffixing.
 *
 * Figma "Text and Action" (node 1301:54904, matching this same block's own
 * "11 Avizier" frame): the optional bottom text is "justify-content:
 * space-between" from the button - by request, only when that text is
 * actually set ("has-text"); with no text the row keeps its original
 * "justify-content: flex-start" (button alone, on the left). "align-items:
 * center" matches this row's own Figma spec.
 */
.wp-block-andrei-saguna-notice-list-section__cta-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-andrei-saguna-notice-list-section__cta-row.has-text {
	justify-content: space-between;
}

/* Same fixed 424px "Secondary CTA" column width every other section's own bottom text uses (program-filter-section/people-section) - the Figma source reuses it here too. */
.wp-block-andrei-saguna-notice-list-section__bottom-text {
	flex: 0 0 424px;
	width: 424px;
}

/*
 * This block's own "Secondary CTA" text (node 975:29258) is smaller than
 * its sibling blocks' - Body/Small (14px/1.4/0.28px letter-spacing), not
 * the Body/Base (16px/1.5) program-filter-section/people-section use for
 * theirs - so it gets its own class rather than reusing "__text" (the
 * header intro, styled above).
 */
.wp-block-andrei-saguna-notice-list-section__bottom-text-copy {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.4;
	letter-spacing: 0.28px;
	color: #3f4a5a;
}

.wp-block-andrei-saguna-notice-list-section__cta-wrap.is-style-big-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-500);
	color: var(--wp--preset--color--base-white);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
}

.wp-block-andrei-saguna-notice-list-section__cta-wrap.is-style-big-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--base-white);
	color: #002547;
	border: 1.5px solid #002547;
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
}

.wp-block-andrei-saguna-notice-list-section__cta-wrap.is-style-big-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--base-white);
	border: 1.5px solid var(--wp--preset--color--border-on-image);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
}

@media (max-width: 600px) {
	.wp-block-andrei-saguna-notice-list-section__row {
		flex-wrap: wrap;
	}

	.wp-block-andrei-saguna-notice-list-section__content {
		flex: 1 1 100%;
	}

	.wp-block-andrei-saguna-notice-list-section__deadline {
		order: 1;
	}

	.wp-block-andrei-saguna-notice-list-section__action {
		order: 2;
		margin-left: auto;
	}
}

@media (max-width: 767px) {
	.wp-block-andrei-saguna-notice-list-section__header {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--4);
	}

	.wp-block-andrei-saguna-notice-list-section__intro {
		flex: 1 1 100%;
		width: 100%;
	}

	.wp-block-andrei-saguna-notice-list-section__cta-row.has-text {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--4);
	}

	.wp-block-andrei-saguna-notice-list-section__bottom-text {
		flex: 1 1 100%;
		width: 100%;
	}
}