/**
 * Angebotsseite: Hero „Editoriale Angebotsreise“
 * Scope: .ls-offers-hero
 */

.ls-offers-hero {
	position: relative;
	overflow: clip;
	background:
		radial-gradient(
			circle at 15% 65%,
			rgba(227, 78, 134, 0.06),
			transparent 34rem
		),
		var(--ls-color-cream, #f6eee2);
	padding-block: clamp(4rem, 12vw, 6.5rem);
}

.ls-offers-hero.wp-block-group,
.ls-offers-hero .wp-block-group {
	max-width: none;
}

.ls-offers-hero__inner,
.ls-offers-hero__inner.ls-container {
	width: min(
		calc(100% - (2 * var(--ls-page-gutter, 1.25rem))),
		var(--ls-container, 73.75rem)
	);
	max-width: var(--ls-container, 73.75rem);
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

.ls-offers-hero__grid {
	display: grid;
	gap: clamp(3rem, 9vw, 5rem);
	align-items: center;
}

.ls-offers-hero__content {
	position: relative;
	z-index: 4;
	max-width: 38rem;
}

.ls-offers-hero__content > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
}

.ls-offers-hero__content .ls-section__eyebrow,
.ls-offers-hero__content .ls-section-eyebrow {
	justify-content: flex-start;
}

.ls-offers-hero__content h1 {
	max-width: 11ch;
	margin: 1rem 0 1.25rem;
	color: var(--ls-color-ink, #2b1626);
	font-family: var(--ls-font-display, "Fraunces", Georgia, serif);
	font-size: clamp(2.65rem, 12vw, 5.75rem);
	font-weight: 450;
	line-height: 0.98;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.ls-offers-hero__lead {
	max-width: 34rem;
	margin: 0;
	color: var(--ls-color-muted, #6f626b);
	font-family: var(--ls-font-body, "Work Sans", system-ui, sans-serif);
	font-size: clamp(1rem, 3.8vw, 1.1875rem);
	line-height: 1.65;
}

.ls-offers-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem 1.25rem;
	align-items: center;
	margin-top: 2rem;
}

.ls-offers-hero__actions .wp-block-buttons {
	display: contents;
}

.ls-offers-hero__actions .wp-block-button {
	margin: 0;
}

.ls-offers-hero__actions .ls-button:focus-visible {
	outline: 3px solid rgba(241, 96, 30, 0.55);
	outline-offset: 4px;
}

.ls-offers-hero__actions .ls-button--text:focus-visible {
	border-radius: 0.35rem;
}

.ls-offers-hero__visual {
	position: relative;
	width: min(100%, 32rem);
	min-height: clamp(27rem, 116vw, 37rem);
	margin-inline: auto;
	perspective: 40rem;
	transform-style: preserve-3d;
}

.ls-offers-hero__paper,
.ls-offers-hero__branch,
.ls-offers-hero__paper.wp-block-image,
.ls-offers-hero__branch.wp-block-image {
	position: absolute;
	display: block;
	margin: 0 !important;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.ls-offers-hero__paper img,
.ls-offers-hero__branch img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.ls-offers-hero__paper {
	z-index: 0;
	top: 8%;
	left: 1%;
	width: 88%;
	height: 78%;
	opacity: 0.92;
	transform: translateZ(-2rem) rotate(-4deg) scale(1.08);
	transform-origin: 50% 50%;
}

.ls-offers-hero__paper img {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.ls-offers-hero__branch {
	z-index: 1;
	right: -4%;
	bottom: 3%;
	width: 43%;
	height: auto;
	transform: translateZ(-0.5rem) rotate(8deg);
	transform-origin: 50% 100%;
}

.ls-offers-hero__photo-frame,
.ls-offers-hero__photo-frame.wp-block-image {
	position: absolute;
	z-index: 2;
	inset: 7% 10% 4% 9%;
	width: auto;
	height: auto;
	margin: 0 !important;
	overflow: hidden;
	border-radius: 0.75rem 1.75rem 0.875rem 2rem;
	background: #d8c7b9;
	box-shadow:
		0 1.75rem 4rem rgba(43, 22, 38, 0.16),
		0 0.35rem 1rem rgba(43, 22, 38, 0.1);
	transform:
		rotate(-2.4deg)
		rotateY(-5deg)
		rotateX(2deg)
		translateZ(1rem);
	transform-origin: 52% 64%;
}

.ls-offers-hero__photo-frame img,
.ls-offers-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 50%;
	transform: scale(1.035);
}

.ls-offers-hero__script {
	position: absolute;
	z-index: 3;
	top: 1%;
	right: -1%;
	width: min(11rem, 39%);
	margin: 0 !important;
	color: rgba(43, 22, 38, 0.76);
	font-family: "Caveat", cursive;
	font-size: clamp(1.45rem, 6vw, 2.1rem);
	font-weight: 500;
	line-height: 1.05;
	text-align: center;
	transform: rotate(-7deg) translateZ(2rem);
}

@media (min-width: 48rem) {
	.ls-offers-hero__grid {
		grid-template-columns:
			minmax(0, 0.92fr)
			minmax(22rem, 1.08fr);
		gap: clamp(2rem, 5vw, 5.5rem);
	}

	.ls-offers-hero__content h1 {
		font-size: clamp(4rem, 7vw, 6.5rem);
	}

	.ls-offers-hero__visual {
		width: min(100%, 39rem);
		min-height: clamp(36rem, 55vw, 45rem);
		perspective: 75rem;
	}
}

@media (min-width: 64rem) {
	.ls-offers-hero {
		min-height: min(
			52rem,
			calc(100svh - var(--ls-header-height, 5rem))
		);
		display: grid;
		align-items: center;
		padding-block: 6.5rem;
	}

	.ls-offers-hero__grid {
		grid-template-columns:
			minmax(0, 0.9fr)
			minmax(31rem, 1.1fr);
	}

	.ls-offers-hero__visual {
		min-height: 43rem;
	}
}

@media (max-width: 22.99rem) {
	.ls-offers-hero {
		padding-block: 3.25rem 3.75rem;
	}

	.ls-offers-hero__content h1 {
		font-size: clamp(2.35rem, 11.5vw, 2.85rem);
	}

	.ls-offers-hero__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.ls-offers-hero__actions .ls-button,
	.ls-offers-hero__actions .wp-block-button,
	.ls-offers-hero__actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}

	.ls-offers-hero__visual {
		min-height: clamp(24rem, 118vw, 30rem);
	}

	.ls-offers-hero__script {
		right: 2%;
		width: 42%;
		font-size: clamp(1.25rem, 5.8vw, 1.55rem);
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
	.ls-offers-hero__branch {
		animation:
			ls-offers-branch-float
			8s
			ease-in-out
			infinite
			alternate;
	}
}

@keyframes ls-offers-branch-float {
	from {
		transform:
			translate3d(0, 0, -0.5rem)
			rotate(8deg);
	}

	to {
		transform:
			translate3d(0, -0.5rem, -0.5rem)
			rotate(6.5deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ls-offers-hero__photo-frame,
	.ls-offers-hero__paper,
	.ls-offers-hero__branch,
	.ls-offers-hero__script {
		transition: none !important;
		animation: none !important;
	}
}