/*
 * About and Investments pages: page titles, five key figures, the icon list (C13) and
 * icon grid, the timeline (C14), the transactions row (C19) and the financing wheel (C21).
 * Markup comes from inc/components/about.php.
 *
 * The two rows are scroll-snap containers that take a tab stop (set at render time) so the
 * arrow keys scroll them; assets/js/scroll-row.js adds previous and next buttons (styled in
 * theme.css, and here for the timeline). The only motion is the financing wheel's segments
 * popping out (assets/js/financing-wheel.js), which reduced motion turns off.
 */

/* ---------------------------------------------------------- Page titles */

/* A page whose h1 is a section title (Investments) shows it at the size of the other h2s. */
.nlc-title--page > h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.25;
}

/* A section whose title sits above a full-width split: the split brings its own padding. */
.nlc-section--lead { padding-bottom: var(--wp--preset--spacing--40); }

/* ----------------------------------------------------------- Key figures */

/* Five figures in a row on desktop, three and two on tablets, two by two on phones. */
.nlc-section--figures .nlc-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.nlc-section--figures .nlc-stat { flex: 1 1 0; min-width: 0; }
.nlc-section--figures .nlc-stat__value { font-size: clamp(1.75rem, 4.2cqi, 3.25rem); }
@media (max-width: 1099px) {
	.nlc-section--figures .nlc-stat { flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3); }
	.nlc-section--figures .nlc-stat__value { font-size: clamp(1.75rem, 6.5cqi, 3.25rem); }
}
@media (max-width: 599px) {
	.nlc-section--figures .nlc-stat { flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2); }
	.nlc-section--figures .nlc-stat__value { font-size: clamp(1.5rem, 8.5cqi, 2.25rem); }
	.nlc-section--figures .nlc-stat__label { font-size: var(--wp--preset--font-size--small); }
}

/* ------------------------------------------------------------- Icon list */

/* One row per item: an NLC icon in a copper diamond beside a label in capitals and a
   line (About, key values). The diamond is turned, so it gets room for its corners. */
.nlc-icon-list {
	display: grid;
	gap: 1.75rem;
	margin-block: var(--wp--preset--spacing--40) 0;
}
.nlc-icon-list > .nlc-icon-list__item {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
}
.nlc-icon-list__item > .nlc-icon.is-style-diamond {
	--nlc-icon-box: 3rem;
	margin: .625rem;
	font-size: 1.5rem;
}
.nlc-icon-list__text { min-width: 0; }
.nlc-icon-list__text > * { margin: 0; }
.nlc-icon-list__text > .nlc-icon-list__label {
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.35;
	text-transform: uppercase;
}
.nlc-icon-list__text > p {
	margin-top: .25rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}
@media (max-width: 599px) {
	.nlc-icon-list { gap: 1.5rem; }
	.nlc-icon-list > .nlc-icon-list__item { gap: 1rem; }
	.nlc-icon-list__item > .nlc-icon.is-style-diamond { --nlc-icon-box: 2.5rem; margin: .5rem; font-size: 1.25rem; }
}

/* ------------------------------------------------------------- Icon grid */

/* An NLC icon in a copper circle over a heading and a line, three to a row with the last
   row centred (Investments, value add). On phones each item is a row: the icon beside
   the text. */
.nlc-split > .wp-block-media-text__content > .nlc-icon-grid { max-width: 42rem; }
.nlc-icon-grid {
	--nlc-icon-grid-gap: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem var(--nlc-icon-grid-gap);
}
.nlc-icon-grid > .nlc-icon-grid__item {
	flex: 0 1 calc((100% - 2 * var(--nlc-icon-grid-gap)) / 3);
	min-width: 0;
	margin: 0;
	text-align: center;
}
.nlc-icon-grid__item > .nlc-icon.is-style-circle {
	--nlc-icon-box: 3rem;
	display: flex;
	margin-inline: auto;
	font-size: 1.375rem;
}
.nlc-icon-grid__text { margin-top: 1rem; }
.nlc-icon-grid__text > * { margin: 0; }
.nlc-icon-grid__text > .nlc-icon-grid__label {
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.35;
}
.nlc-icon-grid__text > p {
	margin-top: .5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}
