/*
 * What the news sections share: the pills, the card, the grid and the pager.
 *
 * Read from cp-all-designer css/app.css:2075-2087 (.news__arrow, .news__empty),
 * 2093-2130 (.news__cats), 2241-2300 (.ncat, .ncard), and css/news.css:173-526
 * (.nls, the grid as the listing cuts it).
 *
 * Every selector starts with the band, so it outweighs the theme's own rules
 * for the lists, paragraphs and headings of a page's content.
 */

[data-custom-investor-band] {
	--custom-news-pill: #E8F4FB;
	--custom-news-pill-edge: rgba(22, 65, 140, 0.14);
	--custom-news-pill-ink: #16418C;
	--custom-news-pill-edge-on: #50A3D5;
	--custom-news-pill-now: #16418C;
	--custom-news-pill-now-ink: #FFFFFF;
	--custom-news-title: #16418C;
	--custom-news-title-on: #50A3D5;
	--custom-pager-ink: #16418C;
	--custom-pager-on-ink: #FFFFFF;
	--custom-pager-lit: #50A3D5;
	--custom-pager-dim-ink: #CBD5E1;
	--custom-pager-edge: #EEF2F7;
}

/* ------------------------------------------------------------------ */
/* The pills — app.css:2093-2100, 2241-2246; news.css:203              */
/* ------------------------------------------------------------------ */

[data-custom-investor-band] [data-custom-news-pills] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 0;
	border-bottom-width: 2px;              /* news.css:203 measures 1px */
	border-bottom-style: solid;
}

[data-custom-investor-band] [data-custom-news-pill] {
	--custom-press-ink: var(--custom-news-pill-ink);
	--custom-press-ground: var(--custom-news-pill);
	--custom-press-edge: var(--custom-news-pill-edge);
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	border-width: 2px;                     /* app.css:2241 measures 1px */
	border-style: solid;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-decoration: none;
	transition: border-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-custom-investor-band] a[data-custom-news-pill]:hover {
	--custom-press-edge: var(--custom-news-pill-edge-on);
	--custom-press-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm, app.css:145 */
}

[data-custom-investor-band] a[data-custom-news-pill].is-current,
[data-custom-investor-band] a[data-custom-news-pill].is-current:hover {
	--custom-press-ink: var(--custom-news-pill-now-ink);
	--custom-press-ground: var(--custom-news-pill-now);
	--custom-press-edge: var(--custom-news-pill-now);
}

[data-custom-investor-band] [data-custom-news-pill]:focus-visible {
	outline: 2px solid #50A3D5;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* The grid — news.css:173-526                                         */
/* ------------------------------------------------------------------ */

[data-custom-investor-band] [data-custom-news-grid] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* news.css:184-186 — the row arrives left to right */
[data-custom-investor-band] [data-custom-news-grid] > :nth-child(3n+2) {
	transition-delay: 80ms;
}

[data-custom-investor-band] [data-custom-news-grid] > :nth-child(3n+3) {
	transition-delay: 160ms;
}

/* ------------------------------------------------------------------ */
/* One card — app.css:2256-2292                                        */
/* ------------------------------------------------------------------ */

[data-custom-investor-band] [data-custom-news-card] {
	--custom-press-ink: inherit;
	--custom-press-ground: transparent;
	--custom-press-edge: transparent;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	text-decoration: none;
}

/* the card lifts when it is reached — app.css:2260; the reveal's own move is settled first */
[data-custom-investor-band] [data-custom-news-card][data-custom-reveal].is-in {
	transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-custom-investor-band] [data-custom-news-card][data-custom-reveal].is-in:hover {
	transform: translateY(-4px);
	transition-delay: 0s;
}

/* app.css:2262 — the picture's box holds its shape whether or not a picture is in it */
[data-custom-investor-band] [data-custom-news-card-picture] {
	position: relative;
	display: block;
	flex: 0 0 auto;
	aspect-ratio: 400 / 243;               /* news.css:181 */
	max-height: 340px;
	overflow: hidden;
}

[data-custom-investor-band] [data-custom-news-card-picture] > img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-custom-investor-band] [data-custom-news-card]:hover [data-custom-news-card-picture] > img {
	transform: scale(1.05);
}

/* the play mark of a film's card: a disc at the picture's middle on a soft
   dark halo, so it holds on a bright frame — news.css:395-427, app.css:2486-2502 */
[data-custom-investor-band] [data-custom-news-card-play] {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	margin: auto;
	border-radius: 50%;
	box-shadow: 0 12px 30px -10px rgba(14, 23, 41, 0.6);
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-custom-investor-band] [data-custom-news-card-play]::before {
	content: '';
	position: absolute;
	top: -22px;
	right: -22px;
	bottom: -22px;
	left: -22px;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(6, 11, 30, 0.38) 0%, rgba(6, 11, 30, 0) 70%);
}

[data-custom-investor-band] [data-custom-news-card-play] svg {
	display: block;
	margin-left: 2px;
	fill: currentColor;
}

[data-custom-investor-band] [data-custom-news-card]:hover [data-custom-news-card-play] {
	transform: scale(1.1);
}

