/* =========================
   Fonts: Swiza (více řezů)
   ========================= */
@font-face{font-family:"Swiza";src:url("font/swiza-thin-webfont.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-thinitalic-webfont.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-extralight-webfont.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-extralightitalic-webfont.woff2") format("woff2");font-weight:200;font-style:italic;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-light-webfont.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-lightitalic-webfont.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-regular-webfont.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-regularitalic-webfont.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-medium-webfont.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-mediumitalic-webfont.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-semibold-webfont.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-bold-webfont.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Swiza";src:url("font/swiza-bolditalic-webfont.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap;}

/* =========================
   Theme & Grid vars
   ========================= */
:root{
  --cols: 6;
  --colw: 185px;
  --col-gap: 15px;
  --row-gap: 15px;
  --maxw: calc(var(--cols) * var(--colw) + (var(--cols) - 1) * var(--col-gap));

  --bg:#d8d8d8;
  --fg:#070707;
  --muted:#606068;
  --line:#a0a0a0;
  --accent:#FF3300;

  --container-pad: 0px;
  --radius:0;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family:"Swiza",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.4; height:100%;
}
img{max-width:100%;height:auto;display:block}
h1{font-family:"Swiza",sans-serif;font-weight:300}

a,a:visited{color:var(--fg);text-decoration:none;font-weight:500}
a:hover{color:var(--accent)}

body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* =========================
   Container (centered)
   ========================= */
.container{
  box-sizing:border-box;
  width:100%;
  max-width: calc(var(--maxw) + (var(--container-pad) * 2));
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left:auto;
  margin-right:auto;
  padding-top: calc(var(--row-gap) * 2);
  padding-bottom: calc(var(--row-gap) * 2);
}

/* =========================
   Grid (pro stránky, které grid používají)
   ========================= */
.grid{ display:grid; grid-auto-rows:auto; gap:var(--row-gap) var(--col-gap); }
.grid-6{ grid-template-columns:repeat(6,var(--colw)); }
.col-span-2{ grid-column:span 2; }
.col-span-4{ grid-column:span 4; }

@media (max-width:960px){
  .grid-6{ grid-template-columns:repeat(2,1fr); }
  .col-span-4,.col-span-2{ grid-column:span 2; }
}

/* =========================
   Header + Menu
   ========================= */
.site-head{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  padding-top:6px; padding-bottom:0; min-height:72px;
}
.site-head .grid{grid-auto-rows:auto}
.site-head .brand{font-weight:600;text-decoration:none;color:var(--fg);font-size:20px}
.brand-row{align-items:center}
.brand-col1{grid-column:1 / 2}
.brand-col2{grid-column:2 / 7}
.brand-col1 .mh,
.brand-col2 .tagline{
  font-weight:300; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(18px,2.1vw,24px);
}
.brand-col1 .mh{color:var(--fg)}
.brand-col2 .tagline{color:var(--muted)}

.site-menu{position:relative;z-index:1;padding-top:4px;padding-bottom:4px;margin-bottom:4px}
.site-menu .grid,.menu-grid{grid-auto-rows:auto !important;row-gap:8px}
.menu-grid{align-items:start}
.menu-col{display:flex;flex-direction:column;gap:6px}
.menu-rule{height:1px;background:var(--fg);opacity:.7}
.menu-rule.is-active{background:var(--accent);opacity:1}
.menu-link{display:block}
.menu-link.is-active{color:var(--accent)}
.site-nav a{margin-left:12px}

/* =========================
   Kategorie
   ========================= */
.catbar{
  margin:0;
  padding:6px 0 0 0;
  border-top:1px solid var(--fg);
}
.catbar-inner{
  display:flex; flex-wrap:wrap; gap:20px;
  margin:0; padding:0;
}
.cat-link{
  border:none; padding:0;
  font-size:14px; line-height:1.2;
  color:var(--muted);
  font-weight:500;
}
.cat-link:hover{ color:var(--fg); }
.cat-link.is-active{ color:var(--accent); }
.cat-count{ font-size:.7em; vertical-align:super; line-height:0; margin-left:2px; color:inherit; }

