/* News & Events: landing, Recent News archive, article and webinar pages,
 * and the home page module. Markup: inc/news-ui.php. Geometry from Figma
 * SGP-Website "DEV - News & Events"; the sizes it adds are the --nr-* tokens.
 *
 * Figma to 2.5 standardisations (see the PR for the full list):
 * - Figma's 1440 column sits in the site's .wrap (1400).
 * - Figma 12 image corners use --sgp-radius-selector (16), 4 use control (8).
 * - "Title 2" 28/33 is the 28 step (28/36); the article title 50/60 is the
 *   site's article hero 45 bold; article text 20/35 light is the 20 step.
 * - Buttons follow the 2.5 tiers; red text links become the inline link.
 *
 * Phones: desktop is the approved state. Below 1024 and 767 the grids stack
 * so nothing overflows; phone layouts are to be designed later.
 */

/* ---------- Sections and headings ---------- */

.news-section {
	padding-top: var(--sgp-space-144);
}

.news-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-48);
}

.news-stack--tight {
	gap: var(--sgp-space-32);
}

.news-stack--home {
	gap: var(--sgp-space-64);
}

.news-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sgp-space-48);
}

.news-head > .sgp-button {
	flex: none;
}

.news-arrows {
	flex: none;
}

/* Grey rule with a red lead segment. In a carousel the red part tracks the
   position (main.js sets --progress); elsewhere it is a fixed accent. */
.news-rule {
	position: relative;
	height: var(--bar-4);
	margin: 0;
	background-color: var(--color-grey);
}

.news-rule span {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--progress, var(--nr-accent));
	max-width: 100%;
	border-radius: var(--sgp-radius-object) 0 0 var(--sgp-radius-object);
	background-color: var(--color-red);
	transition: width var(--sgp-dur-medium) var(--sgp-ease);
}

/* Photo darkened 20%, as every card photo is in the frames. */
.news-scrim {
	position: relative;
}

.news-scrim::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--nr-scrim-photo);
	content: "";
	pointer-events: none;
}

.news-card__media img,
.news-feature__media img,
.news-event__media img,
.news-webinar-lead__media img,
.news-side-card__media img,
.news-home__media img,
.news-mini__media img,
.news-player__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card titles link the card; keep them in the card's own colour. */
.news-card h3 a,
.news-feature h2 a,
.news-webinar-lead h3 a,
.news-side-card h3 a,
.news-home__feature h3 a,
.news-row2 h3 a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.news-card h3 a:hover,
.news-feature h2 a:hover,
.news-webinar-lead h3 a:hover,
.news-side-card h3 a:hover,
.news-home__feature h3 a:hover,
.news-row2 h3 a:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--sgp-underline-hover);
	text-underline-offset: var(--sgp-underline-offset);
}

.news-card__text,
.news-row2__text {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-12);
}

.news-card__text p,
.news-row2__text p,
.news-row2 .eyebrow {
	margin: 0;
}

.news-more {
	align-self: flex-start;
}

/* ---------- Hero (3571:14896) ---------- */

.news-hero {
	display: flex;
	min-height: var(--nr-hero-min);
	padding-block: var(--sgp-space-96);
	background-color: var(--color-navy);
	color: var(--color-white);
}

.news-hero__inner {
	flex: 1;
	justify-content: space-between;
	gap: var(--sgp-space-48);
}

.news-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-16);
}

.news-hero__text p {
	margin: 0;
}

.news-hero .sgp-button {
	align-self: flex-start;
}

/* ---------- Featured story (3571:14904) ---------- */

.news-feature {
	flex-direction: row;
	overflow: hidden;
}

.news-feature__media {
	position: relative;
	flex: 0 1 var(--nr-feature-media);
	min-width: 0;
}

.news-feature__media::after {
	position: absolute;
	inset: 0;
	background-color: var(--nr-scrim-feature);
	content: "";
}

.news-feature__media img {
	position: absolute;
	inset: 0;
}

.news-feature__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sgp-space-32);
	min-width: 0;
	padding: var(--sgp-space-48);
}

.news-feature__date {
	align-self: stretch;
	margin: 0;
	padding-bottom: var(--sgp-space-8);
	border-bottom: var(--border-1) solid var(--color-white);
}

.news-feature__text {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-8);
}

