/*
zprime product pages, below the fold. Loaded on every zprime_proion single, after
style.css, so everything here can rely on the theme's custom properties.

The photographic opening and the intro band are above it and live in
css/critical-proionta.css, inlined — do not look for them here. Nothing is
duplicated between the two.
*/

/*--------------------------------------------------------------
# Types of κούφωμα
--------------------------------------------------------------*/

/* Three columns with the design's 43px gutters. The section is the grid and the
cards place straight into it — no wrapper, the construction the steps and κανόνες
bands on the company page already use.

Five cards in three columns leaves the last row short by one. That is left ragged
rather than balanced: the alternative is tracks that stop matching the three-column
rhythm the rest of the page is built on, for the sake of a hole nobody reads as a
mistake.

The band carries the intro's own field, as the design draws it — one colour behind
both, so the join above is invisible and only the intro's bottom padding separates
them.

The bottom padding is this band's own, and it is not the ALUMIL band's top padding
doing the same job: that one opens space *inside* a lighter field, above its logo,
while this closes the darker field beneath the last line of a card. Where two bands
share a colour one padding can serve both; here the boundary is visible, so each side
carries its own. */
.proionta-types {
	counter-reset: type;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	column-gap: max(1.5rem, 2.4884vw); /* 43px at 1728 */
	row-gap: max(2rem, 3.7037vw); /* 64px — the design has one row, so this is ours */
	padding-inline: var(--zp-pad);
	padding-bottom: max(3rem, 6.9444vw); /* 120px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.proionta-type {
	min-width: 0;
}

/* The five photographs run from 1.50 to 1.82, so the 4:3 the design draws is held
here and they are cropped to it rather than each card taking its own height. Core's
image block ships a figure margin and style.css adds another. */
.proionta-type__media {
	margin: 0;
}

.proionta-type__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* The rule under the picture and the ordinal below it are one pseudo-element: the
line is its top border and the number is its content, so a hairline the design draws
across every card costs neither an element nor a second selector. The two gaps either
side of the line are the box's own margin and padding.

The ordinal is generated rather than written, so reordering or deleting a card cannot
break the sequence and nobody types a number. decimal-leading-zero gives 01 not 1.

It hangs off the figure, not off the heading. On the heading its text would join the
accessible name and a screen reader would announce "01 ΑΝΟΙΓΟΜΕΝΑ ΚΟΥΦΩΜΑΤΑ"; here it
lands in the same place visually and says nothing.

muted, not faint. The design draws this grey light, and on white faint would carry it
at 5.7:1 — but this band is #d9d9d9, where faint falls to 3.72:1 and fails AA at
14px. muted holds 4.93:1. That makes it the same colour as the title below it and the
hierarchy is carried by size, exactly as on the company page's scope band, which sits
on this same field and made this same substitution. */
.proionta-type__media::after {
	counter-increment: type;
	content: counter(type, decimal-leading-zero);
	display: block;
	margin-top: max(0.75rem, 1.2153vw); /* 21px, picture to rule */
	padding-top: max(0.75rem, 1.2153vw); /* 21px, rule to number */
	border-top: 1px solid var(--wp--preset--color--ink);
	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;
}

/* Open Sans unstretched and untracked, against the condensed face theme.json gives
every heading — the same override every 18px title on the company page carries, so
the role is set one way across the site. Size is restated because theme.json puts h3
at 34px. */
.proionta-type__title {
	margin: max(0.5rem, 0.6944vw) 0 0; /* 12px at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-stretch: 100%;
	line-height: 1.5;
	letter-spacing: normal;
}

/* The design sets this at 17px/1.65/0.03em; it takes the theme's standard body
treatment instead, for the same reason the intro's paragraphs do. */
.proionta-type__text {
	margin: max(0.5rem, 0.6944vw) 0 0; /* 12px at 1728 */
	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.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

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

/* Two across. Five leaves the last row short either way, and at this width three
tracks put each card near 280px and still shrinking. */
@media (max-width: 998px) {

	.proionta-types {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {

	.proionta-types {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# ΣΕΙΡΕΣ & ΣΥΣΤΗΜΑΤΑ ALUMIL
--------------------------------------------------------------*/

/* Logo, heading and copy on the left; a two-by-two of plates on the right with the
call to action under them. Tracks are the design's own 5 : 7 of the content row,
which with the 96px gutter puts them on 600 and 840 at the reference.

Three children, no fourth wrapper: the left column is one block because its three
parts stack, and the plates and the link place themselves into the second column —
the construction the company page's certification band already uses.

The same lighter field as that band, with the plates in base on top of it. The two
sections above sit on `border`, so the change of colour is what marks this as a new
subject. */
.proionta-alumil {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: start;
	column-gap: max(1.5rem, 5.5556vw); /* 96px at 1728 */
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 6.9444vw); /* 120px at 1728 */
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--muted);
}

.proionta-alumil > * {
	min-width: 0;
}

/* Spans both rows of the stack beside it, so the plates and the link share the
second column while this keeps the first. */
.proionta-alumil__intro {
	grid-column: 1;
	grid-row: 1 / span 2;
}

/* 200px is the logo's own width and it is an SVG, so this is a display size rather
than a resolution decision — the same treatment the company page gives it. */
.proionta-alumil__logo {
	width: max(7.5rem, 11.574vw); /* 200px at 1728 */
	margin: 0;
}

.proionta-alumil__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Family, weight and case from theme.json; only size, leading and tracking restated.
The rule under it is the heading's own bottom border, so it ends where the column ends
— which is where the design draws it — and costs no element. */
.proionta-alumil__title {
	margin: max(1.25rem, 1.9676vw) 0 0; /* 34px at 1728 */
	padding-bottom: max(1.25rem, 2.0255vw); /* 35px at 1728 */
	border-bottom: 1px solid var(--wp--preset--color--ink);
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18; /* 59px at 50px */
	letter-spacing: 0.02em;
}

.proionta-alumil__text {
	margin: max(1.25rem, 1.9676vw) 0 0; /* 34px at 1728 */
	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.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Two by two with the design's 24px gutters. Rows size themselves, so both plates in
a row match the taller of the pair. */
.proionta-alumil__cards {
	display: grid;
	grid-column: 2;
	grid-template-columns: repeat(2, 1fr);
	gap: max(0.75rem, 1.3889vw); /* 24px at 1728 */
}

/* 43px on all four sides. The plate's height falls out of its content rather than
being set — nothing here declares one. */
.proionta-alumil__card {
	padding: max(1rem, 2.4884vw); /* 43px at 1728 */
	background-color: var(--wp--preset--color--base);
}

/* Open Sans unstretched and untracked, against the condensed face theme.json gives
every heading — the same override every card title on the site carries. Size is
restated because theme.json puts h3 at 34px. */
.proionta-alumil__card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(1.125rem, 0.825rem + 0.625vw, 1.3889vw); /* 24px at 1728, 18px at 768 */
	font-stretch: 100%;
	line-height: 1.5;
	letter-spacing: normal;
}

.proionta-alumil__card-text {
	margin: max(0.5rem, 0.6944vw) 0 0; /* 12px at 1728 */
	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.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Second column, below the plates — placed rather than wrapped, so it lines up with
their left edge for free. */
.proionta-alumil__more {
	grid-column: 2;
	margin: max(1.5rem, 2.7778vw) 0 0; /* 48px at 1728 */
}

/* Same construction as the certification link on the company page, down to the shared
arrow and the 6px nudge the design system specifies for these. */
.proionta-alumil__more a {
	display: inline-flex;
	align-items: center;
	gap: max(1rem, 2.3148vw); /* 40px at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.proionta-alumil__more a::after {
	content: "";
	flex: none;
	width: max(2rem, 2.8935vw); /* 50px at 1728 */
	aspect-ratio: 75 / 42;
	background-color: currentcolor;
	mask-image: var(--zp-arrow);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: transform var(--zp-motion);
}

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

/*--------------------------------------------------------------
# Narrow — ALUMIL
--------------------------------------------------------------*/

@media (max-width: 998px) {

	/* One column. The plates and the link are no longer placed into a second track,
	so their column assignments have to go with it or they land in a track that does
	not exist. */
	.proionta-alumil {
		grid-template-columns: 1fr;
		row-gap: max(1.5rem, 5vw);
	}

	.proionta-alumil__intro {
		grid-row: auto;
	}

	.proionta-alumil__cards,
	.proionta-alumil__more {
		grid-column: 1;
	}
}

/* Two plates side by side leave about 150px each once the 43px padding is taken off
both edges, which is narrower than SUPREME S650 PHOS can set. */
@media (max-width: 479px) {

	.proionta-alumil__cards {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# ΕΠΙΔΟΣΕΙΣ & ΦΙΝΙΡΙΣΜΑΤΑ
--------------------------------------------------------------*/

/* Back to the darker field the two upper bands sit on, so the ALUMIL section between
them reads as the interruption it is. The section is not a grid: its four parts stack,
and only the figures and the swatches inside it are gridded. */
.proionta-specs {
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 6.9444vw); /* 120px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

/* Family, weight and case from theme.json; only size, leading and tracking restated.
The rule under it is the heading's own bottom border and runs the full content width,
which is the width it is drawn at. */
.proionta-specs__title {
	margin: 0;
	padding-bottom: max(1.25rem, 2.0255vw); /* 35px at 1728 */
	border-bottom: 1px solid var(--wp--preset--color--ink);
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18; /* 59px at 50px */
	letter-spacing: 0.02em;
}

/* The measure is the design's 760px, so the lead breaks over two lines as drawn. */
.proionta-specs__lead {
	max-width: max(20rem, 43.9815vw); /* 760px at 1728 */
	margin: max(1.25rem, 1.9676vw) 0 0; /* 34px at 1728 */
	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.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Three by two, with a rule across the full width above each row.

Both gaps are 0 and the 43px between columns is each cell's own right padding. That
is not a quirk of the design, it is what makes the rules work: the line is a top
border on every cell, and only with the cells touching do the three borders in a row
tile into one continuous line. A column gap would break each rule into three
segments with 43px holes in it.

The space between the rows is the cells' own padding too, 34 below one and 27 above
the next, which is how the design measures. A row gap as well would add a third
value to keep in step with those two — and would part the borders from the row they
belong to. */
.proionta-specs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 0;
	margin-top: max(2rem, 3.4722vw); /* 60px at 1728 */
}

.proionta-specs__item {
	min-width: 0;
	padding: max(1rem, 1.5625vw) max(1rem, 2.4884vw) max(1.25rem, 1.9676vw) 0; /* 27 / 43 / 34 / 0 at 1728 */
	border-top: 1px solid var(--wp--preset--color--ink);
}

/* muted, not the design's lighter grey. On this #d9d9d9 field faint measures 3.51:1
and fails AA at 14px; muted holds 4.89:1. The hierarchy against the figure below is
carried by size and weight of colour instead — 14px muted against 40px contrast. */
.proionta-specs__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;
}

/* Darker than the label so the pair keeps the hierarchy the design draws, and darker
than the body grey used elsewhere because this is the thing the section exists to
show. 7.10:1 on this field. */
.proionta-specs__value {
	margin: max(0.75rem, 0.9259vw) 0 0; /* 16px at 1728 */
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(1.5rem, 0.7rem + 1.6667vw, 2.3148vw); /* 40px at 1728, 24px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: 0.02em;
}

/*--------------------------------------------------------------
# Αποχρώσεις
--------------------------------------------------------------*/

/* Open Sans unstretched and untracked, the same override every 18px title on this
site carries against theme.json's condensed h3. */
.proionta-specs__finish-title {
	margin: max(2.5rem, 5.787vw) 0 0; /* 100px at 1728 */
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-stretch: 100%;
	line-height: 1.5;
	letter-spacing: normal;
}

.proionta-specs__swatches {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: max(0.75rem, 1.3889vw); /* 24px at 1728 */
	margin-top: max(1.25rem, 2.3148vw); /* 40px at 1728 */
}

/* One element per swatch, not two: the colour block is this paragraph's ::before, so
the sample costs no markup and the label stays the only thing a screen reader meets —
which is right, because the label is what names the colour.

The hairline matters most for ΛΕΥΚΟ 9016: at #f3f3f0 on a #d9d9d9 field it would
otherwise have no edge at all. */
.proionta-specs__swatch {
	min-width: 0;
	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;
}

.proionta-specs__swatch::before {
	content: "";
	display: block;
	height: max(4rem, 6.9444vw); /* 120px at 1728 */
	margin-bottom: max(0.5rem, 0.6944vw); /* 12px at 1728 */
	border: 1px solid var(--wp--preset--color--ink);
}

/* Literal hex, deliberately not palette slugs. These are paint references — the RAL
number is in the label beside each one — so they have to stay exactly what the client
specifies whatever happens to the theme's colours. ΑΝΘΡΑΚΙ 7016 happens to equal the
`contrast` token today; that is a coincidence and must not become a dependency. */
.proionta-specs__swatch--leyko-9016::before {
	background-color: #f3f3f0;
}

.proionta-specs__swatch--anthraki-7016::before {
	background-color: #3e4346;
}

.proionta-specs__swatch--gkri-9007::before {
	background-color: #8c8c88;
}

.proionta-specs__swatch--mavro-mat::before {
	background-color: #1d1d1b;
}

.proionta-specs__swatch--apomimisi-xylou::before {
	background-color: #7a5a3a;
}

/* Sentence case and untracked, which is what separates it from the labels above now
that both are muted — the design separated them by colour, which this field will not
carry at 14px. */
.proionta-specs__note {
	margin: max(1rem, 1.2153vw) 0 0; /* 21px 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;
}

/*--------------------------------------------------------------
# Narrow — επιδόσεις
--------------------------------------------------------------*/

@media (max-width: 998px) {

	/* Two across. Six divides evenly, so no row is left short. */
	.proionta-specs__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Three across: five at this width puts each swatch near 180px, and the longest
	label, ΑΠΟΜΙΜΗΣΗ ΞΥΛΟΥ, stops fitting on one line well before that. */
	.proionta-specs__swatches {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 479px) {

	.proionta-specs__grid {
		grid-template-columns: 1fr;
	}

	.proionta-specs__swatches {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*--------------------------------------------------------------
# ΚΑΠΟΙΑ ΑΠΟ ΤΑ ΚΟΥΦΩΜΑΤΑ ΜΑΣ
--------------------------------------------------------------*/

/* The same field as the intro, the type cards and the specifications above. The only
band that breaks it is ALUMIL, which is lighter because it is the one section about
somebody else's product. */
.proionta-erga {
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 6.9444vw); /* 120px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

/* Same construction as every other heading on this page: family, weight and case
from theme.json, the rule is the heading's own bottom border. */
.proionta-erga__title {
	margin: 0;
	padding-bottom: max(1.25rem, 2.0255vw); /* 35px at 1728 */
	border-bottom: 1px solid var(--wp--preset--color--ink);
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18; /* 59px at 50px */
	letter-spacing: 0.02em;
}

.proionta-erga__lead {
	max-width: max(20rem, 43.9815vw); /* 760px at 1728 */
	margin: max(1.25rem, 1.9676vw) 0 0; /* 34px at 1728 */
	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.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Two structures in one grid: the 7 : 5 pair at the top and the three equal cells
below, which span the whole row rather than living in a second wrapper. The design's
24px gutter throughout, so the same gap serves the columns, the stack and the join to
the bottom row.

The two side pictures carry the ratio and the wide one fills what they define — not
the other way round. Grid's implicit rows size to content, so a side figure with no
ratio is as tall as whatever was uploaded: one portrait photograph and the row grows
to fit it, the wide image never crops, and the block stops looking like the design.
Declaring the ratio on the sides makes both rows deterministic whatever the source
file is, and the wide picture then fills the area they describe.

The side ratio is derived, not measured: at the reference the columns are 882 and 630,
two side figures plus the 24px gap and their captions have to total the wide figure's
height, which puts each picture at 630 x 269. That falls out as 3:2 for the wide one —
the ratio the design draws — so getting the sides right gets the big one right too. */
.proionta-erga__mosaic {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: max(0.75rem, 1.3889vw); /* 24px at 1728 */
	margin-top: max(2rem, 3.4722vw); /* 60px at 1728 */
}

.proionta-erga__mosaic > *,
.proionta-erga__row > * {
	min-width: 0;
	margin: 0;
}

/* Each figure is a column so the caption sits under a picture that has already taken
whatever height the grid gave it. */
.proionta-erga__wide,
.proionta-erga__side,
.proionta-erga__cell {
	display: flex;
	flex-direction: column;
	aspect-ratio: 3/2;
}

.proionta-erga__wide {
	grid-column: 1;
	grid-row: 1 / span 2;
}

/* No ratio of its own: it fills the two rows the side pictures define, which makes
the two columns end level exactly rather than to within a pixel. min-height: 0 because
a flex item will not shrink below its content otherwise, and an image's content is its
intrinsic height — without it a tall photograph pushes the figure open again. */
.proionta-erga__wide img {
	display: block;
	flex: 1;
	min-height: 0;
	width: 100%;
	object-fit: cover;
}

.proionta-erga__side {
	grid-column: 2;
}

/* The ratio that sizes the whole block. Every source photograph is cropped to it,
portrait ones included, so the mosaic holds its drawn shape whatever is uploaded. */
.proionta-erga__side img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.proionta-erga__row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, 1fr);
	gap: max(0.75rem, 1.3889vw); /* 24px at 1728 */
}

.proionta-erga__cell img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* theme.json already gives every caption its colour, and 14px on white is 7.0:1 in
muted — the one place on this page where the lighter grey would also have passed. Only
the face, case and tracking are added here, and the size is restated because
theme.json's caption is fixed at 14px while everything else on the page scales. */
.proionta-erga figcaption {
	margin-top: max(0.5rem, 0.6944vw); /* 12px at 1728 */
	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;
}

/*--------------------------------------------------------------
# Narrow — έργα
--------------------------------------------------------------*/

@media (max-width: 998px) {

	/* One column. The wide picture stops spanning, since there is no stack beside it
	to span, so it needs a ratio of its own — and the sides drop their wide 630:269
	crop, which at full width would be a letterbox strip. All six pictures take the
	same 3:2 here, so the column reads as one set. */
	.proionta-erga__mosaic {
		grid-template-columns: 1fr;
	}

	.proionta-erga__wide {
		grid-row: auto;
	}

	.proionta-erga__side {
		grid-column: 1;
	}

	.proionta-erga__wide img,
	.proionta-erga__side img {
		flex: none;
		aspect-ratio: 3 / 2;
	}

	/* Two across rather than three: at this width three cells are near 300px and the
	captions start wrapping to three lines. */
	.proionta-erga__row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {

	.proionta-erga__row {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# ΠΟΙΟ ΣΥΣΤΗΜΑ ΤΑΙΡΙΑΖΕΙ ΣΤΟ ΔΙΚΟ ΣΑΣ ΑΝΟΙΓΜΑ;
--------------------------------------------------------------*/

/* The closing band: a photograph carried by opacity rather than by a scrim layer.
The design draws rgba(29,29,27,0.7) over the picture, which is the same thing as the
picture at three tenths over near-black — so the section's own background is the
scrim, one declaration instead of a pseudo-element, and if the photograph never loads
the words stay white on black instead of white on nothing.

Three tenths also fixes the contrast floor. However bright the picture, the lightest
the field can go is 0.3 x white over ink, which is #4d4d4d, where white is 8.4:1.
That holds whatever photograph is set on any of the seven products.

Everything centres. No grid: five children stacked, each carrying its own gap, and
the band's height falls out of them — 104 + content + 104 comes to the 480 drawn,
which is also what the company page's closing band measures. */
.proionta-cta {
	position: relative;
	isolation: isolate;
	padding-inline: var(--zp-pad);
	padding-block: max(2.5rem, 6.0185vw); /* 104px at 1728 */
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	text-align: center;
}

/* Out of flow and on a negative layer, so it paints under the words but still over
the section's own background — which is what lets that background act as the scrim. */
.proionta-cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

.proionta-cta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
}

/* The measure is the design's 900px, so the question breaks where it is drawn to
break. Centred by auto margins rather than by the text-align above, which cannot
centre a block narrower than its container. */
.proionta-cta__title {
	max-width: max(20rem, 52.0833vw); /* 900px at 1728 */
	margin: 0 auto;
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18; /* 59px at 50px */
	letter-spacing: 0.02em;
}

.proionta-cta__lead {
	margin: max(0.75rem, 1.2153vw) 0 0; /* 21px at 1728 */
	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.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Core's buttons row is already a flex container that wraps; it only needs centring
and the design's 43px. gap rather than column-gap so the two still clear each other
once they wrap on a phone, and align-items because the second button has no plate and
would otherwise sit on a different line from the first. */
.proionta-cta__actions {
	align-items: center;
	justify-content: center;
	gap: max(1.5rem, 2.4884vw); /* 43px at 1728 */
	margin: max(1.5rem, 2.4884vw) 0 0; /* 43px at 1728 */
}

/* theme.json dresses every button dark-on-light at 20px with 18/32 padding. This one
is the inverse and smaller: a white plate whose size is entirely its label plus the
design's 21 and 43 of padding, so no dimension is declared. */
.proionta-cta__quote .wp-block-button__link {
	padding: max(0.75rem, 1.2153vw) max(1.5rem, 2.4884vw); /* 21px / 43px at 1728 */
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
}

.proionta-cta__quote .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--border);
}

/* Drawn as plain words, not a second plate and — unlike every other secondary link
on the site — with no arrow. It stays a Button block so the pair edits as one thing
and shares the row; the plate is what comes off. */
.proionta-cta__contact .wp-block-button__link {
	padding: 0;
	background-color: transparent;
	color: inherit;
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
}

.proionta-cta__contact .wp-block-button__link:hover {
	background-color: transparent;
	text-decoration: underline;
}

.proionta-cta__phone {
	margin: max(1.25rem, 1.9676vw) 0 0; /* 34px at 1728 */
	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.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* theme.json colours every link `contrast` and dims it to `muted` on hover. Both are
near-black and this one sits on black. The underline stays: it is the only thing
marking the number as dialable. */
.proionta-cta__phone a,
.proionta-cta__phone a:hover {
	color: inherit;
}