/* mezi kategoriemi a kartami nahoře = 15px (platí pro grid i masonry) */
.catbar + .grid,
.catbar + .masonry{ margin-top: 15px; }

/* =========================
   Karty (společné)
   ========================= */
.card{ border:none; border-radius:0; padding:0; overflow:hidden; }
.card-link{ position:relative; display:block; }
.card-img{ display:block; width:100%; height:auto; }

.card-link::after{
  content:""; position:absolute; inset:0;
  background:var(--accent); opacity:0; transition:opacity .18s ease;
  z-index:1; pointer-events:none;
}
.card-overlay{
  position:absolute; inset:0; padding:12px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  z-index:2; opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.card-link:hover::after,
.card-link:focus-visible::after{ opacity:1; }
.card-link:hover .card-overlay,
.card-link:focus-visible .card-overlay{ opacity:1; }

.card-title{
  margin:0; color:#fff; font-weight:500; font-size:22px; line-height:1.2;
  text-align:left; white-space:pre-line; /* respektuje \n */
}
.card-client{
  margin:0; color:#fff; font-weight:300; font-size:14px; line-height:1.2; opacity:.95;
  white-space:pre-line;
}

/* =========================
   Grid varianta karet (pokud se použije)
   ========================= */
.grid-6 > .card{ grid-column:span 2; }

/* =========================
   Masonry (CSS columns)
   ========================= */
.masonry{
  column-gap: var(--col-gap);                         /* horizontální mezera = 15px */
  column-width: calc((var(--colw) * 2) + var(--col-gap));
  column-fill: auto;                                  /* stabilnější balanc (FF) */
}
.masonry .card{
  display:inline-block;
  width:100%;
  margin:0 0 15px;                                    /* vertikální mezera = 10px */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  contain: layout paint;                              /* izolace hoveru */
  transform: translateZ(0);
}
.masonry .card-img{ display:block; }

/* =========================
   Projekt / detail
   ========================= */
.project .grid-6{align-items:start}
.project figure{margin:0}
.project .hero{border:none;border-radius:0;display:block;width:100%;height:auto}
.media--portrait{grid-column:2 / 4;justify-self:stretch}
.media--landscape{grid-column:1 / 4;justify-self:stretch}
.project .text-block{grid-column:4 / 7;align-self:start}
.project .text-block strong{font-weight:500;font-size:calc(1em + 2px)}
.project h1{font-size:32px;margin:0 0 12px 0;white-space:pre-line}

.meta-list{margin:0;padding:0;display:grid;grid-template-columns:auto 1fr;gap:8px var(--col-gap)}
.meta-list dt{color:var(--muted)}
.meta-list dd{margin:0}

.proj-info{white-space:pre-wrap}
.proj-link{text-decoration:none}

/* Pager – jen varianta ukotvená k pravému okraji .containeru;
   svislá pozice se počítá JS (viz project.php) */
.project.container{ position: relative; }
.pager{
  display:flex; align-items:center; gap:10px;
  font-weight:500; line-height:1; z-index:5;
}
.pager--container{
  position:absolute; right:0; top:0;  /* top doplní JS */
}
.pager a{
  color:var(--fg); text-decoration:none; font-size:22px; padding:2px 4px;
  transition: transform .08s ease, color .12s ease, opacity .12s ease; opacity:.9;
}
.pager a:hover{ color:var(--accent); opacity:1; transform:translateY(-1px); }
.pager .divider{ user-select:none; opacity:.7; }

/* =========================
   Hashtagy
   ========================= */
.hashes{font-size:14px;color:#40434E;font-family:"Swiza",sans-serif;font-weight:200}
.hashes a{color:inherit;text-decoration:none;margin-right:10px;transition:color .15s ease}
.hashes a:hover{color:var(--accent)}

/* =========================
   Média / Audio
   ========================= */
.hero{border-radius:0;border:1px solid var(--line)}
.player{width:100%;margin-top:10px}

.audio-ui{
  width:185px;background:var(--bg);
  border:none;border-radius:0;padding:6px 0;
  display:grid;grid-template-columns:24px 1fr;align-items:center;column-gap:8px;
}
.audio-ui .pp{
  width:auto;height:24px;line-height:24px;padding:0;border:none;background:transparent;border-radius:0;
  cursor:pointer;font-size:16px;color:var(--fg);
  transition:color .15s ease,transform .06s ease;
}
.audio-ui .pp:hover{color:var(--accent)}
.audio-ui .pp:active{transform:scale(0.96)}
.audio-ui .seek{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--fg);border-radius:0;cursor:pointer;}
.audio-ui .seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:3px;height:14px;background:var(--accent);border:none;border-radius:0;margin-top:-2px;}
.audio-ui .seek::-moz-range-thumb{width:3px;height:14px;background:var(--accent);border:none;border-radius:0}
.audio-ui .seek::-moz-range-track{height:2px;background:var(--fg);border:none;border-radius:0}
.audio-ui .time{display:none}

