/*-----------*/
/*   reset   */
/*-----------*/

*, *::before, *::after {
	/* padding a border nemaji vliv na velikost prvku */
	box-sizing: border-box;

	margin: 0rem;
	padding: 0rem;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}


/*--------------*/
/*   promenne   */
/*--------------*/

:root {
	/* hlavni okraj stranek (celkove odsazeni od okna prohlizece) */
	--okraj-stranky: 3.3vw;

	/* fonty */
	--font-logo: "Outfit", sans-serif;
	--font-menu: "Roboto Mono", monospace;
	--font-clanek: "Roboto Mono", monospace;

	--logo-desktop: 1.7vw;
	--logo-tablet: 2.55vw;
	--logo-telefon: 5.7vw;

	/* menu */
	/* promenna urcuje celkove rozdeleni stranek do dvou bloku (menu a galerie) */
	/* sirka galerie se automaticky dopocitava jako 100 % - nize uvedena hodnota */
	--menu-sirka-desktop: 14.5vw;
	--menu-sirka-tablet: 21vw;
	--menu-pozadi-telefon: #000000;

	/* menu - rozmery */
	--menu-odsazeni-desktop: 3vw;
	--menu-odsazeni-tablet: 4vw;
	--menu-odsazeni-telefon: 2vw;

	--menu-velikost-textu-desktop: 0.77vw;
	--menu-velikost-textu-tablet: 1.45vw;
	--menu-velikost-textu-telefon: 3.6vw;

	--menu-velikost-radku-desktop: 1.7vw;
	--menu-velikost-radku-tablet: 2.7vw;
	--menu-velikost-radku-telefon: 5.2vw;

	--menu-podbarveni-odkazu-desktop: 0.2vw;
	--menu-podbarveni-odkazu-tablet: 0.35vw;
	--menu-podbarveni-odkazu-telefon: 0.25vw;

	/* menu - odkazy */
	--menu-odkaz-desktop-neaktivni: #000000;
	--menu-odkaz-desktop-aktivni: #ffffff;
	--menu-odkaz-telefon-neaktivni: #ffffff;
	--menu-odkaz-telefon-aktivni: #000000;

	/* odkazy a copyright */
	--menu-ostatni-odsazeni-desktop: 7.5vw;
	--menu-ostatni-odsazeni-tablet: 12vw;

	--menu-ostatni-velikost-textu-desktop: 0.66vw;
	--menu-ostatni-velikost-textu-tablet: 1.15vw;

	--menu-ostatni-velikost-radku-desktop: 1.2vw;
	--menu-ostatni-velikost-radku-tablet: 2.2vw;

	--menu-ostatni-barva-textu: #7f7f7f;

	/* galerie */
	--galerie-mezery-desktop: 2.5vw;
	--galerie-mezery-tablet: 3.5vw;
	--galerie-mezery-telefon: 8vw;

	--galerie-animace-pruhlednost: 0.6;
	--galerie-animace: opacity 0.3s ease;

	/* clanek */
	--clanek-mezera-za-odstavcem-desktop: 1.2vw;
	--clanek-mezera-za-odstavcem-tablet: 2.1vw;
	--clanek-mezera-za-odstavcem-telefon: 5.2vw;

	/* v pripade testovani zmenit transparent na neco jineho, */
	/* napr. #fada5a a #82befa */
	--barva-pozadi-menu: transparent;
	--barva-pozadi-galerie: transparent;
}


/*-----------*/
/*   styly   */
/*-----------*/

body {
	padding: var(--okraj-stranky);
}

/* menu */
nav {
	float: left;
	position: fixed;
	width: var(--menu-sirka-desktop);
	z-index: 2;

	font-family: var(--font-menu);
	background-color: var(--barva-pozadi-menu);
}

.logo, .logo-telefon {
	font-family: var(--font-logo);
	font-weight: bold;
}

.logo {
	font-size: var(--logo-desktop);
}

.logo-telefon {
	font-size: var(--logo-telefon);
	display: none;
}

nav ul {
	padding-top: var(--menu-odsazeni-desktop);

	font-size: var(--menu-velikost-textu-desktop);
	line-height: var(--menu-velikost-radku-desktop);
}

nav a {
	padding: var(--menu-podbarveni-odkazu-desktop);
}

nav .logo, .odkaz-menu, .menu-ostatni {
	color: var(--menu-odkaz-desktop-neaktivni);
}

nav .aktualni-stranka, .odkaz-menu:hover {
	color: var(--menu-odkaz-desktop-aktivni);
	background-color: var(--menu-odkaz-desktop-neaktivni);
}

/* odkazy a copyright */
.menu-ostatni {
	padding-top: var(--menu-ostatni-odsazeni-desktop);
	padding-left: var(--menu-podbarveni-odkazu-desktop);

	font-size: var(--menu-ostatni-velikost-textu-desktop);
	line-height: var(--menu-ostatni-velikost-radku-desktop);
	color: var(--menu-ostatni-barva-textu);
}

