/*
Front page styles for zprime — everything below the fold.

Loaded only on the front page, after style.css, so everything here can rely on
the theme's custom properties and override its components without a specificity
fight. Sizes follow the same three-term max() as the rest of the theme: floor,
the two-anchor line, then the straight proportion — design px / 17.28.

The hero is not here: it fills the first screen, so it lives in
css/critical-home.css and is inlined in <head>. Nothing is duplicated between
the two files.

Deferred by zprime_async_style(), like style.css: it is fetched as a preload and
promoted to a stylesheet once it lands, so it never blocks the first paint.
*/

/* Intro — the figures only
---------------------------------------------

Everything above them is above the fold on a phone and lives in
css/critical-home.css, inlined. These start at y979 on a 412-wide screen, so they
can wait for this sheet. */

/* Figures, centred as a row rather than spanning the content column. The gap is
a variable because the rules between the figures are positioned by half of it. */
/* The gap cannot be straight proportion. The labels floor at 14px and stop
shrinking, so a gap that kept taking its full share squeezed the figures until
ISO 9001 broke in two, and below 850 the row overflowed the page. Below the
reference it runs on a line to 95px at 999 — narrowing faster than the content —
while above it the two meet at 1728 and proportion takes over. */
.intro__stats {
	--stat-gap: max(0.375rem, min(14.294vw, 20.85vw - 113.3px)); /* 247px at 1728, 95px at 999, 6px floor */

	display: grid;
	grid-template-columns: repeat(4, max-content);
	justify-content: center;
	gap: var(--stat-gap);
	grid-column: 1 / -1;
	margin-top: max(3rem, 9.5486vw); /* 165px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
}

.intro__stat {
	position: relative;
}

.intro__stat + .intro__stat::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--stat-gap) / -2);
	width: 1px;
	background-color: var(--wp--preset--color--ink);
}

/* Tighter than the theme's usual tracking: the design pulls the large numerals
in rather than spacing them out. */
.intro__stat-value {
	margin: 0;
	font-size: max(1.5rem, 13.6px + 2.1652vw, 2.9514vw); /* 51px at 1728, 24px at 481 */
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: -0.05em;
	white-space: nowrap;
}

/* The labels are what decide whether four fit in a row — the longest is 22
characters, so at 481 it alone claims a third of the width. Anchored to the 12px
minimum there rather than the 14px the rest of the theme floors at. */
.intro__stat-label {
	margin: max(0.5rem, 0.9838vw) 0 0; /* 17px at 1728 */
	font-size: max(0.75rem, 9.69px + 0.4812vw, 1.0417vw); /* 18px at 1728, 12px at 481 */
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* Πρόσφατα Έργα
--------------------------------------------- */

/* The band carries the intro's own surface, as the design draws it — one field
behind both, so the join is invisible and only padding separates them. The slide
reaches both edges, so the page inset sits on the heading and the dots instead of
on the section.

The design leaves 204px between the dots and the section below. Each section owns
half of the gap to its neighbour rather than one owning all of it, so the two stay
independent of each other's spacing. */
.erga {
	padding-block: max(3rem, 6.1343vw) max(3rem, 5.9028vw); /* 106px / 102px at 1728 */
	background-color: var(--wp--preset--color--surface-alt);
}

/* The margin is zeroed against the user agent's 0.83em, which would otherwise
open a gap the design does not have. Family, weight and tracking come from
theme.json; only the size is restated, because core's fluid clamp stops at its
maximum and this has to keep scaling past 1728. */
.erga__title {
	margin: 0;
	padding-inline: var(--zp-pad);
	font-size: max(2rem, 17.6px + 1.875vw, 2.8935vw); /* 50px at 1728, 32px at 768 */
	font-stretch: 75%;
	line-height: 1;
}

/* The rule under the heading, drawn as a block inside the heading's padding box
so it lands on the content width without a second element in the markup. */
.erga__title::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: max(0.75rem, 1.1574vw); /* 20px at 1728 */
	background-color: var(--wp--preset--color--faint);
}

/* Track and arrows share one grid cell, so the arrows centre on the slide itself
rather than on the carousel including its dots — which is what an absolute
top: 50% would have given, 25px low. */
.erga-carousel {
	display: grid;
	margin-top: max(1.25rem, 1.9676vw); /* 34px at 1728 */
}

.erga-carousel__track {
	display: flex;
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.erga-carousel__track::-webkit-scrollbar {
	display: none;
}

.erga-carousel__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
}

/* theme.json underlines every link, and the caption is inside this one. */
.erga-carousel__link {
	display: block;
	text-decoration: none;
}

/* The photographs are 3:2 and the slide is wider, so the crop happens here rather
than in a set of cut files — WordPress's own sizes all share the original ratio,
which is exactly what lets srcset offer five candidates. */
.erga-carousel__image {
	display: block;
	width: 100%;
	aspect-ratio: 1728 / 1002;
	object-fit: cover;
}

/* The plate over the photograph. Its distance from the foot is a percentage of
the slide rather than a length, so it holds its place when the ratio changes. */
.erga-carousel__caption {
	position: absolute;
	bottom: 16.367%; /* 164px of the slide's 1002 at 1728 */
	left: var(--zp-pad);
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: max(1rem, 1.5046vw);
	row-gap: max(0.5rem, 0.7639vw); /* 13px at 1728 */
	min-width: max(17rem, 32.6968vw); /* 565px at 1728 */
	padding: max(0.75rem, 1.0417vw) max(1rem, 1.5046vw) max(0.625rem, 0.9259vw); /* 18/26/16 at 1728 */
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	font-stretch: 75%;
	text-transform: uppercase;
}

.erga-carousel__name {
	grid-column: 1 / -1;
	font-size: max(1.25rem, 1.7361vw); /* 30px at 1728 */
	line-height: 1;
}

/* Tracking is the design's own 0.36px at 18px. It is declared on each line rather
than on the plate: an em value resolves against the font size of the element it is
written on, then inherits as a fixed length. */
.erga-carousel__system {
	font-size: max(0.875rem, 1.0417vw); /* 18px at 1728 */
	line-height: 1;
	letter-spacing: 0.02em;
}

/* The design draws this #a1a1a1, which is 2.58:1 on the white plate and fails at
any size. faint is 4.95:1. */
.erga-carousel__index {
	justify-self: end;
	color: var(--wp--preset--color--faint);
	font-size: max(0.875rem, 1.0417vw); /* 18px at 1728 */
	line-height: 1;
	letter-spacing: 0.02em;
}

/* The theme's arrow at the size drawn here. Prev is the same artwork turned
round, which is how the design itself places it. */
.erga-carousel__nav {
	grid-area: 1 / 1;
	align-self: center;
	width: max(2.5rem, 4.3403vw); /* 75px at 1728 */
	aspect-ratio: 75 / 42;
	padding: 0;
	border: 0;
	background-color: var(--wp--preset--color--base);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 42'%3E%3Cpath d='M0 21h72M54 4l18 17-18 17' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	cursor: pointer;
	transition: transform var(--zp-motion);
}

.erga-carousel__nav--prev {
	justify-self: start;
	margin-inline-start: var(--zp-pad);
	transform: rotate(180deg);
}

.erga-carousel__nav--next {
	justify-self: end;
	margin-inline-end: var(--zp-pad);
}

.erga-carousel__nav--prev:hover,
.erga-carousel__nav--prev:focus-visible {
	transform: rotate(180deg) translateX(max(6px, 0.3472vw));
}

.erga-carousel__nav--next:hover,
.erga-carousel__nav--next:focus-visible {
	transform: translateX(max(6px, 0.3472vw));
}

.erga-carousel__dots {
	display: flex;
	grid-area: 2 / 1;
	justify-content: center;
	gap: max(0.625rem, 1.1574vw); /* 20px at 1728 */
	margin-top: max(1.25rem, 2.199vw); /* 38px at 1728 */
}

/* Inverted against the design, which draws pale dots on a grey field: the band
here is the intro's surface, and surface-alt dots on it would be invisible. */
.erga-carousel__dot {
	display: block;
	width: max(0.5rem, 0.6944vw); /* 12px at 1728 */
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--wp--preset--color--border);
	transition: background-color var(--zp-motion);
}

