/* ============================================================
   ANTIVIRAL — base.css
   Reset, typografie, pole, tlačítka, navigace, patička,
   placeholder systém, štítkový pás, matné sklo, reveal.
   Žádný syrový hex — všechno přes tokeny.
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:var(--s-body);
  line-height:1.55;
  color:var(--text-primary);
  background:var(--field-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{max-width:100%;display:block;}
/* Obrázky nejde přetáhnout ven z okna ani vyvolat systémové menu
   dlouhým podržením na mobilu (iOS Safari). Doplněk k blokování
   kliku pravým tlačítkem v main.js — samo o sobě nezabrání uložení
   přes vývojářské nástroje nebo screenshot, to nejde zablokovat. */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--f-sans);font-weight:600;letter-spacing:-.02em;line-height:1.02;}
p{margin:0;}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;padding:0;}
ul,ol{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-pad);}
.section{padding-block:var(--section-y);}

/* ---------- Pole (rytmus podkladů) ---------- */
.field-light{background:var(--field-light);}
.field-base {background:var(--field-base);}
.field-warm {background:var(--field-warm);}
.field-dark {background:var(--field-dark);color:var(--text-on-dark);}
.field-dark h1,.field-dark h2,.field-dark h3,.field-dark h4{color:var(--text-on-dark);}
.field-dark .lead,.field-dark .body-2{color:var(--text-on-dark-muted);}
.field-dark .kicker,.field-dark .mono-note{color:var(--text-on-dark-muted);}
.field-dark .rule{background:var(--border-on-dark);}

/* ---------- Typografie ---------- */
.display{font-size:var(--s-display);line-height:.92;letter-spacing:-.035em;font-weight:600;}
h1,.h1{font-size:var(--s-h1);line-height:1.0;letter-spacing:-.03em;}
h2,.h2{font-size:var(--s-h2);line-height:1.02;}
h3,.h3{font-size:var(--s-h3);line-height:1.12;}
h4,.h4{font-size:var(--s-h4);line-height:1.25;}
.lead{font-size:var(--s-lead);color:var(--text-secondary);max-width:var(--measure);}
.body-2{color:var(--text-secondary);max-width:var(--measure);}
.small{font-size:var(--s-small);}

/* Mono — jen tam, kde nese data. Nikdy jako dekorace. */
.kicker{
  display:inline-block;
  font:500 var(--label-size)/1 var(--f-mono);
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--label-fg);
}
.mono-note{font:400 var(--s-mono)/1.6 var(--f-mono);color:var(--text-tertiary);}

/* „Prescription label" — mono řádky s reálnými daty produktu */
.spec{display:grid;gap:var(--sp-2);font:400 var(--s-mono)/1.5 var(--f-mono);}
.spec-row{
  display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:var(--sp-4);
  padding-block:var(--sp-2);border-top:1px solid var(--border);
}
/* Klíče mají různou šířku (některé nesou štítek), a protože je každý řádek
   vlastní grid, hodnoty by se rozjely. Subgrid je srovná do jednoho sloupce. */
@supports (grid-template-columns: subgrid){
  .spec{grid-template-columns:minmax(96px,auto) 1fr;column-gap:var(--sp-4);}
  .spec-row{grid-column:1/-1;grid-template-columns:subgrid;}
}
.spec-row:last-child{border-bottom:1px solid var(--border);}
.spec-key{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  color:var(--text-tertiary);letter-spacing:.06em;text-transform:uppercase;
}
.spec-val{color:var(--text-primary);}

/* Inline kvalifikace nároku — omezení musí stát u nároku, ne pod čarou.
   Záměrně bez červené: je to věcné upřesnění, ne varování. */
.tag-variant,.speed-row-tag{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);
  font:500 var(--s-mono-sm)/1.4 var(--f-mono);letter-spacing:.08em;
  color:var(--text-secondary);text-transform:uppercase;white-space:nowrap;
}

.rule{height:1px;background:var(--border);border:0;margin:0;}

