/*
 * Long Read single template styles.
 * Loaded by single-long_read.php with "trust-css" as dependency.
 *
 * All measurements are converted from the original site, which uses a 10px
 * root rem scale, to their px equivalents on the theme 16px scale.
 *
 * Icon paths are relative to this file, which sits in the theme root, so they
 * resolve against /wp-content/themes/trust/image/.
 *
 * Namespace: ctx-lr
 */

.ctx-lr {
	--ctx-lr-blue-dark: var(--ctx-blue-deep, #004a7c);
	--ctx-lr-blue: var(--ctx-blue-accent, #006daa);
	--ctx-lr-rule: #ddd;
	--ctx-lr-caption: #707070;
	--ctx-lr-text: #000;
	--ctx-lr-page-background: #f6f6f6;
	--ctx-lr-text-width: 900px;
	--ctx-lr-media-width: 1116px;

	font-family: var(--fontfamily-body);
	background-color: var(--ctx-lr-page-background);
}

/*
 * The theme compensates for the site header with #primary { margin-top: 138px },
 * a value taller than the header itself. long-read.js replaces it with two
 * measured custom properties on the document root:
 *
 * --ctx-lr-header-height  the real header height, always
 * --ctx-lr-header-offset  the same height when the header is taken out of the
 *                         flow (fixed or sticky), otherwise 0, because a header
 *                         that is still in the flow already occupies its space
 *
 * The offset falls back to 0 so that nothing is pushed down before the script
 * runs.
 */
main#primary.ctx-lr {
	margin-top: 0;
	padding-top: var(--ctx-lr-header-offset, 0px);
}

.ctx-lr__article {
	margin: 0;
}

.ctx-lr img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.ctx-lr-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: calc(100vh - var(--ctx-lr-header-height, 138px));
	overflow: hidden;
}

.ctx-lr-hero__media {
	position: absolute;
	inset: 0;
}

.ctx-lr-hero__image,
.ctx-lr-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.ctx-lr-hero__video {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ctx-lr-hero__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border: 0;
}

.ctx-lr-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(68, 68, 68, 0), rgba(0, 0, 0, 0.4));
}

.ctx-lr-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--ctx-max-width, 1400px);
	margin: 0 auto;
	padding: 0 var(--ctx-pad-x, 3rem) 24px;
}

.ctx-lr-hero__title {
	max-width: 100%;
	margin: 20px 0 29px;
	color: #fff;
	font-family: var(--fontfamily-headings);
	font-size: 36px;
	line-height: 43px;
	font-weight: 700;
}

.ctx-lr-hero__byline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

@media (min-width: 640px) {
	.ctx-lr-hero__inner {
		padding-bottom: 34px;
	}

	.ctx-lr-hero__title {
		max-width: 577px;
		margin: 20px 0;
		font-size: 38px;
		line-height: 45px;
	}
}

