/* Jonáš Hájek — náhled one-page portfolia.
   Ostré rohy všude. Tmavý nebo světlý režim podle systému návštěvníka.
   Logika barev: hnědá (Timberland 6-inch, wheat) = akce a aktivní stav. Platí všude stejně:
   - vybraná položka je hnědá (filtr),
   - hlavní akce (Napiš mi, e-mail, přehrát video) mají hnědý obrys nebo čáru už v klidu,
   - najetí myší je všude bílé (ve světlém režimu černé): text zbělá, hlavní akce se vyplní bílou,
   - focus z klávesnice = hnědý obrys,
   - šedá = ovládání v klidu, bílá/černá = obsah.
   Na světlé ploše mají čáry a text hnědé tmavší odstín kvůli kontrastu, výplň zůstává wheat. */

:root {
	--plocha: #0e0e0d;
	--plocha-2: #181817;
	--plocha-3: #232321;
	--linka: #2e2e2b;
	--text: #edebe5;
	--text-2: #a3a199;
	--zluta: #d89b47;
	--na-zlute: #111110;
	--hover: #ffffff;
	--na-hover: #111110;
	--akcent: #d89b47;
	--mezera: 6px;
	--rada: 190px;
	--okraj: 16px;
	--hlavicka: 56px;
	--pismo: "Archivo", system-ui, sans-serif;
	color-scheme: dark;
}

/* světlý režim podle systému návštěvníka */
@media (prefers-color-scheme: light) {
	:root {
		--plocha: #ffffff;
		--plocha-2: #f1f1ef;
		--plocha-3: #e4e4e1;
		--linka: #dcdcd8;
		--text: #121211;
		--text-2: #5e5d58;
		--akcent: #8a5a1e;
		--hover: #121211;
		--na-hover: #ffffff;
		color-scheme: light;
	}
}

@media (min-width: 640px) {
	:root { --rada: 250px; --okraj: 24px; }
}
@media (min-width: 1024px) {
	:root { --rada: 310px; --okraj: 40px; --hlavicka: 64px; }
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--plocha);
	color: var(--text);
	font: 400 16px/1.55 var(--pismo);
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

/* ── Hlavička: jméno | filtr místo menu | Instagram + Napiš mi ── */
.hlavicka {
	position: sticky; top: 0; z-index: 20;
	display: grid; align-items: center;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "jmeno akce" "filtr filtr";
	column-gap: 16px;
	padding: 8px var(--okraj) 0;
	background: var(--plocha);
}
@media (min-width: 1200px) {
	/* filtr sedí uprostřed lišty jako položky menu */
	.hlavicka {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: "jmeno filtr akce";
		min-height: var(--hlavicka); padding-top: 0;
	}
}
.jmeno { grid-area: jmeno; display: block; justify-self: start; color: var(--text); text-decoration: none; line-height: 1; }
.jmeno h1 {
	margin: 0;
	font-size: 19px; font-weight: 800; line-height: 1;
	font-variation-settings: "wdth" 112;
	letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap;
}
.jmeno span {
	display: block; margin-top: 5px;
	color: var(--text-2);
	font-size: 9.5px; font-weight: 500;
	letter-spacing: .3em; text-transform: uppercase; white-space: nowrap;
}
@media (min-width: 1024px) {
	.jmeno h1 { font-size: 26px; }
	.jmeno span { font-size: 11px; margin-top: 6px; }
}
@media (max-width: 379px) {
	.jmeno h1 { font-size: 16px; }
	.jmeno span { font-size: 8px; letter-spacing: .2em; }
}
.hlavicka-akce { grid-area: akce; justify-self: end; display: flex; align-items: center; gap: 8px; }
.ikona-odkaz {
	display: grid; place-items: center; width: 40px; height: 44px;
	color: var(--text-2);
}
.ikona-odkaz:hover { color: var(--hover); }
.ikona-odkaz svg { width: 22px; height: 22px; }

/* Konverze: obrys v akcentu, při najetí plná výplň */
.tlacitko {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 44px; padding: 0 20px;
	border: 0; background: transparent; color: var(--akcent);
	box-shadow: inset 0 0 0 1.5px currentColor;
	font: 600 13px/1 var(--pismo); letter-spacing: .14em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color .2s, color .2s;
}
.tlacitko:hover { background: var(--hover); color: var(--na-hover); box-shadow: none; }
.ikona-mail { display: none; width: 20px; height: 20px; }
@media (max-width: 479px) {
	/* na telefonu je tlačítko jen ikona, ať se vejde jméno */
	.tlacitko--hlavicka { width: 44px; padding: 0; }
	.tlacitko--hlavicka span { display: none; }
	.tlacitko--hlavicka .ikona-mail { display: block; }
}

