/*
zprime article, below the fold. Loaded on a single post and nowhere else, deferred by
zprime_async_style(). The hero is above this and is inlined from css/critical-nea-single.css.

Loaded alongside css/nea.css, not instead of it. The related-articles grid at the foot is
the same card as the blog index — the same component, not a lookalike — and the arrow
link is the same shared rule keyed on --arthra-arrow-gap and --arthra-arrow-w. Copying
either into this file would be ninety lines with two places to keep in step, which is the
thing the markup rules exist to prevent. A reader arriving from /nea/ already has that
file cached, so in the common case it costs nothing on the wire.

Depends on zprime-style, so --zp-arrow and --zp-motion are in scope.
*/

/*--------------------------------------------------------------
# The two-column body
--------------------------------------------------------------*/

/* The article element is the section and the grid at once rather than a band wrapping an
inner row: one element fewer, and nothing in between for a background to be declared on
twice. Tracks are the design's 300px column against the rest. */
.arthro {
	display: grid;
	grid-template-columns: max(11rem, 17.3611vw) 1fr; /* 300px at 1728 */
	align-items: start;
	column-gap: max(1.5rem, 5.5556vw); /* 96px at 1728 */
	padding-inline: var(--zp-pad);
	padding-block: max(2.5rem, 5.5556vw) max(3rem, 6.9444vw); /* 96px / 120px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

/* Without this a long word in either column pushes the grid wider than the page — a grid
item's min-width defaults to auto, not zero. */
.arthro > * {
	min-width: 0;
}

/*--------------------------------------------------------------
# The sticky column
--------------------------------------------------------------*/

/* Sticky works here only because the grid is align-items: start — stretched to the row's
height, the column would have nowhere to travel and would simply sit still. */
.arthro-aside {
	position: sticky;
	top: max(1.5rem, 2.4884vw); /* 43px at 1728 */
	padding-top: max(1rem, 1.5625vw); /* 27px at 1728 */
	border-top: 1px solid var(--wp--preset--color--ink);
}

.arthro-aside__label {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.arthro-toc__list {
	display: flex;
	flex-direction: column;
	gap: max(0.75rem, 0.9259vw); /* 16px at 1728 */
	margin: max(0.75rem, 1.2153vw) 0 0; /* 21px at 1728 */
	padding: 0;
	counter-reset: arthro-toc;
	list-style: none;
}

.arthro-toc__item {
	counter-increment: arthro-toc;
}

/* The ordinal is a counter, and it sits on the item rather than on the link so that it
stays out of the link's accessible name — a screen reader announces the heading, not
"zero one dash" before it. Inline, so a heading that wraps returns to the same left edge
instead of hanging under the number. */
.arthro-toc__item::before {
	content: counter(arthro-toc, decimal-leading-zero) " \2014 ";
}

.arthro-toc__item,
.arthro-share__link {
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.65;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* theme.json underlines and colours every link; the contents list draws neither until
the reader is on it. */
.arthro-toc__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--zp-motion);
}

.arthro-toc__link:hover,
.arthro-toc__link:focus-visible {
	color: var(--wp--preset--color--ink);
}

/* The divider belongs to the join between the two blocks, not to the share block itself.
An article with fewer than two headings prints no contents list, and a border declared
unconditionally would then sit directly under the column's own top rule — two lines with
nothing between them. */
.arthro-toc + .arthro-share {
	margin-top: max(1.5rem, 2.4884vw); /* 43px at 1728 */
	padding-top: max(1rem, 1.5625vw); /* 27px at 1728 */
	border-top: 1px solid var(--wp--preset--color--ink);
}

.arthro-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: max(0.75rem, 1.2153vw); /* 21px at 1728 */
	margin: max(0.75rem, 0.9259vw) 0 0; /* 16px at 1728 */
	padding: 0;
	list-style: none;
}

/* These keep the underline theme.json gives every link — it is what the design draws,
and on three bare words it is the only thing marking them as links at all. */
.arthro-share__link {
	color: var(--wp--preset--color--muted);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	letter-spacing: 0.05em;
	text-underline-offset: 0.35em;
}