.erga-carousel__dot[aria-current="true"] {
	background-color: var(--wp--preset--color--muted);
}

/* Κατηγορίες Προϊόντων
--------------------------------------------- */

/* Same surface as the carousel above it, so the two read as one field and only
the padding marks the join. */
.proionta-section {
	padding-block: max(3rem, 5.9028vw); /* 102px at 1728 */
	background-color: var(--wp--preset--color--surface-alt);
}

/* The design's own 432 : 1054 split of its row, as fr so the ratio survives any
width. The picture and the bar under it share the second column; the bar is a row
of its own so it sits hard against the foot of the picture, as drawn. */
.proionta {
	display: grid;
	grid-template-columns: 432fr 1054fr;
	column-gap: max(1rem, 3.1829vw); /* 55px at 1728 */
	padding-inline: var(--zp-pad);
}

.proionta__tabs {
	display: grid;
	grid-row: 1 / span 2;
	gap: max(2px, 0.2199vw); /* 3.8px at 1728 */
	align-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A row is 69px tall at the reference: 30px of text with the balance split above
and below. The plate is the full column width, so the block is the link itself and
no wrapper is needed to paint it. */
.proionta__tab {
	display: block;
	padding: max(0.5rem, 1.1285vw) max(0.75rem, 1.2986vw); /* 19.5 / 22.4 at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(1.25rem, 1.7361vw); /* 30px at 1728 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--zp-motion), background-color var(--zp-motion);
}

/* The selected category. aria-current carries it, so the state is announced and
not merely painted, and the script needs no class of its own. */
.proionta__tab[aria-current] {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.proionta__tab:hover,
.proionta__tab:focus-visible {
	color: var(--wp--preset--color--ink);
	outline: none;
}

/* Every picture occupies the same cell, so the swap is a crossfade rather than a
reflow, and nothing moves when the category changes. The ratio is the design's
1054 : 675 while the photographs run from 1.66 to 1.78, so they are cropped here
rather than letterboxed. */
.proionta__media {
	display: grid;
	grid-column: 2;
	grid-row: 1;
	aspect-ratio: 1054 / 675;
	overflow: hidden;
}

.proionta__image {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--border);
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--zp-motion);
}

.proionta__image.is-current {
	opacity: 1;
}

/* Two thirds of the picture's width, as drawn, sitting flush against its foot. */
.proionta__cta {
	display: flex;
	grid-column: 2;
	grid-row: 2;
	align-items: center;
	justify-content: space-between;
	width: 67.27%; /* 709 of the picture's 1054 */
	min-height: max(3rem, 5.5556vw); /* 96px at 1728 */
	padding-inline: max(1rem, 3.4606vw); /* 59.8px at 1728 */
	background-color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(1.25rem, 1.7361vw); /* 30px at 1728 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

/* The theme's arrow once more, at the newsletter's proportions. */
.proionta__cta::after {
	content: "";
	flex: none;
	width: max(2.5rem, 4.3403vw); /* 75px at 1728 */
	aspect-ratio: 75 / 42;
	margin-inline-start: max(1rem, 1.4931vw); /* 25.8px at 1728 */
	background-color: currentcolor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 42'%3E%3Cpath d='M0 21h72M54 4l18 17-18 17' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: transform var(--zp-motion);
}

.proionta__cta:hover::after,
.proionta__cta:focus-visible::after {
	transform: translateX(max(6px, 0.3472vw));
}

/* Ζητήστε προσφορά
--------------------------------------------- */

/* Full-bleed photograph with the plate over it. The band's height is its padding
plus the plate rather than a fixed figure, so it follows the copy if that changes —
at the reference the three add up to the drawn 768. */
.prosfora {
	position: relative;
	padding-block: max(3rem, 25.1736vw) max(2rem, 4.0509vw); /* 435px / 70px at 1728 */
	padding-inline: var(--zp-pad);
}

/* Absolutely positioned so the section's own inset does not cut into it — the
photograph still reaches both edges. The same arrangement as the hero. */
.prosfora__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.prosfora__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The source is an 864px thumbnail from the old site, enlarged — so it is soft
once the viewport passes about 1700px, where the browser stops downscaling it and
starts stretching it. A veil takes the edge off that and lifts the white plate off
the picture at the same time. One number to turn if it wants to be stronger; the
hero's is 0.3. */
.prosfora__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 0.2);
}