/* ── Filtr: slova se stejnou mezerou ──────────────────── */
.filtr { grid-area: filtr; position: relative; min-width: 0; padding: 6px 0 8px; }
@media (min-width: 1200px) { .filtr { padding: 0; } }
.segmenty {
	display: flex; gap: 12px;
	width: max-content; max-width: 100%;
	padding: 0; margin: 0 auto;
	list-style: none;
	overflow-x: auto; scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.segmenty::-webkit-scrollbar { display: none; }
.segmenty li { flex: 0 0 auto; scroll-snap-align: center; }
.segment {
	display: flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 8px;
	color: var(--text-2); text-decoration: none;
	font: 500 13px/1 var(--pismo); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
	transition: color .2s;
}
.segment:hover { color: var(--hover); }
.segment[aria-current="page"] { color: var(--akcent); }
@media (min-width: 768px) {
	.segmenty { gap: 24px; overflow: visible; }
}
.filtr-okraj {
	/* na mobilu naznačí, že segmenty pokračují */
	position: absolute; top: 6px; bottom: 8px; right: 0; width: 36px;
	background: linear-gradient(to right, transparent, var(--plocha));
	pointer-events: none; opacity: 0; transition: opacity .2s;
}
.filtr.pokracuje .filtr-okraj { opacity: 1; }

/* na telefonu rozbalovací menu ve stylu webu: tlačítko s vybranou položkou, pod ním stejný seznam odkazů */
.filtr-vyber {
	display: none;
	width: 100%; min-height: 44px; padding: 0 14px;
	align-items: center; justify-content: space-between;
	border: 1.5px solid var(--linka); background: var(--plocha);
	color: var(--akcent); cursor: pointer;
	font: 500 13px/1 var(--pismo); letter-spacing: .14em; text-transform: uppercase;
}
.filtr-vyber:hover { border-color: var(--hover); }
.filtr-vyber svg { width: 18px; height: 18px; color: var(--text-2); transition: transform .2s; }
.filtr.otevreno .filtr-vyber svg { transform: rotate(180deg); }
@media (max-width: 767px) {
	.filtr { padding: 8px 0 10px; }
	.filtr-vyber { display: flex; }
	.filtr-okraj { display: none; }
	.filtr .segmenty {
		display: none;
		position: absolute; left: 0; right: 0; top: calc(100% - 10px); z-index: 30;
		flex-direction: column; gap: 0;
		width: auto; max-width: none; overflow: visible;
		background: var(--plocha);
		border: 1.5px solid var(--linka); border-top: 0;
	}
	.filtr.otevreno .segmenty { display: flex; }
	.filtr .segment { justify-content: flex-start; min-height: 48px; padding: 0 14px; }
}

/* ── Mřížka: zarovnané řady v pořadí od Jonáše ──────────── */
.galerie { padding: 12px var(--okraj) 0; }
.mrizka {
	display: flex; flex-wrap: wrap; gap: var(--mezera);
	margin: 0; padding: 0; list-style: none;
}
.mrizka::after { content: ""; flex-grow: 1e6; }
/* na telefonu se i poslední řada roztáhne, osamocená fotka jde přes celou šířku */
@media (max-width: 767px) { .mrizka::after { display: none; } }
.polozka {
	/* růst ×100: se součtem pod 1 by osamocená fotka na výšku nevyplnila řadu (flexbox pak rozdá jen zlomek místa) */
	flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--rada));
	min-width: 0;
}
.polozka[hidden] { display: none; }
.dlazdice {
	position: relative; display: block; width: 100%;
	padding: 0; border: 0; margin: 0;
	background: var(--barva, var(--plocha-2));
	cursor: zoom-in; overflow: hidden;
}
.dlazdice img {
	display: block; width: 100%; height: auto;
	aspect-ratio: var(--r);
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.dlazdice:hover img { transform: scale(1.025); }
.popisek {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 28px 12px 10px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .62));
	color: #fff; text-align: left;
	font: 500 14px/1.3 var(--pismo);
	opacity: 0; transform: translateY(6px);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.dlazdice:hover .popisek, .dlazdice:focus-visible .popisek { opacity: 1; transform: none; }

