/**
 * FYZIOHOLISTIKA — FOOTER
 */

.fyzio-footer {
	--fyzio-footer-fade-height: 150px;

	position: relative;
	z-index: 2;
	isolation: isolate;
	margin: calc(-1 * var(--fyzio-footer-fade-height)) 0 0 !important;
	padding: calc(2.6rem + var(--fyzio-footer-fade-height)) 0 2.1rem;
	border-top: 0;
	background: transparent;
	color: rgba(255,255,255,.76);
}

/*
 * Footer už neopakuje obrázek. Horní průhledná část ukáže
 * stejnou scénu z CTA / ending-scene a pouze ji postupně ztmaví.
 */
.fyzio-footer::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(22,59,44,0) 0,
			rgba(22,59,44,.05) 16%,
			rgba(22,59,44,.18) 34%,
			rgba(22,59,44,.42) 56%,
			rgba(22,59,44,.72) 78%,
			#163b2c 100%
		);
	pointer-events: none;
}

.fyzio-page--text-ending + .fyzio-footer {
	--fyzio-footer-fade-height: 210px;
}

.fyzio-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem 3rem;
	align-items: start;
}

.fyzio-footer__brand a {
	color: #fff;
	font-size: .98rem;
	font-weight: 800;
	letter-spacing: .06em;
}

.fyzio-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .8rem 1.3rem;
}

.fyzio-footer__links a {
	color: rgba(255,255,255,.82);
	font-size: .82rem;
}

.fyzio-footer__links a:hover,
.fyzio-footer__links a:focus-visible {
	color: #fff;
}

.fyzio-footer__meta {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .74rem;
}


.fyzio-footer__creator {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: .65rem;
	white-space: nowrap;
}

.fyzio-footer__creator-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.fyzio-footer__creator-logo img {
	display: block;
	width: auto;
	height: 30px;
	max-width: 150px;
	object-fit: contain;

	/* zdrojové logo převádíme čistě do bílé */
	filter: brightness(0) invert(1);
	opacity: .96;
	transition: opacity .2s ease;
}

.fyzio-footer__creator-logo:hover img,
.fyzio-footer__creator-logo:focus-visible img {
	opacity: 1;
}

@media (max-width: 760px) {

	.fyzio-footer {
		--fyzio-footer-fade-height: 105px;
	}

	.fyzio-page--text-ending + .fyzio-footer {
		--fyzio-footer-fade-height: 145px;
	}
	.fyzio-footer__inner {
		grid-template-columns: 1fr;
	}

	.fyzio-footer__links {
		justify-content: flex-start;
	}

	.fyzio-footer__meta {
		flex-direction: column;
	}

	.fyzio-footer__creator {
		justify-content: flex-start;
		white-space: normal;
	}
}

/* =========================================================
 * JEDNA SPOLEČNÁ ZÁVĚREČNÁ SCÉNA
 * ======================================================= */

.fyzio-site-ending {
	--fyzio-ending-image-height: 1050px;
	--fyzio-ending-image-start: 8%;
	--fyzio-ending-image-mid: 28%;
	--fyzio-ending-image-full: 50%;
	--fyzio-ending-dark-start: 72%;

	position: relative;
	isolation: isolate;
}

.fyzio-site-ending--text {
	--fyzio-ending-image-height: 1650px;
	--fyzio-ending-image-start: 6%;
	--fyzio-ending-image-mid: 25%;
	--fyzio-ending-image-full: 53%;
	--fyzio-ending-dark-start: 79%;
}

.fyzio-site-ending::before {
	content: "";
	position: absolute;
	z-index: -2;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--fyzio-ending-image-height);
	background:
		url("https://dev.zamee.cz/wp-content/uploads/2026/09/d3020aea-4210-45f3-9a3d-25ca6e783177.webp")
		center bottom / cover no-repeat;
	-webkit-mask-image:
		linear-gradient(
			180deg,
			transparent 0%,
			rgba(0,0,0,.08) var(--fyzio-ending-image-start),
			rgba(0,0,0,.38) var(--fyzio-ending-image-mid),
			#000 var(--fyzio-ending-image-full),
			#000 100%
		);
	mask-image:
		linear-gradient(
			180deg,
			transparent 0%,
			rgba(0,0,0,.08) var(--fyzio-ending-image-start),
			rgba(0,0,0,.38) var(--fyzio-ending-image-mid),
			#000 var(--fyzio-ending-image-full),
			#000 100%
		);
	pointer-events: none;
}