/*--------------------------------------------------------------
# The article itself
--------------------------------------------------------------*/

/* The measure is the design's 760px, held on the container so every block inherits it
rather than each one restating it. The column it sits in is wider; the text does not fill
it, which is the design. */
.arthro-content {
	max-width: max(28rem, 43.9815vw); /* 760px at 1728 */
}

/*
The vertical rhythm, and the only place it is defined.

Every block takes a top margin and no bottom one, so the gap between any two blocks is
one value owned by the second of them — never a collapsed pair that has to be reasoned
about, and never a first or last child leaving a stray edge. style.css gives every
paragraph a bottom margin sitewide; zeroing it here is what stops the two adding up.

This is what makes the editor's blocks land correctly whatever order they are put in.
The gaps are the design's own:

  paragraph to paragraph   21
  anything to a heading    64
  anything to a figure     43
  anything to a quote      43
*/
.arthro-content > * {
	margin-bottom: 0;
}

.arthro-content > * + * {
	margin-top: max(0.75rem, 1.2153vw); /* 21px at 1728 */
}

.arthro-content > :first-child {
	margin-top: 0;
}

.arthro-content > * + h2,
.arthro-content > * + h3 {
	margin-top: max(2rem, 3.7037vw); /* 64px at 1728 */
}

.arthro-content > * + figure,
.arthro-content > * + blockquote,
.arthro-content > * + .wp-block-image,
.arthro-content > * + .wp-block-quote,
.arthro-content > * + .wp-block-pullquote {
	margin-top: max(1.5rem, 2.4884vw); /* 43px at 1728 */
}

/* The opening paragraph is set larger than the body, as drawn. Written as first-child so
it is whatever the editor puts first, with no class to remember. */
.arthro-content > p:first-child {
	font-size: max(1.125rem, 0.925rem + 0.4167vw, 1.2731vw); /* 22px at 1728, 18px at 768 */
	line-height: 1.65;
}

