/*** Template: Page — Newsroom (/newsroom/) ***/

/** Hero — headline left, press-contact aside bottom-aligned right **/

.newsroom-hero {
	color: var(--white);
	padding-block: var(--module-spacing-large) var(--module-spacing-medium);
}

.newsroom-hero .bg-field {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
	inset: var(--text-spacing-small);
}

@media (prefers-reduced-motion: no-preference) {

	.newsroom-hero .bg-field {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

.newsroom-hero .container {
	align-items: flex-start;
}

.newsroom-hero .heading-1 {
	grid-column: 1 / span 8;
}

.newsroom-hero .press-contact {
	border-left: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
	display: flex;
	flex-direction: column;
	grid-column: 9 / 12;
	padding-left: var(--text-spacing-large);
}

.newsroom-hero .press-contact > * + * {
	margin-top: var(--text-spacing-xxsmall);
}

.newsroom-hero .press-contact > .eyebrow + * {
	margin-top: var(--text-spacing-xsmall);
}

.newsroom-hero .press-contact .line a {
	color: var(--white);
	text-decoration: underline;
}

/** Sections — title rail left (col 4 left empty as the gutter), card grid right **/

.news-section {
	padding-block: var(--module-spacing-medium);
}

.news-section + .news-section {
	padding-top: 0;
}

/* Title rail sticks alongside the scrolling card grid; align-self keeps it
   content-height so it has room to move within the section. The 100px bottom
   margin releases the sticky early (sticky stops at the margin-box edge) so the
   rail scrolls away 100px before the cards end, clear of the next section. */
.news-section header {
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-column: 1 / span 3;
	margin-bottom: 100px;
	position: sticky;
	top: calc(var(--header-height) + var(--text-spacing-large));
}

/* Keep the secondary button content-width in the flex-column header rail. */
.news-section header .btn {
	align-self: flex-start;
}

.news-section .news-grid {
	grid-column: 5 / -1;
	grid-template-columns: repeat(2, 1fr);
}

/** Press-release card — date over title, the whole card a link **/

.press-card {
	background: var(--white);
	color: inherit;
	filter: var(--shadow-card);
	gap: var(--text-spacing-xsmall);
	height: 100%;
	padding: var(--text-spacing-medium);
}

.press-card .meta {
	color: var(--gray-dark);
}

.press-card:hover {
	color: var(--black-hover);
}

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

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

	.newsroom-hero .bg-field {
		inset: var(--text-spacing-small) 0;
	}

}

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

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

	.newsroom-hero .heading-1,
	.newsroom-hero .press-contact,
	.news-section header,
	.news-section .news-grid {
		grid-column: 1 / -1;
	}

	.newsroom-hero .press-contact {
		border-left: 0;
		padding-left: 0;
	}

	/* Header stacks above the grid here — no sticky, or it would cover cards. */
	.news-section header {
		gap: var(--text-spacing-small);
		margin-bottom: var(--text-spacing-small);
		position: static;
	}

	.news-section + .news-section {
		padding-top: var(--text-spacing-small);
	}

}

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

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

	.news-section .news-grid {
		grid-template-columns: 1fr;
	}

	.news-section header {
		margin-bottom: var(--text-spacing-xsmall);
	}

}