/* bolvári. – styl webu (v2)
   Paleta: #0fedc5 (tečka), #f7f7f7 (papír), #000 (text). Písmo: Bricolage Grotesque. */
:root{
  --accent:#0fedc5; --light:#f7f7f7; --dark:#000;
  --font:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --wrap:1160px; --r:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--font);color:var(--dark);background:var(--light);line-height:1.6;font-size:18px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--dark)}
:focus-visible{outline:3px solid var(--dark);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.02;font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(2.1rem,4.8vw,3.5rem);margin-bottom:28px}
h3{font-size:1.2rem;margin-bottom:10px}
section{padding:96px 0}
p+p{margin-top:1em}
.dot{color:var(--accent)}

/* ---------- Hlavička: tečka naskočí za odkaz ---------- */
header{position:sticky;top:0;z-index:20;background:var(--light);color:var(--dark)}
nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;text-decoration:none;font-size:1.3rem;letter-spacing:-.04em}
.logo span{color:var(--accent);display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.logo:hover span{transform:scale(1.7) translateY(-1px)}
nav ul{display:flex;gap:26px;list-style:none}
nav ul a{text-decoration:none;font-weight:600}
nav ul a::after{content:".";color:var(--accent);display:inline-block;opacity:0;transform:scale(.3);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
nav ul a:hover::after,nav ul a[aria-current]::after{opacity:1;transform:none}

/* ---------- Tlačítka ---------- */
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{display:inline-block;padding:14px 28px;border-radius:999px;font-weight:700;font-family:inherit;font-size:1rem;text-decoration:none;border:2px solid var(--dark);transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn-fill{background:var(--accent);border-color:var(--dark);color:var(--dark)}
.btn-dark{background:var(--dark);color:var(--accent)}
.btn-fill:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--dark)}
.btn-dark:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--accent)}
.btn-line:hover{background:var(--dark);color:var(--light)}