.news-feature__text p {
	margin: 0;
}

.news-byline {
	display: flex;
	align-items: center;
	gap: var(--sgp-space-24);
	padding-top: var(--sgp-space-16);
}

.news-byline__photo {
	width: var(--nr-avatar);
	height: var(--nr-avatar);
	border-radius: var(--sgp-radius-selector);
	object-fit: cover;
}

.news-byline p {
	margin: 0;
}

.news-byline__name {
	margin-bottom: var(--sgp-space-8);
	font: var(--sgp-weight-bold) var(--sgp-text-20) var(--sgp-font);
}

/* ---------- Recent News cards (3571:14929) ---------- */

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sgp-space-32);
}

.news-card {
	gap: var(--sgp-space-24);
	padding: var(--sgp-space-32);
}

.news-card__media {
	height: var(--nr-card-media);
	overflow: hidden;
	border-radius: var(--sgp-radius-selector);
	background-color: var(--color-grey-mid);
}

.news-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sgp-space-24);
	padding-bottom: var(--sgp-space-24);
}

.news-card__body > .eyebrow {
	margin: 0;
}

.news-card__meta {
	font: var(--sgp-weight-regular) var(--sgp-text-12) var(--sgp-font);
}

/* ---------- Upcoming Events (3571:14983) ---------- */

.news-track {
	display: flex;
	gap: var(--sgp-space-32);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.news-track::-webkit-scrollbar {
	display: none;
}

.news-event {
	flex: 0 0 calc((100% - 2 * var(--sgp-space-32)) / 3);
	gap: var(--sgp-space-32);
	overflow: hidden;
	padding-bottom: var(--sgp-space-24);
	scroll-snap-align: start;
}

.news-event__media {
	position: relative;
	height: var(--nr-event-media);
	background-color: var(--color-navy-raised);
}

.news-event__media::after {
	position: absolute;
	inset: 0;
	background-image: var(--nr-scrim-event);
	content: "";
}

.news-event__date {
	position: absolute;
	top: var(--sgp-space-12);
	left: var(--sgp-space-32);
	z-index: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var(--color-white);
}

.news-event__title,
.news-event__meta,
.news-event .news-more {
	margin-inline: var(--sgp-space-32);
}

.news-event__meta {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-8);
}

.news-event__meta p {
	margin: 0;
}

.news-event .news-more {
	margin-top: auto;
}

/* ---------- Webinars (3571:15055) ---------- */

.news-webinars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sgp-space-24);
}

.news-webinar-lead {
	overflow: hidden;
}

.news-webinar-lead__media {
	height: var(--nr-lead-media);
	background-color: var(--color-grey-mid);
}

.news-webinar-lead__body,
.news-side-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sgp-space-24);
}

.news-webinar-lead__body {
	padding: var(--sgp-space-32) var(--sgp-space-32) var(--sgp-space-16);
}

.news-webinars__side {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-24);
}

.news-side-card {
	flex: 1;
	flex-direction: row;
	gap: var(--sgp-space-24);
	overflow: hidden;
}

.news-side-card__body {
	min-width: 0;
	padding: var(--sgp-space-32) 0 var(--sgp-space-32) var(--sgp-space-32);
}

.news-side-card__body .news-card__text {
	gap: var(--sgp-space-16);
}

.news-side-card__body > .sgp-button {
	align-self: flex-start;
}

.news-side-card__media {
	flex: 0 0 var(--nr-side-media);
	border-radius: 0 var(--sgp-radius-object) var(--sgp-radius-object) 0;
	background-color: var(--color-grey-mid);
}

/* ---------- Home module (3846:1061) ---------- */

.news-home {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sgp-space-24);
}

.news-home__feature {
	overflow: hidden;
}

.news-home__media {
	height: var(--nr-lead-media);
	background-color: var(--color-slate);
}

.news-home__body {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-24);
	padding: var(--sgp-space-32);
}

.news-home__body > .eyebrow {
	margin: 0;
}

.news-home__text {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-12);
}

.news-home__text p {
	margin: 0;
}

.news-home__cards {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-24);
}

.news-mini {
	flex-direction: row;
	gap: var(--sgp-space-24);
	padding: var(--sgp-space-32);
	color: var(--color-white);
	text-decoration: none;
	transition: background-color var(--sgp-dur-short) var(--sgp-ease);
}

