/*
 * Heidesee Themen-Panels widget — two-column parallax.
 *
 * Left: a sticky, full-height image area whose images cross-fade as you scroll
 * (synced by themes.js). Right: colored text panels that are each sticky at the
 * top, so the next panel rises from below and stacks over the previous one.
 * The panels column starts a little higher so the first panel reaches up into
 * the metrics section above.
 */

.hd-themes {
	--hd-themes-offset: 14vh; /* how far the first panel reaches up */
}

.hd-themes__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}

/* --- Left: sticky media, cross-fading images --- */
.hd-themes__media {
	grid-column: 1;
	grid-row: 1;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	background-color: var(--c-kalkstein);
}

.hd-themes__img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.hd-themes__img.is-active {
	opacity: 1;
}

.hd-themes__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Photo credit: vertical label up the right edge, reading bottom-to-top
   (Figma: DM Sans Regular 16/28). Shared by the desktop cross-fade column and
   the mobile per-panel image; both image wrappers are positioned so this
   anchors to the image box. vertical-rl reads top-to-bottom, so rotate 180°
   to flip it upward (sideways-lr would do this without the rotate but Safari
   doesn't support it). The rotate is about the box centre, so the bottom/right
   anchor is preserved. A faint light halo keeps it legible over busier spots. */
.hd-themes__credit {
	position: absolute;
	bottom: 10px;
	right: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-base);
	font-weight: var(--fw-normal);
	font-size: 16px;
	line-height: 28px;
	color: var(--c-graphit);
	text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
	pointer-events: none;
}

/* Striped placeholder for themes without an image (as in the design) */
.hd-themes__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12%;
	color: var(--c-graphit);
	font-family: var(--font-base);
	font-size: clamp(16px, 1.4vw, 20px);
	background-color: var(--c-kalkstein);
	background-image: repeating-linear-gradient( -45deg, rgba( 30, 32, 33, 0.09 ) 0 1px, transparent 1px 13px );
}

/* --- Right: sticky-stacking panels --- */
.hd-themes__panels {
	grid-column: 2;
	grid-row: 1;
	margin-top: calc(var(--hd-themes-offset) * -1);
}

.hd-themes__panel {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 5vw, 104px);
}

.hd-themes__panel-inner {
	max-width: 46ch;
}

/* Per-panel image for the mobile stack; hidden in the desktop parallax, where
   the sticky media column handles the cross-fading images instead. */
.hd-themes__panel-media {
	display: none;
}

/* Number and heading in semibold on every breakpoint (customer request
   2026-08, overrides the regular weight from the original Figma H4). */
.hd-themes__num {
	display: block;
	font-size: var(--fs-h6);
	font-weight: var(--fw-semibold);
	letter-spacing: 1px;
	opacity: 0.85;
	margin-bottom: clamp(16px, 2vw, 28px);
}

.hd-themes__heading {
	margin: 0 0 clamp(20px, 2.5vw, 36px);
	font-family: var(--font-base);
	font-weight: var(--fw-semibold);
	font-size: clamp(26px, 2.4vw, 35px);
	line-height: 1.15;
	text-transform: uppercase;
}

/* Bold uppercase lead paragraph between heading and body */
.hd-themes__lead {
	margin: 0 0 clamp(16px, 2vw, 28px);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: 1.55;
	text-transform: uppercase;
}

.hd-themes__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* --- Mobile: drop the parallax. Each theme shows its own image stacked above
       its panel (image, panel, image, panel …), as in the Figma-mobile view. --- */
@media (max-width: 900px) {
	.hd-themes__inner {
		display: block;
	}

	/* Hide the sticky cross-fade column; the per-panel image takes over. */
	.hd-themes__media {
		display: none;
	}

	.hd-themes__panels {
		margin-top: 0;
	}

	.hd-themes__panel {
		position: static;
		min-height: 0;
		padding: 0;
	}

	.hd-themes__panel-media {
		display: block;
		position: relative; /* anchor for .hd-themes__credit */
		aspect-ratio: 390 / 542;
		background-color: var(--c-kalkstein);
		overflow: hidden;
	}

	.hd-themes__panel-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.hd-themes__panel-ph {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 12%;
		text-align: center;
		color: var(--c-graphit);
		font-family: var(--font-base);
		font-size: clamp(14px, 3.6vw, 18px);
		background-image: repeating-linear-gradient( -45deg, rgba( 30, 32, 33, 0.09 ) 0 1px, transparent 1px 13px );
	}

	/* Panel padding moves to the inner wrapper so the image can sit flush. */
	.hd-themes__panel-inner {
		max-width: none;
		padding: clamp(28px, 8vw, 44px) 16px clamp(40px, 11vw, 56px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-themes__img {
		transition: none;
	}
}