/* Atelier SECCO — nový web
   Vizuál podle Figmy klientky (2026-09-11): bílé pozadí, League Spartan nadpisy, Source Sans 3 text,
   Sora čísla, oranžová #d4370f jako akcent (pruh u nadpisu, pás statistik, patička). */

:root{
  --bg:#fff;
  --ink:#000;
  --text:#111827;
  --gray:#666;
  --light:#f5f5f5;
  --pale:#f2f2f2;
  --orange:#d4370f;
  --head:"League Spartan","Spartan",Corbel,"Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Source Sans Pro",Corbel,"Segoe UI",system-ui,sans-serif;
  --num:"Sora","Source Sans 3",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-weight:500}

.wrap{max-width:1630px;margin:0 auto;padding:0 80px} /* užší okraje na velkých monitorech — 16. 9. 1480, 17. 9. o čtvrtinu užší (1920 px → 225 px) */

/* ---------- navigace ---------- */
header.site{height:100px}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:100px}
.brand{display:block;line-height:0}
.brand .logo{height:30px;width:auto}
nav.main{display:flex;align-items:center;gap:48px;font-size:16px;font-weight:500;letter-spacing:.6px;text-transform:uppercase}
nav.main a{transition:color .2s}
nav.main a:hover,nav.main a.active{color:var(--orange)}
nav.main a.lang{
  display:inline-flex;align-items:center;justify-content:center;
  width:31px;height:31px;background:var(--ink);color:#fff;font-weight:400;letter-spacing:0;
  line-height:1;padding-top:2px; /* bez zděděných 1.6 a s dorovnáním sedí verzálky opticky na střed */
}
nav.main a.lang:hover{background:var(--orange);color:#fff}

/* ikona menu — dvě čárky, po otevření křížek */
.burger{display:none;width:35px;height:35px;position:relative}
.burger span{
  position:absolute;left:4px;width:27px;height:3px;background:var(--ink); /* tloušťka jako tahy loga (17. 9.) */
  transition:transform .55s cubic-bezier(.65,0,.35,1),top .55s cubic-bezier(.65,0,.35,1);
}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:21px}
.burger.open span:nth-child(1){top:16px;transform:rotate(45deg)}
.burger.open span:nth-child(2){top:16px;transform:rotate(-45deg)}

/* fixní lišta — vysouvá se při scrollu zpět nahoru */
header.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;background:var(--bg);
  transform:translateY(-100%);transition:transform .45s var(--ease),box-shadow .3s;
  box-shadow:0 1px 0 rgba(0,0,0,.06);will-change:transform;
}
header.topbar.show{transform:translateY(0);box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 30px -18px rgba(0,0,0,.35)}
header.topbar .nav-in{height:72px}
header.topbar .logo{height:24px}

/* overlay menu (mobil) */
.menu{
  position:fixed;inset:0;z-index:80;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding:0 24px;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;
}
.menu.open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
body.menu-open{overflow:hidden}
.menu .burger.x{display:block;position:absolute;top:10px;right:24px}
.menu nav{display:flex;flex-direction:column;align-items:flex-end;gap:24px}
.menu nav a{
  font-family:var(--head);font-size:34px;line-height:1.1;text-transform:uppercase;padding-top:.1em; /* místo pro diakritiku v Safari */
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s var(--ease),color .2s;
}
.menu nav a.active,.menu nav a:hover{color:var(--orange)}
.menu.open nav a{opacity:1;transform:none}
.menu.open nav a:nth-child(1){transition-delay:.08s}
.menu.open nav a:nth-child(2){transition-delay:.14s}
.menu.open nav a:nth-child(3){transition-delay:.2s}
.menu .lang{
  position:absolute;right:24px;bottom:40px;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;background:var(--ink);color:#fff;font-size:12px;line-height:1;padding-top:1px;
}

