/*
 * Hero (avalon/hero): full-width photo with the page title, a lead and buttons. Replaces the hero rules of blocks.css.
 *
 * Height: the photo has a minimum height, the text sits at its bottom and the hero only grows when the text needs
 * more room.
 *   desktop (1025px+)   80vh on every page, the front page included ("full", "large" and "medium" alike,
 *                       2026-09-25); "auto" follows the text (the render gives "auto" heroes with a photo the
 *                       "medium" class on most pages: blocks/hero/render.php). The title 50px (tablets 40px).
 *   tablet (769-1024px) the same, but at most 600px
 *   phones (-768px)     the header (--ab-header-h, 64px) + 24px above the text, 32px below; the photo at least 55% of the
 *                       screen on every page (svh: the screen without the browser's bars)
 * Space above and below the text: 172 / 56px on desktop (the header + 24px above; the header is 148px with its menu
 * row from the header breakpoint on, --ab-header-h), at least 88 / 48px on tablets. Stored values
 * (--ab-hero-pt/-pb, from the converted Beaver Builder rows: 100-390px) count up to 220px, and on desktop never more
 * than the header + 6% of the window above and 8% below (otherwise they would make the hero taller than the heights
 * above); on tablets up to 136 / 64px. Phones always use their fixed values.
 * The theme's article hero (templates/single.html, .an-post-hero) keeps its own look: see the end of this file.
 */