/* =========================
   DEV overlay (volitelné)
   ========================= */
.show-grid .grid-6{position:relative}
.show-grid .grid-6::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,.045) 0, rgba(0,0,0,.045) var(--colw), rgba(0,0,0,.025) var(--colw), rgba(0,0,0,.025) calc(var(--colw) + var(--col-gap))),
    linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,0));
  background-size:calc(var(--colw) + var(--col-gap)) 100%, 100% 100%;
}
.show-grid .grid-6 > *{position:relative;z-index:1}
/* --- Masonry fix: stejné mezery a žádné "cukání" --- */

/* 1) Zruš baseline mezeru mezi kartami a sjednoť vertikální rozestup */
.masonry{
  line-height: 0;                 /* odstraní line-box mezeru */
}
.masonry .card{
  margin: 0 0 10px;               /* vertikální mezera = 10 px */
  vertical-align: top;            /* zarovnání k horní hraně, bez baseline gapu */
}

/* 2) Stabilizuj hover v columns (žádný reflow) */
.masonry .card{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  contain: layout paint;          /* izolace layoutu i malby */
  transform: translateZ(0);       /* vlastní kompoziční vrstva */
  will-change: opacity;           /* hint – nic nepřepočítávej */
}
.masonry .card-link::after,
.masonry .card-overlay{
  will-change: opacity;           /* opravdu měníme jen průhlednost */
  pointer-events: none;
}

/* 3) Horizontální mezera zůstává 15 px (pro jistotu explicitně) */
.masonry{
  column-gap: var(--col-gap);     /* 15 px */
}

/* 4) Mezera mezi kategoriemi a masonry nahoře = 15 px */
.catbar + .masonry{ margin-top: 15px; }
/* --- Masonry: fixní počet sloupců, žádné „přepínání“ --- */
.masonry{
  column-count: 3;              /* fixně 3 sloupce na desktopu */
  column-gap: var(--col-gap);   /* 15 px horizontálně */
  line-height: 0;               /* odstraní baseline mezeru */
}

/* karty */
.masonry .card{
  display:inline-block;
  width:100%;
  margin:0 0 10px;              /* 10 px vertikálně */
  vertical-align: top;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  contain: layout paint;
  transform: translateZ(0);
}

/* responsivní zlomky – jen když chceme */
@media (max-width: 960px){
  .masonry{ column-count: 2; }  /* tablet: 2 sloupce */
}
@media (max-width: 640px){
  .masonry{ column-count: 1; }  /* mobil: 1 sloupec */
}


/* Stabilní šířka stránky – scrollbar neovlivní reflow */
html{ overflow-y: scroll; }
/* místo: .proj-info{white-space:pre-wrap} */
.proj-info{ white-space: pre-line; }