a.news-mini:hover {
	background-color: var(--color-slate);
}

a.news-mini:focus-visible {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-color-on-color);
	outline-offset: var(--sgp-focus-ring-offset);
}

.news-mini__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sgp-space-32);
	min-width: 0;
}

.news-mini__text {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-12);
}

.news-mini__media {
	position: relative;
	display: flex;
	flex: 0 0 var(--nr-thumb);
	align-items: flex-end;
	justify-content: flex-end;
	overflow: hidden;
	padding: var(--sgp-space-12);
	border-radius: var(--sgp-radius-selector);
	background-color: var(--color-slate);
}

.news-mini__media img {
	position: absolute;
	inset: 0;
}

.news-mini__arrow {
	position: relative;
	z-index: 1;
}

/* ---------- Breadcrumb (3571:17811) ---------- */

.news-crumbs {
	padding-top: var(--sgp-space-144);
}

.news-crumbs nav {
	padding-bottom: var(--sgp-space-64);
	border-bottom: var(--border-1) solid var(--sgp-color-divider);
}

.news-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sgp-space-24);
	margin: 0;
	padding: 0;
	list-style: none;
	font: var(--sgp-weight-medium) var(--sgp-text-22) var(--sgp-font);
}

.news-crumbs li + li::before {
	margin-right: var(--sgp-space-24);
	content: "/";
}

.news-crumbs a {
	color: var(--sgp-color-ink);
	text-decoration: none;
}

.news-crumbs a:hover {
	color: var(--sgp-color-interactive);
	text-decoration: underline;
}

/* Figma marks the current page in red text, which is under 4.5:1 on white
   at this size; the red moves to an underline. */
.news-crumbs [aria-current] {
	text-decoration: underline;
	text-decoration-color: var(--color-red);
	text-decoration-thickness: var(--sgp-underline-hover);
	text-underline-offset: var(--sgp-underline-offset);
}

/* ---------- Recent News archive (3571:17820) ---------- */

.news-section--archive {
	padding-top: var(--sgp-space-64);
}

.news-section--archive .news-stack {
	gap: var(--sgp-space-64);
}

.news-archive {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-32);
}

.news-filter {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-32);
}

.news-filter__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sgp-space-16) var(--sgp-space-48);
}

.news-chip {
	padding: var(--sgp-space-8);
	border-radius: var(--sgp-radius-control);
	color: var(--sgp-color-ink);
	font: var(--sgp-weight-semibold) var(--sgp-text-16) var(--sgp-font);
	letter-spacing: var(--sgp-tracking-caps);
	text-decoration: none;
	text-transform: uppercase;
}

.news-chip:hover {
	color: var(--sgp-color-interactive);
}

.news-chip[aria-current] {
	background-color: var(--color-navy);
	color: var(--color-white);
}

.news-chip:focus-visible {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-focus-ring-color);
	outline-offset: var(--sgp-focus-ring-offset);
}

.news-row2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--nr-meta-col) var(--nr-date-col);
	gap: var(--sgp-space-32);
	padding-block: var(--sgp-space-32);
	border-bottom: var(--border-1) solid var(--sgp-color-divider);
}

.news-row2:first-child {
	padding-top: 0;
}

.news-row2__main,
.news-row2__author,
.news-row2__date {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-32);
}

.news-row2__date p:last-child {
	margin: 0;
	white-space: nowrap;
}

.news-rows__foot {
	display: flex;
	justify-content: flex-end;
}

/* ---------- Article and webinar pages (3571:23269, 3571:23453) ---------- */

.news-article {
	padding-block: var(--sgp-space-64);
}

.news-article .wrap {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--sgp-space-64);
}

.news-side {
	display: flex;
	flex: 0 0 var(--nr-thumb);
	flex-direction: column;
	gap: var(--sgp-space-64);
}

.news-side__people {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-24);
}

.news-side__people p {
	margin: 0;
}

.news-side__photos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sgp-space-24);
}

.news-side__photo {
	width: var(--nr-avatar-sm);
	height: var(--nr-avatar-sm);
	border-radius: var(--sgp-radius-control);
	object-fit: cover;
}

.news-side__label {
	color: var(--sgp-color-ink-secondary);
}

.news-side__list {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-24);
}

