/* ==========================================================================
   updates.css
   The "What's new" page: the site's own announcements, written in the admin
   area and listed newest first.

   Reuses .page-title, .section-subtitle and .empty-state from
   design-system.css. The body of an entry is ActionText, so it is wrapped
   in .trix-content and picked up by actiontext.css.
   ========================================================================== */

.updates-page {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--s-4) var(--s-6) var(--s-10);
}

@media (max-width: 640px) {
	.updates-page {
		padding: var(--s-3) var(--s-4) var(--s-9);
	}
}

.updates-list {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	margin-top: var(--s-6);
}

/* One post. A card and not a bare heading: an update carries a body, and
   the body needs a surface to sit on. */
.update-entry {
	padding: var(--s-5) var(--s-6);
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

.update-entry__title {
	font-size: var(--text-xl);
}

.update-entry__date {
	margin-top: var(--s-1);
	font-size: var(--text-xs);
	color: var(--text-3);
}

.update-entry__body {
	margin-top: var(--s-4);
}

/* The body is written in the admin editor, so its headings are the
   editor's headings. They are set a step down from the entry title so a
   post that opens with a heading does not shout over its own title. */
.update-entry__body h1,
.update-entry__body h2,
.update-entry__body h3 {
	margin-top: var(--s-5);
	font-size: var(--text-md);
	color: var(--text);
}