/* SEO-382: FRU News video pages. The hub grid, the watch page and the inline player card share these rules.
   Scoped to the three FRU News containers so nothing on the rest of the site changes. */

/* The same wrapper the other public pages give their content: a readable width, side padding, and room below
   the fixed header (without it the heading sat under the header and the text touched the screen edge). */
.pageSection.fruNewsHub,
.pageSection.fruNewsEpisode {
	max-width: 1080px;
	margin: 0 auto;
	padding: 24px 16px 40px;
}

.pageSection.fruNewsEpisode {
	max-width: 860px;
}

.pageSection.fruNewsHub h1,
.pageSection.fruNewsEpisode h1 {
	margin: 0 0 14px;
}

.pageSection.fruNewsHub > p,
.pageSection.fruNewsEpisode > p {
	margin: 0 0 12px;
	line-height: 1.55;
}

.pageSection.fruNewsHub h2 {
	margin: 28px 0 16px;
	font-size: 1.5rem;
}

.pageSection.fruNewsEpisode h2 {
	margin: 28px 0 12px;
}

.fruNewsHub .fruNewsList {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 24px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.fruNewsHub .fruNewsCard {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #fff;
	border: 1px solid #dbe2ea;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

.fruNewsHub .fruNewsCardMedia {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #0f172a;
}

.fruNewsHub .fruNewsCardMedia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fruNewsHub .fruNewsCardPlay {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.72);
}

.fruNewsHub .fruNewsCardPlay::after {
	content: "";
	position: absolute;
	top: 15px;
	left: 20px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

.fruNewsHub .fruNewsCardDuration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(15, 23, 42, 0.82);
	color: #fff;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.fruNewsHub .fruNewsCardBody {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px 18px 18px;
}

.fruNewsEpisode .fruNewsKicker {
	margin: 0 0 8px;
	color: #475569;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fruNewsHub .fruNewsCardTitle {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.fruNewsHub .fruNewsCardTitle a {
	text-decoration: none;
}

.fruNewsHub .fruNewsCardTitle a:hover,
.fruNewsHub .fruNewsCardTitle a:focus {
	text-decoration: underline;
}

.fruNewsHub .fruNewsCardBody p {
	margin: 0 0 12px;
	color: #475569;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.fruNewsHub .fruNewsCardLinks {
	margin: auto 0 0;
	padding-top: 4px;
	font-weight: 600;
}

.fruNewsEpisode .fruNewsPlayer,
.fruNewsEmbed .fruNewsEmbedPlayer {
	display: block;
	width: 100%;
	max-width: 780px;
	border-radius: 10px;
	background: #000;
}

.fruNewsEmbed {
	max-width: 820px;
	margin: 24px 0;
	padding: 20px;
	background: #f8fafc;
	border: 1px solid #dbe2ea;
	border-radius: 12px;
}

.fruNewsEmbed h2 {
	margin: 0 0 14px;
	font-size: 1.25rem;
	line-height: 1.3;
}

.fruNewsEmbed .fruNewsEmbedMeta,
.fruNewsEpisode .fruNewsMeta,
.fruNewsEpisode .fruNewsSource {
	margin: 12px 0 0;
	color: #475569;
	font-size: 0.875rem;
	line-height: 1.5;
}

.fruNewsMoments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.fruNewsMoments li {
	margin: 0;
}

.fruNewsMoments a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
}

.fruNewsMoments a:hover,
.fruNewsMoments a:focus {
	border-color: #94a3b8;
	background: #f1f5f9;
}

.fruNewsMoments .fruNewsMomentTime {
	margin-right: 6px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.fruNewsEmbed .fruNewsEmbedTranscript {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #e2e8f0;
}

.fruNewsEmbed .fruNewsEmbedTranscript summary {
	cursor: pointer;
	font-weight: 600;
}

.fruNewsEmbed .fruNewsEmbedTranscript p {
	margin: 10px 0 0;
	color: #334155;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* The length is shown on the thumbnail (hidden from screen readers with its duplicate link), so the video link says it too. */
.fruNewsSrOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 600px) {
	.fruNewsEmbed {
		padding: 14px;
	}

	.fruNewsHub .fruNewsList {
		grid-template-columns: 1fr;
	}
}