/*
 * Hennecke Karriere – Frontend
 * Markup nutzt UIkit-Klassen (YOOtheme). Hier nur das, was YOOtheme/UIkit
 * nicht von sich aus liefert (Karten-Layout, Farben, Hover, Custom-Cursor).
 *
 * Spezifität-Hinweis:
 *   UIkit setzt einige Properties mit !important (z.B. .uk-margin-top).
 *   Wo wir gegen solche Regeln gewinnen müssen, nutzen wir selbst !important.
 */

/* ------------------------------------------------------------------
 * Karten: alle gleich hoch, Button immer ganz unten
 *
 * Aufbau:
 *   .uk-grid.uk-grid-match
 *     .hk-card-item            <-- grid item, von uk-grid-match auf flex gesetzt
 *       .el-item               <-- füllt .hk-card-item vertikal aus
 *         .uk-card-media-top   <-- optional, Bild
 *         .uk-card-body        <-- flex column, füllt verbleibende Höhe
 *           .el-meta
 *           .el-title
 *           .el-content
 *           .hk-card-cta       <-- margin-top:auto schiebt nach unten
 * ------------------------------------------------------------------ */

/* .hk-card-item ist das direkte Grid-Item. Damit .el-item garantiert
   volle Höhe bekommt, machen wir hier auch explizit Flex-Column. */
.hk-karriere .hk-card-item {
	display: flex !important;
	flex-direction: column !important;
	align-self: stretch !important;
}

.hk-karriere .el-item {
	display: flex !important;
	flex-direction: column !important;
	width: 100%;
	height: 100%;
	min-height: 100%;
	flex: 1 1 auto !important;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ------------------------------------------------------------------
 * Gesamte Karte klickbar: Stretched-Link-Layer über die Karte
 * Apply-Button und Title-Link bleiben "drüber" und eigenständig klickbar.
 * ------------------------------------------------------------------ */
.hk-karriere .hk-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-indent: -9999px;
	overflow: hidden;
	border: 0;
}

.hk-karriere .uk-card-media-top,
.hk-karriere .uk-card-body {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

/* Innerhalb der oberen Schicht sind nur die "echten" Klick-Elemente
   wieder klickbar – damit der Button separat funktioniert. */
.hk-karriere .uk-card-body .el-link,
.hk-karriere .uk-card-body .uk-link-heading {
	pointer-events: auto;
	position: relative;
	z-index: 3;
}

.hk-karriere .el-item .uk-card-body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0;
}

.hk-karriere .hk-card-cta {
	margin-top: auto !important;
	padding-top: 20px;
}

/* ------------------------------------------------------------------
 * Hover-Effekt: Karte wächst gleichmäßig (kommt nach vorne) + Schatten
 * ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {

	.hk-karriere .hk-card-item:hover .el-item {
		transform: scale(1.03);
		box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14);
	}
}

/* ------------------------------------------------------------------
 * Schriftfarben: Kategorie + Titel schwarz
 * ------------------------------------------------------------------ */
.hk-karriere .el-item .el-title,
.hk-karriere .el-item .el-title a,
.hk-karriere .el-item .el-title a:hover,
.hk-karriere .el-item .el-title a:focus,
.hk-karriere .el-item .el-title a:visited {
	color: #000 !important;
}

.hk-karriere .el-item .el-meta,
.hk-karriere .el-item .hk-card-term,
.hk-karriere .el-item .uk-text-meta {
	color: #000 !important;
}

/* ------------------------------------------------------------------
 * Custom Cursor "Mehr erfahren" beim Hovern einer Karte
 * ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {

	.hk-karriere .hk-card-item,
	.hk-karriere .hk-card-item a {
		cursor: none;
	}
}

.hk-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background-color: var(--global-primary-background, #94c11f);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 12px;
	line-height: 1.15;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 9999;
	will-change: left, top, opacity, transform;
}

.hk-cursor.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.hk-cursor span {
	display: block;
	line-height: 1.1;
}