/**
 * Elcogen Post Hero Widget Styles
 *
 * Optimized styles for hero banner images in single post templates.
 * Ensures proper full-width display and responsive behavior.
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* Hero Banner Container */
.elcogen-post-hero-banner {
	position: relative;
	width: 100%;
	height: 18.75rem;
	overflow: hidden;
	display: block;
	margin: 0;
	padding: 0;
}

/* White Cutout Overlay Shape */
.elcogen-post-hero-banner::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	/* Maintain 6:1 aspect ratio (672:112) */
	/* For 18.75rem container height, use 7.5rem height (40% of 300) */
	/* Width = 7.5rem * 6 = 45rem, but cap at reasonable percentage */
	width: min(45rem, 50vw); /* Cap at 50% viewport width for large screens */
	height: 7.5rem; /* 40% of 18.75rem container height */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 672 112' preserveAspectRatio='xMaxYMax slice'%3E%3Cpath d='M672 112H0L56 56H616L672 0V112Z' fill='%23ffffff'/%3E%3C/svg%3E");
	background-size: contain;
	background-position: bottom right;
	background-repeat: no-repeat;
	pointer-events: none; /* Ensure clicks pass through to image */
	z-index: 2;
	bottom: -1px;
}

/* Hero Image */
.elcogen-post-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	margin: 0;
	padding: 0;
}

/* Placeholder State */
.elcogen-post-hero-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-background-light);
}

.elcogen-post-hero-placeholder::after {
	content: '';
	display: block;
	width: 3.75rem;
	height: 3.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cccccc'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.5;
}

/* Full Width Breakout for Elementor Containers */
/* Use negative margins to break out of container padding */
.elementor-section .elcogen-post-hero-banner,
.elementor-container .elcogen-post-hero-banner {
	margin-left: calc(-1 * var(--container-padding, 0rem));
	margin-right: calc(-1 * var(--container-padding, 0rem));
	width: calc(100% + 2 * var(--container-padding, 0rem));
}

/* Responsive Adjustments */
@media (max-width: 64rem) {
	.elcogen-post-hero-banner {
		height: 15.625rem;
	}

	/* Adjust cutout overlay for tablet - maintain 6:1 ratio */
	.elcogen-post-hero-banner::after {
		height: 6.25rem; /* 40% of 15.625rem container */
		width: min(37.5rem, 55vw); /* 6.25rem * 6 = 37.5rem, cap at 55% viewport */
	}
}

@media (max-width: 48rem) {
	.elcogen-post-hero-banner {
		height: 12.5rem;
	}

	/* Adjust cutout overlay for mobile - maintain 6:1 ratio */
	.elcogen-post-hero-banner::after {
		height: 5rem; /* 40% of 12.5rem container */
		width: min(30rem, 65vw); /* 5rem * 6 = 30rem, cap at 65% viewport */
	}
}

@media (max-width: 30rem) {
	.elcogen-post-hero-banner {
		height: 11.25rem;
	}

	/* Adjust cutout overlay for small mobile - maintain 6:1 ratio */
	.elcogen-post-hero-banner::after {
		height: 4.5rem; /* 40% of 11.25rem container */
		width: min(27rem, 75vw); /* 4.5rem * 6 = 27rem, cap at 75% viewport */
	}
}

/* Prevent layout shift during image load */
.elcogen-post-hero-image {
	aspect-ratio: 1920 / 300;
	min-height: 100%;
}

/* Loading state animation */
@keyframes elcogen-hero-shimmer {
	0% {
		background-position: -62.5rem 0;
	}
	100% {
		background-position: 62.5rem 0;
	}
}

.elcogen-post-hero-banner.loading {
	background: linear-gradient(
		90deg,
		var(--color-background-light) 0%,
		#f8f8f8 50%,
		var(--color-background-light) 100%
	);
	background-size: 62.5rem 100%;
	animation: elcogen-hero-shimmer 2s infinite;
}

/* Ensure proper stacking context */
.elcogen-post-hero-banner {
	z-index: 1;
}

/* Print styles */
@media print {
	.elcogen-post-hero-banner {
		height: auto;
		max-height: 25rem;
	}

	.elcogen-post-hero-image {
		object-fit: contain;
	}
}