/* ------------------------------------------------------------------
 * HyperKit — HoverFlex List
 *
 * Architecture notes
 * ------------------
 * 1. Per-element colors. Number, title, description, and arrow each
 *    have --hk-hfl-{el}-color and --hk-hfl-{el}-color-active vars.
 *    The active value takes over on hover/focus/.is-open.
 *
 * 2. Hover state lives on `.hk-hfl-link` (the cursor target), not on
 *    `.hk-hfl-item`. Elementor section wrappers can create transform/
 *    stacking contexts that glitch :hover detection on the outermost
 *    element — moving the trigger onto the link is the fix.
 *
 * 3. `contain: layout paint` on each item scopes the reveal's layout
 *    reflow + paint to the row. Big mobile perf win.
 *
 * 4. Mobile inline image lives to the RIGHT of the text. The body is
 *    a CSS grid: 2 columns × auto rows. The image spans rows; title
 *    sits row 1 col 1; description sits row 2 col 1.
 * ------------------------------------------------------------------ */

.hk-hfl {
	--hk-hfl-bg: transparent;
	--hk-hfl-divider: rgba(255, 255, 255, 0.12);
	--hk-hfl-accent-bg: #d8ff00;

	--hk-hfl-num-color: #ffffff;
	--hk-hfl-num-color-active: #0a0a0a;
	--hk-hfl-title-color: #ffffff;
	--hk-hfl-title-color-active: #0a0a0a;
	--hk-hfl-desc-color: #ffffff;
	--hk-hfl-desc-color-active: #0a0a0a;
	--hk-hfl-arrow-color: #ffffff;
	--hk-hfl-arrow-color-active: #0a0a0a;

	--hk-hfl-min-height: 96px;
	--hk-hfl-pad-y: 24px;
	--hk-hfl-pad-x: 32px;
	--hk-hfl-radius: 12px;
	--hk-hfl-gap: 28px;
	--hk-hfl-number-width: 56px;
	--hk-hfl-arrow-size: 56px;
	--hk-hfl-image-size: 200px;
	--hk-hfl-image-radius: 14px;
	--hk-hfl-image-offset-x: 96px;
	--hk-hfl-ease: cubic-bezier(0.32, 0.72, 0.24, 1);
	--hk-hfl-duration: 0.4s;

	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------
 * Item / row
 * ------------------------------------------------------------------ */
.hk-hfl-item {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	border-radius: var(--hk-hfl-radius);
	background: var(--hk-hfl-bg);
	transition: background-color var(--hk-hfl-duration) var(--hk-hfl-ease);
}

/* Divider line. Hidden when row or its neighbor is active. */
.hk-hfl-item + .hk-hfl-item::before {
	content: "";
	position: absolute;
	left: var(--hk-hfl-pad-x);
	right: var(--hk-hfl-pad-x);
	top: 0;
	height: 1px;
	background: var(--hk-hfl-divider);
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.hk-hfl-item:has(.hk-hfl-link:hover)::before,
.hk-hfl-item:has(.hk-hfl-link:focus-visible)::before,
.hk-hfl-item.is-open::before,
.hk-hfl-item:has(.hk-hfl-link:hover) + .hk-hfl-item::before,
.hk-hfl-item:has(.hk-hfl-link:focus-visible) + .hk-hfl-item::before,
.hk-hfl-item.is-open + .hk-hfl-item::before {
	opacity: 0;
}
@supports not selector(:has(*)) {
	.hk-hfl-item:hover::before,
	.hk-hfl-item:hover + .hk-hfl-item::before {
		opacity: 0;
	}
}
.hk-hfl--no-dividers .hk-hfl-item + .hk-hfl-item::before {
	display: none;
}

/* Active state on the item — driven by the link. */
.hk-hfl-item:has(.hk-hfl-link:hover),
.hk-hfl-item:has(.hk-hfl-link:focus-visible),
.hk-hfl-item.is-open {
	background: var(--hk-hfl-accent-bg);
}
@supports not selector(:has(*)) {
	.hk-hfl-item:hover {
		background: var(--hk-hfl-accent-bg);
	}
}

/* ------------------------------------------------------------------
 * Link wrapper
 * ------------------------------------------------------------------ */
.hk-hfl-link {
	display: grid;
	grid-template-columns:
		var(--hk-hfl-number-width)
		1fr
		var(--hk-hfl-arrow-size);
	align-items: center;
	gap: var(--hk-hfl-gap);
	min-height: var(--hk-hfl-min-height);
	padding: var(--hk-hfl-pad-y) var(--hk-hfl-pad-x);
	text-decoration: none;
}
.hk-hfl-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
	border-radius: var(--hk-hfl-radius);
}

.hk-hfl--no-number .hk-hfl-link {
	grid-template-columns: 1fr var(--hk-hfl-arrow-size);
}
.hk-hfl--no-arrow .hk-hfl-link {
	grid-template-columns: var(--hk-hfl-number-width) 1fr;
}
.hk-hfl--no-number.hk-hfl--no-arrow .hk-hfl-link {
	grid-template-columns: 1fr;
}

/* ------------------------------------------------------------------
 * Number
 * ------------------------------------------------------------------ */
.hk-hfl-num {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--hk-hfl-num-color);
	transition: color var(--hk-hfl-duration) var(--hk-hfl-ease);
}
.hk-hfl-link:hover .hk-hfl-num,
.hk-hfl-link:focus-visible .hk-hfl-num,
.hk-hfl-item.is-open .hk-hfl-num {
	color: var(--hk-hfl-num-color-active);
}

