/**
 * Μωβ hero εσωτερικής σελίδας — template-parts/components/page-hero.php
 *
 * Βάση: το εγκεκριμένο mockup «Η εταιρεία». Κάθε σελίδα αλλάζει μόνο τα tokens (--ph-*) που διαφέρουν, π.χ.
 *   .of-contact .of-page-hero { --ph-title-size: clamp(44px, 5vw, 66px); }
 *
 * Mobile-first: κινητό → 768+ → 1024+.
 */

.of-page-hero {
	--ph-space: 56px;
	--ph-padding: 42px 28px;
	--ph-radius: 20px;
	--ph-circle: 360px;
	--ph-circle-right: -100px;
	--ph-circle-bottom: -140px;
	--ph-circle-bg: color-mix(in srgb, var(--color-accent) 14%, transparent);
	--ph-content-max: 820px;
	--ph-eyebrow-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-surface));
	--ph-eyebrow-size: var(--fs-xs);
	--ph-eyebrow-tracking: 0.09em;
	--ph-eyebrow-margin: 12px;
	--ph-title-size: clamp(46px, 5vw, 68px);
	--ph-title-lh: 1.02;
	--ph-title-tracking: -0.045em;
	--ph-title-margin: 18px;
	--ph-text-size: var(--fs-body);
	--ph-text-lh: 1.75;
	--ph-text-max: 760px;
	--ph-text-color: color-mix(in srgb, var(--color-on-primary) 82%, transparent);

	position: relative;
	margin-bottom: var(--ph-space);
	padding: var(--ph-padding);
	overflow: hidden;
	border-radius: var(--ph-radius);
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	line-height: normal;
}

@media (min-width: 768px) {
	.of-page-hero {
		--ph-space: 64px;
		--ph-padding: 58px 48px;
		--ph-radius: 24px;
		--ph-text-size: var(--fs-body-lg);
	}
}

@media (min-width: 1024px) {
	.of-page-hero {
		--ph-space: 72px;
		--ph-padding: 68px 70px;
	}
}

/* Διακοσμητικός κύκλος κάτω δεξιά */
.of-page-hero::after {
	content: "";
	position: absolute;
	right: var(--ph-circle-right);
	bottom: var(--ph-circle-bottom);
	width: var(--ph-circle);
	height: var(--ph-circle);
	border-radius: 50%;
	background-color: var(--ph-circle-bg);
}

.of-page-hero__content {
	position: relative;
	z-index: 1;
	max-width: var(--ph-content-max);
}

.of-page-hero__eyebrow {
	margin: 0 0 var(--ph-eyebrow-margin);
	color: var(--ph-eyebrow-color);
	font-size: var(--ph-eyebrow-size);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ph-eyebrow-tracking);
	text-transform: uppercase;
}

.of-page-hero__title {
	margin: 0 0 var(--ph-title-margin);
	color: var(--color-on-primary);
	font-size: var(--ph-title-size);
	font-weight: var(--fw-bold);
	line-height: var(--ph-title-lh);
	letter-spacing: var(--ph-title-tracking);
}

.of-page-hero__text {
	max-width: var(--ph-text-max);
	margin: 0;
	color: var(--ph-text-color);
	font-size: var(--ph-text-size);
	line-height: var(--ph-text-lh);
}