/* Webnova.cz — základní styly. Rozvržení a barvy jednotlivých prvků jsou v HTML
   jako inline styly (výkresový systém), tady je jen to, co inline být nemůže:
   reset, tóny stránek, klávesnicový focus, hovery, animace a body zlomu. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:Archivo,system-ui,sans-serif}
p{margin:0}
a{text-decoration:none}
img{max-width:100%}

/* tóny stránek */
body.tone-dark{background:#080C0F;color:#E4E7E9;font-weight:380}
body.tone-deep{background:#050709;color:#E4E7E9;font-weight:380}
body.tone-light{background:#F3F4F2;color:#0F1113;font-weight:400}
body.tone-dark a,body.tone-deep a{color:#B3F204}
body.tone-dark a:hover,body.tone-deep a:hover{color:#93C603}
body.tone-light a{color:#4F6B02}
body.tone-light a:hover{color:#3E5502}

/* focus ring */
:focus-visible{outline:2px solid #B3F204;outline-offset:2px}
body.tone-light :focus-visible,[data-tone="light"] :focus-visible{outline-color:#4F6B02}

[data-anchor],[id]{scroll-margin-top:96px}
summary::-webkit-details-marker{display:none}

/* dlaždice dotazníku — skutečné radio/checkbox ve <label>, aby volby odešly
   i bez JS. Vstup je průhledný, ale zaostřitelný, stav nese <label>. */
.tile{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;min-height:64px;padding:16px;border-radius:4px;background:#fff;border:1px solid #D9DBD7;color:#0F1113;font-family:Inter,sans-serif;font-size:1.0625rem;cursor:pointer}
.tile-input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.tile:hover{background:#E9EAE7}
.tile:has(.tile-input:checked){padding:15px;border:2px solid #4F6B02;background:#fff}
.tile:has(.tile-input:focus-visible){outline:2px solid #4F6B02;outline-offset:2px}
.tile-mark{display:none}
.tile:has(.tile-input:checked) .tile-mark{display:inline;color:#4F6B02;font-weight:600}

/* kroky dotazníku: bez JS je vidět celý formulář včetně odesílacího tlačítka.
   Třídu .is-off přidává JS, Zpět a Pokračovat mají smysl jen s ním. */
.is-off{display:none!important}
[data-next],[data-back]{display:none}
html.js-form [data-next],html.js-form [data-back]{display:inline-flex}

/* filtr oborů v galerii */
.filter{height:40px;padding:0 16px;border:1px solid #343537;border-radius:4px;background:transparent;color:#7F868C;font:500 .8125rem/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.filter[aria-pressed="true"]{border-color:#B3F204;background:#242829;color:#E4E7E9}

/* animace */
@keyframes wnDraw{to{stroke-dashoffset:0}}
@keyframes wnFade{to{opacity:1}}
@keyframes wnPour{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@keyframes wnGhost{to{opacity:.15}}
@keyframes wnStamp{from{opacity:0;transform:rotate(-4deg) scale(1.2)}to{opacity:1;transform:rotate(-4deg) scale(1)}}

/* body zlomu — desktop first, od nejšíř platného rozsahu k nejužšímu. Pravidla
   se v překryvu rozhodují pořadím, takže užší rozsah musí stát níž. */
@media (max-width:1099.98px){
  [data-om-nav]{display:none!important}
  [data-timeline]{grid-template-columns:repeat(3,1fr)!important}
  [data-cols3]{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:767.98px){
  [data-hide-mobile]{display:none!important}
  [data-stack]{grid-template-columns:1fr!important}
  [data-timeline]{grid-template-columns:1fr!important}
  [data-cols3]{grid-template-columns:1fr!important}
  [data-swap]{order:-1}
}
@media (min-width:1100px){[data-hide-desktop]{display:none!important}}
[data-om-nav] a{white-space:nowrap}

/* hero: tlačítka na mobilu na plnou šířku pod sebou */
@media (max-width:767.98px){
  [data-cta-row]{flex-direction:column;align-items:stretch}
  [data-cta-row] a{width:100%;height:52px;justify-content:center}
}

/* odhalení sekcí — schovává jen když JS opravdu běží */
html.js-reveal [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .4s ease-out,transform .4s ease-out}
html.js-reveal [data-reveal].is-in{opacity:1;transform:none}

/* pás důvěry: 5 / 3 / 2 / 1 sloupec */
@media (max-width:1199px){[data-trust]{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width:991px){[data-trust]{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:767.98px){[data-trust]{grid-template-columns:1fr!important}}

/* hero výkres na mobilu: zkrácená verze 800 ms — jen rám, hlavička, hero blok
   a dvě karty. Bez mono popisků, kót, adresního řádku a razítka: pod 400 px
   se mono text nedá přečíst. */
@media (max-width:767.98px){
  [data-hero-off]{display:none}
  [data-hero-draw]{animation-duration:.25s!important}
  [data-hero-draw="0"]{animation-delay:0ms!important}
  [data-hero-draw="1"]{animation-delay:40ms!important}
  [data-hero-draw="2"]{animation-delay:80ms!important}
  [data-hero-draw="3"]{animation-delay:120ms!important}
  [data-hero-draw="4"]{animation-delay:160ms!important}
  [data-hero-ghost]{animation-delay:480ms!important}
  [data-hero-pour]{animation-duration:.2s!important}
  [data-hero-pour="0"]{animation-delay:360ms!important}
  [data-hero-pour="1"]{animation-delay:400ms!important}
  [data-hero-pour="2"]{animation-delay:440ms!important}
  [data-hero-pour="3"]{animation-delay:480ms!important}
  [data-hero-pour="4"]{animation-delay:520ms!important}
  [data-hero-pour="5"]{animation-delay:560ms!important}
}

/* galerie ukázek: na mobilu je pole s názvem firmy pod náhledy — klávesnice
   zabere spodní polovinu obrazovky */
@media (max-width:767.98px){
  [data-firma-wrap]{display:flex;flex-direction:column}
  [data-firma-wrap] [data-firma-grid]{order:1}
  [data-firma-wrap] [data-firma-field]{order:2}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js-reveal [data-reveal]{opacity:1!important;transform:none!important}
  [data-anim]{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none!important}
}

/* hover stavy (v návrhu zapsané jako style-hover) */
.hv-1:hover{background:#93C603}
.hv-2:hover{border-color:#B3F204;color:#fff}
.hv-3:hover{border-color:#B3F204}
.hv-4:hover{border-color:#4F6B02}
.hv-5:hover{transform:translateY(-2px);border-color:#B3F204}
.hv-6:hover{color:#3E5502}
.hv-7:hover{transform:translateY(-2px);border-color:#4F6B02}
.hv-card:hover{transform:translateY(-2px);border-color:#B3F204}