/* ------------------------------------------------------------------
 * Body (title + description + inline image on mobile)
 * ------------------------------------------------------------------ */
.hk-hfl-body {
	min-width: 0;
}
.hk-hfl-title {
	display: block;
	margin: 0;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--hk-hfl-title-color);
	transition: color var(--hk-hfl-duration) var(--hk-hfl-ease);
}
.hk-hfl-link:hover .hk-hfl-title,
.hk-hfl-link:focus-visible .hk-hfl-title,
.hk-hfl-item.is-open .hk-hfl-title {
	color: var(--hk-hfl-title-color-active);
}

/* Description reveal via grid-template-rows 0fr → 1fr. */
.hk-hfl-desc-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--hk-hfl-duration) var(--hk-hfl-ease);
}
.hk-hfl-desc {
	overflow: hidden;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	max-width: 56ch;
	color: var(--hk-hfl-desc-color);
	opacity: 0;
	transition:
		opacity var(--hk-hfl-duration) var(--hk-hfl-ease),
		color var(--hk-hfl-duration) var(--hk-hfl-ease),
		padding-top var(--hk-hfl-duration) var(--hk-hfl-ease);
}
.hk-hfl-link:hover .hk-hfl-desc-wrap,
.hk-hfl-link:focus-visible .hk-hfl-desc-wrap,
.hk-hfl-item.is-open .hk-hfl-desc-wrap {
	grid-template-rows: 1fr;
}
.hk-hfl-link:hover .hk-hfl-desc,
.hk-hfl-link:focus-visible .hk-hfl-desc,
.hk-hfl-item.is-open .hk-hfl-desc {
	opacity: 1;
	padding-top: 8px;
	color: var(--hk-hfl-desc-color-active);
}

/* Inline image hidden by default — mobile path turns it on. */
.hk-hfl-image-inline {
	display: none;
}

/* ------------------------------------------------------------------
 * Trailing arrow
 * ------------------------------------------------------------------ */
