/* --------------- Základní styly (Mobile-First) ----------------- */


/* ---- Proměnné ---- */

:root {

	--tmava: rgba(18,18,18,1);
	--svetla: rgba(28,28,28,1);
	--svetla-pruhledna: rgba(28,28,28,0.98);
	--nejsvetlejsi: rgba(38,38,38,1);
	--zlata: rgba(240,175,70,1);
	--tmavy-stin: rgba(0,0,0,0.5);
	--svetly-stin: rgba(255,255,255,0.5);
	--zlaty-stin: rgba(240,175,70,0.5);
	--text: rgba(240,240,240,1);
	--bila: rgba(255,255,255,1);
	--cerna: rgba(0,0,0,1);
	--cerny-stin: rgba(0,0,0,0.9);
}

*, *:active {

	outline: none;
	-webkit-tap-highlight-color: transparent;

}

*:focus-visible {

	outline: auto;

}

body {

	font-family: Verdana, Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--tmava);
	color: var(--text);
	font-size: 0.8rem;
	text-wrap: pretty;


}


body a {

	color: var(--zlata);
	text-decoration: none;

}


body a:hover {

	text-decoration: underline;

}


.center {

	text-align: center;

}



/* --------------------------------------------------------- */



/* ------------- Styly pro skip-link ----------------------*/


a.skip-link {

	color: var(--zlata);
	background-color: var(--nejsvetlejsi);
	padding: 0.5rem 1.5rem;
	text-decoration: none;
	border-color: var(--nejsvetlejsi);
	position: absolute;
	top: -40px;
	left: 0;
	z-index: 100;
	transition: top 0.4s;

}


a.skip-link:focus {

	text-decoration: underline;
	top: 0;
	border-color: var(--nejsvetlejsi);
	outline-color: var(--nejsvetlejsi);

}


a.skip-link:hover {

	color: var(--nejsvetlejsi);
	text-decoration: none;
	background-color: var(--zlata);
	border-color: var(--nejsvetlejsi);
	outline-color: var(--nejsvetlejsi);

}


/* --------------------------------------------------------- */



/* Styly pro navigační panel (Flexbox) */

header.navbar {

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	position: relative;
	max-width: 1024px;
	margin: 0 auto;
	background-color: var(--svetla);
	box-shadow: 2px 2px 6px 4px var(--tmavy-stin);

}


/* ---------------------------------------------------- */



/* ------ Styly pro navigační odkazy (standardně skryté na mobilu) ------ */



.nav {

	opacity: 0;
	visibility: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--svetla-pruhledna);
	padding: 1rem 0;
	box-shadow: 0 2px 5px var(--tmavy-stin);
	border-radius: 8px;
	z-index: 1;
	transition: opacity 0.3s, visibility 0s;   
	transition-delay: 0s, 0.3s;

}


.nav.open {

	opacity: 1;
	visibility: visible;
	transition-delay: 0s, 0s;

}


.nav ul {

	padding: 0;
	margin: 0;

}


.nav ul li {

	display: block;
	list-style-type: none;
	text-align: left;

}


.nav ul li a {

	display: block;
	background: rgba(0,0,0,0);
	color: var(--zlata);
	text-decoration: none;
	padding: 1rem;
	transition: background-color 0.2s, color 0.2s, border 0.2s;

}


.nav ul li a:active {

	color: var(--nejsvetlejsi);
	background-color: var(--zlata);

}


/* ---------------------------------------------------- */



/* -------------- Styly pro logo a titulek ------- */


