/*
    Hans E Andersson, HEAMEDIA. Enkelt ljusbord a la LightRoom grid vs dev MediaStreamAudioDestinationNode, 2024-04-28
    Med denna, ljusbord-dev-v0.2.css, skissar på GUI 2024-04-29
    Städar upp kod med "ljusbord-dev-v0.61.js", "ljusbord-dev-v0.3.css"
    Vill ha max 3 bilder i rad 'grid_container', 2024-05-20
    Rensa bort onödiga kommentarer, för att förstå utveckling, backa i versionshistoriken
	Justera för statisk användning, typ thumb_
*/
.grid_container {
	display: grid;
	/* Avstånd mellan bilder */
	grid-gap: 1.618em;
	/* Padding runt galleriet */
	padding: 0;
	/* Dynamiskt antal kolumner */
	/*grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));*/
	/* Fixar antalet kolumner till 3 */
	grid-template-columns: repeat(3, 1fr);
	/* Maxbredd på containern */
	max-width: 61.8vw;
	/* Centrera containern */
	margin: 0 auto;
}

.grid_portrait {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.flex_item {
	display: flex;
	justify-content: center;
	align-items: center;
}

.gridImage {
	/* Bilder fyller sina containers */
	width: 100%;
	/* Behåll bildförhållande */
	height: auto;
	/* Tar bort extra utrymme under bilden */
	display: block;
	/* cursor: zoom-in; */
	cursor: pointer;
	transition: transform .25s ease-in-out;
}

.gridImage:hover {
	box-shadow: 0 0 .25em #0008;
	border: 3px solid #ff512faa;
	background-color: #ff512faa;
	transform: scale(108%);
}

.grid_item {
	/* Flexbox inom varje grid-item */
	display: flex;
	/* Centrerar bild horisontellt */
	justify-content: center;
	/* Centrerar bild vertikalt */
	align-items: center;
}

.selectedImage {
	background-color: rgb(212, 62, 16);
}

#bildLupp {
	background-color: #000;
	/* Vi visar denna när en bild klickas */
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
}

#mainImageContainer {
	/* Subtrahera höjden av thumbnail-ribban */
	height: calc(100% - 106px);
	display: flex;
	/* Centrerar bilden vertikalt */
	align-items: center;
	/* Centrerar bilden horisontellt */
	justify-content: center;
	/* Förhindrar innehåll från att röra sig utanför */
	overflow: hidden;
	position: relative;
	cursor: grab;
}

#mainImage {
	max-width: 100%;
	width: auto;
	max-height: 100%;
	margin: 0;
	display: block;
	/* Tar bort behovet av extra positionering */
	object-fit: contain;
}

.portrait {
	height: 100% !important;
	width: auto
}

.landscape {
	width: 100%;
	height: auto
}

.thumbRow {
	height: 106px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #000;
	text-align: center;
	opacity: 1;
	transition: opacity .75s ease-in-out;
}

.dimmer {
	opacity: 0.1;
}

.awake {
	opacity: 1;
}

#closeApp {
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	padding: .7em 1em;
	text-shadow: 0 0 8px #0008;
	background-color: #0000;
	cursor: pointer;
	border-bottom-left-radius: .75em;
	transition: background-color .25s ease-in-out;
}

#closeApp:hover {
	background-color: #0008;
}

#infoStat {
	position: absolute;
	bottom: 106px;
	left: 0;
	color: #fff;
	z-index: 1001;
	padding: .5em 0.75em;
	text-shadow: 0 0 8px #0008;
	background-color: #0008;
	font-size: .8em;
}

.side-icon {
	position: absolute;
	/* Centrera vertikalt, stämmer inte riktigt */
	top: 50%;
	transform: translateY(-50%);
	/* Välj en lämplig färg */
	color: #fff;
	background-color: #0008;
	/* Storlek på ikonerna */
	font-size: 1.618em;
	padding: 4em 0.5em;
	/* Visa en hand-ikon när muspekaren är över */
	cursor: pointer;
	/* Se till att de är över bilden */
	z-index: 1002;
	/* Dölj som standard */
	/* display: none; */
	transition: opacity .25s ease-in-out;
	opacity: 0.0;
}

#leftSide {
	left: 0px;
	border-top-right-radius: .5em;
	border-bottom-right-radius: .5em;
	/* opacity: 0.0; */
}

#leftSide:hover {
	opacity: 1;
}

#rightSide {
	/* 0 pixel från högerkanten */
	right: 0px;
	border-top-left-radius: .5em;
	border-bottom-left-radius: .5em;
	/* opacity: 0.0; */
}

#rightSide:hover {
	opacity: 1
}

.imageRowItem {
	/* Ställer in thumbnails på en rad */
	display: inline-block;
	/* Ser till att alla thumbnails är toppjusterade */
	vertical-align: top;
}

.imageRowItem img {
	/* Lite mindre än container för att ge lite marginal */
	height: 100px;
	width: auto;
	/* Visa att bilderna är klickbara */
	cursor: pointer;
	/* Lägger till marginal runt varje bild */
	/* margin: 6px 3px; */
	margin: 3px;
}

/* Eye Candy */
@keyframes slide-out-left {
	from {
		transform: translateX(0);
		opacity: 1
	}

	to {
		transform: translateX(-100%);
		opacity: 0.5
	}
}

@keyframes slide-out-right {
	from {
		transform: translateX(0);
		opacity: 1
	}

	to {
		transform: translateX(100%);
		opacity: 0.5
	}
}

@keyframes slide-in-left {
	from {
		transform: translateX(-100%);
		opacity: 0.5
	}

	to {
		transform: translateX(0);
		opacity: 1
	}
}

@keyframes slide-in-right {
	from {
		transform: translateX(100%);
		opacity: 0.5
	}

	to {
		transform: translateX(0);
		opacity: 1
	}
}

.slide-out-left {
	animation: slide-out-left .25s cubic-bezier(0.42, 0, 1.0, 1.0);
	/* animation: slide-out-left .25s forwards; */
}

.slide-out-right {
	animation: slide-out-right .25s cubic-bezier(0.42, 0, 1.0, 1.0);
	/* animation: slide-out-right .25s forwards; */
}

.slide-in-left {
	animation: slide-in-left .25s ease-out;
	/* animation: slide-in-left .25s cubic-bezier(0.55, 0.085, 0.68, 0.53); */
	/* animation: slide-in-left .25s cubic-bezier(0.42, 0, 1.0, 1.0); */
	/* animation: slide-in-left .25s forwards; */
}

.slide-in-right {
	animation: slide-in-right .25s ease-out;
	/* animation: slide-in-right .25s cubic-bezier(0.55, 0.085, 0.68, 0.53); */
	/* animation: slide-in-right .25s cubic-bezier(0.42, 0, 1.0, 1.0); */
	/* animation: slide-in-right .25s forwards; */
}

/** END: Eye Candy */
@media (max-width: 800px) {
	.grid_container {
		grid-template-columns: repeat(2, 1fr);
		/* 2 kolumner för mindre skärmar */
	}

	#closeApp {
		font-size: 2em;
	}
}

@media (max-width: 500px) {
	.grid_container {
		grid-template-columns: 1fr;
		/* 1 kolumn för ännu mindre skärmar */
		max-width: 85%;
	}

	.tbox {
		font-size: 3vw;
		width: 85%;
	}
}

/* Mindre kolumner på små skärmar */
/*
@media (max-width: 600px) {
	.grid_container {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
	#closeApp {
		font-size: 2em;
	}
}
*/