/**
 * Árak aloldal — Header (EYEBROW_HERO)
 *
 * Page-hero kompakt változat: eyebrow + H1 + sub. Fehér háttér, bal-igazítva
 * (a Funkciók aloldali headerrel egyezően). Nincs mini-toc, nincs jobb oldali
 * vizuál — a `arak.md` 1. szekciója rövid, lényegre törő.
 *
 * Padding-szabály (lásd SECTION_COMPOSITIONS.md 15.1): a header **bottom
 * padding-ja 0** — a következő szekció saját top paddingje (`--spacing-section-*`)
 * adja a függőleges levegőt. Így a header és az első tartalmi szekció
 * között nem duplázódik a whitespace.
 *
 * Forrás:
 *   - docs/subpages/arak.md 1. szekció (Header)
 *   - SECTION_COMPOSITIONS.md 15.3 (Header — EYEBROW_HERO)
 *   - SECTION_COMPOSITIONS.md 15.7 (EYEBROW_HERO definíció)
 */

.arak-header {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile) 0;
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.arak-header {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet) 0;
	}
}

@media (min-width: 1200px) {
	.arak-header {
		padding: var(--spacing-section-desktop) var(--container-padding-desktop) 0;
	}
}

.arak-header__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	align-items: flex-start;
}

.arak-header__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 22ch;
}

.arak-header__subtitle {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
	max-width: 60ch;
}