/* ---------- Tlačítka ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:500;font-size:15.5px;
  border-radius:var(--btn-radius);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border:1.5px solid transparent;
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn svg{width:17px;height:17px;transition:transform var(--dur-mid) var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);box-shadow:var(--sh-lift);}
.btn-primary:hover{background:var(--btn-primary-bg-hover);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--btn-ghost-fg);border-color:var(--btn-ghost-border);}
.btn-ghost:hover{border-color:var(--btn-ghost-border-hover);}
.field-dark .btn-ghost{color:var(--text-on-dark);border-color:var(--border-on-dark);}
.field-dark .btn-ghost:hover{border-color:var(--text-on-dark);}
.btn-text{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:600;font-size:15.5px;transition:gap var(--dur-fast) var(--ease);}
.btn-text:hover{gap:12px;}
.btn-text svg{width:16px;height:16px;}

/* ---------- Lockup ANTIVIRAL ----------
   Značka je rastrové logo (assets/logo-antiviral.png) — ručně kreslený glyf
   s dutými kroužky. Na tmavém a červeném podkladu se přebarvuje filtrem. */
.lockup{display:inline-flex;align-items:center;gap:10px;}
.lockup-mark{width:28px;height:28px;flex:none;object-fit:contain;}
.field-dark .lockup-mark,.band .lockup-mark{filter:brightness(0) invert(1);}
.lockup-text{display:flex;flex-direction:column;align-items:center;gap:3px;}
.lockup-word{
  font-family:var(--f-sans);font-weight:500;font-size:21px;line-height:1;
  letter-spacing:-.015em;text-transform:lowercase;color:var(--text-primary);
}
.lockup-sub{
  font-family:var(--f-mono);font-weight:500;font-size:9.5px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-tertiary);
}
.field-dark .lockup-word{color:var(--text-on-dark);}
.field-dark .lockup-sub{color:var(--text-on-dark-muted);}
.lockup-sm .lockup-mark{width:21px;height:21px;}
.lockup-sm .lockup-word{font-size:17px;}
.lockup-sm .lockup-sub{font-size:8px;letter-spacing:.14em;}

/* ---------- Červený štítkový pás (z obalu) ---------- */
.band{
  background:var(--band-bg);color:var(--band-fg);
  overflow:hidden;
}
.band-track{
  display:flex;align-items:center;gap:var(--sp-6);
  padding-block:11px;
  font:500 var(--s-mono-sm)/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}
.band-track > *{flex:none;}
.band-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;}
.band-mark{width:15px;height:15px;color:currentColor;}
.band-track--clone{display:none;}

/* ---------- Navigace ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--dur-mid) var(--ease),border-color var(--dur-mid) var(--ease);
}
.nav.scrolled{
  background:var(--nav-bg-scrolled);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--border);
}
.nav-inner{
  width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-pad);
  display:flex;align-items:center;gap:var(--sp-6);
}
.nav-menu{display:flex;align-items:center;gap:var(--sp-5);margin-left:auto;}
.nav-menu a{position:relative;font-size:14.5px;font-weight:500;color:var(--text-secondary);transition:color var(--dur-fast) var(--ease);}
.nav-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--accent);border-radius:1px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-mid) var(--ease);
}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{color:var(--text-primary);}
.nav-menu a:hover::after,.nav-menu a[aria-current="page"]::after{transform:scaleX(1);}

/* Nad hero fotkou jsou odkazy bílé; jakmile se při scrollu podsune světlé
   pozadí hlavičky, vrátí se do grafitové. Obojí spíná stejná třída .scrolled,
   takže barva písma i pozadí přeskočí na jeden podnět.
   Proč třída v markupu a ne prosté .nav:not(.scrolled): tenhle stylesheet
   sdílejí i podstránky, kde za hlavičkou fotka není — tam by bílé odkazy
   zmizely na světlém poli. Nosí ji jen hlavička, pod kterou fotka opravdu je. */