/* Relative rather than z-indexed: it is the next positioned element in tree order,
so it paints above the photograph on its own. */
.prosfora__content {
	position: relative;
	width: max(18rem, 50.0579vw); /* 865px at 1728 */
	max-width: 100%;
	padding: max(1rem, 1.6088vw) max(1rem, 1.4641vw) max(1.5rem, 2.1586vw); /* 27.8 / 25.3 / 37.3 at 1728 */
	background-color: var(--wp--preset--color--base);
}

/* Tracking is the hero eyebrow's rather than a measured value — this one is
outlined in the design, so there is nothing to measure it against. */
.prosfora__eyebrow {
	margin: 0 0 max(0.5rem, 0.8102vw); /* 14px at 1728 */
	color: var(--wp--preset--color--faint);
	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;
}

/* Family, weight and tracking come from theme.json. The leading is the design's
own: 68px rows at 50px, measured cap-top to cap-top across the two lines. */
.prosfora__title {
	margin: 0 0 max(0.75rem, 0.9259vw); /* 16px at 1728 */
	color: var(--wp--preset--color--muted);
	font-size: max(2rem, 17.6px + 1.875vw, 2.8935vw); /* 50px at 1728, 32px at 768 */
	font-stretch: 75%;
	line-height: 1.36;
}

