/*** Template: Archive — Release notes ***/

/* Jazzy injects the cards as <ul jx-form-results-items>, so the vertical stack lives on that ul. */

.release-note-archive {
	padding-block: var(--module-spacing-medium) var(--module-spacing-large);
}

.release-note-archive [jx-form-results] {
	grid-column: 2 / -2;
}

.release-note-archive ul[jx-form-results-items] {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	list-style: none;
	margin: 0;
	padding: 0;
}

.release-note-archive .no-results {
	color: color-mix(in srgb, var(--black) 60%, transparent);
}

/***************************************************************************************************************************************************************************************/
/* MQ MIN-WIDTH 2222 - Container at Max-Width */
/***************************************************************************************************************************************************************************************/

@media only screen and (min-width: calc(2222rem / 16)) {

	.release-note-archive [jx-form-results] {
		grid-column: 3 / -3;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem / 16)) {

	.release-note-archive [jx-form-results] {
		grid-column: 1 / -1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	/* Hero bottom + archive top stack into one gap — ~164px here, far more air
	   than the narrow viewport wants above the first card. Trim both halves.
	   Scoped by the sibling so other simple heroes keep their spacing.

	   .style-simple is carried for weight, not to narrow the match: this file is
	   enqueued before hero/simple.css, so without it the two selectors tie at
	   (0,3,0) and the base padding-block wins on source order. */
	.module.hero.style-simple:has(+ .release-note-archive) {
		padding-bottom: var(--module-spacing-small);
	}

	.release-note-archive {
		padding-top: var(--text-spacing-large);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.hero.style-simple:has(+ .release-note-archive) {
		padding-bottom: var(--text-spacing-xlarge);
	}

	.release-note-archive {
		padding-top: var(--text-spacing-small);
	}

}