/*
 * emo2026, homepage (front-page.php) styles.
 *
 * Apple-style vertical stack of full-bleed product tiles. Each tile is
 * roughly viewport-tall, edge-to-edge background, centered content
 * (eyebrow + headline + subhead + chevron-link CTAs). Some rows pair
 * two half-width tiles side-by-side; below the nav/footer breakpoint
 * (833px) those pairs collapse to a single column.
 *
 * Tokens come from tokens.css. Page-local custom properties at the
 * top capture geometry that's truly page-specific (tile heights, gap,
 * gradient stops), none of which belong in the global vocabulary.
 */

:root {
	/* Page-local geometry. Heroes are taller than half-tiles to mirror
	   Apple's marketing pages, first impression gets a full viewport. */
	--home-hero-min-height:  85vh;
	--home-half-min-height:  600px;
	--home-tile-gap:         var(--space-3);   /* 12px hairline gap, like Apple. */
	--home-tile-pad-block:   var(--space-10);  /* 80px top/bottom inside a tile. */
	--home-tile-pad-inline:  var(--layout-gutter);
}

/* ============================================================
 * Layout, vertical stack of rows; rows can hold one or two tiles.
 * ============================================================ */

.home {
	background-color: var(--color-bg-base);
}

.home-stack {
	display: flex;
	flex-direction: column;
	gap: var(--home-tile-gap);
	/* Sit flush against the sticky nav, the navbar already paints its
	   own background, so no extra spacing here. */
	margin: 0;
	padding: 0;
}

.home-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--home-tile-gap);
}

.home-row--split {
	/* Two equal columns above the breakpoint; collapses below. */
	grid-template-columns: 1fr 1fr;
}

/* ============================================================
 * Tile, the recurring unit.
 * ============================================================ */

.home-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--home-hero-min-height);
	padding: var(--home-tile-pad-block) var(--home-tile-pad-inline);
	overflow: hidden;
	color: var(--color-text-primary);
	text-align: center;
	/* Fallback solid in case a gradient fails to parse on an old engine. */
	background-color: var(--grey-50);
}

.home-tile--half {
	min-height: var(--home-half-min-height);
}

/* Desktop (owner, 2026-11-09): a pair sits inside the same 12px it keeps
   between its two tiles, so each tile has an even frame, and the tiles
   are squares. Border-box, or the 80px padding would stretch the square;
   min-height gives way to the ratio, and a tile with more content than
   fits still grows. Below 834px the pair stacks as before. */
@media (min-width: 834px) {
	.home-row--split {
		padding-inline: var(--home-tile-gap);
	}

	.home-row--split > .home-tile--half {
		box-sizing: border-box;
		min-height: 0;
		aspect-ratio: 1 / 1;
	}
}

/* The first splash is deliberately shorter than a screen (owner TODO,
   2026-10-01: "a user sees there is content below and knows to scroll").
   It used to take 85vh PLUS its 160px of padding, because min-height
   counts the content box and the theme has no border-box reset: on a
   1280x800 laptop the tile ran 40px past the fold and nothing below it
   showed. Border-box makes the figure the tile's real height.

   The tile fills the screen below the header except for one peek strip
   at the bottom, where the top of the emoswitch blue tile shows. A
   fixed fraction (62vh, capped at 640px) was tried first and read as
   "way too short" on a large monitor (owner, 2026-10-01): sizing from
   the fold keeps the splash a full first impression at every height
   and still shows there is more. */
.home-tile--isolators {
	--home-splash-peek: clamp(96px, 12vh, 160px);
	box-sizing: border-box;
	min-height: calc(100vh - var(--nav-height, 48px) - var(--home-tile-gap) - var(--home-splash-peek));
	min-height: calc(100svh - var(--nav-height, 48px) - var(--home-tile-gap) - var(--home-splash-peek));
}

/* Inverse colour scheme for tiles whose gradient is dark. */
.home-tile--dark {
	color: var(--color-text-inverse);
}

.home-tile--dark .home-tile__subhead {
	/* Slightly muted off-white, keep the hierarchy without losing legibility. */
	color: var(--color-text-inverse-secondary);
}

/* ============================================================
 * Tile content, eyebrow + headline + subhead + CTA row.
 * ============================================================ */

.home-tile__content {
	max-width: var(--layout-content-max-width);
	/* A flex item defaults to min-width: auto, i.e. it refuses to shrink below
	 * its min-content width. For these tiles the min-content width is the
	 * longest unbreakable word, and "Netzwerkisolatoren" at display size is
	 * far wider than a phone. The box therefore grew past the tile, got centred
	 * by .home-tile's justify-content, and was sliced off on BOTH sides by its
	 * overflow: hidden. It also hid the overflow from fit-titles.js, which asks
	 * the headline whether it overflows ITSELF, and it never did: the box was
	 * always at least as wide as the word. min-width: 0 lets the column narrow
	 * to the tile, so the headline can overflow, be seen to overflow, and be
	 * scaled down. */
	min-width: 0;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	/* Above the backdrop photo (z 0) and its scrim (z 1) on tiles
	   that have one; harmless on the rest. */
	position: relative;
	z-index: 2;
}

