/* ═══════════════════════════════════════════════════════════════════════════
   LEADER HELLAS — HERO SPLIT (αρχική)
   Figma @1920: ύψος 829 · κάρτα 454×410 · top 196 · offset 253 · padding 44/39
   ═══════════════════════════════════════════════════════════════════════════ */

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

.lh-hero {
	--lh-hero-h: 82.9rem;        /* 829px */
	--lh-hero-card-w: 45.4rem;   /* 454px */
	--lh-hero-card-top: 19.6rem; /* 196px */
	--lh-hero-card-off: 25.3rem; /* 253px */
	--lh-hero-pad-x: 3.9rem;     /*  39px */
	--lh-hero-pad-y: 4.4rem;     /*  44px */
	--lh-hero-zoom: 1;

	/*
	 * Το πλήθος των πάνελ έρχεται από το widget ως μεταβλητή, ΟΧΙ ως inline
	 * grid-template-columns — ένα inline style θα νικούσε το media query των
	 * ≤1024px και το hero θα έμενε 2 στήλες στο κινητό.
	 */
	display: grid;
	grid-template-columns: repeat(var(--lh-hero-cols, 2), minmax(0, 1fr));
	height: var(--lh-hero-h);
	width: 100%;
}

.lh-hero__panel {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* (0,1,1) — ρητό hover, αλλιώς το `a:hover` του θέματος βάφει τον σύνδεσμο. */
.lh-hero__panel,
.lh-hero__panel:hover,
.lh-hero__panel:focus {
	color: inherit;
}

/* (0,2,0) — δες τη σημείωση ειδικότητας στο leader-core.css. */
.lh-hero .lh-hero__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lh-hero__media {
	transition: transform .6s var(--lh-ease);
}

.lh-hero__panel:hover .lh-hero__media,
.lh-hero__panel:focus-visible .lh-hero__media {
	transform: scale(var(--lh-hero-zoom));
}

/* Σκίαση 15% multiply — μόνο στο πάνελ που το ζητά το design. */
.lh-hero__panel--shaded::after {
	position: absolute;
	content: "";
	inset: 0;
	background: rgba(0, 0, 0, .15);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/*
 * Χρώμα και επιπλέον padding κορυφής έρχονται ανά πάνελ ως μεταβλητές (τα
 * ορίζει το widget πάνω στο <a>), ώστε το media query να μπορεί να τα
 * παρακάμψει στο κινητό.
 */
.lh-hero__card {
	position: absolute;
	z-index: 1;
	top: var(--lh-hero-card-top);
	width: var(--lh-hero-card-w);
	min-height: 41rem;   /* 410px */
	padding: var(--lh-card-pad-top, var(--lh-hero-pad-y)) var(--lh-hero-pad-x) var(--lh-hero-pad-y);
	border-radius: var(--lh-radius);
	background: var(--lh-card-bg, transparent);
	color: var(--lh-white);
}

.lh-hero__panel--card-right .lh-hero__card {
	right: var(--lh-hero-card-off);
}

.lh-hero__panel--card-left .lh-hero__card {
	left: var(--lh-hero-card-off);
}

.lh-hero__title {
	margin: 0;
	color: inherit;
	font-family: var(--lh-display);
	font-size: 5.5rem;     /* 55px */
	font-weight: 800;
	line-height: 5.7rem;   /* 57px */
	letter-spacing: .11rem;
	text-transform: uppercase;
}

.lh-hero__link {
	position: absolute;
	z-index: 2;
	left: var(--lh-hero-pad-x);
	bottom: 4.5rem;        /* 45px */
	display: inline-block;
	color: var(--lh-white);
	font-family: var(--lh-display);
	font-size: 2rem;       /* 20px */
	font-weight: 800;
	letter-spacing: .1rem;
	text-transform: uppercase;
	transition: transform .25s var(--lh-ease);
}

.lh-hero__panel:hover .lh-hero__link,
.lh-hero__panel:focus-visible .lh-hero__link {
	transform: translateX(.6rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ≤1024px — τα πάνελ στοιβάζονται, η κάρτα κεντράρεται
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

	.lh-hero {
		height: auto;
		grid-template-columns: minmax(0, 1fr);
	}

	.lh-hero__panel {
		height: 62rem; /* 620px */
	}

	.lh-hero__panel--card-right .lh-hero__card,
	.lh-hero__panel--card-left .lh-hero__card {
		top: 50%;
		left: 50%;
		right: auto;
		width: min(calc(100% - 4.4rem), 45.4rem);
		min-height: 34rem;
		padding: 4.2rem 3.2rem;
		transform: translate(-50%, -50%);
	}

	/*
	 * Στα σταθερά 46px του static η λέξη «ΕΠΑΓΓΕΛΜΑΤΙΚΕΣ» (14 χαρακτήρες)
	 * ξεπερνούσε το πλάτος της κάρτας σε οθόνη 390px. Το vw κρατά τη
	 * μεγαλύτερη λέξη μέσα στην κάρτα από τα 320px και πάνω.
	 */
	.lh-hero__title {
		font-size: clamp(2.8rem, 9.6vw, 4.6rem);
		line-height: 1.04;
	}

	.lh-hero__link {
		left: 3.2rem;
		bottom: 3.4rem;
	}
}

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

	.lh-hero__media,
	.lh-hero__link {
		transition: none;
	}

	.lh-hero__panel:hover .lh-hero__media,
	.lh-hero__panel:focus-visible .lh-hero__media,
	.lh-hero__panel:hover .lh-hero__link,
	.lh-hero__panel:focus-visible .lh-hero__link {
		transform: none;
	}
}