/* ---------- Úvod: jméno, fotka, razítko ---------- */
.hero-track{height:230vh;background:var(--light);padding:96px 0}
.hero-stage{position:sticky;top:64px;height:calc(100vh - 64px);overflow:hidden}
.hero-top{position:absolute;z-index:3;top:24px;left:0;right:0}
.hero-top .wrap{display:flex;justify-content:space-between;gap:16px;font-weight:700;font-size:clamp(1rem,1.8vw,1.35rem)}
.hero-name{position:absolute;z-index:1;left:0;right:0;top:8%;text-align:center;font-size:clamp(2.6rem,17vw,15rem);line-height:.85;letter-spacing:-.05em;color:var(--accent);text-transform:uppercase;white-space:nowrap}
.hero-name span{display:inline-block;animation:pop .9s cubic-bezier(.2,.9,.3,1.25) backwards;animation-delay:calc(var(--i)*70ms + 120ms);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.hero-name span:hover{transform:translateY(-4%) rotate(-3deg)}
@keyframes pop{from{opacity:0;transform:translateY(50%) rotate(8deg)}}
.hero-photo{position:absolute;z-index:2;left:50%;bottom:0;height:88%;max-width:92%;width:auto;object-fit:contain;object-position:bottom;transform:translate(-50%,0);will-change:transform}
.sticker{position:absolute;z-index:3;right:clamp(12px,7vw,110px);top:30%;width:clamp(88px,11vw,160px);aspect-ratio:1;border-radius:50%;background:var(--accent);display:grid;place-items:center;animation:spin 24s linear infinite}
.sticker svg{position:absolute;inset:0;width:100%;height:100%}
.sticker text{font:700 15px var(--font);fill:var(--dark)}
.sticker i{width:15%;aspect-ratio:1;border-radius:50%;background:var(--dark)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- O mně: nadpis vlevo, text vpravo ---------- */
.about{padding:110px 0}
.about .wrap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.about h2{margin:0}
.about p{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:500;line-height:1.45;letter-spacing:-.01em}
.about .btns{grid-column:1/-1;margin-top:8px}

/* ---------- Dlaždice portfolia ---------- */
.work-grid{counter-reset:none;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(260px,26vw,380px);gap:16px;padding-bottom:96px}
.work:nth-child(5n+1){grid-column:span 2}
.home-work{padding:0 0 96px}
.home-work h2{margin-bottom:32px}
.home-work .work-grid{padding-bottom:0}
.home-work .work:nth-child(6){grid-column:1/-1}
.home-work .more{margin-top:32px}
.work{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;border-radius:var(--r);text-decoration:none;background:var(--dark);color:var(--light)}
.work::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05) 62%),var(--img,none) center/cover no-repeat;filter:grayscale(1);opacity:.5;transition:opacity .4s,filter .4s,transform .6s}
.work b{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.02;letter-spacing:-.035em}
.work b::after{content:".";color:var(--accent);display:inline-block;opacity:0;transform:scale(.3);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.work span{align-self:flex-start;margin-top:12px;font-size:.85rem;font-weight:600;border:1.5px solid rgba(247,247,247,.55);border-radius:999px;padding:3px 12px}
.work:hover::before{filter:grayscale(0);opacity:.85;transform:scale(1.05)}
.work:hover b::after{opacity:1;transform:none}

/* ---------- Kontakt ---------- */
.contact{background:var(--dark);color:var(--light)}
.contact h2{font-size:clamp(2.8rem,9vw,6.5rem);margin-bottom:12px}
.contact h2 span{color:var(--accent)}
.contact .sub{margin-bottom:40px;opacity:.8}
.contact .big{display:block;width:fit-content;font-size:clamp(1.5rem,4.2vw,3rem);font-weight:800;line-height:1.15;text-decoration:none;letter-spacing:-.035em;margin-bottom:8px;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 4px no-repeat;transition:background-size .3s,color .3s}
.contact .big:hover{background-size:100% 4px;color:var(--accent)}
.contact .small{margin-top:48px;font-size:.95rem;opacity:.75}
footer{background:var(--dark);color:var(--light);padding:0 0 32px;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #333;padding-top:24px}
footer a{color:var(--accent)}

/* ---------- Stránka Portfolio ---------- */
.page-head{padding:72px 0 40px}
.page-head h1{font-size:clamp(3rem,9vw,6.5rem)}
.page-head p{margin-top:16px;max-width:30em;font-size:1.25rem;font-weight:500}
.cta{text-align:center;padding:24px 0 120px}
.cta h2{margin-bottom:12px}
.cta p{font-size:1.2rem;margin-bottom:28px}

/* ---------- Detail projektu ---------- */
.case-head{padding:72px 0 40px}
.back{display:inline-block;margin-bottom:32px;font-weight:700;text-decoration:none}
.back:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:5px}
.case-head h1{font-size:clamp(2.8rem,8.5vw,6.5rem)}
.case-head h1::after{content:".";color:var(--accent)}
.case-head .claim{margin-top:16px;font-size:1.4rem;font-weight:600;max-width:28em;line-height:1.3}
.facts{display:flex;flex-wrap:wrap;gap:16px 56px;margin-top:40px;padding-top:24px;border-top:2px solid var(--dark)}
.facts dt{font-size:.85rem;opacity:.65}
.facts dd{font-weight:700}
.cover{aspect-ratio:16/9;background:#ddd var(--img,none) center/cover;border-radius:12px;margin-bottom:80px}
.case-body{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;padding-bottom:72px}
.case-body h2{font-size:1.5rem;margin:0}
.case-body h2::after{content:".";color:var(--accent)}
.case-body div+h2{margin-top:36px}
.case-body p{max-width:38em;font-size:1.15rem}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:72px}
.gallery .wide{grid-column:1/-1}
.gallery img,.gallery .ph{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.gallery .wide img,.gallery .wide .ph{aspect-ratio:16/9}
.ph{background:#e4e4e4;display:grid;place-items:center;color:#777;font-size:.9rem;text-align:center;padding:16px}
.video{aspect-ratio:16/9;width:100%;border:0;border-radius:12px;background:#e4e4e4}
.quote{background:var(--accent);padding:72px 0}
.quote blockquote{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:800;line-height:1.2;max-width:26em;letter-spacing:-.02em}
.quote cite{display:block;margin-top:20px;font-style:normal;font-weight:600;font-size:1rem}
.next-project{display:block;text-decoration:none;border-top:2px solid var(--dark);border-bottom:2px solid var(--dark);transition:background .25s}
.next-project .np-in{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:44px;padding-bottom:44px}
.next-project span{font-weight:600}
.next-project b{font-size:clamp(2rem,6vw,4.2rem);line-height:1;letter-spacing:-.04em}
.next-project b::after{content:".";color:var(--accent);display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.next-project:hover{background:var(--accent)}
.next-project:hover b::after{color:var(--dark);transform:scale(1.5)}
.next{padding:72px 0;text-align:center}
.next p{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:20px}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .work-grid{grid-template-columns:1fr 1fr}
  .work:nth-child(5n+1),.home-work .work:nth-child(6){grid-column:auto}
  .about .wrap{grid-template-columns:1fr;gap:28px}
}
@media (max-width:820px){
  section{padding:64px 0}
  .case-body{grid-template-columns:1fr;gap:24px}
  .gallery{grid-template-columns:1fr}
  nav ul{gap:16px}
  .next-project .np-in{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:560px){
  .work-grid{grid-template-columns:1fr;grid-auto-rows:240px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero-track{height:auto}
  .hero-stage{position:relative}
  }

/* ---------- Úvod na mobilu: jméno na jednom řádku, větší fotka, úvodní text vlevo nahoře ----------
   Stage začíná hned pod hlavičkou (padding 0) a používá svh = viditelná výška bez adresního řádku. */
@media (max-width:820px){
  .hero-track{padding:0;height:210vh;height:210svh}
  .hero-stage{height:calc(100vh - 64px);height:calc(100svh - 64px)}
  .hero-top{top:20px}
  .hero-top .wrap{flex-direction:column;gap:2px;font-size:1.6rem;line-height:1.15;letter-spacing:-.02em}
  .hero-name{top:22%;font-size:18.5vw}
  .hero-photo{height:auto;width:auto;max-width:160%;max-height:92%}
  .sticker{top:auto;bottom:14px;left:14px;right:auto;width:84px}
}