/* ==========================================================================
   Insights article (single.php). Grid follows the Home Insights columns:
   share rail on the first 300 column (x 72), body from x 404, max 760.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.art-hero { padding: max(calc(150 * var(--u)), calc(var(--header-h) + 40px)) 0 max(calc(100 * var(--u)), 56px); }
.art-hero--media { padding-bottom: max(calc(80 * var(--u)), 40px); }
.art-back {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--sky);
}
.art-back__icon {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(191, 217, 255, 0.5);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color 0.3s, background-color 0.3s;
}
.art-back__icon svg { width: 12px; height: 10px; transform: scaleX(-1); }
@media (hover: hover) {
	.art-back:hover .art-back__icon { background: var(--sky); border-color: var(--sky); color: var(--navy); }
	.art-back:hover .link { background-size: 100% 1px; }
}
.art-hero__head { margin-top: calc(70 * var(--u) + 20px); max-width: 980px; }
.art-hero__cat { color: var(--sky); margin-bottom: 22px; }
.art-hero__title { overflow-wrap: break-word; }
.art-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-top: 32px;
	color: rgba(255, 255, 255, 0.82);
}
.art-hero__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* --- Featured image: straddles the navy/white edge ------------------------ */
.art-figure { background: linear-gradient(to bottom, var(--brand) 0 50%, var(--white) 50% 100%); }
.art-figure__media { aspect-ratio: 1296 / 600; margin: 0; }
.art-figure__media img { position: absolute; inset: 0; }

/* --- Body --------------------------------------------------------------- */
.art-main { padding: calc(100 * var(--u) + 10px) 0 calc(120 * var(--u) + 10px); }
.art-layout {
	display: grid;
	grid-template-columns: minmax(0, 300fr) minmax(0, 964fr);
	column-gap: 32px;
	align-items: start;
}
.art-body { max-width: 760px; min-width: 0; }

.art-share { align-self: stretch; }
.art-share__inner { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; }
.art-share__label { color: rgba(24, 48, 102, 0.72); }
.art-share__list { display: flex; gap: 10px; }
.art-share__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	color: var(--navy);
	transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.art-share__btn svg { width: 16px; height: 16px; }
@media (hover: hover) { .art-share__btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); } }
.art-share__btn.is-copied { background: var(--navy); border-color: var(--navy); color: var(--white); }
.art-share__toast {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	padding: 6px 10px;
	border-radius: 3px;
	background: var(--navy);
	color: var(--white);
	font-size: 12px;
	line-height: 14px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-6px, -50%);
	transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.art-share__toast:empty { display: none; }
.art-share__btn.is-copied .art-share__toast { opacity: 1; transform: translate(0, -50%); }