.ab-hero {
	--ab-hero-top: calc(var(--ab-header-h, 72px) + 24px);
	--ab-hero-bottom: 32px;
	--ab-hero-min: 0px;
	--ab-hero-h1: 28px;
	--ab-hero-h1-lh: 1.15;
	--ab-hero-lead: 17px;
	--ab-hero-gap-crumbs: 8px;
	--ab-hero-gap: 12px;
	--ab-hero-gap-buttons: 20px;
	/* the shade over the whole photo: none on phones, where it sits behind the text only (see "photo, darkening,
	   shade" below) */
	--ab-hero-shade: none;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	min-height: var(--ab-hero-min);
	padding: var(--ab-hero-top) 0 var(--ab-hero-bottom);
	overflow: hidden;
	background-color: var(--ab-navy, #002b56);
	color: #fff;
}

.ab-hero.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

.ab-hero--v-top { justify-content: flex-start; }
.ab-hero--v-center { justify-content: center; }

.ab-hero > .ab-container {
	width: 100%;
}

/* every page's hero as airy as the front page's (2026-09-25): the photo high, the text at its bottom, so there is
   more space above the text than below it */
@media (max-width: 768px) {
	.ab-hero--h-full,
	.ab-hero--h-large,
	.ab-hero--h-medium {
		min-height: 55vh;
		min-height: 55svh;
	}

	/* the Korkeus choices "Keskikorkea" and "Matala" (the editor's setting): lower than the tall hero */
	.ab-hero--h-half {
		min-height: 45vh;
		min-height: 45svh;
	}

	.ab-hero--h-low {
		min-height: 34vh;
		min-height: 34svh;
	}
}

@media (min-width: 769px) {
	.ab-hero {
		/* never less than the header + 24px (the two-row desktop header is 148px) */
		--ab-hero-top: max(calc(var(--ab-header-h, 72px) + 24px), min(var(--ab-hero-pt, 120px), 220px, calc(var(--ab-header-h, 72px) + 6vh)));
		--ab-hero-bottom: min(var(--ab-hero-pb, 56px), 220px, 8vh);
		--ab-hero-h1: 40px;
		--ab-hero-h1-lh: 1.12;
		--ab-hero-lead: 18px;
		--ab-hero-gap-crumbs: 10px;
		--ab-hero-gap: 16px;
		--ab-hero-gap-buttons: 24px;
		/* the text is on the left: shade from the left edge and the bottom, the rest of the photo stays bright (in a
		   narrow window the 600px text column is a larger share of the width: the shade reaches at least 860px) */
		--ab-hero-shade:
			linear-gradient(90deg, rgba(0, 43, 86, 0.72) 0%, rgba(0, 43, 86, 0.5) max(34%, 480px), rgba(0, 43, 86, 0) max(64%, 860px)),
			linear-gradient(0deg, rgba(0, 43, 86, 0.55) 0%, rgba(0, 43, 86, 0) 55%);
	}

	.ab-hero--t-center {
		--ab-hero-shade: linear-gradient(0deg, rgba(0, 43, 86, 0.6) 0%, rgba(0, 43, 86, 0.25) 55%, rgba(0, 43, 86, 0.1) 100%);
	}

	.ab-hero--h-full,
	.ab-hero--h-large,
	.ab-hero--h-medium {
		--ab-hero-min: 80vh;
	}

	/* "Keskikorkea" and "Matala": the photo shows below the header (148px) with room for the text; "Tekstin
	   korkuinen" (--h-text) has no minimum height */
	.ab-hero--h-half {
		--ab-hero-min: max(58vh, 420px);
	}

	.ab-hero--h-low {
		--ab-hero-min: max(38vh, 330px);
	}

	/* half of the width, but never narrower than a comfortable title + lead column */
	.ab-hero--w-half .ab-hero__content {
		max-width: max(calc(50% - 20px), 600px);
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.ab-hero {
		--ab-hero-top: min(var(--ab-hero-pt, 112px), 136px);
		--ab-hero-bottom: min(var(--ab-hero-pb, 48px), 64px);
		min-height: min(var(--ab-hero-min), 600px);
	}

	/* the text column (600px) covers most of a tablet's width: the shade reaches further right and higher up */
	.ab-hero:not(.ab-hero--t-center) {
		--ab-hero-shade:
			linear-gradient(90deg, rgba(0, 43, 86, 0.66) 0%, rgba(0, 43, 86, 0.5) 50%, rgba(0, 43, 86, 0.12) 90%),
			linear-gradient(0deg, rgba(0, 43, 86, 0.55) 0%, rgba(0, 43, 86, 0) 65%);
	}
}

@media (min-width: 1025px) {
	.ab-hero {
		--ab-hero-h1: 50px;
		--ab-hero-h1-lh: 1.1;
		--ab-hero-lead: 20px;
		--ab-hero-gap-crumbs: 12px;
		--ab-hero-gap: 20px;
		--ab-hero-gap-buttons: 32px;
	}
}

/* ------------------------------------------------------------ photo, darkening, shade */

.ab-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.ab-hero__overlay,
.ab-hero__gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* the hero's own darkening (--ab-hero-o, 0-1, from the render): not over the whole photo any more on the pages'
   heroes (2026-09-25: the photo at full strength); the shade behind the text (--ab-hero-shade, and on phones the band
   behind the text below) keeps the text readable. The article hero keeps its darkening. */
.ab-hero__overlay {
	opacity: var(--ab-hero-o, 0.3);
	background: var(--ab-navy, #002b56);
}

.ab-hero:not(.an-post-hero) .ab-hero__overlay {
	opacity: 0;
}

.ab-hero__gradient {
	background: var(--ab-hero-shade);
}

/* phones: the photo stays bright and the darkness is behind the text only. The darkening is at most 0.2, and a shade
   starts transparent 96px above the text (breadcrumb, title and lead), is 0.55 at the text's top edge and 0.68 from
   160px lower down to the hero's lower edge (the hero clips it). With the usual darkening (0.2) white text then has
   3:1 (title) and 4.5:1 (lead, breadcrumb) even on a white photo. The article hero keeps its own look. */
@media (max-width: 768px) {
	.ab-hero:not(.an-post-hero) .ab-hero__overlay {
		opacity: 0;
	}

	.ab-hero:not(.an-post-hero) .ab-hero__content {
		position: relative;
	}

	.ab-hero:not(.an-post-hero) .ab-hero__content::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: -96px;
		right: -100vw;
		bottom: -100vh;
		left: -100vw;
		background: linear-gradient(180deg, rgba(0, 43, 86, 0) 0, rgba(0, 43, 86, 0.18) 40px, rgba(0, 43, 86, 0.55) 96px, rgba(0, 43, 86, 0.68) 256px);
		pointer-events: none;
	}
}

/* "Tumma liukuväri alareunaan": a stronger shade towards the bottom on top of the usual one */
.ab-hero--gradient .ab-hero__gradient {
	background: linear-gradient(180deg, rgba(0, 43, 86, 0.15) 20%, rgba(0, 43, 86, 0.8) 100%), var(--ab-hero-shade);
}

/* rotating images (cross-fade, assets/hero.js): the next image fades in on top, the previous one stays until it is
   covered (fading both at once let the navy background show through half-way) */
.ab-hero__slide {
	opacity: 0;
	transition: opacity 1.2s ease 1.2s;
}

.ab-hero__slide.is-active {
	z-index: 1;
	opacity: 1;
	transition-delay: 0s;
}

.ab-hero__overlay,
.ab-hero__gradient {
	z-index: 1;
}

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

/* ------------------------------------------------------------ text */
/* (.ab-flow doubled: stronger than the section blocks' rhythm and the theme's heading and button margins) */

.ab-hero--t-center .ab-hero__content {
	margin-inline: auto;
	text-align: center;
}

.ab-hero--t-center .wp-block-buttons {
	justify-content: center;
}

/* centred full-width text stays readable */
.ab-hero--t-center.ab-hero--w-full .ab-hero__content {
	max-width: 927px;
}

.ab-hero .ab-hero__content.ab-flow.ab-flow > * + * {
	margin-block-start: 16px;
}

.ab-hero .ab-hero__content.ab-flow.ab-flow > .ab-hero__crumbs + * {
	margin-block-start: var(--ab-hero-gap-crumbs);
}

.ab-hero .ab-hero__content.ab-flow.ab-flow > h1 + * {
	margin-block-start: var(--ab-hero-gap);
}

.ab-hero .ab-hero__content.ab-flow.ab-flow > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-block-start: 10px;
}

.ab-hero .ab-hero__content.ab-flow.ab-flow > * + .wp-block-buttons {
	margin-block-start: var(--ab-hero-gap-buttons);
}

/* the page title (a heading in the page, or the archive title in templates); white on the shade, long words are
   hyphenated, never split anywhere */
.ab-hero .ab-hero__content.ab-flow.ab-flow > :is(h1.wp-block-heading, .wp-block-query-title) {
	color: #fff;
	font-size: var(--ab-hero-h1);
	font-weight: 700;
	line-height: var(--ab-hero-h1-lh);
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: normal;
	text-wrap: pretty;
}

/* the lead: a paragraph (also p.is-style-lead), or a heading 3 that the converted pages still use as a subtitle
   (it looks the same until the converter turns it into a paragraph) */
.ab-hero .ab-hero__content.ab-flow.ab-flow > :is(p, h3) {
	max-width: 34em;
	color: #fff;
	font-size: var(--ab-hero-lead);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	text-wrap: pretty;
}

.ab-hero--t-center .ab-hero__content.ab-flow.ab-flow > :is(p, h3) {
	margin-inline: auto;
}

/* the article template's title (the theme sets its size) */
.ab-hero .wp-block-post-title {
	margin: 0;
	color: #fff;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.1;
}

/* ------------------------------------------------------------ buttons: an accent button + a white outline button */

.ab-hero .ab-hero__content .wp-block-buttons {
	gap: 12px;
}

.ab-hero .wp-block-buttons > .wp-block-button > .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
}