.fyzio-site-ending::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--fyzio-ending-image-height);
	background:
		linear-gradient(
			180deg,
			rgba(247,244,236,0) 0%,
			rgba(247,244,236,.10) 18%,
			rgba(247,244,236,.46) 34%,
			rgba(247,244,236,.18) 50%,
			rgba(34,78,55,.18) 64%,
			rgba(22,59,44,.56) var(--fyzio-ending-dark-start),
			#163b2c 100%
		);
	pointer-events: none;
}

.fyzio-site-ending > main,
.fyzio-site-ending > .fyzio-footer {
	position: relative;
	z-index: 1;
}

/*
 * Footer už nemá vlastní obrázek ani vlastní vstupní fade.
 * Pokračuje ve stejné scéně, která je pod CTA.
 */
.fyzio-footer {
	margin: 0 !important;
	padding: 3rem 0 2.1rem;
	background: transparent;
}

.fyzio-footer::before,
.fyzio-footer::after {
	display: none !important;
}

@media (max-width: 1080px) {
	.fyzio-site-ending {
		--fyzio-ending-image-height: 920px;
	}

	.fyzio-site-ending--text {
		--fyzio-ending-image-height: 1380px;
	}
}

@media (max-width: 760px) {
	.fyzio-site-ending {
		--fyzio-ending-image-height: 760px;
		--fyzio-ending-image-mid: 24%;
		--fyzio-ending-image-full: 48%;
	}

	.fyzio-site-ending--text {
		--fyzio-ending-image-height: 1050px;
		--fyzio-ending-image-mid: 22%;
		--fyzio-ending-image-full: 47%;
	}
}

/* =========================================================
 * V4.2 — VNITŘNÍ STRÁNKY: ORGANICKÝ VSTUP KRAJINY BEZ FADE
 * ======================================================= */

/*
 * Homepage si ponechává schválený fade.
 * Tohle pravidlo platí jen pro běžné vnitřní stránky.
 */
.fyzio-site-ending--page,
.fyzio-site-ending--text {
	background: #f7f4ec;
}

/*
 * Obrázek už se na vnitřních stránkách nezjevuje pomocí maskovaného
 * gradientu. Má plnou kresbu a do čisté stránky vstupuje přes
 * nepravidelnou horní hranu: vegetace na krajích vystoupí výš,
 * střed zůstane déle čistý.
 */
.fyzio-site-ending--page::before,
.fyzio-site-ending--text::before {
	-webkit-mask-image: none !important;
	mask-image: none !important;

	-webkit-clip-path: polygon(
		0 3%,
		8% 2%,
		17% 4%,
		28% 7%,
		40% 9%,
		50% 11%,
		60% 9%,
		72% 7%,
		83% 4%,
		92% 2%,
		100% 3%,
		100% 100%,
		0 100%
	);
	clip-path: polygon(
		0 3%,
		8% 2%,
		17% 4%,
		28% 7%,
		40% 9%,
		50% 11%,
		60% 9%,
		72% 7%,
		83% 4%,
		92% 2%,
		100% 3%,
		100% 100%,
		0 100%
	);
}

/*
 * Bez horního mléčného gradientu. Tmavnutí začíná až níž ve scéně
 * a slouží pouze k čitelnosti CTA a k přechodu do footeru.
 */
.fyzio-site-ending--page::after,
.fyzio-site-ending--text::after {
	background:
		linear-gradient(
			180deg,
			rgba(22,59,44,0) 0%,
			rgba(22,59,44,0) 46%,
			rgba(22,59,44,.10) 58%,
			rgba(22,59,44,.28) 70%,
			rgba(22,59,44,.52) 82%,
			#163b2c 100%
		);
}

/*
 * Textové zakončení: obraz začíná o něco výš, aby se rostliny
 * dostaly už pod poslední obsahový blok, ale bez viditelného fade pásu.
 */
.fyzio-site-ending--text {
	--fyzio-ending-image-height: 1450px;
}

@media (max-width: 1080px) {
	.fyzio-site-ending--text {
		--fyzio-ending-image-height: 1240px;
	}
}

