/* Home Hero Component */

.home-hero-title {
	font-size: clamp(2.5rem, 16.7vw, 14.5rem);
	line-height: 1;
}

@media (min-width: 1024px) {
	.home-hero-title {
		line-height: 176px;
	}
}

@media (min-width: 1024px) {
	.home-hero-images-inner {
		left: 50%;
		transform-origin: top center;
		transform: translateX(-50%) scale(min(1, calc((100vw - 48px) / 1302px)));
	}

	/* Scale section height proportionally so bottom clipping stays visible.
	   At 1302px → 927px (same as before). Smaller viewports → proportional crop maintained. */
	.home-hero > div {
		min-height: min(927px, calc(388px + 539px * (100vw - 48px) / 1302px));
	}
}

.home-hero-image {
	@apply rounded-lg overflow-hidden;
}

.home-hero-image img {
	@apply w-full h-full object-cover;
}

.home-hero-image--intro {
	animation: home-hero-image-intro 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.home-hero-image--intro-left {
	animation: home-hero-image-intro-left 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.home-hero-image--intro-middle {
	animation: home-hero-image-intro-middle 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes home-hero-image-intro-left {
	from {
		left: 0;
		top: 186px;
		transform: rotate(-20deg);
	}

	to {
		left: 0;
		top: 122px;
		transform: rotate(-15deg);
	}
}

@keyframes home-hero-image-intro-middle {
	from {
		transform: translateY(36px);
		opacity: 0.85;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes home-hero-image-intro {
	from {
		right: 15px;
		top: 32px;
		transform: rotate(20deg);
	}

	to {
		right: -15px;
		top: 0;
		transform: rotate(15deg);
	}
}

.home-hero-content,
.home-hero-badge,
.home-hero-meta {
	font-family: 'PP Neue Montreal', sans-serif;
}

.home-hero-badge-pill {
	min-height: clamp(1.875rem, 5vw, 3.5rem);
	padding-inline: clamp(0.625rem, 2.6vw, 1.25rem);
	padding-block: clamp(0.125rem, 0.55vw, 0.3125rem);
	border-radius: clamp(2rem, 8vw, 3.5625rem);
	outline: 1px solid var(--color-grey-400, #d8d2e1);
	outline-offset: -1px;
	gap: clamp(0.25rem, 0.9vw, 0.625rem);
}

.home-hero-badge {
	font-size: clamp(0.875rem, 3.2vw, 2.625rem);
	line-height: clamp(1.1rem, 3.7vw, 2.5rem);
	letter-spacing: clamp(0.035em, 0.08vw, 0.08em);
}

.home-hero-content {
	text-align: center;
}

@media (max-width: 1023px) {
	.home-hero-images-wrap {
		display: flex;
		justify-content: center;
		overflow: hidden;
		height: 208px;
	}

	.home-hero-images-inner {
		zoom: 0.26;
		flex-shrink: 0;
	}
}

@media (min-width: 1024px) {
	.home-hero-image {
		transition: transform 0.45s ease;
	}

	.home-hero-image:hover {
		transform: translateY(-8px);
	}
}