.logo {

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between; /* [1] Na mobilu rozloží logo a hamburger na krajích. */
	background-color: var(--svetla);
	background-image: url('../images/bg-logo.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	box-shadow: 0 0 20px 25px inset var(--svetla);
	width: 100%;
	min-height: 130px;

}


.logo-link {

	margin-left: auto;

}


.logo-img {

	min-width: 55px;
	height: auto;
	max-height: 150px;
	display: block;
	margin: 15px;
	transition: transform 0.1s ease-out;

}


.logo-img:hover {

	transform: scale(1.13);

}


.logo-nazev {
 
	color: var(--text);
	margin-right: auto;
	text-decoration: none;
	font-family: Kings;
	font-size: 1.8rem;
	line-height: 1.8rem;
	font-weight: 1000;
	z-index: 2;
	text-shadow: 	0.4rem 0.4rem 0.2rem var(--cerna),
					-0.4rem 0.4rem 0.2rem var(--cerna),
					0.4rem -0.4rem 0.2rem var(--cerna),
					-0.4rem -0.4rem 0.2rem var(--cerna);

}


/* ---------------------------------------------------- */



/* Styly pro hamburger menu tlačítko (standardně zobrazené na mobilu) */


.hamburger {

	display: block; /* Standardně zobrazeno na mobilu (mobile-first) */
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	z-index: 2; /* Zajistí, že tlačítko bude nad rozbaleným menu */
	margin-right: 10px;

}


.hamburger .bar {

	display: block;
	width: 25px;
	height: 3px;
	background-color: var(--bila);
	margin: 5px 0;
	transition: all 0.3s ease-in-out; /* Plynulá animace pro transformaci na 'X' */

}


/* ---------------------------------------------------- */



/* ------- Animace hamburger ikony na 'X' (pro mobilní zobrazení) ------- */


.hamburger.is-active .bar:nth-child(1) {

	transform: translateY(8px) rotate(45deg);
	background-color: rgb(255,0,0);

}

.hamburger.is-active .bar:nth-child(2) {

	opacity: 0;

}

.hamburger.is-active .bar:nth-child(3) {

	transform: translateY(-8px) rotate(-45deg);
	background-color: rgb(255,0,0);

}


/* ---------------------------------------------------- */



/* ----------- Styly pro hlavní obsah (CSS Grid) ----------------- */


.grid-container {

	display: grid; /* [2, 1] Kontejner se stane mřížkovým kontejnerem, což umožňuje dvourozměrné rozvržení. */
	grid-template-columns: 1fr; /* [2, 1] Na mobilu se obsah zobrazí v jednom sloupci. '1fr' znamená jeden flexibilní sloupec. */
	grid-gap: 1rem; /* [1] Mezera mezi položkami mřížky. */
	padding: 1rem; /* Vnitřní okraje mřížkového kontejneru. */
	max-width: 1024px; /* Maximální šířka kontejneru. */
	margin: 0 auto; /* Vycentrování kontejneru na stránce. */
	background-color: var(--nejsvetlejsi);
	box-shadow: 2px 2px 6px 4px var(--tmavy-stin);

}


.grid-item {

	background-color: var(--svetla-pruhledna);/* Barva pozadí jednotlivých položek mřížky. */
	color: var(--text);
	padding: 1.5rem; /* Vnitřní okraje položek. */
	border-radius: 8px; /* Zaoblení rohů položek. */
	box-shadow: 1px 1px 5px 0px var(--zlaty-stin);

}


.grid-item h1, .grid-item h2 {

	font-family: Kings;
	font-size: 1.8rem;
	color: var(--zlata); /* Barva nadpisů uvnitř položek mřížky. */
	margin-top: 0; /* Odstraňuje horní okraj nadpisů. */
	text-align: center;

}

.grid-container #moje-umeni h1 {

	margin: 0;

}


.grid-item p {

	line-height: 1.6; /* Řádkování pro lepší čitelnost. */

}


.grid-item a.button, .grid-item .gallery-filter button.filter-button {

	display: inline-block;
	background-color: transparent;
	color: var(--text);
	border: 1px solid rgba(255,255,255,1);
	border-radius: 2px;
	text-align: center;
	text-decoration: none;
	margin: 0.6rem 0.2rem;
	padding: 0.6rem;
	transition: color 0.3s, background-color 0.3s, border 0.3s;
	cursor: pointer;
	
}


.grid-item a.button:hover, .grid-item .gallery-filter button.filter-button:hover, .grid-item .gallery-filter button.filter-button.active {

	color: var(--svetla);
	border: 1px solid rgba(255,255,255,0);
	background-color: var(--zlata);
	text-decoration: none;

}


.grid-item .gallery-filter button.filter-button.active {

	text-decoration: underline dashed;
	font-weight: bold;

}


.gallery-grid {

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10%, 20%));
	align-items: center;
	justify-items: center;

}


.grid-item .gallery-filter {

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20%, 45%));
	grid-gap: 1.5rem;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--tmavy-stin);
	padding: 1rem 0;

}


#gallery .gallery-grid {

	grid-template-columns: repeat(auto-fit, minmax(33%, 50%));
	justify-content: center;
	margin: 1rem 0;

}

#gallery .gallery-grid .gallery-item a {

	display: block;

}


.gallery-grid .image-wrapper {

	position: relative;
	display: block;
	margin: 1rem;
	transition: transform 0.3s;

}


.gallery-grid .image-wrapper::before {

	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 10px 10px inset var(--svetla);
	transition: box-shadow 0.5s;

}


.gallery-grid img {

	width: 100%;

}


.gallery-grid .gallery-item {

	transform: scale(1);
	opacity: 1;
	visibility: visible;
	transition: all 0.15s;
	will-change: transform, opacity;
	cursor: pointer;

}


