/* =====================================================================
   Galerie, kontaktní list a lightbox

   Mřížka je schválně hustá jako kontaktní list z temné komory —
   ten ukazuje objem práce, což je u fotografa to, co má být vidět.
   Snímky mají bílou paspartu a mezery, takže se čtou jako jednotlivé
   tisky, ne jako jeden koberec fotek.

   Tmavý režim web nemá — plocha je jedna, bílá. Pasparta je proto
   pojmová: kolem snímku je papír, ne viditelný rám.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Kontaktní list — fotky jedné galerie
   --------------------------------------------------------------------- */

/* Rámy neoddělují mezery, ale úzká spára v barvě linky — mezikadérka
   filmu. Díky tomu drží list pohromadě jako jeden předmět, ne jako
   rozsypané dlaždice. */
.list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(11rem, 44%), 1fr));
	gap: 2px;
	margin-block: var(--m-3);
	background: var(--linka);
	padding: 2px;
}

.list__ram {
	display: flex;
	flex-direction: column;
	gap: var(--m-1);
	margin: 0;
	padding: clamp(0.4rem, 1vw, 0.7rem);
	background: var(--papir);
}

.list__cislo {
	font-family: var(--pismo-nadpis);
	font-size: var(--t-drobne);
	font-variant-numeric: tabular-nums;
	color: var(--seda-svetla);
	line-height: 1;
}

.list__snimek {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.15s ease;
}

/* Rám má pevný poměr, snímek se do něj vejde celý.
   Poměr 3:4 je schválně, ne čtverec: svislá fotografie je u portrétu
   i reportáže běžnější, takže se do rámu vejde přesně a papír kolem
   nezbude vůbec. Vodorovný snímek dostane papír nad a pod sebou —
   a to je na kontaktním listu správně, ne chyba.

   Ořez (`cover`) tady být nesmí. Velikosti obrázků jsou od 4. 9. 2026
   neořezané (viz inc/obrazky.php) právě proto, aby se do kompozice
   nesahalo. `cover` by ten ořez vrátil zpátky, jen v prohlížeči. */
.list__snimek img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--podklad);
}

.list__snimek:hover {
	opacity: 0.82;
}

/* Popiska je současně alt text, tedy to, co u obrázků čte Google.
   Drží se dole, aby rámy s různě dlouhým textem měly snímky
   zarovnané na stejné výšce. */
.list__popiska {
	font-family: var(--pismo-nadpis);
	font-size: var(--t-drobne);
	line-height: 1.4;
	color: var(--seda);
	margin-top: auto;
}

/* Výběr na úvodu je jiný předmět než kontaktní list.
   Nejsou to rámy jednoho filmu, ale vybrané obálky galerií — jedna
   fotka za každou zakázku. Proto bez spáry a s vlastní paspartou,
   protože tady žádný `.list__ram` není:
   `tom_vyber_z_portfolia()` vypisuje odkazy přímo. */
.list--vyber {
	background: transparent;
	padding: 0;
	gap: clamp(0.5rem, 1.2vw, 1rem);
}

.list--vyber .list__snimek {
	padding: clamp(0.3rem, 0.8vw, 0.6rem);
	background: var(--papir);
	cursor: pointer;
}

/* Obálky galerií drží stejný poměr jako rámy listu a taky se
   neořezávají — jedna zakázka, jedna celá fotka. */
.list--vyber .list__snimek img {
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--podklad);
}

/* ---------------------------------------------------------------------
   2. Mřížka galerií — každá galerie jako jedna fotka s názvem
   --------------------------------------------------------------------- */

.mrizka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	gap: var(--m-3) clamp(1rem, 2vw, 1.75rem);
	margin-block: var(--m-3);
}

.polozka {
	display: block;
	text-decoration: none;
}

.polozka__snimek {
	background: var(--papir);
	padding: clamp(0.4rem, 1vw, 0.75rem);
	margin-bottom: var(--m-1);
}

/* Stejný poměr jako rámy kontaktního listu a bez ořezu.
   Dřív tady bylo 4:3 s `cover`, takže svislý portrét přišel v mřížce
   portfolia o většinu obrazu. */
.polozka__snimek img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--podklad);
	transition: opacity 0.15s ease;
}

.polozka:hover .polozka__snimek img {
	opacity: 0.85;
}

.polozka__nazev {
	font-family: var(--pismo-nadpis);
	font-size: var(--t-text);
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0 0 0.15em;
	transition: color 0.15s ease;
}

.polozka:hover .polozka__nazev {
	color: var(--modr);
}