.ab-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: #fff;
	color: #fff;
}

/* phones: side by side when both fit, otherwise one per row across the full width */
@media (max-width: 768px) {
	.ab-hero .wp-block-buttons > .wp-block-button {
		flex: 1 1 auto;
	}

	.ab-hero .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
		padding-inline: 16px;
		font-size: 16px;
	}
}

/* ------------------------------------------------------------ breadcrumb (child pages, inc/hero-filters.php) */

.ab-hero__crumbs {
	font-size: 14px;
	line-height: 20px;
}

.ab-hero__crumbs ol {
	display: flex;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.ab-hero__crumbs li {
	display: flex;
	flex: 0 0 auto;
	min-width: 0;
	max-width: 60%;
}

/* the page's own title gives way first */
.ab-hero__crumbs li:last-child {
	flex: 0 1 auto;
	max-width: none;
}

.ab-hero__crumbs li + li::before {
	content: "\00203a";
	content: "\00203a" / "";
	flex: none;
	padding-inline: 0.5em;
	opacity: 0.8;
}

.ab-hero__crumbs :is(a, span) {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
}

/* the link's tap area is 44px high without making the line taller */
.ab-hero__crumbs a {
	display: block;
	margin-block: -12px;
	padding-block: 12px;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.5);
	text-underline-offset: 3px;
}

.ab-hero__crumbs a:hover {
	color: #fff;
	text-decoration-color: currentColor;
}

.ab-hero__crumbs a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -8px;
}

.ab-hero__crumbs [aria-current] {
	display: block;
	opacity: 0.9;
}

.ab-hero--t-center .ab-hero__crumbs ol {
	justify-content: center;
}

/* phones: only the way up, "‹ Jätevesijärjestelmät" (the parent page, a 44px target). The page's own title (cut to
   "Jätevesijärjestelmät mökille ja …") repeated the h1 right below it. */
@media (max-width: 768px) {
	.ab-hero__crumbs li:not(:nth-last-child(2)):not(:only-child) {
		display: none;
	}

	.ab-hero__crumbs li:nth-last-child(2) {
		max-width: none;
	}

	.ab-hero__crumbs li:nth-last-child(2)::before {
		content: "\002039";
		content: "\002039" / "";
		flex: none;
		padding-inline: 0 0.4em;
		opacity: 0.8;
	}
}

/* wider screens: the whole path, on two lines if needed */
@media (min-width: 769px) {
	.ab-hero__crumbs ol {
		flex-wrap: wrap;
		white-space: normal;
	}

	.ab-hero__crumbs li {
		max-width: none;
	}
}

/* ------------------------------------------------------------ the theme's article hero keeps its own look */
/* (templates/single.html: 70% of the window high, the title in the middle with even space, no extra shade) */

.ab-hero.an-post-hero {
	--ab-hero-top: var(--ab-hero-pt, clamp(110px, 5vw + 90px, 150px));
	--ab-hero-bottom: var(--ab-hero-pb, clamp(60px, 9vw, 150px));
	min-height: 70vh;
}

@media (max-width: 768px) {
	.ab-hero.an-post-hero {
		--ab-hero-top: var(--ab-hero-pt-s, var(--ab-hero-pt, clamp(110px, 5vw + 90px, 150px)));
		--ab-hero-bottom: var(--ab-hero-pb-s, var(--ab-hero-pb, clamp(60px, 9vw, 150px)));
	}
}

.an-post-hero:not(.ab-hero--gradient) .ab-hero__gradient {
	display: none;
}