@media (max-width: 599px) {
	.nlc-icon-grid { gap: 1.5rem; }
	.nlc-icon-grid > .nlc-icon-grid__item {
		display: flex;
		flex-basis: 100%;
		align-items: flex-start;
		gap: 1rem;
		text-align: start;
	}
	.nlc-icon-grid__item > .nlc-icon.is-style-circle { --nlc-icon-box: 2.75rem; margin: 0; font-size: 1.25rem; }
	.nlc-icon-grid__text { margin-top: .125rem; }
	.nlc-icon-grid__text > p { margin-top: .25rem; }
}

/* -------------------------------------------------------------- Timeline */

/* Tablets and wider: the live "chess" layout. One column per item on a line that runs
   across the row, an icon in a copper circle on it for each item, and the cards above and
   below it in turn with the date on the other side. The row scrolls sideways and snaps
   to the columns; about five show on a desktop. Each item is a subgrid of the row's
   three rows (above the line, the line, below it), so the line stays straight however
   long a card is. */
.nlc-timeline-scroller {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--copper) var(--wp--preset--color--line);
}
.nlc-timeline {
	--nlc-timeline-icon: 2.5rem;
	--nlc-timeline-inset: 2.1875rem;
	display: grid;
	grid-auto-columns: max(15.875rem, 20%);
	grid-auto-flow: column;
	grid-template-rows: auto var(--nlc-timeline-icon) auto;
	margin: 0;
	padding-block: .5rem 1.25rem;
}
.nlc-timeline > .nlc-timeline__item {
	display: grid;
	grid-row: 1 / -1;
	grid-template-rows: subgrid;
	margin: 0;
	scroll-snap-align: start;
}
.nlc-timeline__item > * { grid-column: 1; margin: 0; }

/* The line: each item draws its part, from the first icon's centre to the last one's. */
.nlc-timeline__item::before {
	content: "";
	grid-area: 2 / 1;
	align-self: center;
	height: 2px;
	background: var(--wp--preset--color--ink);
}
.nlc-timeline__item:first-child::before { margin-left: calc(var(--nlc-timeline-inset) + var(--nlc-timeline-icon) / 2); }
.nlc-timeline__item:last-child::before { width: calc(var(--nlc-timeline-inset) + var(--nlc-timeline-icon) / 2); }

