/* Fira Mono je v repu (OFL, viz fonts/OFL.txt) - zadne volani na Google Fonts.
   latin-ext kvuli ceskym znakum, nacte se jen kdyz je na strance potreba. */
@font-face {
  font-family: "Fira Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/fira-mono-latin-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/fira-mono-latin-ext-400.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/fira-mono-latin-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/fira-mono-latin-ext-500.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fira Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/fira-mono-latin-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/fira-mono-latin-ext-700.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0b0e12;
  /* karty jsou lehce pruhledne, aby byl videt pong za nimi (pong.js);
     na samotnem --bg vychazeji skoro stejne jako drivejsi #10141a a #141922 */
  --panel: rgb(16 20 26 / .78);
  --panel-2: rgb(20 25 34 / .78);
  --line: #232a35;
  --text: #e8ecf4;
  --muted: #9aa3b2;
  --accent: #36f2c2;
  --accent-line: rgb(54 242 194 / .45);
  --accent-wash: rgb(54 242 194 / .06);
  --highlight: #f5c16c;
  --highlight-line: rgb(245 193 108 / .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

a { color: inherit; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; }

/* Preklady: zobrazi se jen texty v jazyce stranky (viz <html lang>). */
:root[lang="en"] body [lang="cs"],
:root[lang="cs"] body [lang="en"] { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* napr. "8-tool" nebo "G-codes", aby se nezalomily za pomlckou */
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- lista */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(11 14 18 / .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav {
  max-width: 72rem;
  margin: 0 auto;
  padding: .9rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}
/* nazev webu vlevo, klik vyjede nahoru */
.site-nav__home {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  opacity: .9;
}
.site-nav__home:hover, .site-nav__home:focus-visible { opacity: 1; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  text-decoration: none;
  opacity: .88;
  transition: opacity .18s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.15rem;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .18s, transform .18s;
}
.site-nav a:hover, .site-nav a:focus-visible { opacity: 1; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { opacity: .85; transform: none; }

/* prepinac jazyka, oddeleny od odkazu svislou carou */
.site-nav__lang { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.lang-toggle {
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.lang-toggle__sep { margin: 0 .35rem; opacity: .6; }
.lang-toggle:hover [data-l] { color: var(--text); }
:root[lang="en"] .lang-toggle [data-l="en"],
:root[lang="cs"] .lang-toggle [data-l="cs"] { color: var(--accent); }

/* ----------------------------------------------------------------- uvod */
main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 2.5rem;
}

.hero {
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 6rem) 0 clamp(2.5rem, 7vh, 4.5rem);
  text-align: center;
}
.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
}
/* Pozice pod jmenem. Bez oddelovacu jako "|", ktere by zustavaly viset na konci
   radku; carka tam nevadi. balance zalomi na dva zhruba stejne dlouhe radky. */
.hero__role {
  margin: .75rem 0 0;
  color: var(--accent);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 500;
  text-wrap: balance;
}
.hero__desc { max-width: 44rem; margin: 1.5rem auto 0; color: var(--muted); text-wrap: pretty; }

/* --------------------------------------------------------------- karty */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
}
.card__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.card__bar h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.card__bar h3 a { text-decoration: none; }
.card__bar h3 a:hover { color: var(--accent); }

.badge {
  flex: none;
  padding: .15rem .55rem;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: .8rem;
}

.card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem; }
.card__body p { margin: 0 0 1rem; }
.card__subtitle { color: var(--muted); }

/* zvyrazneny odstavec v karte */
.callout {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
}
.callout p { margin: 0; }
.callout .callout__label {
  margin-bottom: .35rem;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.callout a { color: var(--accent); text-underline-offset: 3px; }

.tech {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.tech li {
  padding: .1rem .5rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .8rem;
}

.links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }
.btn {
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  text-decoration: none;
  font-size: .9rem;
  transition: border-color .18s, background-color .18s;
}
.btn--primary { border-color: var(--accent-line); color: var(--accent); }
.btn:hover { border-color: var(--accent); background: var(--accent-wash); }

/* -------------------------------------------------------------- kontakt */
.contact {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.contact h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.contact p { margin: .25rem 0; }
.contact strong { color: var(--highlight); }
.contact a, .email-btn {
  text-decoration: underline;
  text-decoration-color: var(--highlight-line);
  text-underline-offset: 3px;
}
.contact a:hover, .email-btn:hover { text-decoration-color: var(--highlight); }
.email-btn {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: copy;
  /* aby sla odhalena adresa oznacit i ve Firefoxu */
  user-select: text;
}
.copied { margin-left: .6rem; color: var(--accent); font-size: .85rem; }

/* ----------------------------------------------------------------- pong */
/* platno vklada pong.js; je za obsahem a kliky jim prochazeji */
.pong {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Prava palka je zaroven scrollbar (pong.js): sleduje scroll a jde tahat mysi za pruh
   u praveho okraje; top nastavi pong.js pod listu. Systemovy scrollbar je proto schovany.
   Tridu pong-scrollbar dava <html> hlavicka index.html, bez JS tak zustane systemovy. */
:root.pong-scrollbar { scrollbar-width: none; }
:root.pong-scrollbar::-webkit-scrollbar { display: none; }
.pong-track {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 14px;
  cursor: grab;
  touch-action: none;
}
.pong-track.is-dragging { cursor: grabbing; }
.pong-bar {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  opacity: .6;
  transition: opacity .18s;
  will-change: transform;
}
.pong-track:hover .pong-bar,
.pong-track.is-dragging .pong-bar { opacity: .9; }
/* stranka nejde scrollovat a pri hre za pravou stranu hraje pocitac: seda, netahaci */
.pong-track.is-cpu { pointer-events: none; }
.pong-track.is-cpu .pong-bar { background: var(--muted); opacity: .35; }
/* na dotykovych zarizenich se scrolluje prstem; pruh u okraje by kradl tahy */
@media (pointer: coarse) { .pong-track { pointer-events: none; } }
@media print { .pong, .pong-track { display: none; } }

/* Paticka pod kontaktem, siroka jako obsah. Seda "ping" vlevo zapne pong a zmeni se
   na zelenou "pong!" vpravo (pong.js), jako micek na druhou stranu stolu. */
.site-footer {
  display: flex;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 2.5rem;
}
.pong-toggle {
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.pong-toggle.is-on { margin-left: auto; color: var(--accent); }
.pong-toggle:hover { color: var(--text); }

/* ------------------------------------------------------------------ 404 */
.not-found {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 2rem;
  text-align: center;
}
.not-found__code {
  margin: 0;
  color: var(--accent);
  font-size: clamp(3.5rem, 14vw, 6rem);
  font-weight: 700;
  line-height: 1;
}
.not-found h1 { margin: 1rem 0 2rem; font-size: 1.1rem; font-weight: 400; }

/* -------------------------------------------------------------- telefon */
/* nazev se vedle odkazu nevejde; na telefonu jde nahoru klepnutim na horni okraj */
@media (max-width: 34rem) {
  .site-nav { justify-content: flex-end; }
  .site-nav__home { display: none; }
}
@media (max-width: 26rem) {
  .site-nav ul { column-gap: .9rem; }
  .site-nav__lang { padding-left: .9rem; }
}
@media (max-width: 22rem) {
  .site-nav { font-size: .85rem; }
  .site-nav ul { column-gap: .6rem; }
  .site-nav__lang { padding-left: .6rem; }
  .lang-toggle__sep { margin: 0 .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-nav a, .site-nav a::after, .btn { transition: none; }
}