:root{ 
  --bg:#0d0f12; 
  --bg-soft:#141820; 
  --card:#0f131a; 
  --text:#eef2f6; 
  --muted:#aab3c2; 
  --accent:#d4af37; 
  --accent-2:#2ec4b6; 
  --border:rgba(255,255,255,.08); 
  --radius:18px; 
  --shadow:0 10px 30px rgba(0,0,0,.35); 
}
:root[data-theme="light"]{
  --bg:#f7f8fb;
  --bg-soft:#eef1f7;
  --card:#ffffff;
  --text:#111419;
  --muted:#444b5a;
  --accent:#ffc001;   
  --accent-2:#1aa39a;
  --border:rgba(0,0,0,.10);
  --shadow:0 10px 30px rgba(0,0,0,.08);
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border-radius:14px}
.container{width:min(1200px, 90%);margin-inline:auto}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* Header */
header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(13,15,18,.96), rgba(13,15,18,.7) 60%, transparent);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.brand-logo{width:34px;height:26px;position:relative}
.brand-logo::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:10px;}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav a{opacity:.9}
.cta{padding:10px 16px;border:1px solid var(--accent);border-radius:999px;background:linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,.04));box-shadow:inset 0 0 0 1px rgba(212,175,55,.25); font-weight: 600;}
.cta:hover{transform:translateY(-1px)}
.burger{display:none;gap:8px;flex-direction:column;background:none;border:0}
.burger span{width:26px;height:2px;background:#fff;border-radius:2px}
.mobile{display:none;}
/* Sections */
section{padding:72px 0}
.section-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}
.section-h h2{margin:0;font-size:clamp(22px, 3vw, 32px)}
.section-h p{margin:0;color:var(--muted)}
/* Hero */
.hero{position:relative;padding:96px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.headline{font-size:clamp(28px, 4vw, 44px);line-height:1.15;margin:0 0 14px}
.sub{color:var(--muted);max-width:560px;margin:0 0 22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  cursor:pointer; 
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  transition:transform .2s ease, box-shadow .2s ease
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.25)
}
.btn.primary{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(212,175,55,.2), rgba(212,175,55,.06)); 
  color:var(--text);
  font-weight: 600;
}
/* === Hero portrait slideshow === */
.hero-media { position: relative; }
.hero-ph { position: relative; aspect-ratio: 3 / 4; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background:var(--bg); }

.hero-ph.slideshow img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transform-origin: center center;
  animation: heroSlide 24s infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation-play-state: var(--anim-state, running);
}

/* každému snímku jiná fáze */
.hero-ph.slideshow img:nth-child(1){ animation-delay: 0s; }
.hero-ph.slideshow img:nth-child(2){ animation-delay: 8s; }
.hero-ph.slideshow img:nth-child(3){ animation-delay:16s; }

/* plynulý „Ken Burns“: lehké přiblížení a posun */
@keyframes heroSlide{
  0%   { opacity:0; transform:scale(1.14) translateX(0); }
  4%   { opacity:1; transform:scale(1.14) translateX(0); }
  28%  { opacity:1; transform:scale(1.18) translateX(-2.5%); }
  32%  { opacity:0; transform:scale(1.18) translateX(-2.5%); }
  100% { opacity:0; transform:scale(1.18) translateX(-2.5%); }
}

/* pauza při hoveru (když si chce návštěvník obraz pozorně prohlédnout) */
.hero-ph.slideshow:hover img{ animation-play-state: paused; }

/* přístupnost: u uživatelů s omezením animací jen první snímek bez efektu */
@media (prefers-reduced-motion: reduce){
  .hero-ph.slideshow img{ animation:none; opacity:0; }
  .hero-ph.slideshow img:first-child{ position:relative; opacity:1; }
}
/* About */
.about{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card{background:var(--card);border:1px solid var(--border);padding:24px;border-radius:var(--radius)}
/* Services */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;min-height:220px}
.service h3{margin:2px 0 6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:.9rem}
/* Portfolio */
/*.masonry{column-count:3;column-gap:16px}
.masonry figure{break-inside:avoid;border-radius:16px;margin:0 0 16px;background:var(--card);border:1px solid var(--border);overflow:hidden;position:relative}
.ph{display:block;width:100%;background:linear-gradient(135deg, #141a22, #0f131a)}
.ph.tall{aspect-ratio:3/5}
.ph.wide{aspect-ratio:5/3}
.ph.square{aspect-ratio:1/1}
.figcap{padding:10px 12px;color:var(--muted);font-size:.95rem}
.gallery-cta{display:flex;justify-content:center;margin-top:16px}*/

/* ===== Ukázky práce (masonry + zachování formátu) ===== */
#portfolio { margin-block: 4rem; }

#portfolio .masonry{
  /* Masonry přes multi-column – široká podpora */
  column-width: 320px;         /* cílová šířka sloupce (responsivní) */
  column-gap: 1rem;
}

#portfolio .masonry figure{
  break-inside: avoid;         /* netrhat položky mezi sloupce */
  margin: 0 0 1rem 0;
  display: inline-block;       /* nutné pro multi-column */
  width: 100%;
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.08));
  overflow: hidden;
  background: #111;            /* příjemné pozadí při načítání */
}