.nlc-timeline__item > .nlc-icon.nlc-timeline__icon {
	--nlc-icon-box: var(--nlc-timeline-icon);
	position: relative;
	grid-row: 2;
	margin-left: var(--nlc-timeline-inset);
	font-size: 1.125rem;
}
.nlc-timeline__item > .nlc-timeline__date {
	padding-inline: .9375rem;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: lining-nums;
	font-weight: 600;
	letter-spacing: .04em;
}
.nlc-timeline__item > .nlc-timeline__card {
	position: relative;
	margin-inline: .9375rem;
	padding: 1.5rem 1.5rem 1.625rem;
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--custom--radius--card);
}
/* The pointer: a turned square under the card's edge, in line with the icon. */
.nlc-timeline__card::after {
	content: "";
	position: absolute;
	left: calc(var(--nlc-timeline-inset) + var(--nlc-timeline-icon) / 2 - .9375rem - .625rem);
	width: 1.25rem;
	height: 1.25rem;
	background: inherit;
	border-radius: 2px;
	rotate: 45deg;
}
.nlc-timeline__card > * { margin: 0; }
.nlc-timeline__card > .nlc-timeline__title {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.25;
}
.nlc-timeline__card > .nlc-timeline__note {
	margin-top: .625rem;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Odd items: the card above the line and the date below; even items the other way. */
.nlc-timeline__item:nth-child(odd) > .nlc-timeline__card { grid-row: 1; align-self: end; margin-bottom: 1.875rem; }
.nlc-timeline__item:nth-child(odd) > .nlc-timeline__card::after { bottom: -.5rem; }
.nlc-timeline__item:nth-child(odd) > .nlc-timeline__date { grid-row: 3; align-self: start; margin-top: .9375rem; }
.nlc-timeline__item:nth-child(even) > .nlc-timeline__card { grid-row: 3; align-self: start; margin-top: 1.875rem; }
.nlc-timeline__item:nth-child(even) > .nlc-timeline__card::after { top: -.5rem; }
.nlc-timeline__item:nth-child(even) > .nlc-timeline__date { grid-row: 1; align-self: end; margin-bottom: .9375rem; }

/* The previous and next buttons (scroll-row.js) sit at the two ends of the line: grey
   circles, as on the live site. The script sets the line's height and the row's span. */
:where(*):has(> .nlc-row-nav--line) { position: relative; }
.nlc-row-nav.nlc-row-nav--line {
	position: absolute;
	top: var(--nlc-row-nav-top, 50%);
	left: var(--nlc-row-nav-left, 0);
	justify-content: space-between;
	width: var(--nlc-row-nav-width, 100%);
	max-width: none;
	margin: 0 !important;
	translate: 0 -50%;
	pointer-events: none;
}
.nlc-row-nav--line > .nlc-row-nav__button {
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	background: var(--wp--preset--color--silver);
	color: var(--wp--preset--color--ink);
	pointer-events: auto;
}
.nlc-row-nav--line > .nlc-row-nav__button:disabled { color: var(--wp--preset--color--ink); opacity: .35; }

/* Phones: one column down the page, the icons on a vertical line beside the cards. */
@media (max-width: 599px) {
	.nlc-timeline-scroller { overflow: visible; scroll-snap-type: none; }
	.nlc-timeline { display: block; padding: 0; }
	.nlc-timeline > .nlc-timeline__item {
		position: relative;
		grid-template-columns: var(--nlc-timeline-icon) minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 1rem;
		padding-bottom: 1.5rem;
	}
	.nlc-timeline > .nlc-timeline__item:last-child { padding-bottom: 0; }
	.nlc-timeline__item::before {
		position: absolute;
		grid-area: auto;
		align-self: stretch;
		top: 0;
		bottom: 0;
		left: calc(var(--nlc-timeline-icon) / 2 - 1px);
		width: 2px;
		height: auto;
	}
	.nlc-timeline__item:first-child::before { top: calc(var(--nlc-timeline-icon) / 2); margin-left: 0; }
	.nlc-timeline__item:last-child::before { bottom: auto; width: 2px; height: calc(var(--nlc-timeline-icon) / 2); }
	.nlc-timeline__item:nth-child(n) > .nlc-timeline__icon { grid-area: 1 / 1; margin-left: 0; }
	.nlc-timeline__item:nth-child(n) > .nlc-timeline__date {
		grid-area: 1 / 2;
		align-self: center;
		margin: 0;
		padding: 0;
	}
	.nlc-timeline__item:nth-child(n) > .nlc-timeline__card {
		grid-area: 2 / 2;
		align-self: start;
		margin: .75rem 0 0;
		padding: 1.25rem;
	}
	.nlc-timeline__item:nth-child(n) > .nlc-timeline__card::after { top: -.5rem; bottom: auto; left: 1.25rem; }
	.nlc-timeline__card > .nlc-timeline__title { font-size: var(--wp--preset--font-size--medium); font-weight: 600; }
}

/* ---------------------------------------------------------- Transactions */

/* One card per nlc_deal in a row that scrolls sideways. */
.nlc-deals {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--copper) var(--wp--preset--color--line);
	scroll-padding-inline: .25rem;
	margin-top: var(--wp--preset--spacing--40);
}
.nlc-deals .wp-block-post-template {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: .25rem .25rem 1.25rem;
	list-style: none;
}
.nlc-deals .wp-block-post-template > li {
	flex: 0 0 min(15.5rem, 78%);
	margin: 0;
	scroll-snap-align: start;
}
.nlc-deal {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--copper);
	border-radius: var(--wp--custom--radius--card);
	text-align: center;
}
.nlc-deals .nlc-deal > * { box-sizing: border-box; margin: 0; }
.nlc-deal__role {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(2.8em + 1.5rem);
	padding: 1.25rem 1rem .25rem;
	color: var(--wp--preset--color--copper);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.4;
	text-transform: uppercase;
}
.nlc-deal__size {
	padding: .75rem 1rem 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: lining-nums;
	font-weight: 600;
	line-height: 1.2;
}
.nlc-deal__type {
	min-height: 2.7em;
	padding: .5rem 1rem 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	text-wrap: balance;
}
.nlc-deal__facility {
	padding: .75rem 1rem 1.25rem;
	color: var(--nlc-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
}
.nlc-deal__foot {
	margin-top: auto !important;
	padding: .625rem 1rem;
	background: var(--wp--preset--color--mist);
}
.nlc-deal__quarter {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* -------------------------------------------------------- Financing wheel */

/* The SVG is inline (nlc_about_inline_wheel()); an image an editor puts in its place
   shows as an image. financing-wheel.js makes each segment a button: it pops out 15px
   from the centre and lightens on hover, focus or a tap. With reduced motion only the
   colour changes. Without the script a mouse still gets the pop-out. */
.nlc-wheel {
	position: relative;
	max-width: 40rem;
	margin-top: var(--wp--preset--spacing--50);
}
.nlc-wheel :is(img, .nlc-wheel__svg) {
	display: block;
	width: 100%;
	height: auto;
}
.nlc-wheel__svg { overflow: visible; -webkit-tap-highlight-color: transparent; }
.nlc-wheel__seg {
	transition: transform 200ms var(--wp--custom--ease);
	cursor: pointer;
}
.nlc-wheel__seg :is(.nlc-wheel__rim, .nlc-wheel__fill, .nlc-wheel__face) {
	transition: fill var(--nlc-t), stroke var(--nlc-t);
}
.nlc-wheel__seg :is(.nlc-wheel__rim, .nlc-wheel__fill) { fill: var(--fill); }
.nlc-wheel__seg > text { transition: fill var(--nlc-t); }
.nlc-wheel__seg:focus { outline: none; }

.nlc-wheel.is-ready .nlc-wheel__seg.is-active,
.nlc-wheel:not(.is-ready) .nlc-wheel__seg:hover { transform: translate(var(--dx), var(--dy)); }
/* About 40% lighter. The type's white label turns ink on its lighter wedge. */
:is(.nlc-wheel.is-ready .nlc-wheel__seg.is-active, .nlc-wheel:not(.is-ready) .nlc-wheel__seg:hover) :is(.nlc-wheel__rim, .nlc-wheel__fill) {
	fill: color-mix(in srgb, var(--fill) 60%, #fff);
}
:is(.nlc-wheel.is-ready .nlc-wheel__seg.is-active, .nlc-wheel:not(.is-ready) .nlc-wheel__seg:hover) > .nlc-wheel__face {
	fill: color-mix(in srgb, var(--wp--preset--color--copper) 10%, #fff);
}
:is(.nlc-wheel.is-ready .nlc-wheel__seg.is-active, .nlc-wheel:not(.is-ready) .nlc-wheel__seg:hover)[data-seg="type"] > text {
	fill: var(--wp--preset--color--ink);
}
.nlc-wheel__seg:focus-visible :is(.nlc-wheel__face, .nlc-wheel__fill) {
	stroke: var(--wp--preset--color--ink);
	stroke-width: 3;
}
@media (prefers-reduced-motion: reduce) {
	.nlc-wheel .nlc-wheel__seg { transition: none; transform: none !important; }
}

/* The card for an option: beside the pointer on a desktop, a panel under the wheel on
   a phone. Placed by the script. */
.nlc-wheel-tip {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	width: 17.5rem;
	padding: 1rem 1.125rem 1.125rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: .5rem;
	box-shadow: 0 4px 15px rgb(0 0 0 / 0.15);
	pointer-events: none;
}
.nlc-wheel-tip[hidden] { display: none; }
.nlc-wheel-tip > p { margin: 0; }
.nlc-wheel-tip__title {
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
}
.nlc-wheel-tip__text {
	margin-top: .625rem !important;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
}
@media (max-width: 599px) {
	.nlc-wheel-tip {
		position: static;
		width: auto;
		margin-top: 1.25rem;
		box-shadow: none;
	}
}

/* The written version of the wheel: closed by default (the wheel shows the same lines),
   four columns on desktop. */
.nlc-wheel-details {
	margin-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.nlc-wheel-details > summary {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 2.75rem;
	padding-block: .5rem;
	color: var(--wp--preset--color--copper-deep);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}
.nlc-wheel-details > summary::-webkit-details-marker { display: none; }
.nlc-wheel-details > summary::after {
	content: "";
	flex: none;
	width: .5rem;
	height: .5rem;
	margin-right: .25rem;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	rotate: 45deg;
	translate: 0 -.125rem;
}
.nlc-wheel-details[open] > summary::after { rotate: 225deg; translate: 0 .125rem; }
.nlc-wheel-types {
	display: grid;
	gap: 1.75rem 2rem;
	padding-block: .75rem 1.75rem;
}
@media (min-width: 600px) { .nlc-wheel-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nlc-wheel-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nlc-wheel-types > .nlc-wheel-type { margin: 0; }
.nlc-wheel-type > :where(h2, h3, ul) { margin-block: 0; }
.nlc-wheel-type > :is(h2, h3) { margin-bottom: .75rem; }
.nlc-wheel-type > ul { padding: 0; font-size: var(--wp--preset--font-size--small); }
.nlc-wheel-type > ul > li { margin: 0; }
.nlc-wheel-type > ul > li + li { margin-top: .875rem; }
.nlc-wheel-type > ul > li > strong { font-weight: 600; }