@import "blog-shared.css";

/**
 * Article single (blog + shared with news & media detail).
 * Figma "Blog Article" 333:15593.
 */

.ne-article { padding-top: var(--ne-space-5xl); }

/* ---- Centered title block ---------------------------------------------- */
.ne-article__head-inner {
	max-width: 820px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ne-space-m);
}
.ne-article__title { margin: 0; }
.ne-article__sub {
	margin: 0;
	max-width: 680px;
	color: var(--ne-neutral-700);
	font-size: var(--ne-h7-size);
	line-height: var(--ne-h7-line);
}
.ne-article__byline {
	display: inline-flex;
	align-items: center;
	gap: var(--ne-space-s);
	margin-top: var(--ne-space-xs);
}
.ne-article__avatar { width: 44px; height: 44px; border-radius: 50%; }
.ne-article__byline-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ne-article__author { font-weight: 700; color: var(--ne-primary-500); }
.ne-article__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--ne-space-2xs);
	color: var(--ne-neutral-600);
	font-size: var(--ne-b2-size);
}

/* ---- Hero image -------------------------------------------------------- */
.ne-article__hero {
	margin: var(--ne-space-3xl) 0 0;
	border-radius: 24px;
	overflow: hidden;
	max-width: var(--ne-content);
	margin-inline: auto;
}
.ne-article__hero img { width: 100%; height: auto; display: block; }

/* ---- Body + sticky share rail ------------------------------------------ */
.ne-article__grid {
	display: grid;
	grid-template-columns: 56px minmax(0, 760px);
	justify-content: center;
	gap: var(--ne-space-4xl);
	padding-block: var(--ne-space-4xl);
}
/* Not sticky: the rail scrolls away with the article (client review, Jul 2026 —
   the icons trailing the reader down the page was reported as distracting). */
.ne-article__rail {
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--ne-space-s);
}
.ne-article__railbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--ne-neutral-200);
	background: var(--ne-neutral-100);
	color: var(--ne-primary-500);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ne-article__railbtn:hover { background: var(--ne-primary-400); border-color: var(--ne-primary-400); color: var(--ne-neutral-100); }
.ne-article__railbtn.is-saved { background: var(--ne-red-100); border-color: var(--ne-red-100); color: var(--ne-neutral-100); }
.ne-article__railbtn .ne-icon { width: 20px; height: 20px; }
.ne-article__railtip {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) scale(.9);
	transform-origin: left center;
	white-space: nowrap;
	padding: 4px var(--ne-space-xs);
	border-radius: 6px;
	background: var(--ne-primary-600);
	color: var(--ne-neutral-100);
	font-size: var(--ne-b3-size);
	opacity: 0;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}
.ne-article__railbtn:hover .ne-article__railtip,
.ne-article__railbtn:focus-visible .ne-article__railtip { opacity: 1; transform: translateY(-50%) scale(1); }

/* ---- Article content typography ---------------------------------------- */
.ne-article__content { font-size: var(--ne-b1-size); line-height: 1.75; color: var(--ne-neutral-900); }
.ne-article__content > * + * { margin-top: var(--ne-space-l); }
.ne-article__content p { margin: 0; }
.ne-article__content h2 {
	margin: var(--ne-space-3xl) 0 0;
	font-size: var(--ne-h6-size);
	line-height: var(--ne-h6-line);
	color: var(--ne-primary-500);
}
.ne-article__content h3 {
	margin: var(--ne-space-2xl) 0 0;
	font-size: var(--ne-h7-size);
	line-height: var(--ne-h7-line);
	color: var(--ne-primary-500);
}
.ne-article__content ul,
.ne-article__content ol { margin: 0; padding-left: var(--ne-space-l); display: flex; flex-direction: column; gap: var(--ne-space-xs); }
.ne-article__content a { color: var(--ne-secondary-400); }
.ne-article__content img { border-radius: 16px; }
.ne-article__content figure,
.ne-article__content .wp-block-image { margin: var(--ne-space-2xl) 0 0; }
.ne-article__content figure img,
.ne-article__content .wp-block-image img { width: 100%; height: auto; display: block; border-radius: 16px; }
.ne-article__content figcaption {
	margin-top: var(--ne-space-xs);
	text-align: center;
	color: var(--ne-neutral-600);
	font-size: var(--ne-b2-size);
}
.ne-article__content blockquote {
	margin: var(--ne-space-2xl) 0 0;
	padding: var(--ne-space-l) var(--ne-space-xl);
	border-left: 4px solid var(--ne-tertiary-400);
	background: var(--ne-tertiary-a10);
	border-radius: 0 12px 12px 0;
	color: var(--ne-primary-500);
	font-size: var(--ne-h7-size);
	line-height: var(--ne-h7-line);
}

/* Image + text 50/50 split rows */
.ne-article__content .ne-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--ne-space-2xl);
	margin-top: var(--ne-space-2xl);
}
.ne-article__content .ne-split img { width: 100%; border-radius: 16px; }
.ne-article__content .ne-split--rev .ne-split__media { order: 2; }
.ne-article__content .ne-split p:first-child { margin-top: 0; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	.ne-article__grid { grid-template-columns: 48px minmax(0, 1fr); gap: var(--ne-space-2xl); }
}
@media (max-width: 640px) {
	.ne-article { padding-top: var(--ne-space-2xl); }
	.ne-article__hero { border-radius: 16px; margin-top: var(--ne-space-l); }
	.ne-article__grid { grid-template-columns: 1fr; gap: var(--ne-space-l); }
	.ne-article__rail {
		flex-direction: row;
		justify-content: center;
		gap: var(--ne-space-s);
		padding: var(--ne-space-xs) 0;
		background: var(--ne-neutral-100);
		z-index: 4;
	}
	.ne-article__railtip { display: none; }
	.ne-article__content .ne-split { grid-template-columns: 1fr; gap: var(--ne-space-l); }
	.ne-article__content .ne-split--rev .ne-split__media { order: 0; }
}