/* ═══════════════════════════════════════════════════════════════════════════
   LEADER HELLAS — «ΓΙΑΤΙ LEADER HELLAS» (scroll-driven sticky stage)
   ───────────────────────────────────────────────────────────────────────────
   Πώς δουλεύει, χωρίς ούτε μία γραμμή JavaScript:

   · Η φωτογραφία είναι `position: sticky; top: 0` → μένει καρφωμένη στην
     κορυφή όσο κυλάει το stage.
   · Κάθε κάρτα ζει μέσα σε ένα απόλυτα τοποθετημένο «slot». Το slot ορίζει
     ΠΟΤΕ αρχίζει και πότε τελειώνει το κόλλημα (top: X, bottom: -καρτα).
     Η κάρτα μέσα του είναι `position: sticky`, οπότε κολλάει όσο το slot της
     είναι στο viewport και μετά φεύγει προς τα πάνω.
   · Τα slots είναι κλιμακωτά διαγώνια (κάθε επόμενο πιο κάτω και πιο δεξιά),
     άρα οι κάρτες εμφανίζονται η μία μετά την άλλη σε σκάλα.

   ΚΡΙΣΙΜΟ: το stage έχει `overflow: clip`, ΟΧΙ `hidden`. Το `hidden` φτιάχνει
   scroll container και θα σκότωνε το sticky των παιδιών του.
   ═══════════════════════════════════════════════════════════════════════════ */

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

.lh-benefits {
	/* Επιπλέον χώρος στο τέλος ώστε η τελευταία κάρτα να προλαβαίνει να διαβαστεί. */
	--lh-ben-hold: 12rem;         /* 120px */
	--lh-ben-card-w: 36.3rem;     /* 363px */
	--lh-ben-card-h: 38.9rem;     /* 389px */
	--lh-ben-img-h: 84.2rem;      /* 842px */
	--lh-ben-img-inset: 7.3rem;   /*  73px */
	/* Σημείο που κολλάει η κάρτα: κάτω μέρος ~32px πάνω από το κάτω άκρο. */
	--lh-ben-stick: clamp(2.4rem, calc(100vh - 42.1rem), 64.7rem);

	position: relative;
	width: 100%;
	padding: 0 5.4rem 16rem;   /* 54px πλάγια, 160px κάτω κενό */
}

.lh-benefits__eyebrow {
	margin: 0 0 6.5rem;   /* 65px */
	font-family: var(--lh-display);
	font-size: 2rem;
	font-weight: 800;
	line-height: 2.2rem;
	letter-spacing: .1rem;
	text-transform: uppercase;
}

.lh-benefits__stage {
	position: relative;
	overflow: clip;   /* ΟΧΙ hidden — δες σχόλιο παραπάνω */
}

.lh-benefits__image {
	position: sticky;
	z-index: 0;
	top: 0;
	margin-left: var(--lh-ben-img-inset);
	/* Το Figma κόβει 145px συνολικά (73 αριστερά, 72 δεξιά) — όχι 2×73. */
	width: calc(100% - var(--lh-ben-img-inset) - 7.2rem);
	height: var(--lh-ben-img-h);
	border-radius: var(--lh-radius);
	overflow: hidden;
}

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

.lh-benefits__slot {
	position: absolute;
	z-index: 1;
	bottom: calc(var(--lh-ben-card-h) * -1);
	width: var(--lh-ben-card-w);
	/* top / left έρχονται inline από το widget (υπολογισμένα ή χειροκίνητα). */
}

.lh-benefits__card {
	position: sticky;
	top: var(--lh-ben-stick);
	width: var(--lh-ben-card-w);
	min-height: var(--lh-ben-card-h);
	padding: 6.1rem 3.1rem 3.4rem;   /* 61 / 31 / 34 */
	border-radius: var(--lh-radius);
	color: var(--lh-white);
}

.lh-benefits__card h3 {
	margin: 0 0 2.1rem;   /* 21px */
	font-family: var(--lh-display);
	font-size: 4rem;      /* 40px */
	font-weight: 800;
	line-height: 4.2rem;  /* 42px */
	letter-spacing: .08rem;
	text-transform: uppercase;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   ≤1024px — το sticky σβήνει, οι κάρτες γίνονται κανονική στοίβα
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

	.lh-benefits {
		height: auto;
		padding: 3rem var(--lh-gutter) 8rem;
	}

	.lh-benefits__eyebrow {
		margin-bottom: 3.6rem;
	}

	.lh-benefits__stage {
		height: auto !important;   /* το inline height αφορά μόνο desktop */
		overflow: visible;
	}

	.lh-benefits__image {
		position: relative;
		inset: auto;
		margin-left: 0;
		width: 100%;
		height: 42rem;
	}

	.lh-benefits__slot {
		position: static !important;   /* ακυρώνει τα inline top/left */
		width: auto;
	}

	.lh-benefits__card {
		position: relative;
		top: auto;
		width: calc(100% - 4.4rem);
		min-height: 0;
		margin: -3rem auto 5.2rem;
		padding: 4.8rem 3.1rem;
	}

	.lh-benefits__slot + .lh-benefits__slot .lh-benefits__card {
		margin-top: 0;
	}

	.lh-benefits__slot:last-child .lh-benefits__card {
		margin-bottom: 0;
	}
}

/*
 * Reduced motion: το sticky ΔΕΝ είναι animation, αλλά το «κάρφωμα» ενώ κυλάς
 * είναι κίνηση που ενοχλεί σε αιθουσαία ευαισθησία. Το ξηλώνουμε σε απλή ροή.
 */
@media (prefers-reduced-motion: reduce) and (min-width: 1025px) {

	.lh-benefits__image {
		position: absolute;
		top: 0;
	}

	.lh-benefits__card {
		position: relative;
		top: auto;
	}
}