.dlazdice--video { cursor: pointer; }
.prehrat {
	position: absolute; inset: 0;
	display: grid; place-content: center; justify-items: center; gap: 10px;
	background: rgba(0, 0, 0, .28);
}
.prehrat-ctverec {
	display: grid; place-items: center;
	width: 64px; height: 64px;
	/* přehrát = akce: hnědý obrys, při najetí bílá výplň (na fotce vždy světlá hnědá) */
	background: rgba(14, 14, 13, .72); color: var(--zluta);
	box-shadow: inset 0 0 0 1.5px var(--zluta);
	transition: background-color .2s, color .2s;
}
.dlazdice--video:hover .prehrat-ctverec { background: #fff; color: #111110; box-shadow: none; }
.prehrat-ctverec svg { width: 22px; height: 22px; margin-left: 3px; }
.prehrat-popis {
	font: 500 13px/1.3 var(--pismo); color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.dalsi { display: flex; justify-content: center; padding: 28px var(--okraj) 0; }
.dalsi[hidden] { display: none; }
/* stejné písmo jako položky filtru */
.dalsi-tlacitko {
	min-height: 44px; padding: 0 8px;
	border: 0; background: none; cursor: pointer;
	color: var(--text-2);
	font: 500 13px/1 var(--pismo); letter-spacing: .14em; text-transform: uppercase;
	transition: color .2s;
}
.dalsi-tlacitko:hover { color: var(--hover); }

/* ── Kontakt ──────────────────────────────────────────── */
.sekce { padding: 48px var(--okraj); }
@media (min-width: 1024px) { .sekce { padding: 80px var(--okraj); } }
.kontakt { background: var(--plocha-2); margin-top: 48px; text-align: center; }
.kontakt-mail {
	display: inline-block;
	font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; font-weight: 700;
	font-variation-settings: "wdth" 105;
	text-decoration: none; overflow-wrap: anywhere;
	padding: 2px 6px 4px;
	color: var(--akcent);
	/* hlavní akce jako Napiš mi: v klidu hnědá s čárou, při najetí bílá výplň */
	background: linear-gradient(var(--akcent), var(--akcent)) 0 100% / 100% 2px no-repeat;
	transition: color .2s, background-color .2s;
}
.kontakt-mail:hover { background: var(--hover); color: var(--na-hover); }

.paticka {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
	padding: 24px var(--okraj) 32px;
	background: var(--plocha-2); border-top: 1px solid var(--linka);
	color: var(--text-2); font-size: 14px;
}
.paticka p { margin: 0; }
.paticka a:hover { color: var(--hover); }

/* ── Prohlížeč fotek: vždy tmavý, fotky na něm vyniknou ── */
.prohlizec {
	width: 100vw; height: 100dvh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0;
	background: rgba(8, 8, 7, .97); color: #edebe5;
	color-scheme: dark;
}
.prohlizec::backdrop { background: rgba(8, 8, 7, .97); }
.prohlizec[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.prohlizec { --vyska-fotky: calc(100dvh - 150px); }
.prohlizec-lista {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 8px var(--okraj); min-height: 60px;
	font-size: 15px; color: #edebe5;
}
.pocitadlo span { color: #a3a199; font-variant-numeric: tabular-nums; margin-left: 10px; }
.prohlizec-plocha {
	position: relative; min-height: 0;
	display: grid; place-items: center;
	padding: 0 var(--okraj);
	touch-action: none; /* gesta (listování, tažení dolů) obsluhuje web.js */
}
.prohlizec-plocha > img {
	max-width: 100%; max-height: var(--vyska-fotky); width: auto; height: auto;
	object-fit: contain; user-select: none;
}
.prohlizec-ovladani {
	display: flex; justify-content: center; gap: 12px;
	padding: 12px var(--okraj) 20px;
}
.ctverec {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 48px; height: 48px;
	border: 0; background: #232321; color: #edebe5; cursor: pointer;
}
.ctverec:hover { background: #33332f; }
.ctverec svg { width: 20px; height: 20px; }
@media (min-width: 1024px) {
	.prohlizec-ovladani { position: absolute; inset: 50% 0 auto; padding: 0 24px; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
	.prohlizec-ovladani .ctverec { pointer-events: auto; }
	.prohlizec[open] { grid-template-rows: auto minmax(0, 1fr) 32px; }
	.prohlizec { --vyska-fotky: calc(100dvh - 100px); }
	.prohlizec-plocha { padding: 0 96px; }
}

.video-ramec {
	width: min(100%, 1280px, calc(var(--vyska-fotky) * 16 / 9));
	aspect-ratio: 16 / 9;
	position: relative; overflow: hidden; background: #000;
}
.video-ramec iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-ramec img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; opacity: .45; }
.video-zatim {
	position: absolute; inset: 0;
	display: grid; place-content: center; gap: 12px; padding: 24px;
	text-align: center;
}
.video-zatim strong { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; }
.video-zatim span { color: #a3a199; max-width: 44ch; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
}