/* Same min-width: auto trap, one level down. The column centres its children,
 * so each child shrink-wraps, and a child that refuses to go below its
 * min-content width just grows past the column instead. Without this the
 * headline sizes itself to the longest word and spills over the tile's
 * padding, right to the edge of the screen. */
.home-tile__content > * {
	min-width: 0;
	max-width: 100%;
}

.home-tile__eyebrow {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-secondary);
}

.home-tile--dark .home-tile__eyebrow {
	color: var(--color-text-inverse-muted);
}

.home-tile__headline {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-56);
	font-weight: 600;
	line-height: var(--line-height-display);
	letter-spacing: var(--letter-spacing-tight);
	/* No text-wrap: balance, fit-titles.js budgets these to one line. */
	overflow-wrap: break-word;
}

.home-tile--half .home-tile__headline {
	/* Half-tiles host shorter visual real estate, drop one type-scale step. */
	font-size: var(--font-size-40);
}

.home-tile__subhead {
	margin: 0;
	max-width: 32em;
	font-family: var(--font-sans);
	font-size: var(--font-size-28);
	font-weight: 400;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-secondary);
}

.home-tile--half .home-tile__subhead {
	font-size: var(--font-size-21);
}

/* ============================================================
 * Tile media, the imagery slots. Two shapes:
 *
 * 1. .home-tile__media, an in-flow block inside the content column
 *    (product render below the CTAs, badge row above the headline).
 *    Because it's in flow, a tile WITHOUT media reserves no space,
 *    the content column simply centers in the tile.
 * 2. .home-tile__backdrop, an absolutely-positioned full-bleed
 *    photo behind the content (footswitch hero), dimmed by a scrim
 *    so the copy stays legible.
 *
 * Assets are legacy-site imports from wp-content/uploads/, wired in
 * front-page.php via content_url().
 * ============================================================ */

.home-tile__media {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-7);
	margin-top: var(--space-5);
}

.home-tile__media img {
	display: block;
	/* Renders are 600px square with generous whitespace; cap them so
	   the tile stays type-first. width/height attrs still reserve the
	   ratio, height: auto keeps it once the cap bites. */
	max-width: min(100%, 380px);
	height: auto;
}

/* Certification marks: compact logo row ABOVE the headline (fills
   what used to be bare gradient on the dark Zertifizierungen tile). */
.home-tile__media--badges {
	margin-top: 0;
	margin-bottom: var(--space-2);
}

.home-tile__media--badges img {
	max-width: 88px;
}

/* The Auswahlassistent illustration has an opaque white ground; a
   rounded card with a soft shadow makes the white read as intent,
   not as a missing transparency. */
.home-tile__media--card img {
	max-width: min(100%, 260px);
	border-radius: var(--radius-panel);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--color-brand-deep) 12%, transparent);
}

/* Photographs (team shot on the Karriere tile): allow more width,
   round the corners so the rectangle sits comfortably on the dark
   gradient. */
.home-tile__media--photo img {
	max-width: min(100%, 460px);
	border-radius: var(--radius-card);
}

/* Full-bleed backdrop photo, behind everything in the tile. */
.home-tile__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim between backdrop and copy. Petrol-tinted rather than plain
   black so the photo keeps the brand cast of --emo-grad-feature,
   which still paints underneath as the no-image fallback. */
/* No scrim on the footswitch tile any more: the studio render sits below
   the copy instead of behind it (front-page.php), so there is no text over
   photography to keep legible. */

/* ============================================================
 * CTA row, Apple's chevron link. Underline-less, link-blue,
 * with a small "›" that nudges right on hover.
 * ============================================================ */

.home-tile__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-7);
	margin-top: var(--space-3);
}

.home-cta {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	font-weight: 400;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-link);
	text-decoration: none;
	/* Tap-target padding without altering the inline visual baseline. */
	padding: var(--space-1) 0;
	/* Opacity is the press channel; release eases back through this. */
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.home-cta:hover,
.home-cta:focus-visible {
	/* Apple keeps the colour, just nudges the chevron. No underline. */
	color: var(--color-link);
	text-decoration: none;
}

.home-cta:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/* Pointer-down feedback (spec 1); opacity-based so the dark-tile
   variant and reduced motion both keep it. */
.home-cta:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

