*{box-sizing:border-box}
:root{--bg:#fff;--fg:#111;--muted:#6b7280}
@media (prefers-color-scheme:dark){:root{--bg:#0a0a0a;--fg:#f5f5f5;--muted:#a3a3a3}}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
/* Gutters */
.header,.footer{display:flex;align-items:center;justify-content:space-between;padding:40px 200px}
.brand { font-weight: 600; letter-spacing: .2px; color: inherit; text-decoration: none; }
.brand:hover { -webkit-text-fill-color: grey; }
.wrap{width:100%;max-width:none;margin:0 auto;padding:0 200px 40px}
.brand{font-weight:600;letter-spacing:.2px}
.footer small{color:var(--muted)}
.footer a{color:inherit;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer {
  display: flex;
  align-items: center;
  justify-content: center;   /* ✅ zarovnání doprostřed */
  padding: 24px 64px;        /* ponech dle sebe / tvých breakpoints */
  text-align: center;        /* pro jistotu, když bude víc řádků */
}

/* Grid: 3 full-width columns on desktop */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.card{display:block;color:inherit;text-decoration:none}
.card img{display:block;width:100%;height:auto} /* no crop */
.card .cap{margin-top:12px;font-size:18px;text-align:center}

/* HERO: split layout */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* větší plocha pro obrázek vlevo */
  gap: 48px;
  align-items: start;
  margin: 10px 0 40px;
}
.hero-media {display: flex; justify-items: center; justify-content: center;}
.hero-media img { width: auto; height: auto; max-height: 70vh;}
.hero-text h1 { font-size: clamp(28px, 3.6vw, 46px); margin: 0 0 8px; }
.hero-text .muted { color: var(--muted); margin: 0 0 16px; }
.desc { color: var(--fg); max-width: 60ch; }
.desc p { margin: 0 0 12px; }

/* Gallery: přepínání 2/3 sloupců pomocí tříd */
.gallery { display: grid; gap: 24px; }
.gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery img { width: 100%; height: auto; display: block; }

/* Řádek se dvěma projekty přes celou šířku */
.row-2 {
  grid-column: 1 / -1;                 /* protáhne se přes všechny 3 sloupce rodiče */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;                            /* stejné mezery jako .grid */
}

/* Responsivní zlom (tablet/mobil) – klidně přepiš na svá čísla */
@media (max-width: 1100px) { .row-2 { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .row-2 { grid-template-columns: 1fr; } }

/* Responsive gutters + columns */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .header,.footer{padding-left:40px;padding-right:40px}
  .wrap{padding-left:40px;padding-right:40px}
  .hero { grid-template-columns: 1fr; gap: 24px; } /* stack: obrázek nad textem */
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .header,.footer{padding-left:20px;padding-right:20px}
  .wrap{padding-left:20px;padding-right:20px}
  /* na mobilu zredukuj galerii */
  .gallery.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .gallery.cols-2 { grid-template-columns: 1fr; }
}

/* (Nech své původní :root a @media(prefers-color-scheme:dark) beze změny) */

/* Ruční přebití (zůstane po kliknutí v localStorage) */
html[data-theme="dark"]  { --bg:#0a0a0a; --fg:#f5f5f5; --muted:#a3a3a3; --line:#222; }
html[data-theme="light"] { --bg:#ffffff; --fg:#111111; --muted:#6b7280; --line:#e5e7eb; }

/* Plovoucí tlačítko vpravo nahoře */
.theme-toggle {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 1000;
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  padding: 6px 10px;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}
.theme-toggle:hover {border-color: grey; }