[data-custom-investor-band] [data-custom-news-card-body] {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* app.css:2266-2268 */
[data-custom-investor-band] [data-custom-news-card-over] {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

[data-custom-investor-band] [data-custom-news-card-label] {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0;                     /* app.css:2270 measures 0.48px */
}

[data-custom-investor-band] [data-custom-news-card-date] {
	margin-left: auto;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: 0;
}

/* app.css:2287 — two lines at most */
[data-custom-investor-band] [data-custom-news-card-title] {
	display: -webkit-box;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	overflow: hidden;
	color: var(--custom-news-title);
	font-weight: 600;
	line-height: 1.36;
	letter-spacing: 0;                     /* app.css:2287 measures -0.18px */
	text-transform: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color 250ms ease;
}

[data-custom-investor-band] [data-custom-news-card]:hover [data-custom-news-card-title] {
	color: var(--custom-news-title-on);
}

/* app.css:2291 — two lines, and room for two whether or not they are filled */
[data-custom-investor-band] [data-custom-news-card-text] {
	display: -webkit-box;
	flex: 1 1 auto;
	min-height: 46px;                      /* two lines of 14px at 1.65 */
	margin: 0;
	overflow: hidden;
	font-weight: 300;
	line-height: 1.65;
	letter-spacing: 0;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* app.css:2087 */
[data-custom-investor-band] [data-custom-news-empty] {
	margin: 0;
	padding: 40px 0;
	color: #64748B;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* The pager — the standard's, served a page at a time                 */
/* ------------------------------------------------------------------ */

[data-custom-investor-band] [data-custom-news-pager] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

[data-custom-investor-band] [data-custom-news-pager-numbers] {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* a step, and a number: one disc — app.css:2080-2086 */
[data-custom-investor-band] [data-custom-news-pager-step],
[data-custom-investor-band] [data-custom-news-pager-number] {
	--custom-press-ink: var(--custom-pager-ink);
	--custom-press-ground: transparent;
	--custom-press-edge: transparent;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 46px;
	height: 46px;
	border-width: 2px;                     /* app.css:2081 measures 1px */
	border-style: solid;
	border-radius: 50%;
	text-decoration: none;
	transition: background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* the steps and the page being read are filled — news.css:224-226 */
[data-custom-investor-band] [data-custom-news-pager-step],
[data-custom-investor-band] [data-custom-news-pager-number][aria-current="page"] {
	--custom-press-ink: var(--custom-pager-on-ink);
	--custom-press-ground: var(--custom-pager-ink);
	--custom-press-edge: var(--custom-pager-ink);
}

@media (hover: hover) {
	[data-custom-investor-band] a[data-custom-news-pager-step]:hover,
	[data-custom-investor-band] a[data-custom-news-pager-number]:hover {
		--custom-press-ink: var(--custom-pager-on-ink);
		--custom-press-ground: var(--custom-pager-lit);
		--custom-press-edge: var(--custom-pager-lit);
	}
}

/* a step with nowhere to go keeps its place, emptied — news.css:228 */
[data-custom-investor-band] [data-custom-news-pager-step][data-custom-news-pager-off] {
	--custom-press-ink: var(--custom-pager-dim-ink);
	--custom-press-ground: #FFFFFF;
	--custom-press-edge: var(--custom-pager-edge);
	cursor: default;
}

[data-custom-investor-band] [data-custom-news-pager-step] svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

[data-custom-investor-band] [data-custom-news-pager] a:focus-visible {
	outline: 2px solid #50A3D5;
	outline-offset: 2px;
}

[data-custom-investor-band] [data-custom-news-pager-break] {
	color: var(--custom-pager-ink);
}

[data-custom-investor-band] [data-custom-news-pager-field] {
	--custom-field-ink: var(--custom-pager-ink);
	box-sizing: border-box;
	width: 86px;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 2px solid var(--custom-pager-edge);
	border-radius: 1000px;
	background-color: #FFFFFF;
	color: var(--custom-pager-ink);
	font: inherit;
	text-align: center;
	box-shadow: none;
}

[data-custom-investor-band] [data-custom-news-pager-field]:focus {
	border-color: var(--custom-pager-ink);
	outline: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (news.css:510-516, drawn at 991)           */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	[data-custom-investor-band] [data-custom-news-grid] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	[data-custom-investor-band] [data-custom-news-grid] > :nth-child(3n+2),
	[data-custom-investor-band] [data-custom-news-grid] > :nth-child(3n+3) {
		transition-delay: 0ms;
	}
	[data-custom-investor-band] [data-custom-news-grid] > :nth-child(2n) {
		transition-delay: 80ms;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (app.css:2355-2357, 3040-3044; news.css:518)   */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	[data-custom-investor-band] [data-custom-news-grid] {
		grid-template-columns: minmax(0, 1fr);
	}
	[data-custom-investor-band] [data-custom-news-grid] > :nth-child(n) {
		transition-delay: 0ms;
	}
	/* the description is the first thing to go */
	[data-custom-investor-band] [data-custom-news-card-text] {
		display: none;
	}
	[data-custom-investor-band] [data-custom-news-pager],
	[data-custom-investor-band] [data-custom-news-pager-numbers] {
		gap: 4px;
	}
	[data-custom-investor-band] [data-custom-news-pager-step],
	[data-custom-investor-band] [data-custom-news-pager-number] {
		width: 36px;
		height: 36px;
	}
	[data-custom-investor-band] [data-custom-news-pager-step] svg {
		width: 18px;
		height: 18px;
	}
	[data-custom-investor-band] [data-custom-news-pager-field] {
		width: 60px;
		height: 36px;
		padding: 0 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-custom-investor-band] [data-custom-news-pill],
	[data-custom-investor-band] [data-custom-news-card-picture] > img,
	[data-custom-investor-band] [data-custom-news-card-play],
	[data-custom-investor-band] [data-custom-news-card-title],
	[data-custom-investor-band] [data-custom-news-pager-step],
	[data-custom-investor-band] [data-custom-news-pager-number] {
		transition: none;
	}
	[data-custom-investor-band] [data-custom-news-card][data-custom-reveal].is-in:hover {
		transform: none;
	}
	[data-custom-investor-band] [data-custom-news-card]:hover [data-custom-news-card-picture] > img,
	[data-custom-investor-band] [data-custom-news-card]:hover [data-custom-news-card-play] {
		transform: none;
	}
}