@media (max-width: 760px) {
	.fyzio-site-ending--page::before,
	.fyzio-site-ending--text::before {
		-webkit-clip-path: polygon(
			0 2%,
			12% 1%,
			25% 4%,
			40% 7%,
			50% 9%,
			60% 7%,
			75% 4%,
			88% 1%,
			100% 2%,
			100% 100%,
			0 100%
		);
		clip-path: polygon(
			0 2%,
			12% 1%,
			25% 4%,
			40% 7%,
			50% 9%,
			60% 7%,
			75% 4%,
			88% 1%,
			100% 2%,
			100% 100%,
			0 100%
		);
	}

	.fyzio-site-ending--text {
		--fyzio-ending-image-height: 1040px;
	}
}

/* =========================================================
 * V3.5.2 — SVĚTLÝ STŘED PLYNULE POKRAČUJE DO ZÁVĚRU
 * ======================================================= */

/*
 * Světlá čtecí osa podstránky nekončí na hraně hlavního obsahu.
 * V horní části závěrečné krajiny pokračuje jako měkký krémový
 * závoj a teprve postupně se rozpouští do fotografie.
 *
 * Krajina zůstává výraznější při krajích; uprostřed má text
 * klidnější podklad. Žádný pevný vodorovný pás.
 */
.fyzio-site-ending--page::after,
.fyzio-site-ending--text::after {
	background:
		radial-gradient(
			ellipse 68% 48% at 50% 0%,
			rgba(247,244,236,.96) 0%,
			rgba(247,244,236,.91) 20%,
			rgba(247,244,236,.72) 42%,
			rgba(247,244,236,.36) 66%,
			rgba(247,244,236,0) 100%
		),
		linear-gradient(
			180deg,
			rgba(22,59,44,0) 0%,
			rgba(22,59,44,0) 42%,
			rgba(22,59,44,.08) 56%,
			rgba(22,59,44,.25) 69%,
			rgba(22,59,44,.50) 82%,
			#163b2c 100%
		);
}

/*
 * Horní část krajiny je o něco měkčí, aby navázala na světlý
 * střed page-flow. Nejde o celoplošný fade — změkčujeme hlavně
 * střed, vegetace po stranách zůstává čitelná.
 */
.fyzio-site-ending--page::before,
.fyzio-site-ending--text::before {
	background-position: center bottom;
}

/* Tablet — světelný kužel je širší. */
@media (max-width: 1080px) {
	.fyzio-site-ending--page::after,
	.fyzio-site-ending--text::after {
		background:
			radial-gradient(
				ellipse 78% 46% at 50% 0%,
				rgba(247,244,236,.97) 0%,
				rgba(247,244,236,.91) 24%,
				rgba(247,244,236,.68) 48%,
				rgba(247,244,236,.30) 72%,
				rgba(247,244,236,0) 100%
			),
			linear-gradient(
				180deg,
				rgba(22,59,44,0) 0%,
				rgba(22,59,44,0) 42%,
				rgba(22,59,44,.08) 56%,
				rgba(22,59,44,.25) 69%,
				rgba(22,59,44,.50) 82%,
				#163b2c 100%
			);
	}
}

/* Mobil — téměř celá horní šířka začíná světlá, pak se plynule otevře krajina. */
@media (max-width: 760px) {
	.fyzio-site-ending--page::after,
	.fyzio-site-ending--text::after {
		background:
			radial-gradient(
				ellipse 108% 42% at 50% 0%,
				rgba(247,244,236,.98) 0%,
				rgba(247,244,236,.92) 28%,
				rgba(247,244,236,.62) 56%,
				rgba(247,244,236,.22) 78%,
				rgba(247,244,236,0) 100%
			),
			linear-gradient(
				180deg,
				rgba(22,59,44,0) 0%,
				rgba(22,59,44,0) 38%,
				rgba(22,59,44,.10) 54%,
				rgba(22,59,44,.28) 69%,
				rgba(22,59,44,.52) 82%,
				#163b2c 100%
			);
	}
}

/* =========================================================
 * V3.5.4 — SOUVISLÁ KRAJINA BEZ VODOROVNÉ HRANY
 * ======================================================= */

/*
 * Místo samostatné mlhy nad CTA začíná samotná závěrečná
 * fotografie výš, ještě pod poslední částí obsahu.
 * Z úplné průhlednosti se objevuje velmi pomalu, takže nikde
 * nevzniká ostrá hranice mezi page-flow a CTA.
 */
.fyzio-site-ending--page {
	--fyzio-ending-image-height: 1350px;
}

.fyzio-site-ending--text {
	--fyzio-ending-image-height: 1550px;
}

