/*
 * KEK10 — homepage hero block `kek10/home-hero` (WP-052, Stage 20).
 *
 * Carried across from `assets/css/components.css` VERBATIM, as WP052-F5 asks:
 * the four arrow variables and `--kek-hero-funding-height` from :37, the arrow
 * geometry and the Kadence hover/focus/active restatements from :57-62, and
 * the mobile arrow rules from :75. Two deliberate changes, and no others:
 *
 *   WP052-F3  `object-fit` is `contain`, not `cover`, and the track's height
 *             comes from `--kek-home-hero-ratio`, which `render.php` derives
 *             from the images. There is no `min-height` and no fixed height:
 *             a taller or shorter set of artwork simply re-derives.
 *   WP052-F4  no `__content`, no `__title`, no `__more` — those rules are not
 *             reproduced, because the slides are image-only.
 *
 * Nothing here may be written into `assets/css/components.css`. The
 * `.kek-home-hero-carousel` rules there belonged to the old hero and stayed
 * intact until **Step 20.9 removed them on 2026-09-16** (WP052-F12).
 *
 * The funding rail (WP052-F8/F9) is carried across from `components.css:73-75`
 * with its declarations unchanged — the `470px`/`584px` caps and both mobile
 * coefficients are PLAN §8 invariant 12 and must never be re-derived. TWO
 * changes, both approved:
 *
 *   WP052-F8  the mobile constant is 26px, not 70px. The 70px was the 34px
 *             dots row + its two 10px gaps + 16px padding; with no dots the
 *             rail is two rows and ONE gap, so 10 + 16 = 26. The band is
 *             therefore exactly 44px shorter on mobile. Do not "correct" this
 *             back to 70.
 *   the rail is `position:relative` in normal flow under the track, not
 *             `position:absolute` over it: the new hero's height is derived
 *             from the images (WP052-F3) instead of being a fixed
 *             `min-height`, so the rail follows the image rather than
 *             overlapping it. That is what puts the seam on the image's
 *             bottom edge.
 *
 * The selectors are namespaced `.kek-home-hero__funding*`, exactly as the
 * arrows were: `.kek-home-hero-funding` belonged to the OLD hero in
 * `components.css` and to `home-hero-carousel.js`, and both heroes ran side by
 * side between Step 20.8 and Step 20.9. Sharing the class would have applied
 * these rules to the accepted rail too and broken it (WP052-F12). Step 20.9
 * retired the old rules; this namespace is now the only one on the site.
 */
.kek-home-hero {
	--kek-hero-arrow-inline-offset: 8px;
	--kek-hero-arrow-block-position: 50%;
	--kek-hero-arrow-mobile-inline-offset: 8px;
	--kek-hero-arrow-mobile-bottom-offset: 0px;
	--kek-hero-funding-height: 100px;
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	isolation: isolate;
	overflow: hidden;
	padding: 0 !important;
	background: var(--wp--preset--color--kek-bg-dark); /* Stage 59.7: was #0b0f13; seen only before a slide paints */
	color: #fff;
}

/*
 * `touch-action: pan-y` is half of WP052-F6: it tells the browser this element
 * never handles a vertical gesture, so the page keeps scrolling on touch even
 * before `view.js` has decided an axis. The other half is that `view.js` never
 * calls preventDefault() on a vertical gesture.
 */
.kek-home-hero__track {
	position: relative;
	width: 100%;
	aspect-ratio: var(--kek-home-hero-ratio);
	touch-action: pan-y;
	overflow: hidden;
}

