/* =============================================================================
   HAI Diensten Index: numbered service list with a cursor-following
   hover-preview image on desktop, and per-row thumbnails on mobile/touch.
   Elementor style-tab controls override the CSS variables defined here.
   ============================================================================= */

/* Wrapper */

.hai-diensten-index {
	--hai-di-border-top: #1a1a1a;
	--hai-di-border-bottom: rgba(26, 26, 26, 0.15);
	--hai-di-number-color: rgba(26, 26, 26, 0.55);
	--hai-di-title-color: #1a1a1a;
	--hai-di-title-color-hover: #2f5d43;
	--hai-di-hover-shift: 14px;
	--hai-di-desc-color: rgba(26, 26, 26, 0.6);
	--hai-di-arrow-color: rgba(26, 26, 26, 0.55);
	--hai-di-arrow-color-hover: #2f5d43;
	--hai-di-arrow-size: 22px;
	--hai-di-preview-w: 320px;
	--hai-di-preview-h: 420px;
	--hai-di-thumb-ratio: 16/9;

	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.hai-di-list {
	border-top: 1px solid var(--hai-di-border-top);
}

/* Row */

.hai-di-row {
	display: grid;
	grid-template-columns: 4.5rem 1fr auto;
	align-items: center;
	gap: 1.5rem;
	padding: clamp(1.4rem, 2.8vw, 2.3rem) 0;
	border-bottom: 1px solid var(--hai-di-border-bottom);
	position: relative;
	text-decoration: none;
	color: inherit;
}

.hai-di-number {
	font-size: 0.85rem;
	color: var(--hai-di-number-color);
	align-self: start;
	padding-top: 0.6rem;
}

.hai-di-text {
	min-width: 0;
}

.hai-di-title {
	font-size: clamp(2rem, 5.2vw, 3.7rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--hai-di-title-color);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hai-di-desc {
	font-size: 0.95rem;
	color: var(--hai-di-desc-color);
	margin-top: 0.5rem;
	max-width: 46ch;
}

.hai-di-arrow {
	color: var(--hai-di-arrow-color);
	font-size: var(--hai-di-arrow-size);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hai-di-arrow i,
.hai-di-arrow svg {
	font-size: inherit;
	width: 1em;
	height: 1em;
	fill: currentColor;
	color: inherit;
	display: block;
}

/* Hover state, desktop only. On touch devices this rule simply never fires
   because there is no persistent `:hover`, but the JS-driven preview is
   still gated separately (see the widget JS), since iOS keeps `:hover`
   sticky after a tap. */
.hai-di-row:hover .hai-di-title {
	color: var(--hai-di-title-color-hover);
	transform: translateX(var(--hai-di-hover-shift));
}

.hai-di-row:hover .hai-di-arrow {
	color: var(--hai-di-arrow-color-hover);
	transform: translate(6px, 0);
}

.hai-di-row:focus-visible {
	outline: 2px solid var(--hai-di-title-color-hover);
	outline-offset: -2px;
}

/* Thumbnail (mobile / no-hover). Hidden by default, shown by the scoped
   breakpoint media query the widget prints inline. */

.hai-di-thumb {
	display: none;
	width: 100%;
	aspect-ratio: var(--hai-di-thumb-ratio);
	object-fit: cover;
	margin-top: 1rem;
}

/* Image preview (desktop hover) */

/* Two elements, deliberately. The OUTER one is the carriage: the JS rewrites
   its `transform` every animation frame, so it must carry no transition at all
   (a transition here would queue against the rAF lerp and the preview would
   drag behind the cursor by the transition duration). The INNER one does the
   reveal: opacity and scale, driven purely by CSS.

   Collapsing these into one element is the bug this widget was born with: the
   per-frame inline `transform` outranks the stylesheet, so the hidden state's
   scale(0.92) never applies and the reveal silently degrades to a plain fade. */

.hai-di-preview {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--hai-di-preview-w);
	height: var(--hai-di-preview-h);
	pointer-events: none;
	z-index: 60;
	transform: translate(-50%, -50%);
	will-change: transform;
}

.hai-di-preview-inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}

.hai-di-preview.is-visible .hai-di-preview-inner {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hai-di-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Reduced motion: no preview, no transform transitions, colour change only */

@media (prefers-reduced-motion: reduce) {
	.hai-di-preview {
		display: none;
	}

	.hai-di-title,
	.hai-di-arrow {
		transition: color 0.2s ease;
	}

	.hai-di-row:hover .hai-di-title,
	.hai-di-row:hover .hai-di-arrow {
		transform: none;
	}
}