/* Prose */
.art-prose { color: var(--ink); font-size: 16px; line-height: 25px; }
.art-prose > * + * { margin-top: 25px; }
.art-prose > p:first-child {
	font-family: var(--serif);
	font-size: 20px;
	line-height: 30px;
	color: var(--navy);
}
.art-prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, calc(30 * var(--u)), 30px); line-height: 34px; color: var(--navy); margin-top: 56px; }
.art-prose h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 30px; color: var(--navy); margin-top: 44px; }
.art-prose h4 { font-size: 16px; line-height: 25px; font-weight: 600; color: var(--navy); margin-top: 36px; }
.art-prose h2 + *, .art-prose h3 + *, .art-prose h4 + * { margin-top: 16px; }
.art-prose a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.3s; }
@media (hover: hover) { .art-prose a:hover { text-decoration-color: rgba(24, 48, 102, 0.4); } }
.art-prose strong, .art-prose b { font-weight: 600; }
.art-prose ul, .art-prose ol { display: grid; gap: 10px; padding-left: 0; }
.art-prose ul > li { position: relative; padding-left: 24px; }
.art-prose ul > li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 1px; background: var(--navy); }
.art-prose li > ul, .art-prose li > ol { margin-top: 10px; }
.art-prose ol { counter-reset: art; }
.art-prose ol > li { position: relative; padding-left: 32px; counter-increment: art; }
.art-prose ol > li::before { content: counter(art, decimal-leading-zero); position: absolute; left: 0; top: 0; font-size: 12px; color: var(--navy); font-variant-numeric: tabular-nums; }
.art-prose blockquote, .art-prose .wp-block-pullquote {
	margin: 48px 0;
	padding: 4px 0 4px 32px;
	border-left: 1px solid var(--navy);
	font-family: var(--serif);
	font-size: clamp(22px, calc(30 * var(--u)), 30px);
	line-height: 1.3;
	color: var(--navy);
}
.art-prose blockquote p + p { margin-top: 16px; }
.art-prose blockquote cite, .art-prose blockquote footer { display: block; margin-top: 16px; font-family: var(--sans); font-style: normal; font-size: 12px; line-height: 18px; color: rgba(24, 48, 102, 0.72); }
.art-prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.art-prose img { border-radius: 8px; height: auto; }
.art-prose figure, .art-prose .wp-block-image { margin: 40px 0; }
.art-prose figcaption, .art-prose .wp-caption-text { margin-top: 10px; font-size: 12px; line-height: 18px; font-weight: 300; color: var(--grey); }
.art-prose hr { border: 0; border-top: 1px solid var(--line-dark); margin: 48px 0; }
.art-prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.art-prose th, .art-prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(24, 48, 102, 0.2); text-align: left; vertical-align: top; }
.art-prose th { font-weight: 600; color: var(--navy); }
.art-prose .wp-block-table { overflow-x: auto; }
.art-prose iframe, .art-prose video { max-width: 100%; border-radius: 8px; }
.art-prose--pending .art-pending { max-width: 600px; }

/* Article footer */
.art-foot { margin-top: calc(64 * var(--u) + 16px); }
.art-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; }
.art-foot__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.art-tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--line-dark);
	border-radius: 3px;
	font-size: 12px;
	line-height: 14px;
	color: var(--navy);
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
@media (hover: hover) { .art-tag:hover { background: var(--navy); border-color: var(--navy); color: var(--white); } }
.art-foot__back { color: var(--navy); }

/* --- More insights ------------------------------------------------------- */
.art-related { padding: 0 0 calc(140 * var(--u) + 10px); }
.art-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.art-related__head .label { font-weight: 400; }
.art-related__all { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); }
@media (hover: hover) {
	.art-related__all:hover .link { background-size: 100% 1px; }
	.art-related__all:hover .ins-card__arrow svg { animation: cms-arrow-through 0.6s var(--ease-out); }
}
.art-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
.art-related__grid > li > .rule { transform-origin: left; }
.ins-card--compact { padding-top: 30px; height: 100%; }
.ins-card--compact .ins-card__link { grid-template-columns: minmax(0, 1fr); row-gap: 24px; height: 100%; align-content: start; }
.ins-card--compact .ins-card__media { order: -1; aspect-ratio: 416 / 279; }
.ins-card--compact .ins-card__title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1023px) {
	.art-layout { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.art-share { order: 2; }
	.art-share__inner { position: static; flex-direction: row; align-items: center; gap: 20px; }
	.art-body { max-width: 760px; }
	.art-figure__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
	.art-related__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.ins-card--compact .ins-card__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 599px) {
	.art-hero__head { margin-top: 40px; }
	.art-hero__title { font-size: 30px; line-height: 36px; }
	.art-main { padding: 48px 0 64px; }
	.art-figure__media { aspect-ratio: 4 / 3; }
	.art-prose > p:first-child { font-size: 18px; line-height: 27px; }
	.art-prose blockquote { padding-left: 20px; margin: 36px 0; }
	.art-related { padding-bottom: 72px; }
	.art-related__head { margin-bottom: 24px; }
	.art-foot__row { flex-direction: column; align-items: flex-start; }
}

/* Buttons inside the body keep their own colours. */
.art-prose a.btn { text-decoration: none; }
.art-prose a.btn--dark { color: var(--white); }