/* ==========================================================================
   Block 01 – hero
   Full-viewport intro with rotating header-color background, headline,
   CTA and a scroll hint.

   Design reference: Figma frame at 1920px width (confirmed via the logo's
   dev-mode position: left:1738px + width:118px = 1856px, i.e. 64px from the
   true right edge of a 1920px frame). Fluid sizes below are calibrated
   against that 1920px reference and scale proportionally via vw.

   Nav, headline, subline and button live on the defined 14-column .grid-wide
   grid (columns 2-13 = boxed content, per the grid spec). The scroll hint is
   absolutely positioned against the section instead (see below), and the
   logo alone sits outside the grid too, positioned directly against the
   section.

   Assumption (not fully unambiguous in the screenshot): the 4 header colors
   cycle automatically as a slow background animation. Timing/easing is a
   reasonable default and can be tuned once confirmed.
   ========================================================================== */

/* Height is responsive, not a flat 100vh/100% at every size: on small
   screens a forced full-viewport hero either clips the content or leaves
   awkward empty space, since the content itself is much smaller there too
   (fluid clamp() sizes). It grows from content-driven (mobile) to the full
   min(100vh, 1080px) treatment only from desktop up. */
.block-hero {
	position: relative;
	/* Above block 02 (also position:relative) so the scroll hint's 3px
	   overflow actually shows on top of it instead of being painted over. */
	z-index: 1;
	min-height: auto;
	/* Reserves room for the absolutely positioned scroll hint (11.8rem tall
	   incl. its own padding, minus the 1rem it's allowed to peek past the
	   edge - see .block-hero-scroll below), so it never overlaps the
	   in-flow content above it on any viewport. */
	padding-bottom: 10.8rem;
	background-color: var(--color-header-1);
	animation: hero-color-cycle 5s ease-in-out infinite;
}

@media (min-width: 48em) {
	.block-hero {
		min-height: 70vh;
	}
}

@media (min-width: 64em) {
	.block-hero {
		min-height: 85vh;
	}
}

@media (min-width: 78.75em) {
	.block-hero {
		min-height: 0;
		height: min(100vh, 108rem);
	}
}

@keyframes hero-color-cycle {
	0%, 20% { background-color: var(--color-header-1); }
	25%, 45% { background-color: var(--color-header-2); }
	50%, 70% { background-color: var(--color-header-3); }
	75%, 95% { background-color: var(--color-header-4); }
	100% { background-color: var(--color-header-1); }
}

.block-hero .grid-wide-wrapper {
	height: 100%;
}

.block-hero .grid-wide {
	height: 100%;
	grid-template-rows: auto auto;
}

/* -- top bar: nav (in-grid) ------------------------------------------------ */

.block-hero-top {
	grid-row: 1;
	grid-column: 2 / 14;
	padding-top: 4.8rem;
}

/* Spec: weight 700, 25px font-size, 42px line-height, 0 letter-spacing.
   Fluid via vw (25/1920 = 1.3vw), capped at the exact px value from 1920px up. */
.block-hero-top nav a {
	font-weight: var(--font-weight-bold);
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.68;
	letter-spacing: 0;
	transition: opacity var(--transition-base);
}

.block-hero-top nav a:hover {
	opacity: 0.7;
}

/* -- logo (bleed, exempt from the column grid) ------------------------------
   Positioned directly against the hero section (not inside .grid-wide) so
   it can never be squeezed or clipped by the bleed column's track sizing -
   that column can shrink to just a few px on some viewports, which was
   hiding the logo entirely. Percentages here resolve against the section's
   own width, giving the same 64px-at-1920px margin without depending on
   grid track math. */
.block-hero-logo {
	position: absolute;
	top: 4.8rem;
	right: 3.333%;
	z-index: 1;
	display: block;
	transition: transform var(--transition-base);
}

.block-hero-logo:hover {
	transform: translateY(-0.2rem);
}

/* Logo spec: width 118px / height 139px at the 1920px reference. Stays full
   size down to tablet, only steps down for phone / small tablet. */
.block-hero-logo img {
	width: 11.8rem;
	max-width: none;
	height: auto;
}

@media (max-width: 47.99em) {
	.block-hero-logo img {
		width: 8rem;
	}
}

@media (max-width: 29.99em) {
	.block-hero-logo img {
		width: 6rem;
	}
}

/* -- main content ---------------------------------------------------------- */

/* Gap from the top bar to the headline is 230px at tablet-landscape and up
   (large viewports keep the exact spec value, not a fraction of it), and
   only steps down for smaller screens. */
.block-hero-content {
	grid-row: 2;
	grid-column: 2 / 14;
	margin-top: 8rem;
}

@media (min-width: 30em) {
	.block-hero-content {
		margin-top: 12rem;
	}
}

@media (min-width: 48em) {
	.block-hero-content {
		margin-top: 16rem;
	}
}

@media (min-width: 64em) {
	.block-hero-content {
		margin-top: 23rem;
	}
}

/* H1 spec: weight 900, 142px font-size, 134px line-height, 0 letter-spacing.
   Fluid via vw (142/1920 = 7.4vw), capped at the exact px value from 1920px
   up. white-space:nowrap guarantees the two lines set via <br> in the markup
   ("kein märchen." / "nur quadratmeter.") never wrap onto a third line. */
.block-hero-content h1 {
	font-size: clamp(3.2rem, 7.4vw, 14.2rem);
	line-height: 0.94;
	letter-spacing: 0;
	white-space: nowrap;
}

/* Subline spec: weight 300, 35px font-size, 47px line-height. Bold inline
   part is 700 (handled by the global strong/b rule). Same 1920px reference. */
.block-hero-subline {
	margin-top: 7.5rem;
	font-size: clamp(1.8rem, 1.82vw, 3.5rem);
	line-height: 1.34;
}

.block-hero-content .btn {
	margin-top: 5rem;
}

/* -- scroll hint ------------------------------------------------------------ */

/* Anchored via position:absolute to .block-hero's own bottom edge (not a
   grid row) so it always sits at the very end of the section regardless of
   viewport size - a grid row can only be pushed down by empty space, which
   collapses to 0 whenever content grows taller than the section's
   min-height (e.g. on tablet). bottom:-1rem pushes the icon 10px past the
   section's own (height-capped) box, so its tip peeks over the colored
   background onto block 02. */
.block-hero-scroll {
	position: absolute;
	left: 50%;
	bottom: -1rem;
	transform: translateX(-50%);
	padding: 0.8rem;
}

.block-hero-scroll-icon {
	width: 85px;
	height: auto;
	animation: hero-scroll-bounce 700ms ease-in-out infinite;
}

/* Below desktop (up to 78.74em, see grid.css breakpoints): smaller peek
   than the default -1rem, on mobile as well as tablet/tablet-landscape. */
@media (max-width: 78.74em) {
	.block-hero-scroll {
		bottom: -5px;
	}
}

/* Matches the Figma smart-animate spec: 250ms ease-in-out down, a 200ms
   hold at the bottom, 250ms ease-in-out back up, then an (imperceptible)
   immediate restart - a repeated jump rather than a continuous bounce. */
@keyframes hero-scroll-bounce {
	0% { transform: translateY(0); }
	35.714% { transform: translateY(0.6rem); }
	64.286% { transform: translateY(0.6rem); }
	100% { transform: translateY(0); }
}