/* Prohlížeč fotografií — sdílený veřejnou částí i administrací.
   Záměrně tmavý v obou motivech: u fotky se hodí, aby okolí nesvítilo. */

/* Dialog vyplňuje celé okno schválně. Kdyby se smrsknul na velikost fotky,
   tmavá plocha kolem by patřila pseudoelementu ::backdrop — a na ten se klik
   odchytit nedá, takže by kliknutí vedle fotky nic nedělalo. */
dialog.lb{
	border:0;padding:0;margin:0;background:transparent;color:#f4f7fa;
	width:100vw;max-width:100vw;height:100vh;max-height:100vh;
	height:100dvh;max-height:100dvh;
	overflow:hidden;
}
dialog.lb::backdrop{background:rgba(8,12,18,.88)}
dialog.lb[open]{display:flex;align-items:center;justify-content:center;gap:10px}

.lb-fig{
	margin:0;display:flex;flex-direction:column;gap:10px;
	min-width:0;max-width:min(1200px,100%);
}
.lb-obr{display:flex;justify-content:center;min-height:0}
.lb-obr img{
	display:block;width:auto;height:auto;border-radius:10px;background:#0b1016;
	/* Rozměr je svázaný přímo s oknem, ne procentem z rodiče — jinak se
	   obrázek roztáhne podle své přirozené šířky a vyteče z dialogu ven.
	   140 px je místo na šipky po stranách. */
	max-width:min(1200px,calc(100vw - 140px));max-height:78vh;
}
.lb-fig figcaption{
	display:flex;align-items:baseline;justify-content:center;gap:14px;
	font:500 .9rem/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	text-align:center;flex-wrap:wrap;padding:0 8px;
}
.lb-popis{color:#dce4ec}
.lb-popis[hidden]{display:none}
.lb-pocet{color:#93a3b4;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Tlačítka mají 44 px, aby se na ně dalo trefit prstem. */
.lb-sip,.lb-x{
	flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;
	background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;
	cursor:pointer;display:grid;place-items:center;
}
.lb-sip:hover,.lb-x:hover{background:rgba(255,255,255,.26)}
.lb-sip:focus-visible,.lb-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-sip[hidden],.lb-x[hidden]{display:none}

.lb-x{position:absolute;top:14px;right:14px;font-size:1.9rem}

/* Na mobilu se šipky přesunou dolů — po stranách na ně není místo a fotka
   by se kvůli nim zbytečně zmenšila. */
@media (max-width:620px){
	dialog.lb[open]{gap:0}
	.lb-sip{position:absolute;bottom:18px}
	.lb-prev{left:18px}
	.lb-next{right:18px}
	.lb-fig figcaption{margin-bottom:56px}
	.lb-obr img{max-width:94vw;max-height:70vh}
}

@media print{
	dialog.lb{display:none}
}