/**
 * Hover Card Cover Block Style
 * Combines interactive card functionality with angled corners
 */

/* Base card styling with angled corners */
.is-style-hover-card,
.is-style-card--interactive {
	position: relative;
	border: none !important;
	transition: transform 0.3s ease, box-shadow 0.5s ease;
	/* Default border color - can be overridden by WordPress color classes */
	--angled-border-color: var(--wp--preset--color--primary);
	clip-path: polygon(
		0 var(--corner-size),
		var(--corner-size) 0,
		100% 0,
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		0 100%
	);
}

/* Border color variations */
.is-style-hover-card.has-primary-border-color,
.is-style-card--interactive.has-primary-border-color {
	--angled-border-color: var(--wp--preset--color--primary);
}

.is-style-hover-card.has-primary-accent-border-color,
.is-style-card--interactive.has-primary-accent-border-color {
	--angled-border-color: var(--wp--preset--color--primary-accent);
}

.is-style-hover-card.has-primary-alt-accent-border-color,
.is-style-card--interactive.has-primary-alt-accent-border-color {
	--angled-border-color: var(--wp--preset--color--primary-alt-accent);
}

.is-style-hover-card.has-main-border-color,
.is-style-card--interactive.has-main-border-color {
	--angled-border-color: var(--wp--preset--color--main);
}

.is-style-hover-card.has-base-border-color,
.is-style-card--interactive.has-base-border-color {
	--angled-border-color: var(--wp--preset--color--base);
}

/* Hover and focus states */
.is-style-hover-card:focus-within,
.is-style-hover-card:hover,
.is-style-card--interactive:focus-within,
.is-style-card--interactive:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 8px rgba(248, 27, 2, 0.15), 
	            0 8px 16px rgba(248, 27, 2, 0.1);
}

/* Make layout positioning work for clickable surface */
.is-style-hover-card :where(.wp-block-group.wp-block-group-is-layout-constrained),
.is-style-card--interactive :where(.wp-block-group.wp-block-group-is-layout-constrained) {
	position: static;
}

/* Make whole card clickable via nested heading link */
.is-style-hover-card :where(.wp-block-heading) a::after,
.is-style-card--interactive :where(.wp-block-heading) a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 10;
}

/* Remove pseudo-element in editor when child is selected for better editing */
.is-style-hover-card.has-child-selected :where(.wp-block-heading) a::after,
.is-style-card--interactive.has-child-selected :where(.wp-block-heading) a::after {
	content: none;
}

/* Ensure heading link is visible */
.is-style-hover-card :where(.wp-block-heading) a,
.is-style-card--interactive :where(.wp-block-heading) a {
	position: relative;
	z-index: 11;
}

/* Animate label (first group in vertical stack) */
.is-style-hover-card:not(.has-child-selected) :where(.is-vertical) .wp-block-group:first-of-type,
.is-style-card--interactive:not(.has-child-selected) :where(.is-vertical) .wp-block-group:first-of-type {
	opacity: 0.7;
	transform: scale(0.95) translateX(-8px);
	transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
}

.is-style-hover-card:focus-within :where(.is-vertical) .wp-block-group:first-of-type,
.is-style-hover-card:hover :where(.is-vertical) .wp-block-group:first-of-type,
.is-style-card--interactive:focus-within :where(.is-vertical) .wp-block-group:first-of-type,
.is-style-card--interactive:hover :where(.is-vertical) .wp-block-group:first-of-type {
	opacity: 1;
	transform: scale(1) translateX(0);
}

/* Animate content area (excerpt paragraph) */
.is-style-hover-card:not(.has-child-selected) :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p,
.is-style-card--interactive:not(.has-child-selected) :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.5s cubic-bezier(.19, 1, .22, 1), opacity 0.5s ease;
}

.is-style-hover-card:focus-within :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p,
.is-style-hover-card:hover :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p,
.is-style-card--interactive:focus-within :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p,
.is-style-card--interactive:hover :where(.is-vertical) .wp-block-group:first-of-type + .wp-block-group p {
	max-height: 100%;
	opacity: 1;
}

/* Ensure vertical stack displays properly */
.is-style-hover-card :where(.is-vertical),
.is-style-card--interactive :where(.is-vertical) {
	display: flex;
	transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
}

/* Add angled corner border */
.is-style-hover-card::before,
.is-style-card--interactive::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: var(--angled-border-color);
	transition: opacity 0.3s ease, background 0.3s ease;
	clip-path: polygon(
		/* Outer path */
		0 var(--corner-size),
		var(--corner-size) 0,
		100% 0,
		100% calc(100% - var(--corner-size)),
		calc(100% - var(--corner-size)) 100%,
		0 100%,
		0 var(--corner-size),
		/* Inner path */
		var(--corner-border-width) calc(var(--corner-size) + var(--corner-border-width) * 0.5),
		var(--corner-border-width) calc(100% - var(--corner-border-width)),
		calc(100% - var(--corner-size) - var(--corner-border-width) * 0.5) calc(100% - var(--corner-border-width)),
		calc(100% - var(--corner-border-width)) calc(100% - var(--corner-size) - var(--corner-border-width) * 0.5),
		calc(100% - var(--corner-border-width)) var(--corner-border-width),
		calc(var(--corner-size) + var(--corner-border-width) * 0.5) var(--corner-border-width),
		var(--corner-border-width) calc(var(--corner-size) + var(--corner-border-width) * 0.5)
	);
}

/* Brighter border on hover */
.is-style-hover-card:focus-within::before,
.is-style-hover-card:hover::before,
.is-style-card--interactive:focus-within::before,
.is-style-card--interactive:hover::before {
	filter: brightness(1.2);
}

/* Ensure content is above the border */
.is-style-hover-card .wp-block-cover__inner-container,
.is-style-card--interactive .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
	.is-style-hover-card *,
	.is-style-hover-card *::after,
	.is-style-hover-card *::before,
	.is-style-card--interactive *,
	.is-style-card--interactive *::after,
	.is-style-card--interactive *::before {
		opacity: 1 !important;
		transition: none !important;
		visibility: visible !important;
	}
	
	.is-style-hover-card,
	.is-style-card--interactive {
		transform: none !important;
	}
}