.news-side__list ul {
	display: flex;
	flex-direction: column;
	gap: var(--sgp-space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-side__list li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sgp-space-8);
	padding-bottom: var(--sgp-space-24);
	border-bottom: var(--border-1) solid var(--sgp-color-divider);
}

.news-side__list p {
	margin: 0;
}

.news-article__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sgp-space-24);
	min-width: 0;
}

.news-prose {
	color: var(--sgp-color-ink);
	font: var(--sgp-weight-light) var(--sgp-text-20) var(--sgp-font);
}

.news-prose h2,
.news-prose h3,
.news-prose h4 {
	margin: var(--sgp-space-24) 0 var(--sgp-space-8);
	font: var(--sgp-weight-bold) var(--sgp-text-20) var(--sgp-font);
}

.news-prose > :first-child {
	margin-top: 0;
}

.news-prose strong,
.news-prose b {
	font-weight: var(--sgp-weight-bold);
}

.news-prose--webinar {
	font: var(--sgp-weight-regular) var(--sgp-text-16) var(--sgp-font);
}

.news-player {
	position: relative;
	overflow: hidden;
	border-radius: var(--sgp-radius-object);
	aspect-ratio: 16 / 9;
	background-color: var(--color-navy);
}

.news-player__poster {
	position: absolute;
	inset: 0;
}

.news-player__poster::after {
	position: absolute;
	inset: 0;
	background-color: var(--nr-scrim-player);
	content: "";
}

.news-player__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-white);
	cursor: pointer;
}

.news-player__play .sgp-icon {
	font-size: var(--nr-play);
	transition: transform var(--sgp-dur-short) var(--sgp-ease);
}

.news-player__play:hover .sgp-icon {
	transform: scale(1.06);
}

.news-player__play:focus-visible {
	outline: var(--sgp-focus-ring-width) solid var(--sgp-color-on-color);
	outline-offset: calc(-1 * var(--sgp-space-8));
}

.news-player iframe,
.news-player video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.news-player__register {
	margin: 0;
}

.news-post-nav {
	padding-bottom: var(--sgp-space-144);
}

.news-post-nav__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sgp-space-24);
	padding-top: var(--sgp-space-24);
	border-top: var(--border-1) solid var(--sgp-color-divider);
}

.news-post-nav__next {
	margin-left: auto;
}

/* ---------- Narrower screens: keep everything usable ---------- */

@media (max-width: 1024px) {
	.news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.news-event {
		flex-basis: calc((100% - var(--sgp-space-32)) / 2);
	}

	.news-home,
	.news-webinars {
		grid-template-columns: minmax(0, 1fr);
	}

	.news-feature {
		flex-direction: column;
	}

	.news-feature__media {
		flex-basis: auto;
		height: var(--nr-lead-media);
	}

	.news-row2 {
		grid-template-columns: minmax(0, 1fr) var(--nr-date-col);
	}

	.news-row2__author {
		display: none;
	}
}

@media (max-width: 767px) {
	.news-section {
		padding-top: var(--sgp-space-96);
	}

	.news-crumbs {
		padding-top: var(--sgp-space-64);
	}

	.news-crumbs ol {
		font: var(--sgp-weight-medium) var(--sgp-text-16) var(--sgp-font);
	}

	.news-head {
		flex-direction: column;
	}

	.news-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.news-event {
		flex-basis: 100%;
	}

	.news-side-card,
	.news-mini {
		flex-direction: column-reverse;
	}

	.news-side-card__body {
		padding: 0 var(--sgp-space-24) var(--sgp-space-24);
	}

	.news-side-card__media,
	.news-mini__media {
		flex-basis: var(--nr-thumb);
		border-radius: var(--sgp-radius-object) var(--sgp-radius-object) 0 0;
	}

	.news-mini__media {
		border-radius: var(--sgp-radius-selector);
	}

	.news-feature__body {
		padding: var(--sgp-space-24);
	}

	.news-row2 {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sgp-space-16);
	}

	.news-row2__date {
		order: -1;
		flex-direction: row;
	}

	.news-article .wrap {
		flex-direction: column;
	}

	.news-side {
		flex-basis: auto;
		order: 2;
	}

	.news-player__play .sgp-icon {
		font-size: var(--material-icon);
		transform: scale(3);
	}
}