.prosfora__more {
	margin: 0;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 1.0417vw); /* 18px at 1728 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	text-transform: uppercase;
}

/* The design draws this as plain text. An underline on hover and focus is the
least that keeps it recognisable as a link without contradicting that. */
.prosfora__more a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.prosfora__more a:hover,
.prosfora__more a:focus-visible {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

/* Σειρές / Συστήματα ALUMIL
--------------------------------------------- */

/* Logo and copy share the first row, the heading and the list span both columns.
The rules under the rows reach 33px wider than the text on each side, as drawn, so
the section's inset carries that extra and the rows claw it back with a negative
margin — one variable rather than a padding rule on every child. */
.series {
	--series-inset: max(0.75rem, 1.9097vw); /* 33px at 1728 */

	display: grid;
	grid-template-columns: 548fr 770fr;
	align-items: start;
	column-gap: max(1rem, 7.5156vw); /* 130px at 1728 */
	padding-block: max(3rem, 11.8634vw) max(3rem, 13.4838vw); /* 205px / 233px at 1728 */
	padding-inline: calc(var(--zp-pad) + var(--series-inset));
	background-color: var(--wp--preset--color--surface-alt);
}

.series__logo {
	margin: 0;
}

.series__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.series__copy {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: max(1rem, 1.4468vw); /* 25px at 1728 */
	font-weight: 700;
	line-height: 1.32; /* 33px rows at 25px */
}

/* The two gaps around the heading are not equal in the design, so they are its
margins rather than a row gap on the grid. */
.series__title {
	grid-column: 1 / -1;
	margin-block: max(2rem, 5.8449vw) max(1.5rem, 3.3565vw); /* 101px / 58px at 1728 */
	color: var(--wp--preset--color--muted);
	font-size: max(1.25rem, 1.7361vw); /* 30px at 1728 */
	font-stretch: 75%;
	line-height: 1;
}

.series__list {
	display: grid;
	grid-column: 1 / -1;
	row-gap: max(1.5rem, 2.5463vw); /* 44px at 1728 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.series__row {
	margin-inline: calc(-1 * var(--series-inset));
	padding-inline: var(--series-inset);
	border-bottom: 1px solid var(--wp--preset--color--faint);
}

/* The whole row is the target rather than the two words at its end — 1454px of
it instead of 135. */
.series__link {
	display: grid;
	grid-template-columns: 619fr 623fr max-content max-content;
	align-items: center;
	min-height: max(3rem, 3.9352vw); /* 68px at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	font-stretch: 75%;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--zp-motion);
}

.series__name {
	font-size: max(2rem, 17.6px + 1.875vw, 2.8935vw); /* 50px at 1728, 32px at 768 */
	line-height: 1;
}

.series__type {
	font-size: max(0.875rem, 0.9259vw); /* 16px at 1728 */
	line-height: 1;
	letter-spacing: 0.05em;
}

.series__more {
	font-size: max(1rem, 1.1574vw); /* 20px at 1728 */
	line-height: 1;
	letter-spacing: 0.05em;
}

/* The newsletter arrow again — 43:24 is the same 75:42 artwork drawn smaller. */
.series__link::after {
	content: "";
	width: max(1.75rem, 2.4884vw); /* 43px at 1728 */
	aspect-ratio: 75 / 42;
	margin-inline-start: max(1rem, 1.9676vw); /* 34px at 1728 */
	background-color: currentcolor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 42'%3E%3Cpath d='M0 21h72M54 4l18 17-18 17' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: transform var(--zp-motion);
}

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

.series__link:hover::after,
.series__link:focus-visible::after {
	transform: translateX(max(6px, 0.3472vw));
}

/* Γιατί αλουμίνιο / Γιατί ΖΑΧΑΡΙΟΥ
--------------------------------------------- */

/* Two columns over a full-bleed photograph, and in each the heading and its copy
are separate plates with a hairline of background showing between them — which is
why there is no wrapper per column: four siblings placed on a two-by-two grid say
the same thing with none of the nesting. */
.giati {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-content: start;
	column-gap: max(1.5rem, 9.2593vw); /* 160px at 1728 */
	row-gap: max(0.5rem, 0.8681vw); /* 15px at 1728 */
	padding-block: max(4rem, 23.0903vw) max(3rem, 10.1273vw); /* 399px / 175px at 1728 */
	padding-inline: var(--zp-pad);
}

/* Absolutely positioned against the padding box, so the section's inset does not
cut into it. The same arrangement as the hero and the offer band. */
.giati__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.giati__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Relative, so the plates paint above the photograph without a z-index. */
.giati__title {
	position: relative;
	grid-row: 1;
	margin: 0;
	padding: max(1rem, 1.5336vw) max(1rem, 3.2986vw); /* 26.5 / 57 at 1728 */
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: max(1.5rem, 2.0833vw); /* 36px at 1728 */
	font-stretch: 75%;
	line-height: 1;
}

.giati__text {
	position: relative;
	grid-row: 2;
	margin: 0;
	padding: max(1rem, 1.0417vw) max(1rem, 3.2986vw); /* 18 / 57 at 1728 */
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: max(0.875rem, 1.0417vw); /* 18px at 1728 */
	line-height: 1.39; /* 25px rows at 18px */
}

/* The columns are placed by type rather than by a modifier class: the section
holds exactly two headings and two paragraphs, and nth-of-type counts each
element apart from the other. */
.giati__title:nth-of-type(1),
.giati__text:nth-of-type(1) {
	grid-column: 1;
}

.giati__title:nth-of-type(2),
.giati__text:nth-of-type(2) {
	grid-column: 2;
}

/* Νέα και άρθρα
--------------------------------------------- */

.nea {
	padding-block: max(3rem, 4.5718vw) max(3rem, 3.9931vw); /* 79px / 69px at 1728 */
	padding-inline: var(--zp-pad);
	background-color: var(--wp--preset--color--surface-alt);
}

/* Same treatment as the carousel's heading: the rule is drawn as a block inside
the heading rather than as a second element. */
.nea__heading {
	margin: 0;
	font-size: max(2rem, 17.6px + 1.875vw, 2.8935vw); /* 50px at 1728, 32px at 768 */
	font-stretch: 75%;
	line-height: 1;
}

.nea__heading::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: max(1rem, 1.8519vw); /* 32px at 1728 */
	background-color: var(--wp--preset--color--faint);
}

.nea__list {
	margin-top: max(1.5rem, 3.9931vw); /* 69px at 1728 */
}

/* Core would emit its own grid and its own gap if the post template carried a
layout attribute. It carries none, so the three columns are declared here with
the design's own 89px between them. */
.nea__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: max(1.5rem, 5.1505vw); /* 89px at 1728 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.nea__grid > li {
	display: flex;
	flex-direction: column;
	padding-bottom: max(1rem, 1.2153vw); /* 21px at 1728 */
	background-color: var(--wp--preset--color--base);
}

