/* heybay.cz · vzhled podle návrhu v0_3 (heybay_medailonek_navrh_v0_3_2026-10-26.html), iterace vlastníka H-2 a H-3 */

/* Písma uložená na webu (OFL, viz /fonts/OFL.txt), podmnožiny latin a latin-ext */
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:800; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-ext-800-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:800; font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/source-serif-4-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/source-serif-4-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/source-serif-4-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/source-serif-4-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Barevná škála vlastníka (H-2). Podklad vždy bílý, jen světlý režim. */
:root{
  --white:#FFFFFF;
  --ink:#16243A; --muted:#5A6878; --band:#F6F7F9; --grid:#E3E7EC;
  --hi:#F5C531; --hi-light:#FFF4CC; --hi-ink:#3A2C00;
  --red:#C8102E; --red-light:#FCE4E8;
  --blue:#1F5FBF; --blue-light:#E3ECFA;
  --green:#1E8A5A; --green-light:#E1F3EA;
  --paper:var(--white); --sheet:var(--white); --accent:var(--red); --focus:var(--blue);
  /* pět stupňů písma na celém webu (H-5); jinou velikost nepoužívat, výjimkou jsou jen samolepky na portrétu */
  --fs-h1:clamp(2.1rem,4.8vw,3.9rem);
  --fs-h2:clamp(1.8rem,3.4vw,2.5rem);
  --fs-h3:1.5rem;
  --fs-body:1.06rem;
  --fs-small:.9rem;
  --lh-body:1.65;
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --text:"Source Serif 4", Georgia, serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--paper);
  font:400 var(--fs-body)/var(--lh-body) var(--text);
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
a{color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}
h1,h2,h3{font-family:var(--display); line-height:1.08; margin:0; letter-spacing:-.01em}
p{margin:0 0 .9em}
section{padding:32px 0}
h2{font-size:var(--fs-h2); margin-bottom:28px}
.muted{color:var(--muted)}

/* horní menu jen v záhlaví, na patičku nepůsobí (H-8) */
header.top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:26px 0 0}
.brand{font:800 var(--fs-h1)/1.08 var(--display); letter-spacing:-.01em; text-decoration:none}
header.top nav ul{list-style:none; display:flex; gap:22px; margin:0; padding:0; font-family:var(--display); font-size:var(--fs-small)}
header.top nav a{text-decoration:none; background:linear-gradient(var(--hi),var(--hi)) 0 100%/0 40% no-repeat; transition:background-size .2s}
header.top nav a:hover{background-size:100% 40%}
@media (max-width:720px){ header.top nav{display:none} }