.polozka__popis {
	margin: 0;
	color: var(--seda);
	font-size: var(--t-mensi);
}

/* ---------------------------------------------------------------------
   3. Filtr podle druhu focení
   --------------------------------------------------------------------- */

.filtr {
	display: flex;
	flex-wrap: wrap;
	gap: var(--m-1) var(--m-3);
	padding-block: var(--m-2);
	border-block: 1px solid var(--linka);
	font-family: var(--pismo-nadpis);
	font-size: var(--t-mensi);
}

.filtr a {
	color: var(--seda);
	text-decoration: none;
}

.filtr a:hover {
	color: var(--inkoust);
}

.filtr a[aria-current='page'] {
	color: var(--inkoust);
	font-weight: 500;
}

/* ---------------------------------------------------------------------
   4. Lightbox

   Fotka na černém, protože černá je pro černobílou fotografii
   správné pozadí — tak se prohlíží v galerii i na projekci.

   Čerň je čistá #000, ne tónovaná. Jakýkoli odstín v pozadí
   kontaminuje čtení tonality černobílého snímku, a to je přesně to,
   na co se v lightboxu člověk dívá.
   --------------------------------------------------------------------- */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	grid-template-rows: 1fr auto;
	background: #000000;
	padding: clamp(0.75rem, 2vw, 1.5rem);
}

.lightbox[hidden] {
	display: none;
}

.lightbox__plocha {
	display: grid;
	place-items: center;
	min-height: 0;
	position: relative;
}

.lightbox__snimek {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.lightbox__lista {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--m-2);
	padding-top: var(--m-2);
	color: #cfd2d4;
	font-size: var(--t-mensi);
}

.lightbox__popis {
	margin: 0;
	max-width: 60ch;
	font-family: var(--pismo-text);
}

.lightbox__pocet {
	font-family: var(--pismo-nadpis);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: #8b9095;
}

/* Ovládání */
.lightbox__ovladani {
	display: flex;
	gap: var(--m-1);
}

.lightbox__tlacitko {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: transparent;
	color: #e9ebec;
	border: 1px solid #33383b;
	border-radius: 0;
	font-family: var(--pismo-nadpis);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.lightbox__tlacitko:hover {
	background: #1c1f21;
	border-color: #5b6165;
}

.lightbox__tlacitko:disabled {
	opacity: 0.3;
	cursor: default;
}

.lightbox__tlacitko:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Zavření je v pravém horním rohu plochy */
.lightbox__zavrit {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

/* Klikací plochy po stranách fotky pro přechod na další snímek.
   Na mobilu se nezobrazují, tam se přejíždí prstem. */
.lightbox__krok {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 22%;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.lightbox__krok--zpet {
	left: 0;
	cursor: w-resize;
}

.lightbox__krok--vpred {
	right: 0;
	cursor: e-resize;
}

.lightbox__krok:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

@media (max-width: 40rem) {
	.lightbox__krok {
		display: none;
	}

	.lightbox__lista {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------
   5. Doplňky výpisů
   --------------------------------------------------------------------- */

.hlavicka-stranky {
	max-width: var(--sirka-textu);
	margin-bottom: var(--m-3);
}

.hlavicka-stranky__udaje {
	margin: 0;
	color: var(--seda);
	font-size: var(--t-mensi);
}

.uvodni-odstavec {
	font-size: var(--t-uvod);
	color: var(--seda);
}

.vice,
.dalsi-odkazy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--m-1) var(--m-3);
	margin-top: var(--m-3);
	font-family: var(--pismo-nadpis);
	font-size: var(--t-mensi);
}

.vypis__zapis {
	max-width: var(--sirka-textu);
	padding-block: var(--m-3);
	border-bottom: 1px solid var(--linka);
}

.vypis__zapis h2 {
	margin-bottom: 0.15em;
}

.vypis__zapis h2 a {
	text-decoration: none;
}

.vypis__datum {
	color: var(--seda);
	font-size: var(--t-mensi);
	margin-bottom: var(--m-1);
}

.hledani {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--m-1);
	max-width: 30rem;
	margin-top: var(--m-3);
}

.hledani input[type='search'] {
	flex: 1 1 12rem;
}

/* Stránkování */
.wp-block-query-pagination,
.navigation.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--m-2);
	padding-top: var(--m-3);
	border-top: 1px solid var(--linka);
	font-family: var(--pismo-nadpis);
	font-size: var(--t-mensi);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--m-2);
}

.navigation.pagination .current {
	font-weight: 600;
}