/* ---------- úvod ---------- */
/* Hero sedí přesně do okna — oranžový pás statistik začíná až pod hranou (přání klientky 16. 9.).
   Nadpis roste s šířkou okna, ale hlídá si i výšku, aby se text i tlačítka vždy vešly. */
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;min-height:calc(100svh - 100px);display:flex;align-items:center;padding-top:20px;padding-bottom:40px}
.hero-text{position:relative;z-index:1;max-width:none}
.hero h1{
  font-family:var(--head);font-size:clamp(56px,min(9vw,17vh),150px);line-height:.9;
  font-weight:400;letter-spacing:.045em;text-transform:uppercase; /* tenčí řez a užší řádkování podle Figmy (16. 9.) */
  padding-top:.2em; /* League Spartan má ascent 0,70 em, háčky sahají do 0,86 em — Safari je jinak ořízne */
}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-404 .code{margin:0 0 8px;color:var(--orange);font-family:var(--num);font-size:16px;font-weight:600;letter-spacing:.2em;max-width:none}
.hero-404 h1 em{display:block}
.hero p{margin-top:24px;max-width:560px;color:var(--text);line-height:26px}
.cta{display:flex;gap:16px;margin-top:40px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-width:185px;height:56px;padding:0 32px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--orange)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{color:var(--orange);border-color:var(--orange);background:none}
.hero-sketch{
  position:absolute;right:-40px;bottom:0;pointer-events:none;
  width:calc(var(--skica, 62) * 1%);max-width:calc(var(--skica, 62) * 13.9px);
  will-change:transform;
}

/* statistiky */
.stats{background:var(--orange);color:var(--ink)}
.stats-in{display:flex;justify-content:space-between;gap:48px;padding-top:76px;padding-bottom:76px;text-align:center} /* vyšší pás (17. 9.) */
.stat b{display:block;font-family:var(--num);font-weight:600;font-size:88px;line-height:1;letter-spacing:-.04em} /* větší a hustší čísla podle skici (17. 9.) */
.stat b .s{font-weight:400}
.stat>span{display:block;margin-top:5px;font-size:14px;letter-spacing:.5px}

/* mozaika sekcí */
.home-grid{padding-top:80px} /* 2× dál od pásu statistik (17. 9.) */
.row{display:grid;gap:40px;align-items:center;margin-bottom:20px}
.row.split{grid-template-columns:430px 1fr}
.row.split.rev{grid-template-columns:1fr 430px}
.row.full{grid-template-columns:1fr}
.htext h2{font-family:var(--head);font-size:48px;line-height:1.1;text-transform:uppercase;margin-bottom:16px}
.htext p{font-size:14px;line-height:22px;max-width:400px}
.htext p+p{margin-top:0}
.htext ul{margin-top:12px;padding-left:20px;font-size:14px;line-height:22px}
.hcard{display:block}
.hcard .ph{display:block;overflow:hidden;aspect-ratio:650/430}
.row.full .hcard .ph{aspect-ratio:1120/500}
.hcard img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.hcard:hover img{transform:scale(1.03)}
.hcard .cap{display:block;margin-top:5px;font-size:14px;font-weight:400;line-height:22px} /* stejné písmo jako text vedle fotek (17. 9.) */

/* ---------- hlavička podstránek ---------- */
.phead{
  margin:80px 0 0;padding:9px 0 15px 26px; /* o třetinu dál od hlavičky (17. 9., bylo 60) */border-left:8px solid var(--orange);
}
.phead h1{font-family:var(--head);font-size:56px;line-height:62px;letter-spacing:-1.5px;text-transform:uppercase;padding-top:6px} /* místo pro diakritiku v Safari */
.phead .intro{margin-top:24px;max-width:650px;color:var(--text);line-height:26px}
.phead .intro.wide{max-width:820px}
.award{margin-top:14px;color:var(--orange);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase}

