/* ==========================================================================
   K&D — main.css
   Sdílené styly pro všechny stránky: design tokeny, reset, typografie,
   tlačítka, navigace, mobilní menu, reveal animace, přechody mezi stránkami
   a podpora omezeného pohybu (prefers-reduced-motion).
   ========================================================================== */

/* ═══════════════ DESIGN TOKENY ═══════════════ */
:root{
  /* Barvy */
  --ink:#0b0b0b;
  --card:#141414;
  --paper:#ffffff;
  --muted:#a5a5a5;
  --accent:#f5f5f5;
  --hairline:rgba(255,255,255,.08);

  /* Písma */
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-sans:"Instrument Sans",system-ui,sans-serif;

  /* Typografická škála (fluidní) */
  --text-h1:clamp(3rem,9vw,8.5rem);
  --text-h2:clamp(2.25rem,5.5vw,4.75rem);
  --text-h3:clamp(1.6rem,3vw,2.6rem);
  --text-lede:clamp(1.15rem,1.8vw,1.5rem);
  --text-body:clamp(1rem,1.1vw,1.0625rem);
  --text-label:.75rem;

  /* Vertikální rytmus a odsazení */
  --space-section:clamp(6rem,14vw,12rem);
  --space-block:clamp(2.5rem,5vw,5rem);
  --gutter:clamp(1rem,3vw,2.5rem);
  --page:clamp(1.25rem,4.5vw,5.5rem);

  /* Easing */
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ═══════════════ ZÁKLAD / RESET ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--font-sans);font-size:var(--text-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--paper);color:var(--ink)}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{text-wrap:balance;font-weight:500}
ul,ol{list-style:none}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:4px;border-radius:2px}

/* Přeskočit na obsah (přístupnost — viditelné jen při fokusu klávesnicí) */
.skip-link{
  position:fixed;top:.75rem;left:.75rem;z-index:100;
  background:var(--paper);color:var(--ink);
  padding:.7rem 1.2rem;border-radius:999px;
  font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  transform:translateY(-200%);transition:transform .3s var(--ease);
}
.skip-link:focus-visible{transform:none}

/* ═══════════════ LAYOUT / TYPOGRAFIE ═══════════════ */
.wrap{max-width:110rem;margin-inline:auto;padding-inline:var(--page)}
.section{padding-block:var(--space-section)}
.display{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.05}
.h2{font-size:var(--text-h2)}
.lede{font-size:var(--text-lede);line-height:1.55;color:var(--muted)}
.meta{font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.it{font-style:italic}

/* Popisek sekce (meta s odstupem pod sebou) */
.sec-label{margin-bottom:1.5rem}

/* ═══════════════ REVEAL PŘI SCROLLU (IntersectionObserver) ═══════════════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ═══════════════ TLAČÍTKA / ODKAZY ═══════════════ */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--paper);color:var(--ink);border-radius:999px;
  padding:1rem 2rem;font-size:.85rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;
  transition:transform .3s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-lg{padding:1.25rem 3rem;font-size:.9rem}
.link{
  display:inline-block;padding-bottom:.15rem;
  font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;
}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:scale(1.03)}
  .link{
    background-image:linear-gradient(currentColor,currentColor);
    background-size:0% 1px;background-position:left bottom;background-repeat:no-repeat;
    transition:background-size .5s var(--ease);
  }
  .link:hover{background-size:100% 1px}
}

/* ═══════════════ NAVBAR ═══════════════ */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background-color .5s,border-color .5s;
}
.nav.scrolled,.nav.open{
  background:rgba(11,11,11,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--hairline);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
.logo{font-family:var(--font-display);font-size:1.55rem;letter-spacing:-.01em}
.nav-links{display:none;align-items:center;gap:2rem}
.nav-links a{
  font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);padding-bottom:.15rem;transition:color .3s;
}
.nav-links a.active,.nav-links a:hover{color:var(--paper)}
.nav-cta{
  border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:.55rem 1.3rem;color:var(--paper)!important;
  transition:background-color .3s,color .3s;
}
@media(hover:hover){.nav-cta:hover{background:var(--paper);color:var(--ink)!important}}
.burger{display:flex;padding:.4rem}
.burger svg{width:26px;height:26px}
.burger .x{display:none}
.nav.open .burger .bars{display:none}
.nav.open .burger .x{display:block}

/* ═══════════════ MOBILNÍ MENU ═══════════════ */
.mobile-menu{
  position:fixed;inset:4rem 0 0 0;z-index:40;
  background:var(--ink);
  display:none;flex-direction:column;justify-content:space-between;
  padding:3rem var(--page) 2.5rem;
}
.nav.open ~ .mobile-menu{display:flex}
.mobile-menu li a{
  display:block;font-family:var(--font-display);
  font-size:2.4rem;line-height:1.35;letter-spacing:-.02em;
  opacity:0;transform:translateY(16px);
}
.nav.open ~ .mobile-menu li a{animation:menuin .5s var(--ease) forwards}
.mobile-menu li:nth-child(1) a{animation-delay:.05s}
.mobile-menu li:nth-child(2) a{animation-delay:.1s}
.mobile-menu li:nth-child(3) a{animation-delay:.15s}
.mobile-menu li:nth-child(4) a{animation-delay:.2s}
.mobile-menu li:nth-child(5) a{animation-delay:.25s}
.mobile-menu li:nth-child(6) a{animation-delay:.3s}
@keyframes menuin{to{opacity:1;transform:none}}
.mobile-menu-foot{border-top:1px solid var(--hairline);padding-top:1.5rem}
.mobile-menu-foot .meta{margin-bottom:.5rem}
.mobile-menu-foot a{font-size:1.1rem}
body.locked{overflow:hidden}

@media(min-width:1024px){
  .nav-inner{height:5rem}
  .logo{font-size:1.7rem}
  .nav-links{display:flex}
  .burger,.mobile-menu{display:none!important}
}

/* ═══════════════ CTA SEKCE (sdílený podklad) ═══════════════ */
.cta-final{
  position:relative;overflow:hidden;border-top:1px solid var(--hairline);
}
.cta-final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(245,245,245,.09),transparent 70%);
}

/* ═══════════════ PŘECHOD MEZI STRÁNKAMI (fade-out) ═══════════════ */
main,footer,.nav{transition:opacity .45s var(--ease)}
body.page-leaving main,body.page-leaving footer,body.page-leaving .nav{opacity:0}

/* ═══════════════ OMEZENÝ POHYB ═══════════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal,.mobile-menu li a{opacity:1!important;transform:none!important}
}