/* ============================================================
   AvestaTech — about, editorial
   No card here on purpose: between the hero window and the
   services window the page needs a breath. Oversized type,
   ruled columns, and the numbers drawn as outlined numerals
   that fill in when you touch them.
   ============================================================ */

.avesta-about {
	position: relative;
	isolation: isolate;
	/* clip, not hidden: the mark is wider than the section on small screens
	   and would otherwise widen the document (body's clip doesn't stop the
	   root element from scrolling). */
	overflow: clip;
}

/* The hollow mark, full height on the far side, barely there */
.avesta-about-mark {
	position: absolute;
	inset-block-start: 8%;
	inset-inline-end: 1%;
	block-size: min(84%, 30rem);
	inline-size: auto;
	opacity: 0.05;
	pointer-events: none;
	z-index: -1;
}

html[data-theme="dark"] .avesta-about-mark {
	opacity: 0.07;
}

/* ---- Statement ---- */

/* WP's constrained layout centres direct children — the statement belongs
   at the inline start, with the links balancing the far end. */
.avesta-about-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	margin-inline: 0 auto;
}

.avesta-about-statement {
	display: grid;
	gap: 0.5rem;
	max-inline-size: 34ch;
}

.avesta-about-title {
	margin: 0;
	font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* The copy leads, the numbers sit alongside it as one tight cluster —
   spread across the full width they read as three unrelated things. */
.avesta-about-body {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	margin-block-start: clamp(1.4rem, 3vw, 2.25rem);
	padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
	border-block-start: 1px solid var(--avesta-hairline);
}

.avesta-about-lede {
	display: grid;
	gap: 0.85rem;
}

.avesta-about-lede p {
	margin: 0;
	line-height: 2.1;
}

.avesta-about-lede p:first-child {
	font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.avesta-about-lede p:last-child {
	font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
}

/* ---- Figures: the numbers, drawn rather than filled ---- */

.avesta-about-figures {
	display: flex;
	align-items: flex-end;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.avesta-about-figure {
	flex: 1 1 0;
	min-inline-size: 0;
	display: grid;
	gap: 0.3rem;
	padding-inline-start: clamp(1rem, 2vw, 1.75rem);
	border-inline-start: 1px solid var(--avesta-hairline);
}

.avesta-about-figure:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.avesta-stat-number {
	margin: 0;
	font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	color: transparent;
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--wp--preset--color--primary) 68%, transparent);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent),
		transparent 78%);
	-webkit-background-clip: text;
	background-clip: text;
	transition: -webkit-text-stroke-color 320ms var(--avesta-ease), background 320ms var(--avesta-ease);
}

/* Outlined text needs the stroke to work; without it the numerals
   would render invisible, so fall back to a solid fill. */
@supports not (-webkit-text-stroke: 1px currentColor) {
	.avesta-stat-number {
		color: var(--wp--preset--color--primary);
		background: none;
	}
}

/* The unit stays solid and small — outlining it too made the figure
   read as a word rather than a number. */
.avesta-stat-number span:last-child {
	font-size: 0.3em;
	vertical-align: 0.9em;
	letter-spacing: 0;
	color: var(--wp--preset--color--primary);
	-webkit-text-stroke: 0;
	background: none;
}

/* Touch a figure and the outline fills in */
.avesta-about-figure:hover .avesta-stat-number {
	-webkit-text-stroke-color: var(--wp--preset--color--primary);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 62%, transparent),
		color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent) 92%);
	-webkit-background-clip: text;
	background-clip: text;
}

.avesta-about-figure-label {
	margin: 0;
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.65;
	text-wrap: balance;
}

/* ---- Footer line ---- */

.avesta-about-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
	padding-block-start: clamp(1.1rem, 2vw, 1.5rem);
	border-block-start: 1px solid var(--avesta-hairline);
}

.avesta-about-place {
	margin: 0;
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.avesta-about-disciplines {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.92rem;
	font-weight: 700;
}

.avesta-about-disciplines li {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

/* A dot between items, print-style — never after the last one */
.avesta-about-disciplines li:not(:last-child)::after {
	content: "";
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
}

.avesta-about-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

/* Editorial links, not buttons: the rule under them draws in on hover */
.avesta-about-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-block-end: 0.2rem;
	font-size: 0.95rem;
	font-weight: 800;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.avesta-about-link--quiet {
	color: var(--wp--preset--color--contrast);
}

.avesta-about-link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1.5px;
	background: currentColor;
	scale: 0 1;
	transform-origin: 100% 50%;
	transition: scale 260ms var(--avesta-ease);
}

.avesta-about-link:hover::after,
.avesta-about-link:focus-visible::after {
	scale: 1 1;
}

.avesta-about-link svg {
	inline-size: 1rem;
	block-size: 1rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: translate 260ms var(--avesta-ease);
}

.avesta-about-link:hover svg {
	translate: -4px 0;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
	.avesta-about-statement {
		max-inline-size: none;
	}

	.avesta-about-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.avesta-about-mark {
		inset-inline-end: -8%;
		block-size: min(50%, 12rem);
		opacity: 0.03;
	}
}

@media (max-width: 560px) {
	.avesta-about-figures {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.avesta-about-figure {
		display: flex;
		align-items: baseline;
		gap: 0.9rem;
		padding-inline-start: 0;
		padding-block-start: 1rem;
		border-inline-start: 0;
		border-block-start: 1px solid var(--avesta-hairline);
	}

	.avesta-about-figure:first-child {
		padding-block-start: 0;
		border-block-start: 0;
	}

	.avesta-stat-number {
		flex: 0 0 auto;
		min-inline-size: 5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.avesta-about-link::after,
	.avesta-about-link svg,
	.avesta-stat-number {
		transition: none;
	}
}