.gallery-grid .gallery-item.hidden {

	transform: scale(0);
	opacity: 0;
	visibility: hidden;
	

}


.grid-item .foto-petr {

	float: left;
	width: 45%;
	padding-right: 15px;
	padding-bottom: 15px;

}


.grid-item .icon {

	width: 40px;
	margin: 5px 15px;

}



.grid-item .kontakt-ikon {

	display: flex;
  align-items: center;

}



.grid-item .map {

	width: 100%;
	margin-top: 50px;
	display: flex;
	align-items: center;

}


.grid-item .map iframe {

	margin: 0 auto;
	max-width: 100%;

}



.hover-container {

    text-decoration: underline dashed;
	color: var(--zlata);
	cursor: pointer;
	display: inline-block;
}

.hover-image {

	width: 150px;
	height: auto;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
    position: absolute; /* Umožní jeho přesné umístění */
    transform: translate(-75px, 20px); /* Posune obrázek o 10px doprava od textu */
	transition: opacity 0.15s 0.1s, visibility 0s 0.25s;
	z-index: 99;
	cursor: default;
	border-radius: 15px;

}

.hover-container.active .hover-image {
	
	visibility: visible;
	opacity: 1;
	transition: opacity 0.15s 0.1s;
	
}




.lightbox {

	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--cerny-stin);
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;

}

.lightbox.active {

	opacity: 1;
	visibility: visible;

}

.lightbox-content {

	padding: 20px;
	position: relative;
	max-width: 90%;
	max-height: 90%;
	display: flex;
	justify-content: center;
	align-items: center;

}


.lightbox-content .lightbox-buttons {

	height: 40px;
	position: fixed;
	top: auto;
	bottom: 20px;
	transform: none;
	background: var(--tmavy-stin);
	color: var(--bila);
	display: flex;
	padding: 15px 20px;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	line-height: 1;
	border: none;
	border-radius: 8px;
	transition: all 0.1s;
	font-weight: bold;
	border: 1px solid var(--svetly-stin);

}


.lightbox .lightbox-buttons:active {

	box-shadow: 0 0 5px 3px var(--svetly-stin);
	color: var(--zlata);

}

.lightbox .lightbox-close-button {

	top: 10px;
	right: 10px;
	color: red;

}

.lightbox .lightbox-button-prev {

	left: 20px;
	top: 50%;

}

.lightbox .lightbox-button-next {

	right: 20px;
	top: 50%;

}

.lightbox .lightbox-loading {

	position: absolute;
	z-index: 5;	
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
	transition: all 0.3s;

}

.lightbox .lightbox-loading.hidden {

	opacity: 0;
	visibility: hidden;

}

.lightbox .lightbox-loading .spinner {

	width: 40px;
	height: 40px;
	background: transparent;
	border: 4px solid var(--zlata);
	border-top: 4px transparent solid;
	border-radius: 50%;
	animation: spin 0.4s linear infinite;

}

@keyframes spin {

	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}

}



.lightbox .lightbox-caption {
	position: absolute;
	bottom: -50px;
	font-size: 1.1rem;
	text-align: center;
	transform: scale(1);
	opacity: 1;
	transition: transform 0.2s, opacity 0.2s;
	transition-delay: 0, 0;
}

.lightbox .lightbox-caption.hidden {
	
	transform: scale(0);
  	opacity: 0;

}

.nodisplay {

	display: none;
	
}


.lightbox-img {

	max-width: 100%;
	max-height: calc(100vh - 150px);
	box-shadow: 0 0 10px 10px var(--nejsvetlejsi);

	transform: scale(0);
	opacity: 0;
	transition: transform 0.2s, opacity 0.2s;
	transition-delay: 0, 0;

}

.lightbox-img.hidden {

	transform: scale(0);
	opacity: 0;
	
}


.lightbox-img.loaded {

	transform: scale(1);
	opacity: 1;

}


/* ---------------------------------------------------- */


/* ------------------ Styly pro zápatí ------------------ */

footer {

	background-color: var(--svetla);
	color: var(--text);
	text-align: center;
	padding: 1rem;
	margin-top: 0;
}


.footer-content {

	display: flex;
	flex-direction: column;


}

.footer-logo-info {

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

}

.footer-logo-info img {

	margin: 0 15px;

}


.footer-links ul {

	padding: 0;

}


.footer-links ul li {

	display: inline-block;
	margin: 0 0.5rem;

}


.footer-social .social-icons a img {

	margin: 0 0.5rem;

}


.footer-bottom {

	margin-top: 1.5rem;

}


/* ---------------------------------------------------- */