.nav-on-photo:not(.scrolled) .nav-menu a{color:var(--c-milk);}
.nav-on-photo:not(.scrolled) .nav-menu a:hover,
.nav-on-photo:not(.scrolled) .nav-menu a[aria-current="page"]{color:#fff;}
.nav-on-photo:not(.scrolled) .nav-lang a:not(.on){color:color-mix(in srgb,var(--c-milk) 78%,transparent);}
.nav-lang{display:flex;align-items:center;gap:2px;font:500 var(--s-mono-sm)/1 var(--f-mono);letter-spacing:.08em;margin-left:var(--sp-5);}
.nav-lang a{padding:7px 9px;border-radius:var(--r-pill);color:var(--text-tertiary);}
.nav-lang a.on{color:var(--text-primary);background:var(--field-warm);}
.nav-burger{display:none;margin-left:auto;width:40px;height:40px;position:relative;}
.nav-burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform var(--dur-mid) var(--ease),opacity var(--dur-fast);}
.nav-burger span:nth-child(1){top:14px;}
.nav-burger span:nth-child(2){top:24px;}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(5px) rotate(45deg);}
body.menu-open .nav-burger span:nth-child(2){transform:translateY(-5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:45;
  background:var(--field-light);border-bottom:1px solid var(--border);
  display:none;flex-direction:column;padding:var(--sp-5) var(--page-pad) var(--sp-6);gap:var(--sp-4);
}
body.menu-open .mobile-menu{display:flex;}
.mobile-menu a{font-size:20px;font-weight:500;}

/* ---------- Placeholder systém ----------
   <figure class="slot" style="--ar:16/9">
     <img src="assets/as-01-hero.jpg" alt="…" onerror="this.remove()">
     <figcaption class="slot-ph"><b>AS-01</b><i>art direction…</i></figcaption>
   </figure>
   Fotka se nakopíruje do assets/ pod stejným názvem — placeholder zmizí sám.
------------------------------------------------------------ */
.slot{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:var(--ar, 16/9);
  border-radius:var(--ph-radius);
  background:var(--ph-bg);
}
.slot > img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;}
/* Jakmile obrázek existuje, popisek zmizí — i u průhledného PNG.
   Když se nenačte, onerror ho odstraní z DOM a popisek se vrátí. */
.slot:has(> img) .slot-ph{display:none;}
.slot:has(> img){background:transparent;}
.slot-ph{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:var(--sp-2);padding:var(--sp-5);
  font:400 var(--s-mono)/1.5 var(--f-mono);color:var(--ph-fg);
}
/* Vodoznak = skutečné logo, odbarvené do neutrálu, ať nekřičí. */
.slot-ph::before{
  content:"";position:absolute;inset:0;
  background:no-repeat center/clamp(64px,26%,180px) url("../assets/logo-antiviral-sm.png");
  filter:grayscale(1);
  opacity:.09;
}
.slot-ph b{
  position:relative;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}
.slot-ph i{position:relative;font-style:normal;max-width:46ch;line-height:1.45;}
.slot-alt{background:var(--ph-bg-alt);}

/* ---------- Matné sklo — jediný výskyt na webu ---------- */
.glass{
  background:var(--glass-bg);
  /* brightness+contrast dělá to, co matné sklo dělá fyzicky: zvedne černou
     a sníží kontrast toho, co je za ním. Díky tomu se dá krýt stáhnout na
     .34 a struktura projde, aniž by drobný text spadl do stínů kapek. */
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.05) brightness(1.18) contrast(.88);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.05) brightness(1.18) contrast(.88);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  box-shadow:var(--sh-soft);
}

/* ---------- Sdílený tichý reveal ---------- */
.rv{opacity:0;transform:translateY(24px);}
.rv-in{
  opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease) var(--rvd,0ms),
             transform var(--dur-slow) var(--ease) var(--rvd,0ms);
}
.no-js .rv{opacity:1;transform:none;}

/* ---------- Patička ---------- */
/* Patička na bone — finále je milk, jinak by přechod nebyl vidět vůbec */
.foot{background:var(--field-base);padding-block:var(--sp-9) var(--sp-6);}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--sp-7);}
.foot-brand p{color:var(--text-secondary);max-width:34ch;margin-top:var(--sp-4);font-size:var(--s-small);}
.foot-col h4{font:500 var(--s-mono)/1 var(--f-mono);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--sp-4);}
.foot-col li + li{margin-top:var(--sp-3);}
.foot-col a{font-size:var(--s-small);color:var(--text-secondary);transition:color var(--dur-fast) var(--ease);}
.foot-col a:hover{color:var(--text-primary);}
.foot-bar{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
  margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--border);
  font:400 var(--s-mono)/1 var(--f-mono);color:var(--text-tertiary);
}
.foot-legal{display:flex;gap:var(--sp-5);flex-wrap:wrap;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-menu,.nav-lang{display:none;}
  .nav-burger{display:block;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6);}
  .foot-brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;}
  .slot-ph{padding:var(--sp-4);}
  /* Klíč se štítkem se na mobil vedle hodnoty nevejde — na řádek nad ni */
  .spec,.spec-row{grid-template-columns:1fr;}
  .spec-row{gap:var(--sp-1);}
}

