/*
 * Hero.
 * `.yogaacademie-hero` is only a spacer: it reserves one screen minus the
 * navigation bar so the navigation lands exactly at the bottom fold on load.
 * The image itself is taken out of flow and pinned to the viewport, so the
 * navigation and content scroll up over a stationary picture.
 */
.yogaacademie-hero {
	position: relative;
	z-index: 0;
	height: calc(100vh - var(--navigation-height));
	height: calc(100svh - var(--navigation-height));
}

/* Pages without a featured image: collapse the hero so the nav starts at the top. */
.yogaacademie-hero:not(:has(.wp-post-image)) {
	height: 0;
}

.yogaacademie-featured-image {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	margin: 0;
	width: 100%;
	max-width: none;
	height: calc(100vh - var(--navigation-height));
	height: calc(100svh - var(--navigation-height));
	overflow: hidden;
}

.yogaacademie-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	transition: transform 700ms ease;
}

.yogaacademie-featured-image:hover img {
	transform: scale(1.02);
}

/*
 * Compact hero.
 * Returning visitors (this browser session) on any page other than home
 * skip the full-screen scroll animation: `.ya-hero-compact` on <html> is set
 * by `yogaacademie_print_hero_state_script()` in functions.php before first
 * paint, so the fixed hero never flashes in. The inline hero below takes its
 * place, sized via the `wide` block alignment (contentSize 900px -> wideSize
 * 1300px) rather than a hand-picked width.
 */
html.ya-hero-compact .yogaacademie-hero {
	height: 0;
}

html.ya-hero-compact .yogaacademie-featured-image {
	display: none;
}

.yogaacademie-hero-inline {
	display: none;
}

html.ya-hero-compact .yogaacademie-hero-inline {
	display: block;
	margin-bottom: clamp(2rem, 6vw, 3.5rem);
}

/* width, aspect-ratio and object-fit come from the block's own
   aspectRatio/scale attributes (see templates/page.html). */
.yogaacademie-hero-inline img {
	display: block;
	object-position: center bottom;
}

/*
 * Below 622px the image is too narrow for a full-viewport-height crop:
 * object-fit: cover ends up cutting off too much of the artwork's sides.
 * Halving the box height gives it a squatter box to cover instead.
 */
@media (max-width: 622px) {
	.yogaacademie-hero {
		height: calc(65vh - var(--navigation-height));
		height: calc(65svh - var(--navigation-height));
	}

	.yogaacademie-featured-image {
		height: calc(65vh - var(--navigation-height));
		height: calc(65svh - var(--navigation-height));
	}

	.yogaacademie-featured-image img {
		height: calc(65vh - var(--navigation-height));
		height: calc(65svh - var(--navigation-height));
	}
}