/* Geosys Key Facts — 17160
   Scoped to .geosys-kf. Colors inherit theme CSS vars with CI fallbacks.
   Variante B: pictogram + number default, hover/focus reveals description,
   number stays visible. Hover = orange fill + dark text (CI button-hover logic). */

.geosys-kf{
	--kf-blue: var(--geosys-blue, #005187);
	--kf-orange: var(--geosys-orange, #f9af00);
	--kf-blue-grey: var(--geosys-blue-grey, #34434b);
	--kf-grey: var(--geosys-grey, #878786);
	--kf-light: #cfe0ec;
	--kf-gap: clamp(12px, 2.5vw, 24px);

	display: grid;
	grid-template-columns: repeat(var(--kf-cols, 3), 1fr);
	gap: var(--kf-gap);
}

.geosys-kf__item{
	position: relative;
	background: var(--kf-blue);
	color: #fff;
	min-height: 248px;
	padding: 38px 28px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	overflow: hidden;
	outline: none;
	cursor: pointer;
	transition: background .35s ease, color .35s ease;
}

/* hover / focus = orange fill + dark text */
.geosys-kf__item:hover,
.geosys-kf__item:focus-visible{ background: var(--kf-orange); }
.geosys-kf__item:focus-visible{ box-shadow: inset 0 0 0 2px var(--kf-blue); }
.geosys-kf__item:hover .geosys-kf__number,
.geosys-kf__item:focus-visible .geosys-kf__number{ color: var(--kf-blue); }
.geosys-kf__item:hover .geosys-kf__label,
.geosys-kf__item:focus-visible .geosys-kf__label{ color: var(--kf-blue-grey); }
.geosys-kf__item:hover .geosys-kf__desc,
.geosys-kf__item:focus-visible .geosys-kf__desc{ color: var(--kf-blue-grey); }

/* top zone: icon <-> description cross-fade */
.geosys-kf__top{
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	min-height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.geosys-kf__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: opacity .3s ease, transform .35s ease;
}
.geosys-kf__icon i{ font-size: 50px; line-height: 1; color: inherit; }
.geosys-kf__icon .geosys-kf__img{
	width: 56px; height: 56px;
	object-fit: contain;
	display: block;
}
.geosys-kf__item:hover .geosys-kf__icon,
.geosys-kf__item:focus-visible .geosys-kf__icon{ opacity: 0; transform: translateY(-8px) scale(.92); }

.geosys-kf__desc{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 4px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--kf-light);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .35s ease, color .35s ease;
}
.geosys-kf__item:hover .geosys-kf__desc,
.geosys-kf__item:focus-visible .geosys-kf__desc{ opacity: 1; transform: translateY(0); }

/* number always visible */
.geosys-kf__number{
	font-weight: 300;
	font-size: clamp(40px, 5vw, 58px);
	line-height: 1;
	letter-spacing: -.01em;
	margin-top: 14px;
	font-variant-numeric: tabular-nums;
	transition: color .35s ease;
}
.geosys-kf__label{
	margin-top: 10px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--kf-light);
	transition: color .35s ease;
}

/* responsive */
@media (max-width: 880px){ .geosys-kf{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .geosys-kf{ grid-template-columns: 1fr; } }

/* touch / no-hover: description always visible, no swap, stays on blue */
@media (hover: none){
	.geosys-kf__item{ min-height: 0; padding: 32px 24px; }
	.geosys-kf__top{ flex-direction: column; min-height: 0; gap: 14px; }
	.geosys-kf__icon{ position: static; opacity: 1 !important; transform: none !important; }
	.geosys-kf__desc{ position: static; opacity: 1 !important; transform: none !important; color: var(--kf-light); }
}

@media (prefers-reduced-motion: reduce){
	.geosys-kf *{ transition: none !important; }
}