/* KLÍČ: přirozený poměr stran fotek, žádné nucené výšky */
#portfolio .masonry img.ph{
  display: block;
  width: 100%;
  height: auto !important;     /* přebij jakékoliv dřívější fixy */
  aspect-ratio: auto;          /* pokud jsi někde nastavoval */
  object-fit: contain;         /* prevence ořezu (může být i bez) */
  transform: translateZ(0);    /* plynulejší scroll */
}

/* Volitelný hover „dýchání“ bez reflow */
#portfolio .masonry figure:hover img.ph{
  transform: scale(1.02) translateZ(0);
  transition: transform 250ms ease;
}

/* Popisek (nech volitelně) */
#portfolio .masonry .figcap{
  font-size: .9rem;
  padding: .6rem .8rem;
  color: #aaa;
}

/* Responsivita: užší sloupce na menších displejích */
@media (max-width: 900px){
  #portfolio .masonry{ column-width: 260px; }
}
@media (max-width: 600px){
  #portfolio .masonry{ column-width: 200px; }
}

/* --- PROGRESIVNĚ: když prohlížeč umí masonry grid, použij ho --- */
@supports (grid-template-rows: masonry){
  #portfolio .masonry{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-template-rows: masonry;
    column-gap: 0;
    row-gap: 1rem;
  }
  #portfolio .masonry figure{
    break-inside: auto;        /* už není potřeba */
    display: block;
    margin: 0;                 /* mezery řeší row-gap */
  }

  /* TADY můžeš VYUŽÍT tvé třídy pokud chceš některé prvky větší/menší: */
  #portfolio .masonry img.wide  { grid-column: span 2; }  /* když je místo */
  #portfolio .masonry img.tall  { grid-row: span 2; }     /* opticky vyšší */
  #portfolio .masonry img.square{ /* default */ }
}
/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:82vh;border-radius:12px}
.lb-controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:20px}
.lb-btn{background:rgba(255,255,255,.08);border:1px solid var(--border);backdrop-filter:blur(6px);padding:10px 14px;border-radius:12px;cursor:pointer}
.lb-close{position:absolute;top:18px;right:18px}
/* Video */
.video-wrap{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#000;box-shadow:var(--shadow)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
/* Kontakt */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:26px; align-items: start;}
form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:grid;gap:12px}
label{font-size:.9rem;color:var(--muted)}
input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0a0d12;color:var(--text)}
textarea{min-height:130px;resize:vertical}
.inline{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-hint{font-size:.85rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;opacity:0}
/* ===== Rychlé kontakty – nová karta ===== */
.contact { margin-block: 4rem; }
.contact-card{
  position: relative;
  border-radius: var(--radius, 16px);
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border: 1px solid var(--border, rgba(255,255,255,.12));
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.18));
  overflow: hidden;
}

/* jemný gradientní rámeček */
.contact-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(111,207,151,.25), rgba(57,146,255,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; pointer-events:none; opacity:.7;
}

.contact-head{
  display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;
}
.contact-head h2{ margin:0; }
.contact-badge{
  font-size:.8rem; line-height:1; padding:.35rem .55rem; border-radius:999px;
  background: rgba(124,92,255,.15); color:#c9c7ff; border:1px solid rgba(124,92,255,.35);
}

/* grid obsahu */
.contact-grid{ display:grid; gap:.75rem; }
.contact-row{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:.5rem;
  padding:.5rem .5rem; border-radius:12px;
  background: rgba(255,255,255,.02);
}
.contact-link{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  color: var(--text, #e6e6e6);
}
.contact-link:hover{ text-decoration: underline; }

.contact-row .ico{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:10px; background: rgba(255,255,255,.04);
}
.contact-row .ico svg{ width:18px; height:18px; }

/* Kopírovací tlačítko */
.copy-btn{
  display:grid; place-items:center;
  height:38px; width:38px; border-radius:10px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  color:#ddd; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.copy-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.copy-btn:active{ transform: translateY(0); }
.copy-btn svg{ width:18px; height:18px; }

/* Chip tlačítka pro sítě */
.socials{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.25rem; }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); color:#e9e9e9; text-decoration:none;
  font-weight:500; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.chip:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.25); }

/* brandové akcenty na hover */
.chip.insta:hover{ box-shadow: 0 0 0 6px rgba(254,218,117,.12), 0 10px 22px rgba(221,42,123,.25); }
.chip.fb:hover    { box-shadow: 0 0 0 6px rgba(24,119,242,.12), 0 10px 22px rgba(24,119,242,.25); }
.chip.tiktok:hover{ box-shadow: 0 0 0 6px rgba(238,29,82,.12), 0 10px 22px rgba(105,201,208,.18); }

/* „Zkopírováno“ toast */
.copied-toast{
  position:absolute; right:14px; bottom:12px;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  color:#fff; font-size:.88rem; padding:.5rem .7rem; border-radius:10px;
  opacity:0; transform: translateY(8px); pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  border:1px solid rgba(255,255,255,.14);
}
.contact-card.show-toast .copied-toast{ opacity:1; transform: translateY(0); }