/* ---------- Reduced motion — statický stav, nikdy rozbitý ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none;}
}

/* ============================================================
   ZRNITOST — papír místo ploché výplně.
   Aesop/COS technika: jemné zrno dá ploše materialitu.
   Leží nad podkladem a pod obsahem, nechytá myš.
   ============================================================ */
.field-light,.field-base,.field-warm,
.hero,.prod,.speed,.mix,.prot,.praxe,.protokol,section.blog,.fin,.foot{position:relative;}
.field-light::before,.field-base::before,.field-warm::before,
.hero::before,.prod::before,.speed::before,.mix::before,.prot::before,
.praxe::before,.protokol::before,section.blog::before,.fin::before,.foot::before{
  content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Obsah musí zůstat nad zrnem.
   Podstránky nemají vlastní pojmenované sekce jako homepage — jejich sekce
   nesou přímo .field-light/.field-base/.field-warm, proto jsou tu i ty.
   .blog je schválně "section.blog", ne holé ".blog": WordPress dává
   <body> třídu "blog" (viz body_class() a Nastavení Čtení →
   show_on_front=posts, [[wp-pozustatky-stare-sablony]]) a holé ".blog"
   by se tak trefilo i do <body>, čímž by tohle pravidlo (position:relative
   na PŘÍMÝCH DĚTECH) přebilo .nav{position:fixed} — hlavička pak nebyla
   fixed a při scrollu zmizela. Zjištěno a opraveno 2026-08-19. */
.hero > *,.prod > *,.speed > *,.mix > *,.prot > *,
.praxe > *,.protokol > *,section.blog > *,.fin > *,.foot > *,
.field-light > *,.field-base > *,.field-warm > *{position:relative;z-index:1;}
/* Tmavé pole zrno nedostává — na grafitu působí špinavě */
.field-dark::before{display:none;}
@media (prefers-reduced-transparency: reduce){
  .field-light::before,.field-base::before,.field-warm::before,
  .hero::before,.prod::before,.speed::before,.mix::before,.prot::before,
  .praxe::before,.protokol::before,section.blog::before,.fin::before,.foot::before{display:none;}
}

/* ============================================================
   ČERVENÁ JAKO STRUKTURA — ne jen jako CTA.
   Čísla sekcí, vlásečnice mezi sekcemi, linka pod kickery.
   ============================================================ */
.kicker{position:relative;padding-bottom:9px;}
.kicker::after{
  content:"";position:absolute;left:0;bottom:0;
  width:26px;height:2px;background:var(--accent);border-radius:1px;
}
.field-dark .kicker::after{background:var(--accent);}

/* Číslo sekce — červený editorial index nad kickerem.
   V toku, ne absolutně: v marži by se na užších obrazovkách ořízlo. */
.sec-no{
  display:flex;align-items:center;gap:10px;
  margin-bottom:var(--sp-4);
  font:500 var(--s-mono)/1 var(--f-mono);
  letter-spacing:.14em;color:var(--text-accent);
}
.sec-no::after{
  content:"";width:34px;height:1px;background:var(--accent);opacity:.5;
}
/* Na grafitu má značková červená jen 3,54:1 — číslo by nebylo čitelné.
   Číslice jdou do mléčné, červená zůstane v lince. */
.field-dark .sec-no{color:var(--text-on-dark);}
.field-dark .sec-no::after{opacity:.85;}

/* Vlásečnice mezi sekcemi — červená místo šedé */
.rule-red{height:1px;border:0;margin:0;background:var(--accent);opacity:.45;}

/* Sdělení o AI obsahu podle čl. 50 nařízení (EU) 2024/1689. Vlastní řádek
   pod .foot-bar, ne další položka mezi právními odkazy — mezi nimi by se
   četlo jako odkaz a nařízení chce sdělení „jasné a rozlišitelné“. */
.foot-ai{
  margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border);
  font:400 var(--s-mono)/1.6 var(--f-mono);color:var(--text-tertiary);max-width:90ch;
}