/*
 * Design System - AELITA
 * components/about.css - homepage "about the company" text block.
 *
 * Constrains the reading measure and clamps the long SEO text behind a
 * "show more" link. The .is-clamped / .is-open classes are set by
 * js/design-system/about-toggle.js; without JS the text stays fully visible.
 *
 * Loaded on the front page only (see inc/enqueue.php).
 */

.a-about {
	position: relative;
}

/* -------------------------------------------------------------------- */
/* Reading measure + typography                                         */
/* -------------------------------------------------------------------- */
.a-about__inner {
	max-width: 820px;
	transition: max-height 380ms var(--ease-out);
}

.a-about__inner h1,
.a-about__inner h2,
.a-about__inner h3 {
	font-family: var(--font-display-strong);
	color: var(--text-primary);
	text-transform: uppercase;
	line-height: var(--lh-heading);
}

.a-about__inner h1 {
	margin: 0 0 var(--space-5);
	font-size: var(--fs-h2); /* 28px */
	font-weight: var(--fw-bold);
}

.a-about__inner h3 {
	margin: var(--space-6) 0 var(--space-3);
	font-size: var(--fs-h4); /* 18px */
	font-weight: var(--fw-semibold);
}

.a-about__inner p {
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--fs-body); /* 16px */
	line-height: var(--lh-body);
	color: var(--text-primary);
	text-wrap: pretty;
}

.a-about__inner p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------- */
/* Clamp (only when JS marks the block)                                */
/* -------------------------------------------------------------------- */
.a-about.is-clamped .a-about__inner {
	max-height: 320px;
	overflow: hidden;
}

/* -------------------------------------------------------------------- */
/* "Show more" row + fade                                              */
/* -------------------------------------------------------------------- */
.a-about__more {
	display: none;
	position: relative;
	margin-top: var(--space-5);
}

.a-about.is-clamped .a-about__more {
	display: block;
}

.a-about.is-clamped .a-about__more::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: var(--space-8); /* 64px */
	background: linear-gradient(to bottom, transparent, var(--bg));
	pointer-events: none;
}

.a-about__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	border: 0;
	background: none;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--link);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color var(--dur-popover) var(--ease-out);
}

.a-about__toggle-arrow {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dur-popover) var(--ease-out);
}

.a-about.is-open .a-about__toggle-arrow {
	transform: rotate(-135deg);
}

@media (hover: hover) and (pointer: fine) {
	.a-about__toggle:hover {
		color: var(--link-hover);
	}
}

.a-about__toggle:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.a-about__inner,
	.a-about__toggle,
	.a-about__toggle-arrow {
		transition-duration: 0.01ms;
	}
}