/* Responsivita */
@media (min-width: 720px){
  .contact-grid{ grid-template-columns: 1fr 1fr; }
  .socials{ grid-column: 1 / -1; }
}
/* Footer */
footer{padding:36px 0;border-top:1px solid var(--border);background:linear-gradient(0deg, rgba(255,255,255,.02), transparent)}
.foot{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.mini{color:var(--muted);font-size:.95rem}
/* Animace při scrollování */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
[data-reveal].visible{opacity:1;transform:none}
/* Responsive */
@media (max-width: 980px){ .hero-grid, .about, .contact{grid-template-columns:1fr} .services{grid-template-columns:repeat(2,1fr)} .masonry{column-count:2} }
@media (max-width: 903px){ nav ul{display:none} .burger{display:flex} .mobile{display:none;position:absolute;top:60px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border)} .mobile.open{display:block} .mobile a{display:block;padding:14px 5%;border-top:1px solid var(--border)} }
@media (max-width: 620px){ .services{grid-template-columns:1fr} .masonry{column-count:1} .inline{grid-template-columns:1fr} }


/* ===== Kontakt – zvětšení obsahu karty ===== */
#contact .contact-card{
  padding: 1.5rem;                  /* víc vzduchu uvnitř karty */
}

#contact .contact-head h2{
  font-size: clamp(24px, 2.4vw, 34px);
}

#contact .contact-badge{
  font-size: .9rem;
  padding: .45rem .7rem;
}

#contact .contact-row{
  padding: .75rem .75rem;           /* větší řádky adres/telefonu */
}

#contact .contact-row .ico{
  width: 32px; height: 32px;        /* větší ikonka vlevo */
}
#contact .contact-row .ico svg{ width: 20px; height: 20px; }

#contact .copy-btn {
  height: 40px;
  width: 40px;
}
#contact .copy-btn svg{ width: 20px; height: 20px; }

#contact .socials{ margin-top: .5rem; }
#contact .chip{
  font-size: .9rem;
  padding: .6rem 1rem;;
}

#contact .contact-card {
  padding: 1.25rem;
}

#contact .contact-head h2 {
  font-size: clamp(20px, 2.2vw, 26px);
}





/* --- plynulý přechod při přepínání --- */
html, body {
  transition: background-color .25s ease, color .25s ease;
}

/* === Kontakt – světlý režim === */
:root[data-theme="light"] form input,
:root[data-theme="light"] form textarea{
  background:#fff;               /* místo #0a0d12 */
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="light"] form ::placeholder{ color: var(--muted); }

/* Rychlé kontakty – badge „Odpovídám obratem!“ */
:root[data-theme="light"] .contact-badge{
  /* sytější čitelné odstíny na světle */
  background: rgba(124,92,255,.14);
  color: #4b3bbd;
  border-color: rgba(124,92,255,.35);
}

/* Ikonkové pozadí v řádku (aby nezanikalo) */
:root[data-theme="light"] .contact-row .ico{
  background: rgba(0,0,0,.05);
}

/* Copy button – aby nesplýval */
:root[data-theme="light"] .copy-btn{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
  color: #333;                   /* ikona používá currentColor */
}
:root[data-theme="light"] .copy-btn:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
}

/* Instagram chip – kontrast na světle */
:root[data-theme="light"] .chip{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
  color: #333;
}
:root[data-theme="light"] .chip:hover{
  border-color: rgba(0,0,0,.22);
}

/* hlaviční gradient ve světlém režimu */
:root[data-theme="light"] header{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.7) 60%, transparent);
}

/* mobilní menu pozadí ve světlém režimu */
:root[data-theme="light"] .mobile{
  background: var(--bg);
}

/* --- styl přepínače tématu --- */
.theme-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 14px; border-radius:999px; cursor:pointer;
  background: var(--card); border:1px solid var(--border);
}
.theme-toggle:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.theme-toggle .icon{ font-size: 1.05rem; line-height: 1; }
/* Přepínač tématu musí vždy používat aktuální textovou barvu z tématu */
.theme-toggle,
.theme-toggle .label,
.theme-toggle .icon {
  color: var(--text) !important; /* !important pro přetlačení .btn apod. */
}

/* Pokud použiješ SVG místo emoji, ať si bere currentColor */
.theme-toggle svg {
  fill: currentColor;
  stroke: currentColor;
}

/* Pro hover/focus nenech přepsat barvu na bílou někde jinde */
.theme-toggle:hover,
.theme-toggle:focus {
  color: var(--text) !important;
}

/* ikonová varianta (bez textu) */
.theme-toggle.icon-only {
  padding: 8px;                /* menší hit-area, ale pořád pohodlná */
  border-radius: 12px;
  line-height: 1;
}
.theme-toggle.icon-only .label { display: none; }  /* jistota, kdyby se někde label objevil */
.theme-toggle.icon-only .icon { font-size: 1.05rem; }

/* na menších displejích držet v řádce s burgerem */
.nav { gap: 10px; }            /* pokud potřebuješ víc místa mezi logem, burgerem a ikonou */