.home-tile--dark .home-cta {
	/* On dark gradients the CTA tint carries the contrast the petrol
	   green cannot; this is the styleguide's "logo on dark" treatment. */
	color: var(--color-brand-accent);
}

.home-tile--dark .home-cta:focus-visible {
	outline-color: var(--color-brand-accent);
}

.home-cta__chevron {
	display: inline-block;
	font-size: 1em;
	line-height: 1;
	/* Small visual tweak: the glyph sits a hair too high optically. */
	transform: translateX(0);
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
	/* Hint to assistive tech that this is decorative; the link text carries meaning. */
}

.home-cta:hover .home-cta__chevron,
.home-cta:focus-visible .home-cta__chevron {
	transform: translateX(4px);
}

/* ============================================================
 * Tile gradients. The paint behind each tile's imagery (and the
 * fallback if an image fails to load); the imagery itself is wired
 * as <img> elements in front-page.php. Each gradient is
 * page-specific (stops/angles), so it stays here rather than
 * entering the shared token vocabulary.
 * ============================================================ */

.home-tile--isolators {
	/* Deep slate to charcoal, clinical, electrical-equipment vibe. */
	background-image: linear-gradient(180deg, var(--grey-900) 0%, var(--grey-800) 60%, var(--grey-700) 100%);
}

/* ------------------------------------------------------------
 * emoswitch blue: the studio render IS the tile background.
 *
 * Not a cover-crop and not a boxed image below the copy. The shot is
 * 4:3 with the product in its right two thirds and empty studio
 * gradient elsewhere, while the tile is roughly 2:1 (full viewport
 * width by 85vh). Anchoring the render to the right edge at full tile
 * height therefore lands the product in the right ~56-92% of the tile
 * at every 16:9 screen size, and the copy column takes the left half
 * without ever crossing it.
 *
 * The wash below is sampled from the render's own background (light
 * grey-blue at the top, periwinkle glow low and right of centre), and
 * the render's left edge is masked to nothing over its first quarter,
 * so the two meet with no visible rectangle.
 * ------------------------------------------------------------ */