/* The picture reaches the card's edges while the text is inset, so the inset is
declared on the text rather than as padding on the card. */
.nea__media {
	margin: 0 0 max(0.75rem, 1.1574vw); /* 20px at 1728 */
}

.nea__media img {
	display: block;
	width: 100%;
	aspect-ratio: 450 / 293;
	object-fit: cover;
}

.nea__date,
.nea__post-title,
.nea__excerpt,
.nea__more {
	padding-inline: max(1rem, 1.794vw); /* 31px at 1728 */
}

.nea__date {
	color: var(--wp--preset--color--faint);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.8102vw); /* 14px at 1728 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.nea__post-title {
	margin: max(0.5rem, 0.868vw) 0 0; /* 15px at 1728 */
	color: var(--wp--preset--color--muted);
	font-size: max(1rem, 1.1574vw); /* 20px at 1728 */
	font-stretch: 75%;
	line-height: 1.4; /* 28px rows at 20px */
}

.nea__post-title a {
	color: inherit;
	text-decoration: none;
}

.nea__post-title a:hover,
.nea__post-title a:focus-visible {
	color: var(--wp--preset--color--ink);
}

/* Pushed to fill whatever the title leaves, so the read-more link sits on one
line across all three cards however long the titles run. */
.nea__excerpt {
	flex: 1;
	margin: max(0.75rem, 1.1574vw) 0 0; /* 20px at 1728 */
	color: var(--wp--preset--color--muted);
}