/*
 * WP052-F17 / WP-052 B (Stage 39, option A2) — the funding rail ends on screen
 * when the page loads. The frame is the SMALLER of its natural height (width x
 * ratio) and what is left of the screen under the header and above the rail;
 * the slide stays whole inside it (`contain`, WP052-F3) and the blur fills the
 * sides. It never shrinks below HALF its natural height: below that (a phone
 * held sideways) the page scrolls instead. Measured in LOG-39.0.
 *
 * `--kek-home-hero-top` is where the hero starts on the page (header + the
 * space around it). 126px is the measured value on every width (24 + 78 + 24);
 * `view.js` re-measures it, so a later change to the header corrects itself.
 * `svh` is the viewport with the mobile browser's bars SHOWING, the smaller
 * one, so the rail is on screen either way; `vh` is the fallback.
 */
.kek-home-hero--fit {
	--kek-home-hero-top: 126px;
}

.kek-home-hero--fit .kek-home-hero__track {
	aspect-ratio: auto;
	height: max(min(100vw * var(--kek-home-hero-hpw), 100vh - var(--kek-home-hero-top) - var(--kek-hero-funding-height)), 50vw * var(--kek-home-hero-hpw));
	height: max(min(100vw * var(--kek-home-hero-hpw), 100svh - var(--kek-home-hero-top) - var(--kek-hero-funding-height)), 50vw * var(--kek-home-hero-hpw));
}

/*
 * WP052-F20 — the blurred copy behind every slide. `inset:-40px` pushes the
 * blur's soft edge outside the track, which clips it (`overflow:hidden`).
 */
.kek-home-hero__blur {
	position: absolute;
	inset: -40px;
	z-index: 0;
	background-position: center;
	background-size: cover;
	filter: blur(28px) brightness(.55);
	pointer-events: none;
}

.kek-home-hero__slide > .kek-home-hero__link,
.kek-home-hero__slide > .kek-home-hero__image {
	position: relative;
	z-index: 1;
}

.kek-home-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 600ms ease, visibility 600ms ease;
}

.kek-home-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.kek-home-hero__link {
	display: block;
	width: 100%;
	height: 100%;
	-webkit-user-drag: none;
}

/*
 * `contain` is the whole of WP052-F3: the image is scaled to fit, never
 * cropped. Because every image shares the ratio the track was given, the
 * painted box equals the element box and nothing is letterboxed either.
 * `user-drag`/`user-select` off, or a swipe across a linked image starts a
 * native image drag instead.
 */
.kek-home-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0 !important;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}

/*
 * The controls are markup, but stay hidden until `view.js` adds `is-enhanced`,
 * so a page whose script never arrives shows no dead arrows — the property the
 * accepted hero has today, where the arrows are built in JS or not at all.
 */
.kek-home-hero__controls {
	position: absolute;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	z-index: 3;
	display: none;
	pointer-events: none;
}

.kek-home-hero.is-enhanced .kek-home-hero__controls {
	display: block;
}

.kek-home-hero__arrow {
	position: absolute;
	top: clamp(96px, var(--kek-hero-arrow-block-position), calc(100% - 96px));
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	width: 48px;
	min-width: 44px;
	height: 72px;
	min-height: 44px;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-size: 3rem;
	line-height: 1;
	cursor: pointer;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
	pointer-events: auto;
	transition: color 180ms ease, transform 180ms ease;
}

/*
 * Kadence styles every bare `button` on hover/focus/active with the palette
 * button colour, which beat the carousel controls' own background and flashed
 * blue. Restate the intended fills for those states.
 */
.kek-home-hero__arrow:hover,
.kek-home-hero__arrow:focus,
.kek-home-hero__arrow:active {
	background: transparent !important;
	box-shadow: none !important;
}

.kek-home-hero__arrow:focus:not(:focus-visible) {
	outline: 0;
}

.kek-home-hero__arrow:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -5px;
}

.kek-home-hero__arrow--prev {
	left: max(env(safe-area-inset-left, 0px), clamp(8px, var(--kek-hero-arrow-inline-offset), 64px));
	transform: translateY(-50%);
}

.kek-home-hero__arrow--next {
	right: max(env(safe-area-inset-right, 0px), clamp(8px, var(--kek-hero-arrow-inline-offset), 64px));
	transform: translateY(-50%);
}