.fyzio-site-ending--page::before,
.fyzio-site-ending--text::before {
	-webkit-clip-path: none !important;
	clip-path: none !important;

	-webkit-mask-image:
		linear-gradient(
			180deg,
			transparent 0%,
			rgba(0,0,0,.04) 7%,
			rgba(0,0,0,.12) 14%,
			rgba(0,0,0,.30) 22%,
			rgba(0,0,0,.58) 31%,
			rgba(0,0,0,.82) 39%,
			#000 47%,
			#000 100%
		) !important;

	mask-image:
		linear-gradient(
			180deg,
			transparent 0%,
			rgba(0,0,0,.04) 7%,
			rgba(0,0,0,.12) 14%,
			rgba(0,0,0,.30) 22%,
			rgba(0,0,0,.58) 31%,
			rgba(0,0,0,.82) 39%,
			#000 47%,
			#000 100%
		) !important;

	background-position: center bottom;
}

/*
 * Světlý střed z page-flow pokračuje i přes horní část krajiny,
 * ale už jen jako měkký středový závoj — ne jako vodorovný pás.
 */
.fyzio-site-ending--page::after,
.fyzio-site-ending--text::after {
	background:
		radial-gradient(
			ellipse 64% 44% at 50% 0%,
			rgba(247,244,236,.93) 0%,
			rgba(247,244,236,.82) 24%,
			rgba(247,244,236,.56) 48%,
			rgba(247,244,236,.24) 72%,
			rgba(247,244,236,0) 100%
		),
		linear-gradient(
			180deg,
			rgba(22,59,44,0) 0%,
			rgba(22,59,44,0) 43%,
			rgba(22,59,44,.08) 57%,
			rgba(22,59,44,.26) 70%,
			rgba(22,59,44,.50) 82%,
			#163b2c 100%
		);
}


/* TABLET */
@media (max-width: 1080px) {

	.fyzio-site-ending--page {
		--fyzio-ending-image-height: 1180px;
	}

	.fyzio-site-ending--text {
		--fyzio-ending-image-height: 1320px;
	}

	.fyzio-site-ending--page::before,
	.fyzio-site-ending--text::before {
		-webkit-mask-image:
			linear-gradient(
				180deg,
				transparent 0%,
				rgba(0,0,0,.05) 7%,
				rgba(0,0,0,.15) 15%,
				rgba(0,0,0,.36) 24%,
				rgba(0,0,0,.66) 34%,
				rgba(0,0,0,.88) 42%,
				#000 50%,
				#000 100%
			) !important;

		mask-image:
			linear-gradient(
				180deg,
				transparent 0%,
				rgba(0,0,0,.05) 7%,
				rgba(0,0,0,.15) 15%,
				rgba(0,0,0,.36) 24%,
				rgba(0,0,0,.66) 34%,
				rgba(0,0,0,.88) 42%,
				#000 50%,
				#000 100%
			) !important;
	}
}


/* MOBIL */
@media (max-width: 760px) {

	.fyzio-site-ending--page {
		--fyzio-ending-image-height: 940px;
	}

	.fyzio-site-ending--text {
		--fyzio-ending-image-height: 1080px;
	}

	.fyzio-site-ending--page::before,
	.fyzio-site-ending--text::before {
		-webkit-mask-image:
			linear-gradient(
				180deg,
				transparent 0%,
				rgba(0,0,0,.06) 8%,
				rgba(0,0,0,.20) 18%,
				rgba(0,0,0,.46) 29%,
				rgba(0,0,0,.76) 40%,
				#000 52%,
				#000 100%
			) !important;

		mask-image:
			linear-gradient(
				180deg,
				transparent 0%,
				rgba(0,0,0,.06) 8%,
				rgba(0,0,0,.20) 18%,
				rgba(0,0,0,.46) 29%,
				rgba(0,0,0,.76) 40%,
				#000 52%,
				#000 100%
			) !important;
	}

	.fyzio-site-ending--page::after,
	.fyzio-site-ending--text::after {
		background:
			radial-gradient(
				ellipse 92% 40% at 50% 0%,
				rgba(247,244,236,.95) 0%,
				rgba(247,244,236,.82) 28%,
				rgba(247,244,236,.48) 58%,
				rgba(247,244,236,.16) 80%,
				rgba(247,244,236,0) 100%
			),
			linear-gradient(
				180deg,
				rgba(22,59,44,0) 0%,
				rgba(22,59,44,0) 40%,
				rgba(22,59,44,.10) 55%,
				rgba(22,59,44,.28) 70%,
				rgba(22,59,44,.52) 82%,
				#163b2c 100%
			);
	}
}