.menu-ostatni a, .clanek-odkazy-a-copyright a {
	padding-left: 0rem;
	color: inherit;
}

.menu-ostatni a:hover, .clanek-odkazy-a-copyright a:hover {
	text-decoration: underline;
}

/* galerie */
.galerie {
	float: right;
	width: calc(100% - var(--menu-sirka-desktop));
	z-index: 1;
	background-color: var(--barva-pozadi-galerie);

	column-count: 3;
	column-gap: var(--galerie-mezery-desktop);
}

.galerie img {
	width: 100%;
	height: auto;
	display: block;

	padding-bottom: var(--galerie-mezery-desktop);
}

.galerie .obrazek-galerie {
	opacity: 1;
	transition: var(--galerie-animace);
}

.galerie .obrazek-galerie:hover {
	opacity: var(--galerie-animace-pruhlednost);
}

/* clanky */
.clanek {
	font-family: var(--font-clanek);
	font-size: var(--menu-velikost-textu-desktop);
	line-height: var(--menu-velikost-radku-desktop);
}

.clanek p {
	padding-bottom: var(--clanek-mezera-za-odstavcem-desktop);
}

.clanek-odkazy-a-copyright {
	visibility: collapse;
}


/*--------------*/
/*   clearfix   */
/*--------------*/

main:after {
	content: "";
	clear: both;
	display: table;
}


/*-------------------*/
/*   media queries   */
/*-------------------*/

/* web je navrzeny jako desktop-first, takze breakpointy jsou max-width */

/* tablet */
@media (max-width: 1300px){
	/* menu */
	nav {
		width: var(--menu-sirka-tablet);
	}

	.logo {
		font-size: var(--logo-tablet);
	}

	nav ul {
		padding-top: var(--menu-odsazeni-tablet);

		font-size: var(--menu-velikost-textu-tablet);
		line-height: var(--menu-velikost-radku-tablet);
	}

	nav a {
		padding: var(--menu-podbarveni-odkazu-tablet);
	}

	/* odkazy a copyright */
	.menu-ostatni {
		padding-top: var(--menu-ostatni-odsazeni-tablet);
		padding-left: var(--menu-podbarveni-odkazu-tablet);

		font-size: var(--menu-ostatni-velikost-textu-tablet);
		line-height: var(--menu-ostatni-velikost-radku-tablet);
	}

	/* galerie */
	.galerie {
		width: calc(100% - var(--menu-sirka-tablet));

		column-count: 2;
		column-gap: var(--galerie-mezery-tablet);
	}

	.galerie img {
		padding-bottom: var(--galerie-mezery-tablet);
	}

	/* clanky */
	.clanek {
		font-size: var(--menu-velikost-textu-tablet);
		line-height: var(--menu-velikost-radku-tablet);
	}

	.clanek p {
		padding-bottom: var(--clanek-mezera-za-odstavcem-tablet);
	}
}


/* telefon */
@media (max-width: 700px) {
	body {
		padding: 0rem;
	}

	/* menu */
	nav {
		width: 100%;
		padding-top: var(--menu-odsazeni-telefon);

		text-align: center;
		background-color: var(--menu-pozadi-telefon);
	}

	.logo {
		display: none;
	}

	.logo-telefon {
		display: inline;
	}

	nav ul, li {
		/* seradi polozky vedle sebe misto pod sebe */
		display: inline-block;
		padding-bottom: calc(var(--menu-odsazeni-telefon) * 1.3);

		font-size: var(--menu-velikost-textu-telefon);
		line-height: var(--menu-velikost-radku-telefon);
	}

	nav a {
		padding-left: calc(var(--menu-podbarveni-odkazu-telefon) * 4);
		padding-right: calc(var(--menu-podbarveni-odkazu-telefon) * 4);
	}

	nav .logo-telefon, .odkaz-menu, .menu-ostatni {
		color: var(--menu-odkaz-telefon-neaktivni);
	}

	nav .aktualni-stranka, .odkaz-menu:hover {
		color: var(--menu-odkaz-telefon-aktivni);
		background-color: var(--menu-odkaz-telefon-neaktivni);
	}

	/* odkazy a copyright */
	.menu-ostatni {
		display: none;
	}

	/* galerie */
	.galerie {
		width: 100%;
		padding-top: calc(var(--galerie-mezery-telefon) * 3.9);

		column-count: 1;
	}

	.galerie img, .clanek {
		padding-left: var(--galerie-mezery-telefon);
		padding-right: var(--galerie-mezery-telefon);
		padding-bottom: var(--galerie-mezery-telefon);
	}

	/* clanky */
	.clanek {
		font-size: var(--menu-velikost-textu-telefon);
		line-height: var(--menu-velikost-radku-telefon);
	}

	.clanek p {
		padding-bottom: var(--clanek-mezera-za-odstavcem-telefon);
	}

	.clanek-odkazy-a-copyright {
		visibility: visible;
	}

	.clanek-sloupce {
		display: none;
	}
}