/* ============================================
   Announcement Box block ("This Week in Commencement")
   ============================================ */

:root .announcement-box {
	box-sizing: border-box;
	/* !important: outranks the constrained layout's own .alignwide max-width. */
	max-width: 800px !important;
	margin-inline: auto !important;
	padding: 1.75rem 2rem;
	background-color: var(--wp--preset--color--chapel-bell-white);
	border: 2px solid var(--wp--preset--color--bulldog-red);
	border-inline-start-width: 10px;
	box-shadow: var(--wp--preset--shadow--soft);
}

:root .announcement-box__heading {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--arch-black);
}

:root .announcement-box__entries {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Date | title + description | CTA. Fixed track assignments keep the layout
   intact when an entry has no date or no button. */
:root .announcement-box__entry {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr) auto;
	column-gap: 2rem;
	align-items: start;
	list-style: none;
	margin: 0;
	padding-block: 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--stegeman) 45%, transparent);
}

:root .announcement-box__entry:first-child {
	padding-block-start: 0;
	border-top: none;
}

:root .announcement-box__entry:last-child {
	padding-block-end: 0;
}

:root .announcement-box__date {
	grid-column: 1;
	display: block;
	margin: 0;
	padding-block-start: 0.15em;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--arch-black);
}

:root .announcement-box__body {
	grid-column: 2;
}

:root .announcement-box__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--merriweather);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--arch-black);
}

:root .announcement-box__description {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--merriweather-sans);
	font-size: 0.95rem;
	line-height: 1.5;
	max-width: 46ch;
	color: var(--wp--preset--color--arch-black);
}

:root .announcement-box__cta {
	grid-column: 3;
	align-self: center;
	display: inline-block;
	padding: 0.55em 1.5em;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none !important;
	color: var(--wp--preset--color--chapel-bell-white) !important;
	background-color: var(--wp--preset--color--bulldog-red);
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--dark-red);
	transition: background-color 0.2s ease;
}

:root .announcement-box__cta:hover,
:root .announcement-box__cta:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--bulldog-red) 80%, var(--wp--preset--color--arch-black) 20%);
}

:root .announcement-box__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--bulldog-red);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	:root .announcement-box__cta {
		transition: none;
	}
}

@media (max-width: 700px) {
	:root .announcement-box {
		padding: 1.5rem 1.25rem;
	}

	:root .announcement-box__entry {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.5rem;
	}

	:root .announcement-box__date,
	:root .announcement-box__body,
	:root .announcement-box__cta {
		grid-column: 1;
	}

	:root .announcement-box__cta {
		justify-self: start;
	}
}

/* ============================================
   Editor only
   ============================================ */

/* The block appender is a plain div inside the <ul>; keep it out of the entry grid. */
:root .announcement-box__entries > :not(.announcement-box__entry) {
	list-style: none;
}

.announcement-box__date--empty {
	color: var(--wp--preset--color--sanford);
	font-style: italic;
	text-transform: none;
}

/* Canvas preview of the CTA; the real link is rendered server-side. */
.announcement-box__cta--preview {
	pointer-events: none;
}