.home-tile--footswitch {
	background-image:
		radial-gradient(75% 58% at 72% 102%, rgba(226, 226, 255, 0.92) 0%, rgba(199, 202, 250, 0.55) 44%, rgba(199, 202, 250, 0) 78%),
		linear-gradient(180deg, #e3e7ef 0%, #dde4ef 40%, #cbd3e6 72%, #b7c0da 100%);
	/* Copy to the left of the product instead of centred over it, and
	   starting on the site's content gutter rather than 22px off the
	   window edge, so the headline lines up with every other page. The
	   max() collapses back to the plain tile padding once the viewport
	   is narrower than the container. */
	justify-content: flex-start;
	text-align: left;
	padding-inline-start: max(
		var(--home-tile-pad-inline),
		calc((100% - var(--layout-content-max-width)) / 2)
	);
	/* Hold the tile at about 2:1 or wider. The render fills the tile's
	   height, so its width, and with it how far right the product sits,
	   is set by the tile's aspect alone: a squarer tile drags the
	   product back across the copy column. Widening the tile is what
	   buys the separation, which is why this hero is a shallower band
	   than the ones above and below it. It has to be the min-height
	   rather than a max-height, because a max-height below the hero
	   floor simply loses to it; subtracting the padding keeps the
	   figure on the border box without a box-sizing change this one
	   tile would not share with its siblings. */
	min-height: min(
		var(--home-hero-min-height),
		calc(48vw - 2 * var(--home-tile-pad-block))
	);
}

.home-tile--footswitch .home-tile__content {
	align-items: flex-start;
	margin: 0;
	/* Ends well before the product's left edge (~55% of the tile). */
	max-width: min(40%, 720px);
}

.home-tile--footswitch .home-tile__ctas {
	justify-content: flex-start;
}

.home-tile--footswitch .home-tile__backdrop {
	/* Full tile height, width derived from the render's own 4:3, so the
	   frame's top and bottom edges ARE the tile's edges. A box narrower
	   than that letterboxes the shot on a squarer window, and the two
	   bands where the wash resumed read as stripes across the tile.
	
	   Pinned flush right, no overhang: hanging the frame off the screen
	   edge did put the product further right, but it read as shoved into
	   the corner and clipped. Its distance from the copy is bought with
	   the tile's aspect instead (see the min-height above). */
	inset: 0 0 auto auto;
	width: auto;
	height: 100%;
	max-width: none;
	aspect-ratio: 2000 / 1502;
	object-fit: cover;
	object-position: right center;
	/* The frame's own left quarter is empty studio gradient; fading it
	   out is what stops the render reading as a pasted rectangle on the
	   wash. It stops well short of the product at 31.5%. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}

.home-tile--transformers {
	background-image: linear-gradient(180deg, var(--grey-50) 0%, var(--grey-100) 100%);
}

.home-tile--assistant {
	background-image: var(--emo-grad-wash-soft);
}

.home-tile--certifications {
	background-image: linear-gradient(180deg, var(--grey-800) 0%, var(--grey-900) 100%);
}

.home-tile--careers {
	background-image: linear-gradient(160deg, var(--grey-700) 0%, var(--grey-800) 100%);
}

/* ============================================================
 * Responsive, match the nav/footer breakpoint at 833px so the
 * whole chrome flips together. Half-tile pairs stack, type
 * scale drops one step, vertical rhythm tightens.
 * ============================================================ */

@media (max-width: 833px) {
	:root {
		--home-hero-min-height: 78vh;
		--home-half-min-height: 480px;
		--home-tile-pad-block:  var(--space-9);  /* 64px */
	}

	.home-row--split {
		grid-template-columns: 1fr;
	}

	.home-tile__headline {
		font-size: var(--font-size-40);
	}

	.home-tile--half .home-tile__headline {
		font-size: var(--font-size-28);
	}

	.home-tile__subhead {
		font-size: var(--font-size-21);
	}

	.home-tile--half .home-tile__subhead {
		font-size: var(--font-size-18);
	}

	.home-tile__ctas {
		gap: var(--space-6);
	}

	/* Imagery steps down with the type scale. */
	.home-tile__media img {
		max-width: min(100%, 300px);
	}

	.home-tile__media--badges img {
		max-width: 72px;
	}

	.home-tile__media--card img {
		max-width: min(100%, 220px);
	}

	.home-tile__media--photo img {
		max-width: min(100%, 380px);
	}
}

/* ============================================================
 * emoswitch blue, stacked layout.
 *
 * Not only a phone case: the side-by-side hero needs a tile wider
 * than about 1.7:1, and holding that on a squarish window shrinks
 * the tile far below the heroes above and below it (484px against
 * 1105px on an iPad in portrait). Past 3:2 the tile therefore
 * stacks instead, which fills the height honestly.
 * ============================================================ */

@media (max-width: 833px), (max-aspect-ratio: 3 / 2) {
	/* emoswitch blue stacks: there is no room for a copy column beside
	   the product once the tile is taller than it is wide. Copy to the
	   top, render bleeding across the bottom, its top edge feathered
	   into the wash. The negative bottom offset runs the empty lower
	   fifth of the frame off the tile so the product sits at the edge.
	   The render is 122% of the tile wide, so its product band starts
	   51vw above the tile's bottom edge; reserving exactly that as
	   bottom padding is what guarantees the copy never reaches it, at
	   any phone width. The floor is reduced by the same 51vw so the
	   tile still lands near the 78vh the other heroes use instead of
	   stacking padding on top of a full-height box. */
	.home-tile--footswitch {
		justify-content: center;
		/* Centred in the space the bottom padding leaves, so the air
		   sits above and below the copy instead of all of it landing
		   between the CTAs and the product. */
		align-items: center;
		text-align: center;
		/* Back to symmetric gutters: the desktop rule starts the copy on
		   the content gutter, which would shove centred text off-axis. */
		padding-inline: var(--home-tile-pad-inline);
		min-height: max(0px, calc(var(--home-hero-min-height) - 51vw));
		padding-bottom: calc(51vw + var(--space-5));
		background-image:
			radial-gradient(96% 42% at 50% 100%, rgba(226, 226, 255, 0.92) 0%, rgba(199, 202, 250, 0.55) 46%, rgba(199, 202, 250, 0) 80%),
			linear-gradient(180deg, #e3e7ef 0%, #dde4ef 46%, #cbd3e6 78%, #b7c0da 100%);
	}

	.home-tile--footswitch .home-tile__content {
		align-items: center;
		margin: 0 auto;
		max-width: 100%;
	}

	.home-tile--footswitch .home-tile__ctas {
		justify-content: center;
	}

	.home-tile--footswitch .home-tile__backdrop {
		/* Offset so the PRODUCT centres on the tile, not the frame:
		   the switch sits right of centre inside its own 4:3 shot, so
		   centring the file would push it visibly off-axis. */
		inset: auto auto -6vw -23%;
		width: 122%;
		height: auto;
		max-width: none;
		object-fit: fill;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 20%);
	}
}

/* ============================================================
 * Reduced motion, respect the OS pref. Chevron stays put.
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.home-cta__chevron {
		transition: none;
	}
	.home-cta:hover .home-cta__chevron,
	.home-cta:focus-visible .home-cta__chevron {
		transform: none;
	}
}