/**
 * Trial: Cards hover-intro.
 *
 * Isolated from fox-builder.css so this experiment can be removed later.
 * Applies only when a Cards module has Hover intro = Yes
 * (.fox-chapter--hover-intro).
 *
 * Rest: title + subtitle.
 * Hover (fine pointer): gold fill, title and intro wipe left to right together.
 * Slot height is the taller of rest or hover content, so cards do not jump.
 * Content is vertically centred in that slot.
 * Touch / no-hover: title, subtitle and intro all stay visible (stacked).
 */

.fox-chapter--hover-intro .fox-card-hover-swap__intro .block-intro {
	margin-top: 0;
}

@media (hover: hover) and (pointer: fine) {
	.fox-chapter--hover-intro .fox-chapter-card {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.fox-chapter--hover-intro .fox-chapter-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--fox-card-hover-fill, transparent);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.45s ease-in-out;
		z-index: 0;
		pointer-events: none;
	}

	.fox-chapter--hover-intro .fox-chapter-card:hover::before {
		transform: scaleX(1);
	}

	.fox-chapter--hover-intro .fox-chapter-card > * {
		position: relative;
		z-index: 1;
	}

	.fox-chapter--hover-intro .fox-card-hover-swap {
		display: grid;
		align-items: stretch;
	}

	.fox-chapter--hover-intro .fox-card-hover-swap__heading,
	.fox-chapter--hover-intro .fox-card-hover-swap__intro {
		grid-area: 1 / 1;
		width: 100%;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.fox-chapter--hover-intro .fox-chapter-card:has(.block-intro) .fox-card-hover-swap__heading,
	.fox-chapter--hover-intro .fox-chapter-card:has(.block-intro) .fox-card-hover-swap__intro {
		transition: clip-path 0.45s ease-in-out;
	}

	.fox-chapter--hover-intro .fox-chapter-card:has(.block-intro) .fox-card-hover-swap__heading {
		clip-path: inset(0 0 0 0);
	}

	.fox-chapter--hover-intro .fox-chapter-card:has(.block-intro) .fox-card-hover-swap__intro {
		clip-path: inset(0 100% 0 0);
		pointer-events: none;
	}

	.fox-chapter--hover-intro .fox-chapter-card:has(.block-intro):hover .fox-card-hover-swap__heading {
		clip-path: inset(0 0 0 100%);
		pointer-events: none;
	}

	.fox-chapter--hover-intro .fox-chapter-card:has(.block-intro):hover .fox-card-hover-swap__intro {
		clip-path: inset(0 0 0 0);
		pointer-events: auto;
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
	.fox-chapter--hover-intro .fox-chapter-card:has(.block-intro) .fox-card-hover-swap__heading,
	.fox-chapter--hover-intro .fox-chapter-card:has(.block-intro) .fox-card-hover-swap__intro,
	.fox-chapter--hover-intro .fox-chapter-card::before {
		transition: none;
	}
}