.hk-hfl-arrow {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hk-hfl-arrow-size);
	height: var(--hk-hfl-arrow-size);
	border: 1px solid var(--hk-hfl-arrow-color);
	border-radius: 50%;
	flex-shrink: 0;
	color: var(--hk-hfl-arrow-color);
	transition:
		color var(--hk-hfl-duration) var(--hk-hfl-ease),
		border-color var(--hk-hfl-duration) var(--hk-hfl-ease);
}
.hk-hfl-link:hover .hk-hfl-arrow,
.hk-hfl-link:focus-visible .hk-hfl-arrow,
.hk-hfl-item.is-open .hk-hfl-arrow {
	color: var(--hk-hfl-arrow-color-active);
	border-color: var(--hk-hfl-arrow-color-active);
}
.hk-hfl-arrow svg {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity 0.2s ease;
}
.hk-hfl-arrow .hk-hfl-arrow-go { opacity: 0; }

.hk-hfl-link:hover .hk-hfl-arrow .hk-hfl-arrow-default,
.hk-hfl-link:focus-visible .hk-hfl-arrow .hk-hfl-arrow-default,
.hk-hfl-item.is-open .hk-hfl-arrow .hk-hfl-arrow-default {
	opacity: 0;
}
.hk-hfl-link:hover .hk-hfl-arrow .hk-hfl-arrow-go,
.hk-hfl-link:focus-visible .hk-hfl-arrow .hk-hfl-arrow-go,
.hk-hfl-item.is-open .hk-hfl-arrow .hk-hfl-arrow-go {
	opacity: 1;
}

