/** ------------------- **/
/** ----- GLOBAL ------ **/
/** ------------------- **/
:root { /* proměnné pro nejvyužívanější vlatnosti */
	--c-primary: #41249A;
	--c-secondary: #ddd1ff;
	--c-tertiary: #ffe6e5;
	--c-tertiary-light: #f4f2ff;
	--transition: 0.3s linear;
}

html {
	scroll-behavior: smooth; /* plynulý posun při kliknutí na odkaz s ID */
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* kvůli patičce vždy u spodní hraně displeje - "sticky footer" */
	margin: 0;
	font-family: "Inter", sans-serif;
}

main {
	flex: 1 0 auto; /* kvůli patičce vždy u spodní hraně displeje - "sticky footer" */
	display: flex;
	flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	color: var(--c-primary);
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2.6rem;
}

h3 {
	font-size: 2.2rem;
}

h4 {
	font-size: 1.8rem;
}

h5 {
	font-size: 1.6rem;
}

h6 {
	font-size: 1.4rem;
}


a {
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

.container {
	position: relative;
	width: 96%;
	max-width: 96%;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
}

@media (min-width:992px) {
	.container {
		width: 960px;
		max-width: 960px;
	}
}

@media (min-width:1200px) {
	.container {
		width: 1080px;
		max-width: 1080px;
	}
}

@media (min-width:1440px) {
	.container {
		width: 1200px;
		max-width: 1200px;
	}
}

.silny {
	font-weight: 800;
}


/** ------------------- **/
/** ----- HEADER ------ **/
/** ------------------- **/
header {
	position: relative;
	z-index: 100;
	padding: 10px 0;
}

header.shadow {
	box-shadow: 0px 5px 15px rgba(53, 34, 99, 0.25);
}

header .container {
	display: flex;
	flex-wrap: wrap; /* chceme zalamovat řádek */
	align-items: center;
	justify-content: space-between;
}

header .brand {
	display: block;
	width: 60px;

}

header nav {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	align-items: flex-start;
	padding-right: 3rem;

}

header nav a {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 0.8rem;
	position: relative;
	overflow: hidden; /* chceme schovat přetékající obsah/pozadí › respektování rádiusu */
}
	header nav a:after {
		content: "";
		display: block;
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(50deg, #e9e3ff 0%, #ffe6e5 100%);
		opacity: 0;
	}

header nav a:hover:after,
header nav a.active:after { /* plynulý přechod barevného přechod na pozadí nejde jinak než za využití pseudo-elementu ":before" a průhlednosti */
	opacity: 1;
	transition: opacity 0.3s linear;
}

header nav a span {
	color: var(--c-primary);
	font-size: 1.4rem;
	font-weight: 600;
}

header nav a img {
	margin-right: 1rem;
	height: 32px;
	width: auto;
}


/** ---------------------------- **/
/** ------ INTRO PARALLAX ------ **/
/** ---------------------------- **/
.intro-parallax {
	overflow: hidden;
	position: relative;
	color: var(--c-primary);
	padding: 6rem 0;
	min-height: 580px;
}

.intro-parallax .container {
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 40px;
	height: 100%;
	padding-top: 80px;
}

@media (min-width:1200px) {
	.intro-parallax .portrait {
		flex: 0 1 280px; /* 0 = nechceme aby se zvětšoval, 1 = povolujeme zmenšení, 280px = výchozí šířka */
	}

	.intro-parallax .texts {
		flex: 0 1 auto;
		max-width: 58ch;
	}
}

.intro-parallax h1 {
	margin-bottom: 0;
	font-size: 70px;
}

.intro-parallax h2 {
	font-weight: 500;
	font-size: 30px;
}

.intro-parallax p {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 25px;
	margin-top: 2.5rem;
}

.intro-parallax .button {
	position: relative;
	overflow: hidden;
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
	color: white;
	background-color: var(--c-primary);
	border-radius: 0.8rem;
	padding: 14px 30px;
}

.intro-parallax .button:before { /* plynulý přechod barevného přechod na pozadí nejde jinak než za využití pseudo-elementu ":before" a průhlednosti */
	content: "";
	display: block;
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(50deg, #A493E1 0%, #FFB6B5 100%);
	opacity: 0;
}

.intro-parallax .button:hover:before {
	opacity: 1;
	transition: opacity var(--transition);
}

.intro-parallax .button:hover {
	color: var(--c-primary);
	background: transparent;
	transition: color var(--transition), background var(--transition);
}

.intro-parallax .obrazky {
	position: absolute;
	right: 150px;
	bottom: -85px;
	z-index: 1;
	width: 22rem;
}

.intro-parallax .slunicko {
	z-index: -1;
	position: absolute;
	left: 75%;
	bottom: 420px;
	width: 192px;
}

.intro-parallax .parallax {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 400px;
	z-index: 0;
}

.intro-parallax .parallax-layer {
	position: absolute;
	z-index: 0;
	width: 100%;
	height: auto;
	left: 0;
	will-change: transform;
	pointer-events: none;

}

.intro-parallax .prvníkopec {
	transform: translateY(-12.5rem);
}

.intro-parallax .druhýkopec {
	transform: translateY(-3.5rem);
}

.intro-parallax .třetíkopec {
	transform: translateY(4rem);
}

.intro-parallax .layer0 {
	z-index: 0;
}

.intro-parallax .layer1 {
	aspect-ratio: 1512 / 666; /* formát obrazku */
	z-index: 1;
}

.intro-parallax .layer2 {
	aspect-ratio: 1512 / 411; /* formát obrazku */
	z-index: 2;
}

.intro-parallax .layer3 {
	aspect-ratio: 1512 / 344; /* formát obrazku */
	z-index: 3;
}
/** konec intro-parallax **/


/** ---------------------------- **/
/** -------- INTRO TEXT -------- **/
/** ---------------------------- **/
.intro-text {
	padding: 2rem 0;
	background: var(--c-tertiary-light);
}

.intro-text h1 {
	margin-bottom: 4px;
}

.intro-text h2 {
	margin-bottom: 0;
	font-size: 2rem;
	font-weight: 500;
}
/** konec intro-text **/


/** ---------------------------- **/
/** -------- PORTFOLIO --------- **/
/** ---------------------------- **/
.sekce-portfolio {
	padding: 4rem 0;
	background: #fff;
}

.sekce-portfolio .karty {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}


.sekce-portfolio a {
	position: relative;
	flex: 0 0 calc(50% - 15px); /* 2 boxy na řádek = 50% šířka mínus mezera děleno 2 */
	border-radius: 1rem;
	overflow: hidden;
	height: 100%;
	display: inline-flex;
}

.sekce-portfolio a:hover img {
	filter: opacity(0.7);
	transition: filter var(--transition);
}

.sekce-portfolio a span {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	padding: 0.8rem;
	color: var(--c-primary);
	font-weight: 700;
	font-size: 1.5rem;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 0.8rem;
}

.sekce-portfolio a:hover span {
	background: var(--c-primary);
	color: white;
	transition: color var(--transition), background var(--transition);
}

.sekce-portfolio h2 {
	margin-bottom: 10px;
}

.sekce-portfolio h3 {
	font-weight: 500;
	font-size: 1.8rem;
}
/** KONEC KARET **/


/** ---------------------------- **/
/** ---------- DETAIL ---------- **/
/** ---------------------------- **/
.portfolio-detail {
	padding: 1.5rem 0;
	background: #fff;
}

.portfolio-detail .karty {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 2rem;
	width: 100%;
}


.portfolio-detail a {
	position: relative;
	flex: 0 0 calc(50% - 15px); /* 2 boxy na řádek = 50% šířka mínus mezera děleno 2 */
	border-radius: 1rem;
	overflow: hidden;
	height: 100%;
	display: inline-flex;
	background: var(--c-tertiary-light);
}

.portfolio-detail a:hover img {
	filter: opacity(0.7);
	transition: filter var(--transition);
}

.portfolio-detail a div {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 1.25rem;
	color: var(--c-primary);
}

.portfolio-detail a h3 {
	font-size: 1.8rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.portfolio-detail a span {
	font-weight: 500;
	font-size: 1rem;
}

.portfolio-detail a img {
	padding-top: 20px;
	background: var(--c-tertiary-light);
}

.portfolio-detail .mrizky span {
	display: inline-block;
	max-width: 45%;
}

.portfolio-detail h2 {
	margin-bottom: 2px;
	padding-top: 1rem;
}

.portfolio-detail h3 {
	font-weight: 500;
}


/** ---------------------------- **/
/** --------- GALERIE ---------- **/
/** ---------------------------- **/
.portfolio-galerie {
	padding: 3rem 0;
	
}

.portfolio-galerie .ukazky {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	
}

.portfolio-galerie a {
	flex: 0 0 calc( (100% / 6) - 24px + (24px / 6) ); /* 6 obrázků na řádek = 100% šířky děleno 6 mínus mezera plus mezera dělena 6 */
	display: inline-flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1 / 1; /* čtvercový formát */
	height: 100%;
	border-radius: 1rem;
	overflow: hidden;
	border: 2px solid #EDE9FF
	
	
	
}

.portfolio-galerie a img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	
}

.portfolio-galerie a:hover img {
	filter: opacity(0.7);
	transition: filter var(--transition);
}



/** ------------------- **/
/** ----- FOOTER ------ **/
/** ------------------- **/
footer {
	position: relative;
	display: flex;
	margin-top: 2rem;
	background: #9C8ADA;
	padding: 5rem 0;
}

footer .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

footer .contacts h4 {
	color: #fff;
	font-size: 2.5rem;
	margin-bottom: 2rem;
}

footer .contacts p {
	display: flex;
	align-items: center;
	gap: 20px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 400;
}

footer .contacts p img {
	width: 2rem;
}

footer .contacts a {
	color: #fff;
}
	footer .contacts a:hover {
		color: var(--c-tertiary);
		transition: color var(--transition);
	}

footer img {
	width: 120px;
}

footer .logo {
	width: 7rem;

}