/* ------------------------------------------------------------------
   Písma hostujeme sami (ne z Google Fonts): kvůli GDPR a kvůli tomu,
   aby je šlo vložit do exportovaného obrázku a PDF.
   Soubory stáhne scripts/stahnout-pisma.mjs. Obě písma jsou proměnlivá,
   takže jeden soubor pokrývá všechny tloušťky 200–800.
   Podmnožina latin-ext je ta, ve které jsou ě š č ř ž ů.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url('/pisma/bricolage-grotesque-latin-ext.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:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url('/pisma/bricolage-grotesque-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/pisma/plus-jakarta-sans-latin-ext.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:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/pisma/plus-jakarta-sans-latin.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;
}

/* Layout: full-bleed photo hero, floating "today" card, offset photo pair, menu band, photo strip, services, contact, dark footer.
   Single deliberate light look (the restaurant's brand: logo blue + raspberry on cool off-white). */
:root{
  --ink:#18224A; --ink-2:#3F476A; --muted:#5E6483; --line:#E3E6F0; --line-2:#D5DAEA;
  --bg:#F6F7FB; --paper:#FFFFFF; --tint:#E9EDFA; --ph:#E6EAF6;
  --blue:#2747B5; --rasp:#C8336F; --green:#1F6B40; --green-bg:#E4F3EA;
  --night:#18224A; --night-2:#22306A; --night-text:#C9CFE6; --on-dark:#FFFFFF;
  --display:'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body:'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
a{color:var(--blue)}a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:3px solid var(--rasp);outline-offset:3px}
h1,h2,h3{text-wrap:balance}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px))}
.narrow{max-width:940px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.display{font-family:var(--display);font-weight:800;letter-spacing:-.01em;margin:0}
.veg{font-size:12px;font-weight:700;color:var(--green);background:var(--green-bg);padding:4px 10px;border-radius:999px;white-space:nowrap}

/* draft ribbon */
.draft{background:var(--ink);color:var(--night-text);font-size:13px;text-align:center}
.draft .wrap{padding-block:8px}
.draft strong{color:var(--on-dark)}

/* hero */
.hero{position:relative;min-height:min(820px, 92vh);min-height:max(620px, min(820px, 92vh));overflow:hidden;background:var(--night);color:var(--on-dark);display:flex;flex-direction:column}
.hero .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity 1.6s ease,transform 7s ease-out}
.hero .slide.on{opacity:1;transform:scale(1.08)}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,20,45,.62) 0%,rgba(14,20,45,.28) 38%,rgba(14,20,45,.40) 62%,rgba(14,20,45,.84) 100%)}
.hero > .layer{position:relative;z-index:2}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:22px}
.brand{display:flex;align-items:center;gap:12px;color:var(--on-dark);text-decoration:none}
.brand:hover{color:var(--on-dark)}
.brand span{font-family:var(--display);font-size:26px;font-weight:800;line-height:1}
.nav{display:flex;flex-wrap:wrap;gap:8px 10px}
.nav a{padding:12px 20px;border:1.5px solid rgba(255,255,255,.85);color:var(--on-dark);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .25s ease,color .25s ease}
.nav a:hover{background:var(--on-dark);color:var(--ink)}
.nav a.call{background:var(--rasp);border-color:var(--rasp)}
.nav a.call:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--rasp)}
.heroin{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;padding-block:40px 56px}
.kicker{font-size:15px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#E6E9F5}
.hero h1{max-width:13em;font-size:clamp(42px,7vw,92px);line-height:1;letter-spacing:-.02em}
.pill{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;padding:12px 22px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.45);border-radius:999px;font-size:15px;font-weight:600;backdrop-filter:blur(6px)}
.pill b{font-family:var(--display);font-size:26px;font-weight:800;background:var(--rasp);padding:4px 14px;border-radius:999px}
.btn-light{padding:16px 30px;background:var(--on-dark);color:var(--ink);font-weight:700;text-decoration:none;letter-spacing:.04em;transition:transform .25s ease}
.btn-light:hover{color:var(--ink);transform:translateY(-2px)}
.herofoot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding-block:0 40px}
.facts{display:flex;flex-wrap:wrap;gap:12px 48px;font-size:16px;line-height:1.55}
.dots{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cap{font-size:14px;font-weight:600;color:#E6E9F5;min-height:21px}
.bars{display:flex;gap:8px}
.bars button{width:52px;height:44px;padding:0;border:0;background:none;display:flex;align-items:center;cursor:pointer}
.bars .track{display:block;width:100%;height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.35)}
.bars .fill{display:block;height:100%;width:0;background:var(--on-dark)}
.cue{position:absolute;z-index:2;left:50%;bottom:0;width:1px;height:72px;overflow:hidden;background:rgba(255,255,255,.25)}
.cue span{display:block;width:1px;height:100%;background:var(--on-dark);animation:cue 2.2s cubic-bezier(.6,0,.3,1) infinite}

/* today card */
.today{position:relative;z-index:3;max-width:860px;margin:-64px auto 0}
.card{background:var(--paper);border-radius:28px;padding:30px 34px;box-shadow:0 24px 60px rgba(24,34,74,.14);display:flex;flex-direction:column}
.cardhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;margin-bottom:6px}
.cardhead h2{font-size:30px}
.cardhead span{font-weight:600;color:var(--muted)}
.row{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.row .name{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:17px;font-weight:600}
.row .price{font-weight:700;color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums}
.card .more{margin-top:18px;font-weight:700;text-decoration:none;align-self:flex-start}

/* about + photos */
.about{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;padding-block:88px 40px;max-width:1100px}
.rule{display:block;width:1px;height:96px;background:var(--ink)}
.about p{margin:0;font-size:clamp(23px,3vw,38px);font-weight:300;line-height:1.4;color:var(--ink-2)}
.pair{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;padding-block:32px 96px}
.pair figure{min-width:0;margin:0;display:flex;flex-direction:column;gap:14px}
.pair figure:first-child{flex:7 1 420px}
.pair figure:last-child{flex:5 1 320px;margin-top:160px}
.pair img{display:block;width:100%;object-fit:cover}
.pair figure:first-child img{height:640px;object-position:center 60%}
.pair figure:last-child img{height:520px;object-position:center 55%}
.pair figcaption{font-size:15px;color:var(--muted)}

/* weekly menu */
.menu{background:var(--paper);border-block:1px solid var(--line)}
.menu .wrap{padding-block:80px;display:flex;flex-direction:column;gap:28px}
.menuhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.menuhead h2{font-size:clamp(32px,4vw,48px)}
.menuhead .note{font-size:15px;font-weight:600;color:var(--ink-2)}
.menuhead .note strong,.eyebrow.r{color:var(--rasp)}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{flex:1 1 110px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid var(--line-2);background:var(--paper);color:var(--ink);border-radius:16px;font-family:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.tab small{font-size:13px;font-weight:500;color:var(--muted)}
.tab:hover{border-color:var(--blue)}
.tab[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:var(--on-dark)}
.tab[aria-current="page"] small{color:var(--on-dark)}
.dish{display:flex;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);animation:rise .45s ease both}
.dish .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.dish .kind{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dish .nm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:20px;font-weight:600;line-height:1.35}
.dish .alg{font-size:14px;color:var(--muted)}
.dish .pr{font-family:var(--display);font-size:24px;font-weight:800;color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums}
.algbtn{align-self:flex-start;min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--bg);color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.alglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 24px;background:var(--bg);border-radius:18px;padding:20px 24px;margin:0;list-style:none}
.alglist[hidden]{display:none}  /* samotné hidden nestačí – display:grid výše je silnější */
.alglist li{font-size:15px;color:var(--ink-2)}
.alglist b{color:var(--ink);display:inline-block;min-width:24px}