.hk-hfl-arrow--empty {
	border: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * Floating image card (DESKTOP path)
 * ------------------------------------------------------------------ */
.hk-hfl-image {
	position: absolute;
	top: 50%;
	right: var(--hk-hfl-image-offset-x);
	width: var(--hk-hfl-image-size);
	height: var(--hk-hfl-image-size);
	transform: translateY(-50%) scale(0.6) rotate(-4deg);
	transform-origin: center;
	border-radius: var(--hk-hfl-image-radius);
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	transition:
		opacity var(--hk-hfl-duration) var(--hk-hfl-ease),
		transform var(--hk-hfl-duration) var(--hk-hfl-ease);
	z-index: 2;
}
.hk-hfl-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hk-hfl-item:has(.hk-hfl-link:hover) .hk-hfl-image,
.hk-hfl-item:has(.hk-hfl-link:focus-visible) .hk-hfl-image,
.hk-hfl-item.is-open .hk-hfl-image {
	opacity: 1;
	transform: translateY(-50%) scale(1) rotate(0);
}
@supports not selector(:has(*)) {
	.hk-hfl-item:hover .hk-hfl-image {
		opacity: 1;
		transform: translateY(-50%) scale(1) rotate(0);
	}
}
.hk-hfl-image:empty {
	display: none;
}

/* ------------------------------------------------------------------
 * Desktop responsive sizing
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.hk-hfl {
		--hk-hfl-image-size: 140px;
		--hk-hfl-image-offset-x: 72px;
	}
}

/* ==================================================================
 * TOUCH PATH
 *
 * Body becomes a 2-column grid: text on the left, image on the right.
 *   col 1 row 1: title
 *   col 1 row 2: description
 *   col 2 rows 1-2: inline image (spans both rows, centered)
 *
 * The grid layout means no flex-wrap headaches and the image sits
 * cleanly to the right of the text content like the Framer example.
 *
 * Animation: bg-color + opacity + grid-template-rows only. No
 * transforms, no max-height. `contain: layout paint` on the row
 * makes this cheap on mobile.
 * ================================================================== */
@media (hover: none) and (pointer: coarse) {
	.hk-hfl {
		--hk-hfl-pad-x: 20px;
		--hk-hfl-pad-y: 18px;
		--hk-hfl-gap: 16px;
		--hk-hfl-number-width: 36px;
		--hk-hfl-arrow-size: 44px;
		--hk-hfl-min-height: 72px;
		--hk-hfl-duration: 0.25s;
		--hk-hfl-mobile-image-w: 100px;
		/* Gap between description text and the image edge. */
		--hk-hfl-mobile-image-gap: 16px;
	}
	.hk-hfl-title { font-size: 20px; }

	/* The item becomes the positioning context for the absolutely-
	 * positioned inline image. `overflow: hidden` clips the image to
	 * the row's rounded corners. */
	.hk-hfl-item {
		overflow: hidden;
	}

	.hk-hfl-link {
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
		position: relative;
		z-index: 1;
	}

	/* Floating image: gone on mobile. */
	.hk-hfl-image {
		display: none !important;
	}

	/* Body layout: simple block flow, title on top, description below.
	 * When open, reserve enough horizontal room on the right so the
	 * description doesn't end up underneath the image. Padding-right
	 * is applied INSTANTLY on open (no transition) — animating
	 * padding-right at the same time as the description height made
	 * the whole reveal feel sluggish and out of sync. */
	.hk-hfl-body {
		display: block;
		padding-right: 0;
	}
	.hk-hfl-item.is-open .hk-hfl-body {
		padding-right: calc(var(--hk-hfl-mobile-image-w) + var(--hk-hfl-mobile-image-gap));
	}

	/* Inline image: absolutely positioned bottom-right of the row.
	 * `aspect-ratio: 1` forces a square shape regardless of how
	 * surrounding rules try to stretch it — this defends against any
	 * inherited grid/flex stretching from Elementor wrappers. */
	.hk-hfl-image-inline {
		display: block;
		position: absolute;
		right: var(--hk-hfl-pad-x);
		bottom: var(--hk-hfl-pad-y);
		width: var(--hk-hfl-mobile-image-w);
		height: auto;
		aspect-ratio: 1 / 1;
		min-height: 0;
		max-height: var(--hk-hfl-mobile-image-w);
		border-radius: var(--hk-hfl-image-radius);
		overflow: hidden;
		opacity: 0;
		transform: translateY(8px) scale(0.92);
		transform-origin: bottom right;
		pointer-events: none;
		z-index: 2;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
		transition:
			opacity var(--hk-hfl-duration) var(--hk-hfl-ease),
			transform var(--hk-hfl-duration) var(--hk-hfl-ease);
	}
	.hk-hfl-image-inline img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.hk-hfl-item.is-open .hk-hfl-image-inline {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	/* Description reveal: grid-template-rows 0fr → 1fr. One layout-
	 * animating property; opacity is compositor-cheap. */
	.hk-hfl-desc-wrap {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--hk-hfl-duration) var(--hk-hfl-ease);
	}
	.hk-hfl-item.is-open .hk-hfl-desc-wrap {
		grid-template-rows: 1fr;
	}
	.hk-hfl-desc {
		overflow: hidden;
		opacity: 0;
		transition: opacity var(--hk-hfl-duration) var(--hk-hfl-ease),
		            padding-top var(--hk-hfl-duration) var(--hk-hfl-ease);
	}
	.hk-hfl-item.is-open .hk-hfl-desc {
		opacity: 1;
		padding-top: 6px;
	}

	/* Per-platform toggles. */
	.hk-hfl--m-no-number .hk-hfl-num { display: none; }
	.hk-hfl--m-no-arrow .hk-hfl-arrow { display: none; }
	.hk-hfl--m-no-image .hk-hfl-image-inline { display: none !important; }
	.hk-hfl--m-no-image .hk-hfl-item.is-open .hk-hfl-body { padding-right: 0; }

	.hk-hfl--m-no-number .hk-hfl-link {
		grid-template-columns: 1fr var(--hk-hfl-arrow-size);
	}
	.hk-hfl--m-no-arrow .hk-hfl-link {
		grid-template-columns: var(--hk-hfl-number-width) 1fr;
	}
	.hk-hfl--m-no-number.hk-hfl--m-no-arrow .hk-hfl-link {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.hk-hfl,
	.hk-hfl * {
		transition-duration: 0.01ms !important;
	}
	.hk-hfl-image {
		transform: translateY(-50%) !important;
	}
}