/* ------ Media Query pro tablety a větší obrazovky (min-width: 768px) ------ */

/* [2, 1, 3] Tyto styly se aplikují, když je šířka obrazovky alespoň 768px. */


@media (min-width: 768px) {


	header.navbar {

		padding: 1rem 2rem;
		flex-direction: column-reverse;

	}


	.logo {

		flex-direction: row;

	}


	.logo-img {

		max-height: 210px;

	}


	.logo-nazev {

		font-size: 2.5rem;

	}


	.hamburger {

	        display: none; /* Na desktopu se hamburger menu skryje */

	}


	.nav {

		display: flex; /* [1] Na desktopu se navigace vždy zobrazí */
		flex-direction: row-reverse; /* Položky v menu se uspořádají v řadě */
		position: static; /* Zruší absolutní pozicování */
		background-color: transparent; /* Průhledné pozadí */
		padding: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transition: opacity 0s, visibility 0s;
		transition-delay: 0s, 0s;

	}


	.nav ul li {

		display: inline-block;

	}


	.nav ul li a {

		color: var(--text);
		border: 1px solid rgba(255,255,255,0);
		margin-left: 0.5rem;

	}


	.nav ul li a:hover, .nav ul li a.active {

		box-shadow: 0 0 13px var(--svetly-stin);
		background: none;
		border: 1px solid var(--bila);
		color: var(--zlata);

	}


	.nav ul li.active {

		display: inline-block;
		margin: 0;

	}


	.nav ul li.active a {

		color: var(--tmava);
		background-color: var(--zlata);
	
	}


	.nav ul li.active a:hover {

		color: var(--tmava);

	}


	.grid-container {

		/* [2, 1] Automaticky upraví počet sloupců.
		'auto-fit' vytvoří tolik sloupců, kolik se jich vejde, a roztáhne je.
		'minmax(300px, 1fr)' zajistí, že každý sloupec bude mít minimálně 300px, ale může se roztáhnout, aby zabral 1fr dostupného prostoru. */

		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		padding: 1.5rem; /* Větší vnitřní okraje mřížkového kontejneru. */

	}


	.grid-item {

		padding: 2rem; /* [1] Větší vnitřní okraje položek mřížky. */

	}


	
	.grid-item#moje-umeni {

		grid-column: span 2;

	}


	.grid-item h1 {

		font-size: 2rem; /* Větší velikost písma pro hlavní nadpis. */

	}


	.grid-item h2 {

		font-size: 1.7rem; /* Větší velikost písma pro podnadpisy. */

	}

	.hover-image {

	width: 300px;
	transform: translate(-150px, 20px);

	}



	#gallery .gallery-grid {

	grid-template-columns: repeat(auto-fit, minmax(10%, 33%));

	}


	.grid-item .gallery-filter {

		grid-template-columns: repeat(auto-fit, minmax(20%, 22%));

	}

	
	#gallery .gallery-grid .image-wrapper:hover {

	transform: scale(1.15);

	}


	#gallery .gallery-grid .image-wrapper:hover::before {

		box-shadow: 1px 1px 3px 6px inset var(--cerna);

	}


	.grid-item .gallery-filter {

	justify-content: left;

	}


	.lightbox .lightbox-buttons:hover {

	box-shadow: 0 0 5px 3px var(--svetly-stin);
	color: var(--zlata);

	}


	.lightbox-content .lightbox-close-button {

		top: 30px;
		right: 30px;
	
	}


	.lightbox-content .lightbox-button-prev {
	
		left: 30px;
		
		
	}


	.lightbox-content .lightbox-button-next {
	
		right: 30px;
		
	}

}



/* ---------------------------------------------------- */


/* ---- Media Query pro stolní počítače a větší obrazovky (min-width: 1024px) ---- */
/* [2, 1, 3] Tyto styly se aplikují, když je šířka obrazovky alespoň 1024px. */


@media (min-width: 1024px) {	


	.logo-nazev {

		font-size: 2.5rem;

	}


	.grid-container {

		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* [2, 1] Ještě širší sloupce pro větší obrazovky. */
		grid-gap: 1.5rem; /* Větší mezera mezi položkami mřížky. */
		padding: 2rem; /* Větší vnitřní okraje mřížkového kontejneru. */

	}


	.grid-item h1 {

		font-size: 2.5rem; /* Větší velikost písma pro hlavní nadpis. */

	}


	.grid-item h2 {

		font-size: 2rem; /* Větší velikost písma pro podnadpisy. */

	}


	.grid-item .foto-petr {

	width: 33%;

	}

	
	#gallery .gallery-grid {

	grid-template-columns: repeat(auto-fit, minmax(10%, 20%));

	}

}