/* 1 řádek (15px) nad blokem odkazů */
.proj-links.tight.with-gap{ margin-top:15px; }

/* žádné extra vertikální mezery mezi řádky odkazů */
.proj-links.tight > div{ margin:0; }

/* šipka před každý odkaz */
.proj-link{
  position:relative;
  padding-left:20px;     /* místo pro šipku */
  display:inline-block;
}
.proj-link::before{
  content:"\2192";       /* → */
  position:absolute;
  left:0; top:0;
  line-height:1.2;
}
/* === Masonry: stejné mezery 15px vodorovně i svisle === */
.masonry{
  column-gap: 15px;    /* horizontální mezera */
  line-height: 0;      /* bez baseline mezery */
}

.masonry .card{
  margin: 0 0 15px !important;  /* vertikální mezera */
  vertical-align: top;
}

/* Kategorie: navštívené i nenavštívené = muted */
.catbar .cat-link:link,
.catbar .cat-link:visited{
  color: var(--muted) !important;
  font-weight: 500;
}

/* Hover = fg (i když je visited) */
.catbar .cat-link:hover{
  color: var(--fg) !important;
}

/* Aktivní = accent (i když je visited) */
.catbar .cat-link.is-active,
.catbar .cat-link.is-active:visited{
  color: var(--accent) !important;
}

/* Počítadlo dědí barvu odkazu */
.catbar .cat-count{ color: inherit; }
/* Mezera mezi kategoriemi a kartami (row-wise masonry) */
.catbar + .masonry-rw{
  margin-top: 15px;
}
/* Náhledy: default černobíle, plynulý přechod barvy */
.card-img{
  filter: grayscale(1);
  transition: filter .8s ease;
}

/* barva zapnuta (animace přepíná tuto třídu) */
.card-img.color-on{
  filter: grayscale(0);
}

/* volitelně: na hover vždy barva */
.card-link:hover .card-img{
  filter: grayscale(0);
}

/* pokud uživatel omezuje animace, drž čb bez přechodů */
@media (prefers-reduced-motion: reduce){
  .card-img{ transition: none; }
}

/* Kontakt: hezčí select */
.select-wrap {
  position: relative;
  display: block;
}

.select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 10px 38px 10px 12px; /* místo pro šipku vpravo */
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--fg);
  font: inherit;
  line-height: 1.2;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* šipka (SVG) */
.select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  /* jednoduchá šipka dolů – barva z var(--muted) pro decentní vzhled */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23a0a0a0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Hover a focus */
.select-wrap select:hover {
  border-color: var(--fg);
}

.select-wrap select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,0,0,0), 0 0 0 2px var(--accent);
}

/* Placeholder varianta (první option) */
.select-wrap select option[disabled] {
  color: var(--muted);
}

/* Re: label vedle selectu – decentní */
.re-label {
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
}

  /* Kompaktní formulář: stejné písmo jako běžný text na webu */
  .contact-form {
    font-size: 0.95rem;      /* případně 1rem = přesně jako body */
    line-height: 1.4;
  }
  .contact-form select,
  .contact-form input,
  .contact-form textarea,
  .contact-form button {
    font-size: inherit;      /* dědí z .contact-form */
    line-height: inherit;
  }
  /* trošku menší padding, ať to nepůsobí „velké“ */
  .contact-form select,
  .contact-form input,
  .contact-form textarea {
    padding: 8px 10px;
  }
  .contact-form .select-wrap select { padding: 8px 36px 8px 10px; } /* kvůli šipce */
  .contact-form .btn { padding: 8px 14px; }

/* Rezervuj svislý scrollbar = žádný reflow při zmizení overlaye */
html { overflow-y: scroll; }

/* Fix-lock pro brand během crossfadu */
.brand-locked { will-change: transform, top, left, width, opacity; }
.brand-fixed  { position: fixed !important; z-index: 2; margin: 0 !important; transform: none !important; }