.nea__excerpt p {
	margin: 0;
	font-size: max(0.875rem, 0.868vw); /* 15px at 1728 */
	line-height: 1.53; /* 23px rows at 15px */
}

.nea__more {
	display: flex;
	align-items: center;
	margin-top: max(0.75rem, 1.2153vw); /* 21px at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 1.0417vw); /* 18px at 1728 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

/* The intro's flatter arrow, not the newsletter's — the design draws this one at
28:12, which is the 50:22 drawing. */
.nea__more::after {
	content: "";
	width: max(1.25rem, 1.6204vw); /* 28px at 1728 */
	aspect-ratio: 50 / 22;
	margin-inline-start: max(0.75rem, 1.2731vw); /* 22px at 1728 */
	background-color: currentcolor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 22'%3E%3Cpath d='M0 11h47M38 3l9 8-9 8' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: transform var(--zp-motion);
}

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

.nea__more:hover::after,
.nea__more:focus-visible::after {
	transform: translateX(max(6px, 0.3472vw));
}

/* The closing plate, centred under the three cards. Unlike the products bar this
one really is symmetric in the design — 66 left, 65 right. */
.nea__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: max(18rem, 33.7384vw); /* 583px at 1728 */
	max-width: 100%;
	min-height: max(3rem, 3.9931vw); /* 69px at 1728 */
	margin: max(2rem, 3.9931vw) auto 0; /* 69px at 1728 */
	padding-inline: max(1rem, 3.8194vw); /* 66px at 1728 */
	background-color: var(--wp--preset--color--base);
}