/* ---------- seznam projektů ---------- */
.cats{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin-top:40px;padding:5px 0;
  font-size:13px;letter-spacing:1px;text-transform:uppercase;
}
/* tlačítka filtru mají stejné písmo jako štítky u projektů (přání klientky 16. 9.) */
.cats button{
  padding:10px 0;color:var(--text);position:relative;transition:color .2s;
  font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
}
.cats button+button::before{content:"";display:inline-block;width:1px;height:24px;background:var(--ink);vertical-align:middle;margin-right:24px}
.cats button.on,.cats button:hover{color:var(--orange)}
.plist{padding:40px 0 0;display:flex;flex-direction:column;gap:56px}
.pitem{display:none}
.pitem.show{display:block}
.pitem h2{font-size:32px;font-weight:500;letter-spacing:1px;line-height:46px}
.pitem h2 a:hover{color:var(--orange)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0 32px}
.badges span{
  display:inline-block;padding:3px 10px;background:var(--ink);color:#fff;
  font-size:13px;font-weight:400;letter-spacing:1px;line-height:19px;text-transform:uppercase;
}
.pics{display:grid;gap:10px;margin-top:40px;aspect-ratio:1120/450;grid-template-rows:minmax(0,1fr);overflow:hidden}
.pitem.wl .pics{grid-template-columns:2fr 1fr}
.pitem.wr .pics{grid-template-columns:1fr 2fr}
.pitem.wr .pics .ph:first-child{order:2}
.pics .ph{display:block;overflow:hidden;height:100%;min-height:0}
.pics img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pics .ph:hover img{transform:scale(1.03)} /* zvětší se jen fotka pod myší (17. 9.) */
.pager{display:flex;justify-content:center;gap:8px;margin:40px 0 0}
.pager button{
  width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--pale);font-size:14px;font-weight:500;transition:background .2s,color .2s;
}
.pager button.on,.pager button.arrow.ready{background:var(--ink);color:#fff}
.pager button:hover{background:var(--orange);color:#fff}
.pager button[disabled]{opacity:.35;pointer-events:none}
.pager:empty{display:none}

/* ---------- detail projektu ---------- */
.pdetail{padding-top:80px} /* fotka dál od textu (17. 9.) */
.hero-photo{display:block;aspect-ratio:1120/700;overflow:hidden;cursor:zoom-in}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.carousel{margin-top:40px}
.carousel .track{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  scroll-behavior:smooth;
}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .track a{flex:0 0 66.5%;aspect-ratio:745/450;scroll-snap-align:start;cursor:zoom-in;overflow:hidden}
.carousel .track img{width:100%;height:100%;object-fit:cover}
.arrows{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.arrows button{transition:background .2s,color .2s}
.arrows button{
  width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;background:var(--pale);
}
.arrows button.next{background:var(--ink);color:#fff}
.arrows button:hover{background:var(--orange);color:#fff}
.arrows button[disabled]{opacity:.35;pointer-events:none}

/* lightbox */
.lb{
  position:fixed;inset:0;background:#111;z-index:100;
  display:none;align-items:center;justify-content:center;padding:4vmin;
}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb .x{position:absolute;top:14px;right:24px;color:#fff;font-size:36px;line-height:1}

/* ---------- tým ---------- */
/* jména 94 px pod záhlavím — o třetinu blíž než názvy projektů pod lištou kategorií (17. 9.) */
.leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:78px 0 0}
.leader{padding:10px 24px} /* stejně široké a zarovnané jako oranžové proužky u týmu níže (17. 9.) */
.leader h3{font-size:28px;font-weight:500;letter-spacing:-.5px;line-height:40px}
.leader .role{display:block;margin-top:4px;color:var(--orange);font-size:14px;font-weight:500;letter-spacing:1px;text-transform:uppercase}
.leader .bio{margin-top:20px;padding-top:20px;border-top:1px solid var(--ink);color:var(--gray);font-size:14px;line-height:22px} /* čára jako v patičce, jen PC (17. 9.) */
.leader .bio p+p{margin-top:10px}
.leader .bio>*{max-width:75%} /* text o čtvrtinu užší, čára nad ním celá (17. 9.) */
.staff{padding:60px 0 20px}
.staff h2{font-family:var(--head);font-size:28px;letter-spacing:-.5px;line-height:31px;text-transform:uppercase;margin-bottom:32px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.member{padding:24px;border-top:6px solid var(--orange);margin:0 0 0;background:#fff}
.member{padding:0 24px 24px;position:relative}
.member::before{content:"";display:block;height:6px;background:var(--orange);margin:24px 0 8px}
.member{border-top:0}
.member h3{font-size:20px;font-weight:500;line-height:28px}
.member .role{display:block;margin-top:8px;color:var(--gray);font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase}

/* ---------- kontakt ---------- */
.contact{padding-top:88px;display:grid;grid-template-columns:max(calc(25% - 30px),260px) 1fr;gap:40px} /* provozovna a fakturace vedle sebe (16. 9.), fakturace o polovinu blíž (17. 9.) */
.contact .map{grid-column:1/-1}
.cblock h2{font-size:28px;font-weight:500;letter-spacing:-.5px;line-height:40px} /* stejné písmo jako jména vedení na Týmu (17. 9.) */
.cblock p{margin-top:16px;color:var(--gray);font-size:15px;line-height:21px}
.cblock a:hover{color:var(--orange)}
.map{background:var(--light)}
.map iframe{display:block;width:100%;height:400px;border:0;filter:grayscale(1) contrast(1.05)}
/* lišta pod mapou = jeden odkaz, verzálky uprostřed, při najetí celá oranžová (16. 9.) */
.map-link{
  display:flex;align-items:center;justify-content:center;padding:16px;
  font-size:15px;font-weight:500;letter-spacing:1px;text-transform:uppercase;transition:color .2s;
}
.map-link:hover{color:var(--orange)}

/* ---------- patička ---------- */
footer.site{
  margin-top:120px;background:var(--orange) url(../img/people.png) no-repeat;
  background-size:340px auto;background-position:calc(50% + 60px) 68%;
  color:var(--ink);
}
footer.site .wrap{padding-top:45px;padding-bottom:30px} /* užší patička 16. 9., horní odstup 45 px 17. 9. */
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.foot-info .logo{height:30px;filter:brightness(0)} /* na oranžové celý černý */
.foot-info .addr{margin-top:20px;font-size:14px;font-weight:400;letter-spacing:.4px;line-height:25px}
.foot-contact{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:14px;font-weight:400;letter-spacing:.4px}
.foot-contact a{display:inline-flex;align-items:center;gap:10px;line-height:20px}
.foot-contact a:hover{color:#fff}
.foot-bottom{margin-top:20px;padding-top:20px;border-top:1px solid var(--ink);font-size:13px;font-weight:400;line-height:19px}

/* ---------- jemné objevení při scrollu (JS přidává .rv, IntersectionObserver .in) ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .burger span,header.topbar,.menu,.menu nav a{transition:none}
}

/* ---------- tablet ---------- */
@media(max-width:1100px){
  .wrap{padding-left:40px;padding-right:40px} /* jen boky — svislé odsazení si řídí sekce (pás statistik) */
  .hero h1{font-size:60px}
  .row.split,.row.split.rev{grid-template-columns:1fr 1fr}
  .stat b{font-size:70px}
  .leaders{padding:78px 0 0}
  .leaders,.team{grid-template-columns:repeat(2,1fr)}
}

/* ---------- mobil ---------- */
@media(max-width:820px){
  .wrap{padding-left:24px;padding-right:24px}
  header.site,header.site .nav-in{height:55px}
  header.topbar .nav-in{height:55px}
  .brand .logo,header.topbar .logo{height:20px}
  nav.main{display:none}
  .burger{display:block;margin-right:-4px}
  .menu .burger.x{right:16px;margin:0}
  /* menu o třetinu větší, EN čtvereček úměrně ke křížku (17. 9.) */
  .menu nav a{font-size:45px}
  .menu .lang{width:32px;height:32px;font-size:16px}

  /* hero přesně na výšku displeje, oranžový pás až pod hranou; podle Figmy klientky (17. 9.) */
  .hero-in{min-height:calc(100svh - 55px);flex-direction:column;justify-content:center;align-items:stretch;padding:16px 24px 84px}
  .hero-text{max-width:none;padding-left:0}
  .hero h1{font-size:min(21vw,10.5svh);line-height:.86;letter-spacing:.02em}
  .hero h1 em{display:block}
  .hero p{margin-top:28px;max-width:310px;font-size:15px;line-height:24px}
  .cta{margin-top:28px;flex-direction:column;align-items:flex-start;gap:14px}
  .btn{min-width:0;width:155px;height:48px;padding:0 12px}
  .hero-sketch{position:absolute;left:0;right:0;bottom:0;width:100%;max-width:none;z-index:0}

  .stats-in{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;padding-top:32px;padding-bottom:32px}
  .stat b{font-size:38px}
  .stat>span{font-size:11px;letter-spacing:0}
  .home-grid{padding-top:44px}
  .row,.row.split,.row.split.rev{grid-template-columns:1fr;gap:38px;margin-bottom:38px}
  .row.split.rev .hcard{order:2}
  .htext h2{font-size:32px}
  .htext p{max-width:none}
  .hcard .ph,.row.full .hcard .ph{aspect-ratio:327/220}
  .hcard .cap{font-size:11px;letter-spacing:0}

  .phead{margin-top:43px;padding-left:20px}
  .phead h1{font-size:34px;line-height:38px;letter-spacing:-.5px}
  .phead .intro{font-size:15px;line-height:24px;margin-top:16px}

  .cats{font-size:11px;gap:0 12px;margin-top:24px}
  .cats button{padding:6px 0}
  .cats button+button::before{height:14px;margin-right:12px}
  .plist{gap:44px;padding-top:24px}
  .pitem h2{font-size:23px;font-weight:600;line-height:30px;letter-spacing:0}
  .badges{margin:8px 0 0}
  .badges span{font-size:10px;font-weight:400;padding:3px 8px;line-height:16px}
  /* stránkování na výšku štítků, větší rozestupy a neviditelně větší plocha pro prst (17. 9.) */
  .pager{gap:16px}
  .pager button{width:22px;height:22px;font-size:10px;position:relative}
  .pager button svg{width:11px;height:11px}
  .pager button::after{content:"";position:absolute;inset:-8px}
  .pics{margin-top:20px;aspect-ratio:327/220;grid-template-columns:1fr !important}
  .pics .ph+.ph{display:none}

  /* mobil 17. 9.: fotka dál od textu, karusel jen dotykově a od fotky stejně jako mezera mezi fotkami */
  .pdetail{padding-top:48px}
  .hero-photo{aspect-ratio:327/240}
  .carousel{margin-top:10px}
  .carousel .track a{flex-basis:70%}
  .carousel .arrows{display:none}

  .leaders{grid-template-columns:1fr;gap:20px;padding-top:70px} /* mobil: jméno ~84 px pod hlavičkou (17. 9., o třetinu blíž než lišta kategorií) */
  .leader{padding:10px 0}
  .leader h3{font-size:23px;font-weight:500;line-height:32px}
  .leader .role{font-size:12px}
  .leader .bio{margin-top:16px;padding-top:0;border-top:0}
  .leader .bio>*{max-width:none}
  .staff{padding-top:40px}
  .staff h2{font-family:var(--body);font-size:23px;text-transform:none;letter-spacing:0;margin-bottom:8px}
  .team{grid-template-columns:1fr;gap:0}
  .member{padding:0 0 14px}
  .member::before{display:none}
  .member h3{font-size:18px;font-weight:500;line-height:26px}
  .member .role{margin-top:2px;font-size:12px}

  .contact{padding-top:80px;gap:32px;grid-template-columns:1fr}
  .cblock h2{font-size:23px;line-height:32px}
  .map iframe{height:280px}
  .map-link{font-size:13px;padding:14px}

  footer.site{margin-top:60px;background-size:200px auto;background-position:right 30%}
  footer.site .wrap{padding-top:32px;padding-bottom:32px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:8px}
  .foot-info .logo{display:none}
  .foot-info .addr{margin-top:0;font-size:12px;line-height:18px;letter-spacing:0}
  .foot-contact{align-items:flex-start;gap:0;font-size:12px;letter-spacing:0}
  .foot-contact a{line-height:18px} /* stejné řádkování jako adresa (17. 9.) */
  .foot-contact svg{display:none}
  .foot-bottom{font-size:11px;padding-top:16px;border-top-width:.75px} /* o čtvrtinu tenčí čára (17. 9.) */
}

/* ---------- WordPress ---------- */
.phead .intro p+p:not(.award){margin-top:12px}
.phead .intro a{text-decoration:underline}
.phead .intro a:hover{color:var(--orange)}
.admin-bar header.topbar{top:32px}
@media(max-width:782px){.admin-bar header.topbar{top:46px}}
.hero-sketch{height:auto} /* WP dává obrázkům atributy width/height */
.phead .intro .award{line-height:1.6}