.arthro-content p,
.arthro-content li {
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(1rem, 0.9rem + 0.2083vw, 1.0417vw); /* 18px at 1728, 16px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75;
	letter-spacing: 0.03em;
}

/* Family, weight and case come from theme.json's heading element; only size, leading and
tracking are restated. */
.arthro-content h2 {
	font-size: max(1.5rem, 1.1rem + 0.8333vw, 1.8519vw); /* 32px at 1728, 24px at 768 */
	font-stretch: 75%;
	line-height: 1.18;
	letter-spacing: 0.02em;
}

/* The design shows no h3, and theme.json's default for one is *larger* than the h2 above
it — so an editor reaching for a sub-heading would invert the hierarchy on sight. Sized
here rather than left to be discovered. */
.arthro-content h3 {
	font-size: max(1.25rem, 0.95rem + 0.625vw, 1.3889vw); /* 24px at 1728, 20px at 768 */
	font-stretch: 75%;
	line-height: 1.25;
	letter-spacing: 0.02em;
}

/* style.css indents every list by 3em sitewide, which here would push a list clear of
the text it belongs to. */
.arthro-content ul,
.arthro-content ol {
	margin-left: 0;
	padding-left: 1.2em;
}

.arthro-content li + li {
	margin-top: max(0.375rem, 0.463vw); /* 8px at 1728 */
}

/* Content images keep their own proportions. Every other image slot in this theme
declares a ratio, because those are template positions filled from a known photo library
— this one is whatever an editor uploads, and a forced 3:2 would silently crop a diagram,
a τομή or a portrait without anyone being asked. */
.arthro-content figure {
	margin-inline: 0;
}

.arthro-content img {
	display: block;
	width: 100%;
	height: auto;
}

/* The one piece of text on the page that is not upper-cased, as drawn. Colour is muted
rather than faint: this sits on the grey plate, where faint is 3.51:1 and fails. */
.arthro-content figcaption {
	margin-top: max(0.5rem, 0.6944vw); /* 12px at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* theme.json gives every quote a 2px left border in the border grey and a 24px inset.
The design draws the same construction in charcoal at 34px, so only those two change —
the bar is on the left, which is where the core Quote block puts it. */
.arthro-content blockquote {
	margin-inline: 0;
	padding-left: max(1.25rem, 1.9676vw); /* 34px at 1728 */
	border-left: 2px solid var(--wp--preset--color--contrast);
}

.arthro-content blockquote p {
	font-size: max(1.25rem, 0.85rem + 0.8333vw, 1.6204vw); /* 28px at 1728, 20px at 768 */
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.arthro-content blockquote cite {
	display: block;
	margin-top: max(0.5rem, 0.6944vw); /* 12px at 1728 */
	color: var(--wp--preset--color--muted);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw);
	font-style: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
# The offer box that closes the article
--------------------------------------------------------------*/

/* Inside the content rather than under it, so it takes the same measure and the same
rhythm and reads as the end of the piece. White on the grey plate is the only thing
separating it from the text above. */
.arthro-content > .arthro-cta {
	margin-top: max(2rem, 3.7037vw); /* 64px at 1728 */
	padding: max(1.25rem, 2.4884vw); /* 43px at 1728 */
	background-color: var(--wp--preset--color--base);
}

/* Open Sans unstretched, unlike the article's own headings — the design's own. */
.arthro-cta__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(1rem, 1.0417vw); /* 18px at 1728 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: uppercase;
}

.arthro-cta__text {
	margin: max(0.5rem, 0.6944vw) 0 0; /* 12px at 1728 */
}

/* The arrow itself is the shared rule in css/nea.css, keyed on these two variables. */
.arthro-cta__link {
	--arthra-arrow-gap: max(1rem, 2.3148vw); /* 40px at 1728 */
	--arthra-arrow-w: max(1.75rem, 2.8935vw); /* 50px at 1728 */

	/* That shared rule makes these flex; without this the link would stretch the full
	measure and put 400px of empty plate inside the target. */
	width: fit-content;
	margin-top: max(1.25rem, 1.9676vw); /* 34px at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(1rem, 1.0417vw); /* 18px at 1728 */
}

.arthro-cta__link:hover,
.arthro-cta__link:focus-visible {
	color: var(--wp--preset--color--ink);
}

/*--------------------------------------------------------------
# Σχετικά άρθρα
--------------------------------------------------------------*/

/* The one band that leaves the grey, onto the lighter plate — the same move the blog
index makes for its card grid, and the same cards in it. */
.arthro-related {
	padding-inline: var(--zp-pad);
	padding-block: max(2.5rem, 5.5556vw); /* 96px at 1728 */
	background-color: var(--wp--preset--color--surface-alt);
}

/* The rule under the heading is the heading's own drawn block rather than a second
element, the same construction the front page's ΝΕΑ heading uses. */
.arthro-related__title {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: max(2rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	font-stretch: 75%;
	line-height: 1.18;
	letter-spacing: 0.02em;
}

.arthro-related__title::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: max(1rem, 1.9676vw); /* 34px at 1728 */
	background-color: var(--wp--preset--color--ink);
}

.arthro-related .arthra-grid {
	margin-top: max(2rem, 3.7037vw); /* 64px at 1728 */
}

/*--------------------------------------------------------------
# Narrow
--------------------------------------------------------------*/

/* Widest first, so the narrower query has the last word. Every rule that changes with
the viewport is here and after all the base rules — a media query adds no specificity, so
a base rule written below one silently wins. */

@media (max-width: 998px) {

	/* One column. The contents list stops being a margin note and becomes something you
	read before the article, so it also stops being sticky — pinned, it would ride over
	the text it belongs to for the whole scroll. */
	.arthro {
		grid-template-columns: 1fr;
		row-gap: max(1.5rem, 5vw);
	}

	.arthro-aside {
		position: static;
	}

	/* Holding the 760px measure once the column is narrower than that would stop the
	text filling the space it has. */
	.arthro-content {
		max-width: none;
	}
}