/* ═══════════════════════════════════════════════════════════════════════════
   LEADER HELLAS — ΚΟΙΝΟ / ΣΥΝΕΡΓΑΤΕΣ
   Figma @1920: section 1157 · λίστα 750 padding-top 102 · item 149 ύψος
                γράμματα 90/80 · κύκλος βέλους 66 στο 49/49 · εικόνα 167 στρογγυλή
                copy 378 στο top 98 right 126 · art 510×382 στο top 633
   ═══════════════════════════════════════════════════════════════════════════ */

.lh-audience,
.lh-audience *,
.lh-audience *::before,
.lh-audience *::after {
	box-sizing: border-box;
}

.lh-audience {
	--lh-aud-item-h: 14.9rem;     /* 149px */
	--lh-aud-font: 9rem;          /*  90px */
	--lh-aud-indent: 14.6rem;     /* 146px */
	--lh-aud-indent-hover: 19.7rem;
	--lh-aud-avatar: 16.7rem;     /* 167px */
	--lh-aud-color: var(--lh-muted);
	--lh-aud-color-hover: var(--lh-navy);
	--lh-aud-speed: .35s;

	position: relative;
	width: 100%;
	min-height: 115.7rem;   /* 1157px */
	padding: 0 12.7rem 0 20.3rem;
}

/* ─── Λίστα ────────────────────────────────────────────────────────────── */

.lh-audience__list {
	width: 75rem;   /* 750px */
	padding-top: 10.2rem;
}

.lh-audience__item {
	position: relative;
	height: var(--lh-aud-item-h);
	padding: 4.3rem 0 0 var(--lh-aud-indent);
	color: var(--lh-aud-color);
	font-family: var(--lh-display);
	font-size: var(--lh-aud-font);
	font-weight: 800;
	line-height: 8rem;
	letter-spacing: .18rem;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: default;
	/* Το padding δεν είναι compositor-friendly, αλλά εδώ αλλάζει μόνο ένα
	   στοιχείο τη φορά και το layout είναι απόλυτο — δεν προκαλεί reflow αλυσίδα. */
	transition: padding-left var(--lh-aud-speed) var(--lh-ease),
	            color var(--lh-aud-speed) var(--lh-ease);
}

.lh-audience__item:hover,
.lh-audience__item:focus-visible {
	z-index: 2;
	padding-left: var(--lh-aud-indent-hover);
	color: var(--lh-aud-color-hover);
	outline: none;
}

/* Κύκλος με βέλος — η αρχική κατάσταση. */
.lh-audience__item::before {
	position: absolute;
	content: "→";
	top: 4.9rem;
	left: 4.9rem;
	width: 6.6rem;
	height: 6.6rem;
	border: .4rem solid currentColor;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--lh-body);
	font-size: 3.8rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	opacity: 1;
	transition: opacity var(--lh-aud-speed) var(--lh-ease),
	            transform var(--lh-aud-speed) var(--lh-ease);
}

.lh-audience__item:hover::before,
.lh-audience__item:focus-visible::before {
	opacity: 0;
	transform: scale(.6);
}

/*
 * Στρογγυλή φωτογραφία που αποκαλύπτεται στο hover.
 * Το static έκανε display:none → block (απότομο). Εδώ opacity+scale, που
 * τρέχουν στο compositor και δίνουν το ίδιο αποτέλεσμα ομαλά.
 */
/* (0,2,0) — δες τη σημείωση ειδικότητας στο leader-core.css. */
.lh-audience .lh-audience__avatar {
	width: var(--lh-aud-avatar);
	height: var(--lh-aud-avatar);
}

.lh-audience__avatar {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	border-radius: 50%;
	object-fit: cover;
	opacity: 0;
	transform: scale(.72);
	transition: opacity var(--lh-aud-speed) var(--lh-ease),
	            transform var(--lh-aud-speed) var(--lh-ease);
	pointer-events: none;
}

.lh-audience__item:hover .lh-audience__avatar,
.lh-audience__item:focus-visible .lh-audience__avatar {
	opacity: 1;
	transform: scale(1);
}

/* ─── Κείμενο δεξιά ────────────────────────────────────────────────────── */

.lh-audience__copy {
	position: absolute;
	top: 9.8rem;
	right: 12.6rem;
	width: 37.8rem;   /* 378px */
}

.lh-audience__title {
	margin: 0 0 2.5rem;
	font-family: var(--lh-display);
	font-size: 2rem;
	font-weight: 800;
	line-height: 2.5rem;
	letter-spacing: .1rem;
	text-transform: uppercase;
}

.lh-audience__text {
	margin: 0;
	font-size: 2rem;
	line-height: 3rem;
}

/* Ίδιο σκεπτικό με το .lh-about__copy: μία κενή γραμμή ανάμεσα στις παραγράφους. */
.lh-audience__text p {
	margin: 0 0 3rem;
}

.lh-audience__text p:last-child {
	margin-bottom: 0;
}

/* ─── Διακοσμητικά ─────────────────────────────────────────────────────── */

.lh-audience__art {
	position: absolute;
	top: 63.3rem;
	right: 12.6rem;
	width: 51rem;
	height: 38.2rem;
	pointer-events: none;
}

/*
 * (0,2,0). Χωρίς αυτό το `.elementor img { height: auto }` έδινε στο πακέτο
 * 213px ύψος (φυσική αναλογία 1412×1302) αντί για τα 257px του design.
 */
.lh-audience .lh-audience__art-pallet {
	position: absolute;
	top: 0;
	right: 0;
	width: 41.3rem;
	height: 32.4rem;
	object-fit: contain;
}

.lh-audience .lh-audience__art-pack {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 23.1rem;
	height: 25.7rem;
	object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ≤1024px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

	.lh-audience {
		--lh-aud-indent: 7rem;
		--lh-aud-indent-hover: 9.5rem;
		--lh-aud-avatar: 8rem;

		min-height: 0;
		padding: 3rem var(--lh-gutter) 8rem;
		display: flex;
		flex-direction: column;
	}

	.lh-audience__list {
		width: 100%;
		padding-top: 0;
	}

	.lh-audience__item {
		height: auto;
		min-height: 9.2rem;
		padding: 2.9rem 0 2rem var(--lh-aud-indent);
		font-size: clamp(3.4rem, 10vw, 5.6rem);
		line-height: 1;
		white-space: normal;
	}

	.lh-audience__item::before {
		top: 2.5rem;
		left: 0;
		width: 4.8rem;
		height: 4.8rem;
		border-width: .3rem;
		font-size: 2.8rem;
	}

	.lh-audience__avatar {
		top: .6rem;
	}

	.lh-audience__copy,
	.lh-audience__art {
		position: relative;
		inset: auto;
		width: 100%;
	}

	.lh-audience__copy {
		margin-top: 6rem;
	}

	.lh-audience__art {
		height: 32rem;
		margin-top: 4.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.lh-audience__item,
	.lh-audience__item::before,
	.lh-audience__avatar {
		transition: none;
	}
}