/* photo strip */
.strip{position:relative;height:460px;overflow:hidden;background:var(--night)}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.strip .shade{position:absolute;inset:0;background:rgba(14,20,45,.45)}
.strip p{position:relative;height:100%;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:var(--display);font-size:clamp(30px,4.4vw,56px);font-weight:800;line-height:1.08;color:var(--on-dark)}

/* services */
.services{padding-block:88px;display:flex;flex-direction:column;gap:32px}
.services h2,.contact h2{font-size:clamp(32px,4vw,44px)}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.svc div{background:var(--paper);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease}
.svc div:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(24,34,74,.08)}
.svc .ic{width:56px;height:56px;border-radius:16px;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center}
.svc h3{margin:0;font-size:20px;font-weight:700}
.svc p{margin:0;color:var(--ink-2);line-height:1.55}

/* contact */
.contact{background:var(--paper);border-top:1px solid var(--line)}
.contact .wrap{padding-block:80px;display:flex;flex-wrap:wrap;gap:40px}
.contact .info{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:28px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.cgrid div{display:flex;flex-direction:column;gap:6px}
.cgrid .eyebrow{color:var(--muted)}
.cgrid .v{font-size:18px;font-weight:600;line-height:1.5}
.cgrid .s{font-size:14px;color:var(--muted)}
.ig{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;border:2px solid var(--rasp);color:var(--rasp);font-weight:700;text-decoration:none;transition:background .25s ease,color .25s ease}
.ig:hover{background:var(--rasp);color:var(--on-dark)}
.map{flex:1 1 420px;min-width:0;min-height:380px;border-radius:24px;background:var(--ph);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#3F4A78;text-align:center;padding:24px}

/* footer */
footer{background:var(--night);color:var(--on-dark);overflow:hidden}
.pay{padding-block:44px 48px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:22px}
.pay .eyebrow{text-align:center;color:var(--night-text);letter-spacing:.22em}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mtrack{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
.mtrack ul{list-style:none;margin:0;padding:0 14px 0 0;display:flex;gap:14px}
.chip{display:flex;align-items:center;gap:12px;padding:14px 24px;border:1.5px solid rgba(255,255,255,.25);border-radius:999px;white-space:nowrap;font-size:17px;font-weight:600;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.chip:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);transform:translateY(-3px)}
.chip svg{stroke:var(--rasp);flex:none}
.fmain{padding-block:80px 40px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.logo{position:relative;width:156px;height:156px;display:flex;align-items:center;justify-content:center}
.logo .ring{position:absolute;inset:0;animation:spin 24s linear infinite}
.fname{font-family:var(--display);font-size:clamp(36px,4vw,48px);font-weight:800;line-height:1}
.fslogan{font-size:18px;color:var(--night-text)}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;margin-top:8px}
.flink{color:var(--on-dark);text-decoration:none;font-weight:600;padding:10px 0;background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;background-repeat:no-repeat;background-position:0 85%;transition:background-size .3s ease}
.flink:hover{color:var(--on-dark);background-size:100% 1.5px}
.faddr{font-size:15px;color:var(--night-text)}
.fbar{padding-block:20px 28px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;font-size:14px;color:var(--night-text)}
.giant{font-family:var(--display);font-weight:800;font-size:clamp(80px,17vw,250px);line-height:.8;letter-spacing:-.03em;text-align:center;white-space:nowrap;color:var(--night-2);margin-bottom:-.1em;user-select:none}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes reveal{from{opacity:.15;transform:translateY(32px)}to{opacity:1;transform:none}}
.in{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
}
@media (max-width:700px){
  .pair figure:last-child{margin-top:0}
  .pair figure:first-child img{height:440px}
  .pair figure:last-child img{height:380px}
  .card{padding:24px 22px}
  .strip{height:340px}
  .dots{align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01s !important}
  .hero .slide.on{transform:none}
  .mtrack{flex-wrap:wrap;justify-content:center;width:auto}
  .mtrack ul{flex-wrap:wrap;justify-content:center}
  .mtrack .dup{display:none}
}

/* ==================================================================
   Ovládání lístku: šipky, dny, zavřeno, přepínač celého týdne.
   Všechny dny jsou v HTML vždycky (kvůli Googlu a kvůli lidem bez
   JavaScriptu); v režimu jednoho dne se ostatní jen schovají.
   ================================================================== */
.denpres{display:flex;align-items:stretch;gap:8px}
.denpres[hidden]{display:none}  /* bez tohohle by schování nefungovalo – display:flex je silnější než výchozí [hidden] */
.denpres .tabs{flex:1 1 auto;min-width:0}
.sipka{flex:none;width:56px;min-height:56px;display:flex;align-items:center;justify-content:center;border:2px solid var(--line-2);background:var(--paper);color:var(--ink);border-radius:16px;font-family:inherit;font-size:22px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.sipka:hover{border-color:var(--blue);color:var(--ink)}
.sipka[aria-disabled="true"]{opacity:.35;pointer-events:none}

.den{display:flex;flex-direction:column}
.den + .den{margin-top:40px}
.dennazev{font-size:clamp(24px,3.2vw,32px);margin-bottom:4px}
.dennazev small{display:block;font-family:var(--body);font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
#dny.jeden .den:not(.aktivni){display:none}
#dny.jeden .den + .den{margin-top:0}

/* zavřený den */
.zavreno{display:flex;flex-direction:column;gap:6px;background:var(--bg);border:2px dashed var(--line-2);border-radius:18px;padding:28px 24px;margin-top:12px;text-align:center}
.zavreno strong{font-family:var(--display);font-size:22px;font-weight:800}
.zavreno span{color:var(--ink-2)}

/* týden ještě není venku */
.nezverejneno{background:var(--bg);border-radius:22px;padding:36px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.nezverejneno p{margin:0;font-size:18px;color:var(--ink-2);max-width:34em;line-height:1.55}
.nezverejneno strong{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--ink)}

/* tlačítka pod lístkem */
.podlistkem{display:flex;flex-wrap:wrap;gap:10px}
.prepinac{align-self:flex-start;min-height:44px;padding:10px 20px;border-radius:999px;border:1.5px solid var(--blue);background:var(--paper);color:var(--blue);font-family:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;transition:background .2s ease,color .2s ease}
.prepinac:hover{background:var(--blue);color:var(--on-dark)}

.tab .zkratka{display:none}

@media (max-width:700px){
  /* Pět plných názvů dnů se na mobil nevejde do jedné řádky. Necháme
     jen zkratku Po–Pá; celý název s datem je hned pod tím v nadpisu dne. */
  .denpres{gap:6px}
  .sipka{width:44px;font-size:20px}
  .tabs{gap:6px}
  .tab{flex:1 1 0;min-width:0;min-height:52px;font-size:15px}
  .tab .plny,.tab small{display:none}
  .tab .zkratka{display:block}
}