/*
 * Release notes archive.
 *
 * Values are lifted from the old site's rendered page so the migrated archive
 * is pixel-identical: 1112px shell, 87px date rail with a 2px divider, 20px
 * card radius, 26px headings, 22px status pills.
 */

.ml-release-notes {
	--ml-rn-blue: #005ff9;
	--ml-rn-ink: #333;
	--ml-rn-line: #dfe0ec;
	--ml-rn-new: var(--color-primary);
	--ml-rn-fixes: #fe8a00;
	--ml-rn-notes: var(--color-accent);
	overflow: clip;
	width: 100%;
	background: #fff;
	color: var(--ml-rn-ink);
	font-family: Heebo, Roboto, sans-serif;
}

.ml-release-notes *,
.ml-release-notes *::before,
.ml-release-notes *::after {
	box-sizing: border-box;
}

.ml-release-notes__shell {
	width: min(100% - 48px, var(--site-width));
	margin-inline: auto;
}

/* Hero */

.ml-release-notes__hero {
	padding: 96px 0 60px;
}

.ml-release-notes__hero-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 96px;
}

/* The two hero columns keep the old site's 450:558 ratio while the shell grows
   to the theme's --site-width. */
.ml-release-notes__hero-copy {
	display: flex;
	flex: 1 1 450px;
	flex-direction: column;
	gap: 30px;
	justify-content: center;
}

.ml-release-notes__title {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var(--ml-rn-blue);
	font-size: 40px;
	font-weight: 700;
	line-height: 52px;
}

.ml-release-notes__title-lead {
	color: #000;
}

.ml-release-notes__intro {
	max-width: 520px;
	font-size: 16px;
	line-height: 1.7;
}

.ml-release-notes__intro > :first-child {
	margin-top: 0;
}

.ml-release-notes__intro > :last-child {
	margin-bottom: 0;
}

.ml-release-notes__hero-art {
	flex: 1 1 558px;
	min-width: 0;
}

.ml-release-notes__hero-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Listing */

.ml-release-notes__listing {
	padding-bottom: 96px;
}

.ml-release-notes__cards {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.ml-release-notes__card {
	display: flex;
	padding: 30px 20px 30px 30px;
	border: 1px solid var(--ml-rn-line);
	border-radius: 20px;
}

.ml-release-notes__date {
	display: flex;
	flex: 0 0 87px;
	flex-direction: column;
	border-right: 2px solid var(--ml-rn-line);
	color: var(--ml-rn-line);
	font-size: 26px;
	font-weight: 700;
	line-height: 39px;
}

.ml-release-notes__date-mobile {
	display: none;
	color: var(--ml-rn-line);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}

.ml-release-notes__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding-left: 20px;
}

.ml-release-notes__heading {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 26px;
}

.ml-release-notes__heading-lead {
	color: var(--ml-rn-ink);
}

.ml-release-notes__heading-title {
	color: var(--ml-rn-blue);
	line-height: 34px;
}

.ml-release-notes__sections {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Status pills reuse the pricing table's BONUS badge: solid fill, white bold
   uppercase label (see .ml-pt__badge in css/pricing.css). */
.ml-release-notes__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.26px;
	vertical-align: middle;
}

.ml-release-notes__section--new .ml-release-notes__badge {
	background: var(--ml-rn-new);
}

.ml-release-notes__section--fixes .ml-release-notes__badge {
	background: var(--ml-rn-fixes);
}

.ml-release-notes__section--notes .ml-release-notes__badge {
	background: var(--ml-rn-notes);
}

.ml-release-notes__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.ml-release-notes__line {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 16px;
	line-height: 1.82;
}

.ml-release-notes__line-main {
	display: flex;
	align-items: center;
}

.ml-release-notes__check {
	display: block;
	flex: 0 0 22px;
	margin-right: 17px;
	line-height: 0;
}

.ml-release-notes__line-text {
	min-width: 0;
}

/* Everything the editor pasted keeps the line's own rhythm: no stray paragraph
   margins, and lists indent by 20px from the line's left edge like on the old
   site. */
.ml-release-notes__line-text > *,
.ml-release-notes__line-extra > *,
.ml-release-notes__line-extra li > * {
	margin: 0;
}

.ml-release-notes__line-extra ul,
.ml-release-notes__line-extra ol,
.ml-release-notes__line-text ul,
.ml-release-notes__line-text ol {
	margin: 0;
	padding-left: 20px;
	list-style-position: outside;
}

.ml-release-notes__line-extra ul,
.ml-release-notes__line-text ul {
	list-style-type: disc;
}

.ml-release-notes__line-extra li,
.ml-release-notes__line-text li {
	margin: 0;
}

.ml-release-notes__line a {
	color: var(--ml-rn-blue);
}

.ml-release-notes__empty {
	padding: 48px 0;
	color: var(--ml-rn-line);
	font-size: 18px;
	text-align: center;
}

.ml-release-notes__load-more {
	margin-top: 40px;
	text-align: center;
}

.ml-release-notes__load-more[hidden] {
	display: none;
}

.ml-release-notes__load-more-btn {
	padding: 12px 32px;
	border: 1px solid var(--ml-rn-line);
	border-radius: 20px;
	background: #fff;
	color: var(--ml-rn-blue);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
}

.ml-release-notes__load-more-btn:hover:not(:disabled) {
	border-color: var(--ml-rn-blue);
	background: var(--ml-rn-blue);
	color: #fff;
}

.ml-release-notes__load-more-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 1023px) {
	.ml-release-notes__hero-inner {
		gap: 40px;
	}

	.ml-release-notes__title {
		font-size: 32px;
		line-height: 42px;
	}
}

@media (max-width: 767px) {
	.ml-release-notes__shell {
		width: min(100% - 32px, var(--site-width));
	}

	.ml-release-notes__hero {
		padding: 48px 0 40px;
	}

	.ml-release-notes__hero-inner {
		flex-direction: column;
		gap: 32px;
	}

	.ml-release-notes__hero-copy {
		flex: 0 0 auto;
		gap: 20px;
	}

	.ml-release-notes__intro {
		max-width: none;
	}

	.ml-release-notes__hero-art {
		flex: 0 0 auto;
		width: 100%;
	}

	.ml-release-notes__listing {
		padding-bottom: 64px;
	}

	.ml-release-notes__card {
		padding: 20px;
	}

	/* The old site hides the date rail on mobile and prints the full date
	   above the heading instead. */
	.ml-release-notes__date {
		display: none;
	}

	.ml-release-notes__date-mobile {
		display: block;
	}

	.ml-release-notes__body {
		padding-left: 0;
	}

	.ml-release-notes__heading {
		font-size: 22px;
		line-height: 24px;
	}

	.ml-release-notes__heading-title {
		line-height: 28px;
	}

	.ml-release-notes__line-main {
		align-items: flex-start;
	}

	.ml-release-notes__check {
		margin-top: 4px;
		margin-right: 12px;
	}
}