.kek-home-hero__arrow:hover {
	color: #fff;
	transform: translateY(-50%) scale(1.08);
}

/* ---------------------------------------------------------------------------
 * WP052-F8 / WP052-F9 — the funding rail (PLAN §8 invariant 12).
 * ------------------------------------------------------------------------ */
.kek-home-hero__funding {
	position: relative;
	z-index: 4;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	height: var(--kek-hero-funding-height);
	margin: 0 !important;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 8px max(32px, calc(env(safe-area-inset-right) + 12px)) max(8px, env(safe-area-inset-bottom)) max(32px, calc(env(safe-area-inset-left) + 12px));
	background: #fff;
	border-top: 0;
}

.kek-home-hero__funding-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0 !important;
}

.kek-home-hero__funding figure {
	margin: 0 !important;
}

.kek-home-hero__funding a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	max-width: 100%;
	border-radius: 4px;
}

.kek-home-hero__funding a:focus-visible {
	outline: 3px solid var(--wp--preset--color--kek-blue);
	outline-offset: 3px;
}

.kek-home-hero__funding img {
	display: block;
	object-fit: contain;
	height: auto;
}

/*
 * The WP-048 sizing contract. §8 invariant 12: these four values are the
 * accepted ones and are not re-derived here.
 */
.kek-home-hero__funding-artwork--first img {
	width: min(470px, 100%);
	max-height: 69px;
}

.kek-home-hero__funding-artwork--second img {
	width: min(584px, 100%);
	max-height: 69px;
}

/*
 * WP052-F8 — the centre slot is EMPTY, but its own rules are carried across
 * from `components.css:74` so dots can be reinstated later without re-deriving
 * the geometry. Only the `.kek-home-hero-carousel__dot*` descendants, which
 * have nothing to style, are left behind.
 */
.kek-home-hero__funding-slot--dots {
	justify-self: center;
	box-sizing: border-box;
	width: auto;
	min-height: 24px;
	padding: 0;
	border: 0;
}

/* Both artworks flush to the outer edges, so the empty centre moves neither. */
.kek-home-hero__funding-slot--first {
	justify-content: flex-start;
}

.kek-home-hero__funding-slot--second {
	justify-content: flex-end;
}

@media (max-width: 720px) {
	.kek-home-hero {
		/*
		 * WP076-F1 (Stage 50, client 2026-10-18) — ONE line on phones, not stacked:
		 * "no one needs to read them, just to exist". Both artworks get the same
		 * height, the one that makes the pair fill the row: the screen minus 16px
		 * of side padding and the 10px gap, divided by the sum of their width/height
		 * ratios, 1 / 0.146799 + 1 / 0.118098 = 6.812035 + 8.467544 = 15.279579
		 * (§8 invariant 12's coefficients, unchanged). 390px → 23.8px tall.
		 * The rail is never under 44px, so each link stays a 44px tap target.
		 */
		--kek-hero-funding-row: calc((100vw - 26px) / 15.279579);
		--kek-hero-art1-width: calc(var(--kek-hero-funding-row) * 6.812035);
		--kek-hero-art2-width: calc(var(--kek-hero-funding-row) * 8.467544);
		--kek-hero-funding-height: max(44px, calc(var(--kek-hero-funding-row) + 16px));
	}

	.kek-home-hero__arrow {
		top: auto;
		bottom: calc(var(--kek-hero-funding-height) + max(env(safe-area-inset-bottom, 0px), clamp(0px, var(--kek-hero-arrow-mobile-bottom-offset), 40px)));
		width: 48px;
		height: 58px;
		font-size: 2.35rem;
		transform: none;
	}

	.kek-home-hero__arrow:hover {
		transform: scale(1.08);
	}

	.kek-home-hero__arrow--prev {
		left: max(env(safe-area-inset-left, 0px), clamp(8px, var(--kek-hero-arrow-mobile-inline-offset), 48px));
	}

	.kek-home-hero__arrow--next {
		right: max(env(safe-area-inset-right, 0px), clamp(8px, var(--kek-hero-arrow-mobile-inline-offset), 48px));
	}

	/*
	 * One line: first artwork at the left edge, second at the right, as on
	 * desktop. The empty dots slot goes. The vertical room comes from the
	 * rail's own height (centred), not from padding.
	 */
	.kek-home-hero__funding {
		grid-template-columns: auto auto;
		justify-content: space-between;
		gap: 10px;
		padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
	}

	.kek-home-hero__funding-slot--dots {
		display: none;
	}

	.kek-home-hero__funding-artwork--first,
	.kek-home-hero__funding-artwork--second {
		display: flex;
	}

	.kek-home-hero__funding-artwork--first img {
		width: var(--kek-hero-art1-width);
		max-height: none;
	}

	.kek-home-hero__funding-artwork--second img {
		width: var(--kek-hero-art2-width);
		max-height: none;
	}
}