@media (min-width: 900px) {
	.ctx-lr-hero__inner {
		padding-bottom: 47px;
	}

	.ctx-lr-hero__title {
		max-width: 802px;
		margin: 14px 0 20px;
		font-size: 53px;
		line-height: 64px;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-hero__title {
		max-width: 1108px;
		margin: 20px 0;
	}
}

/* Byline
   ------------------------------------------------------------------------ */

.ctx-lr-byline {
	margin: 0;
	color: #fff;
	font-size: 14px;
	line-height: 23px;
	font-weight: 600;
}

.ctx-lr-byline__author {
	display: inline-block;
	margin-right: 5px;
	line-height: 35px;
}

.ctx-lr-byline__author a,
.ctx-lr-byline__author a:visited,
.ctx-lr-byline__author a:hover,
.ctx-lr-byline__author a:focus,
.ctx-lr-byline__author a:active {
	color: #fff;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.ctx-lr-byline__divider {
	margin: 0 7px;
}

.ctx-lr-byline__org {
	margin-right: 5px;
}

/* The "Updated:" label and the organisation are desktop only in the original. */
.ctx-lr-byline__updated-label,
.ctx-lr-byline__divider,
.ctx-lr-byline__org {
	display: none;
}

@media (min-width: 640px) {
	.ctx-lr-byline__updated-label,
	.ctx-lr-byline__divider,
	.ctx-lr-byline__org {
		display: inline;
	}
}

/* Share
   ------------------------------------------------------------------------ */

/* Trigger in the hero: opens the share modal through the :target pseudo class. */
.ctx-lr-share,
.ctx-lr-share:visited,
.ctx-lr-share:hover,
.ctx-lr-share:focus,
.ctx-lr-share:active {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-left: -4px;
	margin-bottom: 8px;
	color: #fff;
}

.ctx-lr-share__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.ctx-lr-share__icon img {
	display: block;
	width: 20px;
	height: 20px;
}

.ctx-lr-share__label {
	margin-left: 8px;
	font-size: 16px;
	font-weight: 700;
	border-bottom: 1px solid transparent;
}

.ctx-lr-share:hover .ctx-lr-share__label {
	border-bottom-color: currentColor;
}

/* ==========================================================================
   Container
   ========================================================================== */

/*
 * Vertical spacing is padding, not margin: a bottom margin here collapses
 * through .site-main and leaves an unpainted gap above the footer.
 */
.ctx-lr-container {
	width: 100%;
	max-width: var(--ctx-max-width, 1400px);
	margin: 0 auto;
	padding: 20px var(--ctx-pad-x, 3rem);
}

@media (min-width: 900px) {
	.ctx-lr-container {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-container {
		padding-top: 30px;
		padding-bottom: 30px;
	}
}

/* The gutter tracks --ctx-pad-x (header.css) at every width, so the hero title
   and the body copy line up with the burger and the search icon. Above the
   container width the automatic margins already clear the viewport edges, so
   the side padding is dropped. Mirrors the reset the header and the footer
   apply at this breakpoint. */
@media (min-width: 1500px) {
	.ctx-lr-hero__inner,
	.ctx-lr-container {
		padding-left: 0;
		padding-right: 0;
	}
}

.ctx-lr-divider {
	width: 100%;
	margin: 20px 0;
	border: none;
	border-bottom: 1px solid var(--ctx-lr-rule);
	opacity: 1;
}

@media (min-width: 1200px) {
	.ctx-lr-divider {
		margin: 30px 0;
	}
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.ctx-lr-breadcrumb {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	min-height: 50px;
}

@media (min-width: 640px) {
	.ctx-lr-breadcrumb {
		padding-bottom: 5px;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-breadcrumb {
		padding-bottom: 0;
	}
}

.ctx-lr-breadcrumb__item {
	display: flex;
	align-items: center;
	margin-right: 18px;
}

/* Below 640px only the last chip is shown, preceded by the round back button. */
.ctx-lr-breadcrumb__item:not(:last-of-type) {
	display: none;
}

@media (min-width: 640px) {
	.ctx-lr-breadcrumb__item:not(:last-of-type) {
		display: flex;
	}
}

.ctx-lr-breadcrumb__chip,
.ctx-lr-breadcrumb__chip:visited,
.ctx-lr-breadcrumb__chip:hover,
.ctx-lr-breadcrumb__chip:focus,
.ctx-lr-breadcrumb__chip:active {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 11px 20px;
	border-radius: 6px;
	background-color: var(--ctx-lr-blue-dark);
	color: #fff;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	white-space: nowrap;
	text-transform: capitalize;
}

@media (min-width: 640px) {
	.ctx-lr-breadcrumb__chip,
	.ctx-lr-breadcrumb__chip:visited,
	.ctx-lr-breadcrumb__chip:hover,
	.ctx-lr-breadcrumb__chip:focus,
	.ctx-lr-breadcrumb__chip:active {
		padding: 12px 20px;
		font-size: 16px;
		line-height: 22px;
	}
}

.ctx-lr-breadcrumb__chevron {
	display: flex;
	align-items: center;
	width: 10px;
	margin-left: 18px;
}

.ctx-lr-breadcrumb__chevron img {
	display: block;
	width: 100%;
	height: auto;
}

/* Round back button, mobile only: the same chevron asset, flipped and forced to
   white so it reads on the dark blue circle. */
.ctx-lr-breadcrumb__back,
.ctx-lr-breadcrumb__back:visited,
.ctx-lr-breadcrumb__back:hover,
.ctx-lr-breadcrumb__back:focus,
.ctx-lr-breadcrumb__back:active {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	border-radius: 50%;
	background-color: var(--ctx-lr-blue-dark);
}

.ctx-lr-breadcrumb__back::before {
	content: "";
	width: 8px;
	height: 12px;
	background: url(/wp-content/themes/trust/image/icon-breadcrumb-chevron.svg) no-repeat 50% / contain;
	filter: brightness(0) invert(1);
	transform: rotate(180deg);
}

@media (min-width: 640px) {
	.ctx-lr-breadcrumb__back {
		display: none;
	}
}

/* Display is declared on its own: putting it in the state list would make the
   :hover rule outrank the media query and hide the button on hover. */
.ctx-lr-breadcrumb__more,
.ctx-lr-breadcrumb__more:visited,
.ctx-lr-breadcrumb__more:focus,
.ctx-lr-breadcrumb__more:active {
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;
	top: 0;
	height: 50px;
	padding: 0 25px;
	color: var(--ctx-lr-blue);
	background-color: unset;
	border: 1px solid var(--ctx-lr-blue);
	border-radius: 2px;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
}

.ctx-lr-breadcrumb__more {
	display: none;
}

@media (min-width: 900px) {
	.ctx-lr-breadcrumb__more {
		display: flex;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-breadcrumb__more {
		padding: 0 30px;
	}
}

/* Hover only underlines and shifts the label colour; the border stays put. */
.ctx-lr-breadcrumb__more:hover {
	color: rgb(10, 88, 202);
	text-decoration: underline !important;
}

/* ==========================================================================
   What's the context
   ========================================================================== */

.ctx-lr-summary {
	max-width: var(--ctx-lr-text-width);
	margin: 0 auto;
}

.ctx-lr-summary__title {
	margin: 0 0 12px;
	font-family: var(--fontfamily-headings);
	font-size: 17px;
	line-height: 26px;
	font-weight: 700;
	color: var(--ctx-lr-text);
}

.ctx-lr-summary__text {
	margin: 0;
	font-size: 16px;
	line-height: 28px;
	font-weight: 500;
	color: var(--ctx-lr-text);
}

.ctx-lr-summary__divider {
	width: 100%;
	margin: 20px 0;
	border: none;
	border-bottom: 1px solid #000;
	opacity: 1;
}

@media (min-width: 640px) {
	.ctx-lr-summary__title {
		margin-bottom: 20px;
		font-size: 21px;
		line-height: 31px;
	}

	.ctx-lr-summary__text {
		font-size: 18px;
		line-height: 32px;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-summary__divider {
		margin: 30px 0;
	}
}

/* ==========================================================================
   Body text
   ========================================================================== */

.ctx-lr-text {
	width: 100%;
	max-width: var(--ctx-lr-text-width);
	margin: 0 auto;
}

.ctx-lr-text p {
	margin: 0 0 14px;
	color: var(--ctx-lr-text);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
}

.ctx-lr-text ol,
.ctx-lr-text ul {
	margin: 14px 25px;
	padding: 0;
	list-style-type: disc;
}

.ctx-lr-text li {
	margin-bottom: 14px;
	color: var(--ctx-lr-text);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	list-style-position: outside;
}

.ctx-lr-text h1,
.ctx-lr-text h2,
.ctx-lr-text h3,
.ctx-lr-text h4,
.ctx-lr-text h5,
.ctx-lr-text h6 {
	margin: 0 0 14px;
	color: var(--ctx-lr-text);
	font-size: 18px;
	line-height: 32px;
	font-weight: 600;
}

/* trf.css declares "text-decoration: none !important" on every link state at
   specificity (0,1,1). These rules win on specificity, so the underline has to
   be restated with !important as well. */
.ctx-lr-text a,
.ctx-lr-text a:visited,
.ctx-lr-text a:hover,
.ctx-lr-text a:focus,
.ctx-lr-text a:active {
	color: var(--ctx-lr-text);
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

@media (min-width: 640px) {
	.ctx-lr-text p,
	.ctx-lr-text li {
		font-size: 18px;
		line-height: 31px;
	}

	.ctx-lr-text h1,
	.ctx-lr-text h2,
	.ctx-lr-text h3,
	.ctx-lr-text h4,
	.ctx-lr-text h5,
	.ctx-lr-text h6 {
		margin-bottom: 18px;
		font-size: 20px;
		line-height: 36px;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-text p {
		margin-bottom: 18px;
	}

	.ctx-lr-text li {
		margin-bottom: 12px;
	}

	.ctx-lr-text ol,
	.ctx-lr-text ul {
		margin-top: 18px;
		margin-bottom: 18px;
	}
}

.ctx-lr-quote {
	width: 100%;
	max-width: var(--ctx-lr-text-width);
	margin: 22px auto;
	padding: 25px 0 30px;
	border-top: 1px solid var(--ctx-lr-rule);
	border-bottom: 1px solid var(--ctx-lr-rule);
	color: var(--ctx-lr-text);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
}

@media (min-width: 640px) {
	.ctx-lr-quote {
		margin: 30px auto 28px;
		padding: 37px 0;
		font-size: 23px;
		line-height: 40px;
		font-weight: 500;
	}
}

/* ==========================================================================
   Figures, video, collage
   ========================================================================== */

.ctx-lr-figure,
.ctx-lr-video,
.ctx-lr-embed {
	width: 100%;
	max-width: var(--ctx-lr-media-width);
	margin: 21px auto 15px;
}

@media (min-width: 640px) {
	.ctx-lr-figure,
	.ctx-lr-video,
	.ctx-lr-embed {
		margin-top: 25px;
		margin-bottom: 20px;
	}
}

.ctx-lr-figure__media {
	position: relative;
	width: 100%;
	aspect-ratio: 100 / 58;
	overflow: hidden;
	line-height: 0;
}

.ctx-lr-figure__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.ctx-lr-figure__caption,
.ctx-lr-collage__caption {
	max-width: var(--ctx-lr-text-width);
	margin-top: 10px;
	color: var(--ctx-lr-caption);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
}

@media (min-width: 640px) {
	.ctx-lr-figure__caption,
	.ctx-lr-collage__caption {
		margin-top: 16px;
		font-size: 15px;
		line-height: 23px;
	}
}

.ctx-lr-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.ctx-lr-video__frame {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Blue play button drawn over the embed, as on the original.
   long-read.js adds .is-playing on click, which removes it. */
.ctx-lr-video__overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	padding: 0;
	transform: translate(-50%, -50%);
	background-color: var(--ctx-lr-blue);
	border: none;
	cursor: pointer;
}

.ctx-lr-video__overlay::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 24px solid #fff;
}

.ctx-lr-video.is-playing .ctx-lr-video__overlay,
.ctx-lr-video:focus-within .ctx-lr-video__overlay {
	display: none;
}

@media (min-width: 640px) {
	.ctx-lr-video__overlay {
		width: 92px;
		height: 92px;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-video__overlay {
		width: 125px;
		height: 125px;
	}

	.ctx-lr-video__overlay::after {
		border-top-width: 20px;
		border-bottom-width: 20px;
		border-left-width: 34px;
	}
}

/* Collage: stacked items on the left third, feature item on the right two thirds. */
.ctx-lr-collage {
	width: 100%;
	max-width: var(--ctx-lr-media-width);
	margin: 21px auto 14px;
}

.ctx-lr-collage__grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 4px;
}

.ctx-lr-collage__column {
	display: grid;
	gap: 4px;
	align-content: start;
}

.ctx-lr-collage__item {
	position: relative;
	width: 100%;
	aspect-ratio: 100 / 58;
	overflow: hidden;
	line-height: 0;
}

.ctx-lr-collage__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.ctx-lr-collage__caption {
	margin-bottom: 21px;
}

.ctx-lr-collage--2 .ctx-lr-collage__grid {
	grid-template-columns: 1fr 1fr;
}

@media (min-width: 640px) {
	.ctx-lr-collage {
		margin: 30px auto 16px;
	}

	.ctx-lr-collage__grid,
	.ctx-lr-collage__column {
		gap: 8px;
	}

	.ctx-lr-collage__caption {
		margin-bottom: 30px;
	}
}

@media (min-width: 900px) {
	.ctx-lr-collage__grid,
	.ctx-lr-collage__column {
		gap: 10px;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-collage__grid,
	.ctx-lr-collage__column {
		gap: 15px;
	}
}

/* ==========================================================================
   Chapter heading
   ========================================================================== */

.ctx-lr-chapter {
	width: 100%;
	max-width: var(--ctx-lr-text-width);
	margin: 0 auto;
}

.ctx-lr-chapter__rule {
	width: 100%;
	margin: 24px 0 17px;
	border: none;
	border-bottom: 11px solid #000;
	opacity: 1;
}

.ctx-lr-chapter__title {
	margin: 0 0 14px;
	font-family: var(--fontfamily-headings);
	font-size: 26px;
	line-height: 34px;
	font-weight: 600;
	color: var(--ctx-lr-text);
}

@media (min-width: 640px) {
	.ctx-lr-chapter__rule {
		margin: 24px 0;
	}

	.ctx-lr-chapter__title {
		margin-bottom: 17px;
		font-size: 36px;
		line-height: 46px;
	}
}

/* ==========================================================================
   Section titles
   ========================================================================== */

.ctx-lr-section-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 20px;
}

.ctx-lr-section-title__text {
	position: relative;
	margin: 0;
	padding-left: 17px;
	padding-right: 20px;
	font-family: var(--fontfamily-body);
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--ctx-lr-text);
}

.ctx-lr-section-title__text::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 8px;
	height: 13px;
	background-color: var(--ctx-lr-blue-dark);
}

@media (min-width: 640px) {
	.ctx-lr-section-title {
		margin-bottom: 25px;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-section-title {
		margin-bottom: 28px;
	}
}

/* ==========================================================================
   Tags
   ========================================================================== */

.ctx-lr-tags__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	row-gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ctx-lr-tags__item {
	display: flex;
	margin-right: 14px;
}

.ctx-lr-tags__link,
.ctx-lr-tags__link:visited,
.ctx-lr-tags__link:hover,
.ctx-lr-tags__link:focus,
.ctx-lr-tags__link:active {
	padding: 12px 16px;
	color: var(--ctx-lr-text);
	background: transparent;
	border: 1px solid var(--ctx-lr-text);
	border-radius: 5px;
	font-size: 13px;
	line-height: 19px;
	font-weight: 600;
	text-transform: uppercase;
}

/* Hover matches the More Long Reads button: underline and the same deep blue. */
.ctx-lr-tags__link:hover {
	color: rgb(10, 88, 202);
	text-decoration: underline !important;
}

@media (min-width: 640px) {
	.ctx-lr-tags__list {
		row-gap: 20px;
	}

	.ctx-lr-tags__item {
		margin-right: 20px;
		margin-bottom: 5px;
	}

	.ctx-lr-tags__link,
	.ctx-lr-tags__link:visited,
	.ctx-lr-tags__link:hover,
	.ctx-lr-tags__link:focus,
	.ctx-lr-tags__link:active {
		padding: 12px 20px;
		font-size: 15px;
		line-height: 21px;
	}
}

/* ==========================================================================
   Bottom rails
   ========================================================================== */

.ctx-lr-rail__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

/*
 * Mobile card: image on the left, kicker and title stacked on the right.
 * The third row absorbs the leftover height of the image.
 */
.ctx-lr-card {
	display: grid;
	grid-template-columns: 157px 1fr;
	grid-template-areas:
		"media kicker"
		"media title"
		"media .";
	column-gap: 13px;
	align-content: start;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ctx-lr-rule);
}

.ctx-lr-rail__grid .ctx-lr-card:last-of-type {
	padding-bottom: 0;
	border-bottom: none;
}

.ctx-lr-card__media {
	grid-area: media;
	align-self: start;
	width: 100%;
	aspect-ratio: 100 / 66;
	overflow: hidden;
	line-height: 0;
}

.ctx-lr-card--portrait .ctx-lr-card__media {
	aspect-ratio: 1 / 1.31;
}

.ctx-lr-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Solid badge, matching the original: white uppercase label on #004a7c. */
.ctx-lr-card__kicker,
.ctx-lr-card__kicker:visited,
.ctx-lr-card__kicker:hover,
.ctx-lr-card__kicker:focus,
.ctx-lr-card__kicker:active {
	grid-area: kicker;
	justify-self: start;
	align-self: start;
	margin-bottom: 8px;
	padding: 4px 8px;
	background-color: var(--ctx-lr-blue-dark);
	color: #fff;
	border-radius: 4px;
	font-size: 11px;
	line-height: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Placeholder that keeps the kicker row in place on cards without a term. */
.ctx-lr-card__kicker--empty {
	background-color: transparent;
	padding: 4px 0;
}

.ctx-lr-card__title {
	grid-area: title;
	align-self: start;
	margin: 0;
	font-family: var(--fontfamily-headings);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
}

.ctx-lr-card__title a,
.ctx-lr-card__title a:visited,
.ctx-lr-card__title a:hover,
.ctx-lr-card__title a:focus,
.ctx-lr-card__title a:active {
	color: var(--ctx-lr-text);
}

.ctx-lr-card__title a:hover {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* Opinion pieces carry the double quote glyph before the headline. */
.ctx-lr-card--opinion .ctx-lr-card__title a::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 14px;
	margin-right: 8px;
	background: url(/wp-content/themes/trust/image/icon-double-quote.svg) no-repeat 50% / contain;
}

@media (min-width: 640px) {
	.ctx-lr-rail__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	/*
	 * From here the card is a single column: image, kicker, title. The rail grid
	 * exposes its rows to the cards with subgrid so that kickers and titles line
	 * up across the row even when headlines wrap to a different number of lines.
	 */
	.ctx-lr-card {
		grid-template-columns: 1fr;
		grid-template-areas: none;
		padding-bottom: 0;
		border-bottom: none;
	}

	.ctx-lr-card__media,
	.ctx-lr-card__kicker,
	.ctx-lr-card__title {
		grid-area: auto;
	}

	.ctx-lr-card__media {
		margin-bottom: 18px;
		aspect-ratio: 100 / 64;
	}

	.ctx-lr-card--portrait .ctx-lr-card__media {
		aspect-ratio: 1 / 1.31;
	}

	.ctx-lr-card__title {
		font-size: 19px;
		line-height: 27px;
	}

	@supports (grid-template-rows: subgrid) {
		.ctx-lr-rail__grid {
			grid-template-rows: repeat(2, auto auto auto);
		}

		.ctx-lr-card {
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0;
		}
	}
}

@media (min-width: 900px) {
	.ctx-lr-card__media {
		margin-bottom: 21px;
	}

	.ctx-lr-card__title {
		font-size: 20px;
		line-height: 30px;
	}
}

@media (min-width: 1200px) {
	.ctx-lr-rail__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ctx-lr-card__media {
		margin-bottom: 17px;
	}

	@supports (grid-template-rows: subgrid) {
		.ctx-lr-rail__grid {
			grid-template-rows: auto auto auto;
		}
	}
}

/* ==========================================================================
   Share modal
   Same component and class names as the podcast episode template: opened with
   the :target pseudo class, so only the copy to clipboard control needs script.
   ========================================================================== */

.ctx-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: calc(var(--ctx-z-popup, 9999) + 1);
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.ctx-modal:target {
	display: flex;
}

.ctx-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.ctx-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
}

.ctx-modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 28px;
	background-color: var(--ctx-navy-page, #00213f);
}

.ctx-modal__title {
	margin: 0;
	color: #fff;
	font-family: var(--fontfamily-headings);
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
}

.ctx-modal__close {
	display: block;
	width: 18px;
	height: 18px;
	background: url(/wp-content/themes/trust/image/icon-cross-search.svg) no-repeat 50% / contain;
	filter: brightness(0) invert(1);
}

.ctx-share__media {
	width: 100%;
	aspect-ratio: 100 / 58;
	overflow: hidden;
	line-height: 0;
}

.ctx-share__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.ctx-share__headline {
	margin: 0;
	padding: 24px 28px 0;
	color: var(--ctx-lr-text);
	font-family: var(--fontfamily-headings);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

.ctx-share__copy {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 16px 28px 0;
}

.ctx-copy-url {
	padding: 0;
	background: none;
	border: none;
	color: var(--ctx-lr-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ctx-copy-url__feedback {
	margin-left: 12px;
	padding: 2px 8px;
	background: #eee;
	color: #333;
	border-radius: 2px;
	font-size: 13px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ctx-copy-url__feedback.is-visible {
	opacity: 1;
}

.ctx-share__links {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 24px 28px 32px;
	list-style: none;
}

.ctx-share__links li {
	margin: 0;
}

.ctx-share__link {
	display: block;
	line-height: 0;
}

.ctx-share__link img {
	display: block;
	width: 48px;
	height: 48px;
}

@media (max-width: 639.98px) {
	.ctx-modal {
		padding: 0;
	}

	.ctx-modal__dialog {
		max-width: none;
		max-height: 100vh;
	}

	.ctx-share__headline {
		font-size: 20px;
		line-height: 28px;
	}
}

/* ==========================================================================
   Dark variant (custom_template = dark)
   ========================================================================== */

.ctx-lr--dark {
	--ctx-lr-text: #fff;
	--ctx-lr-rule: rgba(215, 240, 255, 0.15);
	--ctx-lr-caption: #ccc;
	--ctx-lr-page-background: var(--ctx-navy-page, #00213f);
}

.ctx-lr--dark .ctx-lr-summary__divider,
.ctx-lr--dark .ctx-lr-chapter__rule {
	border-bottom-color: #fff;
}

.ctx-lr--dark .ctx-lr-section-title__text::before {
	background-color: #f3cf56;
}

.ctx-lr--dark .ctx-lr-tags__link,
.ctx-lr--dark .ctx-lr-tags__link:visited,
.ctx-lr--dark .ctx-lr-tags__link:hover,
.ctx-lr--dark .ctx-lr-tags__link:focus,
.ctx-lr--dark .ctx-lr-tags__link:active {
	color: #fff;
	border-color: #fff;
}

.ctx-lr--dark .ctx-lr-breadcrumb__more,
.ctx-lr--dark .ctx-lr-breadcrumb__more:visited,
.ctx-lr--dark .ctx-lr-breadcrumb__more:hover,
.ctx-lr--dark .ctx-lr-breadcrumb__more:focus,
.ctx-lr--dark .ctx-lr-breadcrumb__more:active {
	color: #fff;
	border-color: #fff;
}

.ctx-lr--dark .ctx-lr-breadcrumb__more:hover {
	text-decoration: underline !important;
}

/* Sponsorship in the hero. Only active partners change the byline layout. */
.ctx-lr .ctx-lr-partner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	height: fit-content;
	width: 100%;
	color: #fff;
}
.ctx-lr .ctx-lr-partner__label {
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
	color: #fff;
	margin: 0 8px -6px 0;
}
.ctx-lr .ctx-lr-partner__identity {
	display: inline-block;
	color: #fff;
	flex-shrink: 0;
}
.ctx-lr .ctx-lr-partner__logo {
	display: flex;
	position: relative;
	box-sizing: border-box;
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 40px;
	padding-left: 8px;
}
.ctx-lr .ctx-lr-partner__name {
	display: inline-block;
	padding-left: 8px;
	font-size: 12px;
	line-height: 18px;
}
@media (max-width: 639.98px) {
	.ctx-lr .ctx-lr-partner {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding-top: 21px;
		margin-top: 23.7px;
	}
}
@media (min-width: 640px) {
	.ctx-lr .ctx-lr-partner__logo { max-height: 50px; padding-left: 10px; }
	.ctx-lr .ctx-lr-partner__name { padding-left: 10px; }
}
@media (min-width: 900px) {
	.ctx-lr .ctx-lr-hero__byline--partner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.ctx-lr .ctx-lr-hero__byline--partner > .ctx-lr-byline { min-width: 0; }
	.ctx-lr .ctx-lr-partner { width: auto; flex-shrink: 0; margin-left: 20px; }
}
@media (min-width: 1200px) {
	.ctx-lr .ctx-lr-partner__logo { padding-left: 13.7px; }
	.ctx-lr .ctx-lr-partner__name { padding-left: 13.7px; }
}