/* HERO s přepínačem A/B (přepínač vidět vždy, zobrazí ho js/ab.js, H-10) */
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; padding:24px 0 20px}
.ab{display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; font:600 var(--fs-small) var(--display)}
.ab-switch{display:inline-flex; border:2px solid var(--red); border-radius:999px; overflow:hidden}
.ab-switch button{font:800 var(--fs-small) var(--display); padding:6px 14px; border:0; background:transparent; color:var(--ink); cursor:pointer}
.ab-switch button[aria-pressed="true"]{background:var(--red); color:var(--white)}
.ab small{color:var(--muted); font-weight:400; font-size:var(--fs-small)}
.variant{display:none}
.variant.on{display:block; animation:in .35s ease-out}
@keyframes in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.hero h1{font-size:var(--fs-h1); font-weight:800; max-width:17ch}
.lead{font-size:var(--fs-body); max-width:48ch; margin:22px 0 28px}
.ctas{display:flex; flex-wrap:wrap; gap:12px}
.btn{font:600 var(--fs-body)/1 var(--display); padding:15px 22px; border-radius:999px; text-decoration:none; border:2px solid var(--ink); display:inline-flex; align-items:center; background:transparent; color:var(--ink); cursor:pointer}
.btn.primary{background:var(--hi); border-color:var(--hi); color:var(--hi-ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper)}
/* LinkedIn pilulka v úvodu a v kontaktu (H-6), logo vysoké jako text */
.btn.pill-in{background:#1F5FBF; border-color:#1F5FBF; color:#FFFFFF; gap:8px}
.btn.pill-in:hover{filter:brightness(.92)}
.btn .in-logo{width:1em; height:1em; flex:none; display:block}
.vote{margin-top:22px; font:400 var(--fs-small) var(--display); color:var(--muted); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.vote button{font:600 var(--fs-small) var(--display); border:1.5px dashed var(--muted); background:transparent; color:var(--ink); border-radius:999px; padding:5px 12px; cursor:pointer}
/* portrét 4 : 5 se samolepkami (SVG vrstva ve stejném poměru, písmo samolepek beze změny) */
.portrait{position:relative}
.portrait picture{display:block}
.portrait img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:6px}
.portrait .stickers{position:absolute; inset:0; width:100%; height:100%; display:block}
.ann{font:600 var(--fs-small) var(--display); fill:var(--ink)}
.ann.s{font-weight:400; fill:var(--muted)}
.ann.ann-hi{fill:var(--hi-ink)}
.ann.ann-w{fill:var(--white)}
/* výjimka z pěti stupňů: písmo samolepek na portrétu */
.ann.ann-big{font-size:26px}
.ann.ann-light{font-weight:400}
@media (max-width:860px){ .hero{grid-template-columns:1fr; gap:36px} }

/* pás krátkých claimů (bez ikon) */
.claims{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:3px solid var(--hi); border-bottom:1px solid var(--grid); border-radius:6px; margin-top:8px}
.claim{padding:18px 16px}
.claim + .claim{border-left:1px solid var(--grid)}
.claim b{font:800 var(--fs-h2)/1.15 var(--display); display:block; width:fit-content}
.claim span{font:400 var(--fs-body)/var(--lh-body) var(--display); color:var(--muted)}
.claim:nth-child(1) b{color:var(--green)}
.claim:nth-child(2) b{color:var(--blue)}
/* žlutá jako zvýrazňovač: žlutý text na bílé by nebyl čitelný */
.claim:nth-child(3) b{color:var(--hi-ink); background:linear-gradient(transparent 55%, var(--hi) 55% 95%, transparent 95%)}
.claim:nth-child(4) b{color:var(--red)}
@media (max-width:860px){ .claims{grid-template-columns:1fr 1fr} .claim:nth-child(3){border-left:0} .claim:nth-child(n+3){border-top:1px solid var(--grid)} }

/* dovednosti */
.skills{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 36px}
.skill svg{width:52px; height:52px; margin-bottom:10px}
.skill h3{font-size:var(--fs-h3); margin-bottom:4px}
.skill p{margin:0; color:var(--muted)}
@media (max-width:860px){ .skills{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .skills{grid-template-columns:1fr} }

/* nabídka: karty ve světlé verzi barvy, horní pruh a tlačítko v syté */
.offer{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:stretch}
.card{background:var(--sheet); border:1.5px solid var(--grid); padding:26px; display:flex; flex-direction:column; border-top:6px solid var(--ink); border-radius:6px}
.card.lunch{background:var(--hi-light); border-top-color:var(--hi)}
.card.hour{background:var(--red-light); border-top-color:var(--red)}
.card.pack{background:var(--blue-light); border-top-color:var(--blue)}
.card h3{font-size:var(--fs-h2); margin:10px 0 8px}
.card p{color:var(--muted)}
.card .price{font-size:var(--fs-h3); font-weight:600; line-height:1.15; color:var(--ink)}
.card .btn{margin-top:auto; align-self:flex-start; font-size:var(--fs-body); padding:18px 28px; border:0}
.card.lunch .btn, .card.lunch .btn:hover{background:var(--hi); color:var(--hi-ink)}
.card.hour .btn, .card.hour .btn:hover{background:var(--red); color:var(--white)}
.card.pack .btn, .card.pack .btn:hover{background:var(--blue); color:var(--white)}
.card .btn:hover{filter:brightness(.92)}
.card svg{width:46px; height:46px}
/* 26. 10. 2026: nepoužito, štítky pod nadpisem nabídky z HTML odstraněny v H-4. */
.who{display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 28px}
/* 26. 10. 2026: nepoužito, štítky pod nadpisem nabídky z HTML odstraněny v H-4. */
.chip{font:600 var(--fs-small) var(--display); border:1.5px solid var(--ink); border-radius:999px; padding:6px 14px; background:var(--sheet)}
.more{margin:24px 0 0; font:600 var(--fs-body) var(--display)}
@media (max-width:860px){ .offer{grid-template-columns:1fr} }

/* do týmu */
.team{background:var(--ink); color:var(--paper); border-radius:24px; padding:44px clamp(20px,5vw,56px); display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.team h2{margin-bottom:14px}
.team p{color:color-mix(in srgb,var(--paper) 78%,transparent); max-width:50ch}
.roles{display:flex; flex-wrap:wrap; gap:10px}
.roles span{font:600 var(--fs-small) var(--display); padding:10px 16px; border-radius:12px; border:2px solid var(--paper)}
.roles span.hot{background:var(--hi); border-color:var(--hi); color:var(--hi-ink)}
.roles span.red{background:var(--red); border-color:var(--red); color:var(--white)}
.team .btn{border-color:var(--paper); color:var(--paper); margin-top:18px}
.team .btn:hover{background:var(--paper); color:var(--ink)}
@media (max-width:860px){ .team{grid-template-columns:1fr} }

/* cesta: 7 položek, červený bod jen u poslední */
.path{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:0; counter-reset:p; position:relative}
.path::before{content:""; position:absolute; left:0; right:0; top:15px; border-top:2px dashed var(--muted)}
.path li{position:relative; padding:40px 14px 0 0}
.path li::before{content:""; position:absolute; top:7px; left:0; width:18px; height:18px; border-radius:50%; background:var(--paper); border:3px solid var(--ink)}
.path li:last-child::before{background:var(--red); border-color:var(--red)}
.path b{font:800 var(--fs-body) var(--display); display:block}
.path span{font:400 var(--fs-body)/var(--lh-body) var(--display); color:var(--muted)}
@media (max-width:860px){ .path{grid-template-columns:1fr; } .path::before{left:8px; right:auto; top:0; bottom:0; border-top:0; border-left:2px dashed var(--muted)} .path li{padding:0 0 18px 34px} .path li::before{top:4px} }

/* měřák iluzí: budík */
.quiz{display:grid; grid-template-columns:1fr 400px; gap:40px; align-items:center; background:var(--band); border-radius:20px; padding:36px clamp(20px,4vw,44px)}
.quiz-note{margin:16px 0 0; font:400 var(--fs-small) var(--display); color:var(--muted)}
.q{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--grid)}
.q > span{font-size:var(--fs-body)}
.toggle{display:flex; gap:6px; flex:none}
.toggle button{font:600 var(--fs-small) var(--display); padding:9px 18px; border-radius:999px; border:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer}
.toggle button[data-v="1"][aria-pressed="true"]{background:var(--red); border-color:var(--red); color:var(--white)}
.toggle button[data-v="0"][aria-pressed="true"]{background:var(--green); border-color:var(--green); color:var(--white)}
.gauge{width:100%; max-width:400px; justify-self:center}
.gauge svg{width:100%; height:auto}
.needle{transform-origin:150px 150px; transform:rotate(-90deg); transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.needle[data-yes="1"]{transform:rotate(-54deg)}
.needle[data-yes="2"]{transform:rotate(-18deg)}
.needle[data-yes="3"]{transform:rotate(18deg)}
.needle[data-yes="4"]{transform:rotate(54deg)}
.needle[data-yes="5"]{transform:rotate(90deg)}
.verdict{font:600 var(--fs-body)/var(--lh-body) var(--display); text-align:center; margin-top:8px}
@media (max-width:860px){ .quiz{grid-template-columns:1fr} .q{flex-direction:column; align-items:flex-start} }

/* kontakt na úvodu */
section.band{background:var(--band); box-shadow:0 0 0 100vmax var(--band); clip-path:inset(0 -100vmax)}
.contact-sec{border-top:1px solid var(--grid)}
.contact{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}
.contact > div{flex:1 1 100%}
.contact h2{margin:0 0 20px; font-size:var(--fs-h1); font-weight:800}
.contact .btn.pill-mail{background:#F5C531; border-color:#F5C531; color:#3A2C00}
.contact .btn.pill-tel{background:#C8102E; border-color:#C8102E; color:#FFFFFF}
.contact .btn.pill-mail:hover, .contact .btn.pill-tel:hover{filter:brightness(.92)}
@media (max-width:520px){ .contact .ctas{flex-direction:column; align-items:flex-start} }

/* podstránky */
.page{padding:48px 0 64px; max-width:72ch}
.page h1{font-size:var(--fs-h1); font-weight:800; margin-bottom:16px}
.page ul{padding-left:1.2em; margin:0 0 .9em}
.page li{margin-bottom:.5em}
/* 26. 10. 2026: nepoužito, štítky NÁVRH odstraněny v H-9 */
.draft-note{display:inline-block; font:600 var(--fs-small)/1.4 var(--display); background:var(--hi); color:var(--hi-ink); padding:4px 12px; border-radius:8px; margin:0 0 24px}

/* patička na všech stránkách: 4 sloupce, do 900 px 2 × 2, do 560 px pod sebou (H-7, H-8) */
.site-footer{padding:40px 0 56px; border-top:1px solid var(--grid); font:400 var(--fs-body)/var(--lh-body) var(--display); color:var(--muted)}
.site-footer p{margin:0 0 .6em}
.site-footer a{color:var(--ink)}
.foot-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px 32px}
.foot-head{font-weight:800; color:var(--ink)}
/* svislý seznam: jedna položka na řádek, vlevo, rozestup řádků daný jen prokladem jako v adrese */
.foot-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0}
.foot-list li{margin:0; padding:0}
.foot-list a, .foot-list .linkbtn{white-space:nowrap; text-align:left}
.foot-list a[href^="mailto:"]{white-space:normal; overflow-wrap:anywhere}
.foot-copy{margin:28px 0 0; padding-top:18px; border-top:1px solid var(--grid); font-size:var(--fs-small)}
@media (max-width:900px){ .foot-cols{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot-cols{grid-template-columns:1fr} }
/* 26. 10. 2026: nepoužito, patička je od H-7 ve sloupcích (.foot-head). */
.foot-name{font-weight:800; color:var(--ink)}
/* 26. 10. 2026: nepoužito, patička je od H-7 ve sloupcích (.foot-list). */
.foot-links{list-style:none; display:flex; flex-wrap:wrap; gap:6px 0; margin:14px 0 0; padding:0}
/* 26. 10. 2026: nepoužito, patička je od H-7 ve sloupcích (.foot-list). */
.foot-links li + li::before{content:"·"; margin:0 10px}
.linkbtn{font:inherit; color:var(--ink); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer}

/* lišta cookies (jen když je vyplněné GA_ID v js/consent.js) */
.cookie-bar{position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:720px; margin:0 auto; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; background:var(--sheet); color:var(--ink); border:1.5px solid var(--grid); border-top:4px solid var(--hi); border-radius:12px; padding:18px 20px; box-shadow:0 8px 30px rgba(0,0,0,.18); font:400 var(--fs-small)/1.5 var(--display)}
.cookie-bar p{margin:0; flex:1 1 320px}
.cookie-actions{display:flex; flex-wrap:wrap; gap:10px}
.cookie-bar .btn{padding:11px 18px}