.nea__all a {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(1rem, 1.4468vw); /* 25px at 1728 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.nea__all::after {
	content: "";
	flex: none;
	width: max(1.5rem, 2.1412vw); /* 37px at 1728 */
	aspect-ratio: 75 / 42;
	margin-inline-start: max(1rem, 1.6782vw); /* 29px at 1728 */
	background-color: var(--wp--preset--color--muted);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 42'%3E%3Cpath d='M0 21h72M54 4l18 17-18 17' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

/* Breakpoints
---------------------------------------------

Every rule that changes with the viewport lives here, one query per width, and
after all the base rules — a media query adds no specificity, so a base rule
written below it wins and the query silently does nothing. Ordered widest to
narrowest so 480 has the last word over 767. */

@media (max-width: 998px) {

	.intro__stats {
		justify-content: space-between;
	}
}

@media (max-width: 767px) {

	/* A 1.72:1 slide is a 218px letterbox on a 375px screen, so the carousel crop
	turns upright. The plate spans the slide rather than holding the drawn width,
	which no longer fits, and rides closer to the foot on the shorter picture. */
	.erga-carousel__image {
		aspect-ratio: 4 / 3;
	}

	.erga-carousel__caption {
		right: var(--zp-pad);
		bottom: max(0.75rem, 3vw);
		min-width: 0;
	}

	/* Προϊόντα in one column: the tab list above, then the picture, then the bar.
	The bar takes the full width here, since two thirds of a 375px screen is not
	enough for the label. */
	.proionta {
		grid-template-columns: 1fr;
	}

	/* The space below the tabs is theirs rather than a row gap: a gap applies to
	every row, and it would part the bar from the foot of the picture, which stays
	welded to it exactly as on the desktop. */
	.proionta__tabs {
		grid-row: auto;
		margin-bottom: max(1.5rem, 4vw);
	}

	.proionta__media,
	.proionta__cta {
		grid-column: 1;
		grid-row: auto;
	}

	.proionta__cta {
		width: 100%;
	}

	/* The plate takes the full width: half the screen is not a measure. */
	.prosfora__content {
		width: 100%;
	}

	/* Σειρές in one column, and the series name takes a line of its own — three
	cells across a 375px screen would leave the longest description two characters
	wide. */
	.series {
		grid-template-columns: 1fr;
	}

	.series__logo {
		width: max(11rem, 45vw);
	}

	.series__copy {
		margin-top: max(1rem, 4vw);
	}

	.series__link {
		grid-template-columns: 1fr max-content max-content;
		row-gap: max(0.375rem, 1.5vw);
		padding-block: max(0.75rem, 3vw);
	}

	.series__name {
		grid-column: 1 / -1;
	}

	/* Γιατί stacks to one column. The row gap still separates each heading from
	its own copy, so the second heading takes a margin to open a wider break
	between the two subjects than there is inside either. */
	.giati {
		grid-template-columns: 1fr;
	}

	.giati__title,
	.giati__text {
		grid-row: auto;
	}

	/* The nth-of-type is carried over rather than dropped: the base rule that puts
	the second pair in column two is (0,2,0), and a plain class selector here would
	lose to it however far down the file it sat. */
	.giati__title:nth-of-type(2),
	.giati__text:nth-of-type(2) {
		grid-column: 1;
	}

	.giati__title:nth-of-type(2) {
		margin-top: max(1.5rem, 4vw);
	}

	/* One card per row. Three columns on a phone leaves each about 100px wide,
	which is narrower than the excerpt's longest word. */
	.nea__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {

	/* The intro becomes one column: the name, then the copy, then the figures
	paired up. Side by side the copy was reduced to a 166px ribbon running three
	words to a line, and the name overflowed its track into it.

	The figures take equal columns rather than content-sized ones, so they line up
	with the text above and the rule between them lands mid-gap — it is positioned
	by half of --stat-gap, which only matches the drawn gap when the tracks are not
	spread. Labels may wrap here: held on one line they would force the columns
	wider than the screen at 320. The rule before the third is dropped, since it
	falls at the start of a row. */
	.intro__stats {
		--stat-gap: 2rem;

		grid-template-columns: repeat(2, 1fr);
	}

	.intro__stat-label {
		white-space: normal;
	}

	.intro__stat:nth-child(3)::before {
		display: none;
	}

	/* The Σειρές row holds three cells plus an arrow, and the longest description
	is 27 characters, so at this width everything is allowed below the floors the
	rest of the theme keeps — otherwise ΣΥΡΟΜΕΝΟ ΜΕΓΑΛΩΝ ΑΝΟΙΓΜΑΤΩΝ runs straight
	into ΠΕΡΙΣΣΟΤΕΡΑ. The column gap is what guarantees they stay apart whatever a
	future description says. */
	.series__link {
		column-gap: max(0.5rem, 2vw);
	}

	.series__name {
		font-size: 1.5rem; /* 24px */
	}

	.series__type {
		font-size: 0.75rem; /* 12px */
	}

	.series__more {
		font-size: 0.8125rem; /* 13px */
	}

	.series__link::after {
		width: 1.375rem; /* 22px */
		margin-inline-start: 0.5rem; /* 8px */
	}
}