/*
 * WP069-F1–F4 (Stage 41) — phones only: the hero a bit taller, the slide
 * STRETCHED vertically (never cropped), by at most the block's «Τέντωμα στο
 * κινητό (%)», `--kek-home-hero-stretch` (0.2 = 20 %, from `render.php`).
 *
 * `--kek-home-hero-h` is the Stage 39 frame formula with the natural height
 * multiplied by (1 + p): still capped by the room under the header and above
 * the rail (§8 inv. 27 — on a short screen the stretch gives way, never the
 * rail) and still floored at half the natural height. With p = 0 it is exactly
 * the Stage 39 height.
 *
 * Each slide's picture box is sized from ITS OWN shape (`--kek-slide-hpw`, set
 * per slide by `render.php`): as wide as the frame allows without growing
 * taller than the frame, and at most (1 + p) x its natural height. So a slide
 * is never stretched by more than p; a slide of another shape stops at p and
 * the blur (WP052-F20) fills the rest; and when the frame is shorter than the
 * natural height (short screens), width = height / shape, i.e. today's
 * `contain`. Above 720px none of this applies.
 */
@media (max-width: 720px) {
	.kek-home-hero--fit {
		--kek-home-hero-h: max(min(100vw * var(--kek-home-hero-hpw) * (1 + var(--kek-home-hero-stretch, 0)), 100svh - var(--kek-home-hero-top) - var(--kek-hero-funding-height)), 50vw * var(--kek-home-hero-hpw));
	}

	.kek-home-hero--fit .kek-home-hero__track {
		height: max(min(100vw * var(--kek-home-hero-hpw) * (1 + var(--kek-home-hero-stretch, 0)), 100vh - var(--kek-home-hero-top) - var(--kek-hero-funding-height)), 50vw * var(--kek-home-hero-hpw));
		height: max(min(100vw * var(--kek-home-hero-hpw) * (1 + var(--kek-home-hero-stretch, 0)), 100svh - var(--kek-home-hero-top) - var(--kek-hero-funding-height)), 50vw * var(--kek-home-hero-hpw));
	}

	.kek-home-hero--fit .kek-home-hero__slide > .kek-home-hero__link,
	.kek-home-hero--fit .kek-home-hero__slide > .kek-home-hero__image {
		position: absolute;
		top: 50%;
		left: 50%;
		width: min(100%, var(--kek-home-hero-h) / var(--kek-slide-hpw, var(--kek-home-hero-hpw)));
		height: min(100%, 100vw * var(--kek-slide-hpw, var(--kek-home-hero-hpw)) * (1 + var(--kek-home-hero-stretch, 0)));
		transform: translate(-50%, -50%);
	}

	.kek-home-hero--fit .kek-home-hero__image {
		object-fit: fill;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kek-home-hero__slide,
	.kek-home-hero__arrow {
		transition: none;
	}
}