/* Klasyk – Burgers & Cocktails · styles.css
   Wartości 1:1 z projektu (Klasyk.dc.html). Wariant telefonu: @media (max-width: 759px). */

/* @font-face:start – generowane przez `npm run czcionki`, nie edytować ręcznie */
@font-face{font-family:'Alfa Slab One';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/alfa-slab-one-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:'Alfa Slab One';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/alfa-slab-one-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:'DM Serif Display';font-style:italic;font-display:swap;font-weight:400;src:url(fonts/dm-serif-display-latin-ext-400-italic.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:'DM Serif Display';font-style:italic;font-display:swap;font-weight:400;src:url(fonts/dm-serif-display-latin-400-italic.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:'Big Shoulders Display';font-style:normal;font-display:swap;font-weight:900;src:url(fonts/big-shoulders-display-latin-ext-900-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:'Big Shoulders Display';font-style:normal;font-display:swap;font-weight:900;src:url(fonts/big-shoulders-display-latin-900-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:'Roboto Condensed';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/roboto-condensed-latin-ext-500-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:'Roboto Condensed';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/roboto-condensed-latin-500-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:'Roboto Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/roboto-condensed-latin-ext-700-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:'Roboto Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/roboto-condensed-latin-700-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:'Roboto Condensed';font-style:normal;font-display:swap;font-weight:800;src:url(fonts/roboto-condensed-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:'Roboto Condensed';font-style:normal;font-display:swap;font-weight:800;src:url(fonts/roboto-condensed-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:end */

:root{
  --bg:#121110;
  --fg:#f3e9d8;
  --green:#5cb833;
  --red:#d7262e;
  --px:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --slab:'Alfa Slab One',serif;
  --serif:'DM Serif Display',serif;
  --cond:'Roboto Condensed',sans-serif;
}

/* ---------- Baza ---------- */
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--fg);font-family:var(--cond);-webkit-font-smoothing:antialiased}
a{color:var(--fg);text-decoration:none}
a:where(:hover){color:var(--green)} /* specyficzność jak „a” – klasy z własnym kolorem wygrywają (jak style inline we wzorcu) */
*{box-sizing:border-box}
::selection{background:var(--green);color:var(--bg)}
img{height:auto}
picture{display:contents} /* <picture> (AVIF/WebP) nie tworzy pudełka – układ liczy się od samego <img> */
picture>source{display:none} /* inaczej <source> staje się pustym elementem flex (dodatkowy odstęp w galerii) */
input,select,textarea{font-family:inherit}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-80px;z-index:100;background:var(--green);color:var(--bg);font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:12px 20px;border-radius:999px}
.skip:focus{top:12px;color:var(--bg)}

@keyframes kglitchA{0%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}20%{transform:translate(-4px,1px);clip-path:inset(10% 0 62% 0)}40%{transform:translate(3px,-2px);clip-path:inset(48% 0 20% 0)}60%{transform:translate(-2px,2px);clip-path:inset(72% 0 8% 0)}80%{transform:translate(4px,0);clip-path:inset(28% 0 44% 0)}}
@keyframes kglitchB{0%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}25%{transform:translate(4px,-1px);clip-path:inset(60% 0 14% 0)}45%{transform:translate(-3px,2px);clip-path:inset(18% 0 54% 0)}65%{transform:translate(2px,-2px);clip-path:inset(38% 0 38% 0)}85%{transform:translate(-4px,1px);clip-path:inset(4% 0 78% 0)}}
@keyframes kflick{0%,100%{opacity:1}42%{opacity:1}44%{opacity:.4}46%{opacity:1}62%{opacity:.75}64%{opacity:1}}
@keyframes kpulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.09)}}
@keyframes kspin{to{transform:rotate(360deg)}}
@keyframes kmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes kup{from{transform:translateY(105%)}to{transform:none}}
@keyframes kzoom{from{transform:scale(1.2)}to{transform:scale(1.04)}}

/* ---------- Wspólne elementy ---------- */
.h-display{margin:0;font-family:var(--slab);font-weight:400}
.serif-accent{font-family:var(--serif);font-style:italic;color:var(--green)}
.eyebrow{font-weight:800;color:var(--green);letter-spacing:.14em;text-transform:uppercase;font-size:15px}
.tags{display:flex;gap:10px;flex-wrap:wrap}
.tag{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:6px 12px}
.tag--red{background:var(--red);color:#fff}
.tag--cream{background:var(--fg);color:var(--bg)}
.tag--dark{align-self:flex-start;background:var(--bg);color:var(--fg)}
.pill{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:8px 14px;border-radius:999px}
.pill--green{background:var(--green);color:var(--bg)}
.pill--cream{background:var(--fg);color:var(--bg)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;font-size:17px}
.btn--green{background:var(--green);color:var(--bg);padding:18px 30px}
.btn--outline{border:2px solid var(--fg);padding:16px 28px}
.btn--green:hover,.btn--outline:hover{background:var(--fg);color:var(--bg)}

/* Odznaka „Burger Roku” */
.ring{position:relative;width:100%;height:100%;border-radius:50%}
.ring svg{position:absolute;inset:0;width:100%;height:100%;animation:kspin 16s linear infinite}
.ring text{font-family:var(--cond);font-weight:800;font-size:17px;letter-spacing:3.2px}
.ring__star{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--slab);font-size:30px}
.ring--green{background:var(--green)}
.ring--green text{fill:var(--bg)}
.ring--green .ring__star{color:var(--bg)}
.ring--dark{background:var(--bg)}
.ring--dark text{fill:var(--fg)}
.ring--dark .ring__star{color:var(--fg)}

/* Animacje wejścia (data-rv → IntersectionObserver w main.js) */
@media (prefers-reduced-motion:no-preference){
  .js [data-rv]{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js [data-rv="100"]{transition-delay:100ms}
  .js [data-rv="150"]{transition-delay:150ms}
  .js [data-rv="200"]{transition-delay:200ms}
  .js [data-rv="250"]{transition-delay:250ms}
  .js [data-rv="300"]{transition-delay:300ms}
  .js [data-rv].is-in{opacity:1;transform:none}
}

/* ---------- Menu pełnoekranowe (telefon) ---------- */
html.menu-open{overflow:hidden}
.mmenu{position:fixed;inset:0;z-index:49;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:96px 24px 40px;overflow-y:auto}
.mmenu a{font-family:var(--slab);font-size:clamp(34px,10vw,48px);line-height:1.15;color:var(--fg);padding:6px 0}
.mmenu .mmenu__call{margin-top:28px;align-self:flex-start;border:2px solid var(--green);color:var(--green);font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:14px 24px;border-radius:999px;font-size:16px;line-height:normal}

/* ---------- Nawigacja ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--px);transition:background .3s}
.nav.is-scrolled{background:rgba(18,17,16,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav__logo{display:flex;margin-left:clamp(8px,3vw,48px)}
.nav__logo img{height:60px;width:auto;filter:invert(1);mix-blend-mode:screen}
.nav__links{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:flex-end}
.nav__list{display:flex;gap:22px;font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap}
.nav__cta{background:var(--green);color:var(--bg);font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:12px 22px;border-radius:999px;font-size:15px}
.nav__cta:hover{background:var(--fg);color:var(--bg)}
.burger{display:none;flex:none;width:48px;height:48px;border-radius:50%;border:none;background:var(--green);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2.5px;background:var(--bg);border-radius:2px;transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr))}
.hero__content{display:flex;flex-direction:column;justify-content:center;gap:30px;padding:130px var(--px) clamp(40px,6vw,80px);position:relative;z-index:2}
.hero__title{margin:0;font-family:var(--slab);font-weight:400;font-size:clamp(44px,6vw,115px);line-height:.94;position:relative;z-index:3}
/* Linia po linii – zapas na ogonki liter (ą, ę, y, j) */
.hero__title .line{display:block;overflow:hidden;padding-bottom:.25em;margin-bottom:-.2em}
.hero__title .line>span{display:block;animation:kup 1s 250ms var(--ease) both}
.hero__title .l2>span{animation-delay:380ms}
.hero__title .l3>span{animation-delay:510ms;font-size:.904em}
.hero__lead{margin:0;font-size:clamp(19px,1.5vw,22px);line-height:1.5;max-width:40ch;color:rgba(243,233,216,.8)}
.hero__media{position:relative;inset:0;min-height:70vh;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kzoom 2.6s var(--ease) both}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,#121110 0%,rgba(18,17,16,0) 30%),linear-gradient(0deg,#121110 0%,rgba(18,17,16,0) 25%)}
.hero__badge{position:absolute;right:clamp(16px,4vw,56px);bottom:clamp(30px,5vw,70px);width:160px;height:160px}

/* ---------- Pasek przewijany ---------- */
.marquee{background:var(--green);color:var(--bg);padding:18px 0;overflow:hidden;transform:rotate(-1.5deg);margin:10px -20px 0}
.marquee__track{display:flex;width:max-content;animation:kmarq 30s linear infinite}
.marquee__seg{display:flex;gap:40px;padding-right:40px;align-items:center}
.marquee__seg>span{display:flex;gap:40px;align-items:center;font-family:var(--slab);font-size:34px;text-transform:uppercase;white-space:nowrap}
.marquee__seg>span>span{font-size:.6em}

/* ---------- Kategorie (panele) ---------- */
.cats{padding:clamp(90px,10vw,150px) var(--px) clamp(60px,7vw,100px)}
.cats__head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:44px}
.cats__head h2{font-size:clamp(42px,5.4vw,84px);line-height:.95;max-width:13ch}
.cats__head p{margin:0;font-size:19px;line-height:1.5;max-width:36ch;color:rgba(243,233,216,.7)}
.panels{display:flex;flex-direction:row;gap:12px;height:clamp(460px,64vh,620px)}
.panel{position:relative;flex:1 1 0;min-width:0;min-height:0;border-radius:26px;overflow:hidden;cursor:pointer;transition:flex .7s cubic-bezier(.7,0,.2,1)}
.panel.is-open{flex:4 1 0}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--ease)}
.panel.is-open img{transform:scale(1)}
.panel__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,17,16,.94) 0%,rgba(18,17,16,.15) 60%)}
.panel__num{position:absolute;top:20px;left:22px;font-weight:800;font-size:15px;letter-spacing:.12em;color:var(--green)}
.panel__body{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:14px}
.panel__title{margin:0;font-family:var(--slab);font-weight:400;font-size:clamp(28px,2.8vw,46px);line-height:1;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg)}
.panel.is-open .panel__title{writing-mode:horizontal-tb;transform:none}
.panel__more{display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(20px);transition:opacity .5s .2s,transform .5s .2s;max-width:440px}
.panel.is-open .panel__more{opacity:1;transform:none}
.panel__more p{margin:0;font-size:17px;line-height:1.5;color:rgba(243,233,216,.82)}
.panel__more a{align-self:flex-start;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--green)}

/* ---------- Mielimy sami ---------- */
.grind{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;padding:clamp(70px,9vw,130px) var(--px)}
.grind__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.grind__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,17,16,.94) 0%,rgba(18,17,16,.55) 55%,rgba(18,17,16,.2) 100%)}
.grind__body{position:relative;max-width:680px;min-width:0;width:100%;display:flex;flex-direction:column;gap:26px}
.grind__body h2{font-size:clamp(46px,6.4vw,100px);line-height:.92}
.grind__body p{margin:0;font-size:20px;line-height:1.55;max-width:44ch;color:rgba(243,233,216,.85)}
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,96px),1fr));gap:12px;max-width:620px}
.steps li{border-top:2px solid var(--green);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.steps__n{font-family:var(--slab);font-size:28px;color:var(--green)}
.steps__t{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:17px}

/* ---------- Menu ---------- */
.menu{padding:clamp(70px,8vw,120px) var(--px);background:#1a1816;border-radius:40px 40px 0 0}
.menu__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.menu__titles{display:flex;flex-direction:column;gap:2px}
.menu__titles h2{font-size:clamp(48px,7vw,104px);line-height:.9}
.menu__sub{font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.6vw,38px);line-height:1;color:var(--green);margin-top:-.25em}
.tabs{display:flex;gap:10px;flex-wrap:wrap;max-width:100%}
.tab{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:16px;padding:12px 22px;border-radius:999px;border:2px solid rgba(243,233,216,.3);background:transparent;color:var(--fg);cursor:pointer;transition:all .2s;flex:none;white-space:nowrap}
.tab[aria-selected="true"]{border-color:var(--green);background:var(--green);color:var(--bg)}
.menu__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,80px);align-items:start}
.js .menu__cat:not(.is-on){display:none}
.menu__note{margin:0 0 8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--green)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:20px 0;border-bottom:1px solid rgba(243,233,216,.12);transition:padding .25s,opacity .25s;opacity:.55}
.item.is-active{opacity:1;padding-left:16px}
.item__name{margin:0;font-family:var(--slab);font-weight:400;font-size:clamp(22px,2.1vw,27px);line-height:1.05;text-transform:uppercase}
.item__price{font-weight:800;font-size:21px;color:var(--green);white-space:nowrap}
.item__desc{grid-column:1/-1;margin:0;color:rgba(243,233,216,.7);font-size:17px;line-height:1.45;max-width:58ch}

/* Pokaz slajdów (crossfade co 2,5 s) */
.slides{position:relative;border-radius:28px;overflow:hidden;background:var(--bg)}
.menu__grid>.slides{position:sticky;top:100px;aspect-ratio:4/5}
.slides__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity 1s ease,transform 4.5s ease-out}
.slides__img.is-on{opacity:1;transform:scale(1.06)}
/* Przycisk = pole dotyku 24×24 px (minimum WCAG 2.5.8 / Lighthouse), kropka rysowana przez ::before.
   Kropki stoją w tym samym miejscu co wcześniej, tylko co 24 px zamiast co 17 px. Na bardzo wąskich ekranach przyciski zwężają się (flex). */
.slides__dots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:32.5px 0 10.5px;background:linear-gradient(0deg,rgba(18,17,16,.6),rgba(18,17,16,0))}
.slides__dot{position:relative;width:24px;height:24px;border:none;padding:0;cursor:pointer;background:none;transition:width .3s}
.slides__dot::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:9px;transform:translate(-50%,-50%);background:rgba(243,233,216,.55);transition:width .3s,background-color .3s}
.slides__dot::after{content:"";position:absolute;inset:-7px 0} /* jeszcze wyższe pole dotyku, bez zmiany wyglądu */
.slides__dot.is-on{width:41px}
.slides__dot.is-on::before{width:26px;background:var(--green)}
.slides__dot:focus-visible{outline:none}
.slides__dot:focus-visible::before{outline:2px solid var(--green);outline-offset:2px}

/* ---------- Zamówienia online ---------- */
.order{padding:clamp(70px,8vw,120px) var(--px);background:var(--bg)}
.order__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(36px,5vw,90px);align-items:center}
.order__media{position:relative;aspect-ratio:4/5;max-height:720px;border-radius:28px;overflow:hidden}
.order__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.order__pills{position:absolute;left:20px;bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.order__body{display:flex;flex-direction:column;gap:24px;min-width:0}
.order__body h2{font-size:clamp(44px,5.6vw,88px);line-height:.92}
.order__body p{margin:0;font-size:19px;line-height:1.5;max-width:42ch;color:rgba(243,233,216,.75)}
.orows{display:flex;flex-direction:column;margin-top:8px}
.orow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:22px 0;border-top:1px solid rgba(243,233,216,.15);color:var(--fg)}
.orow:hover{color:var(--green)}
.orow__n{font-weight:800;font-size:15px;letter-spacing:.12em;color:var(--green)}
.orow__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.orow__t{font-family:var(--slab);font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1;text-transform:uppercase;color:inherit}
.orow__d{font-size:16px;line-height:1.4;color:rgba(243,233,216,.65)}
.orow__arrow{flex:none;width:52px;height:52px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:22px;color:inherit}

/* ---------- Nagroda ---------- */
.award{background:var(--fg);color:var(--bg);padding:clamp(80px,10vw,140px) var(--px)}
.award__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(40px,6vw,96px);align-items:center}
.award__media{position:relative;aspect-ratio:1;max-width:540px}
.award__media img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.award__badge{position:absolute;right:-10px;top:-10px;width:150px;height:150px}
.award__body{display:flex;flex-direction:column;gap:26px}
.award__body h2{font-size:clamp(30px,4.8vw,70px);line-height:.96;text-wrap:balance}
.award__body p{margin:0;font-size:20px;line-height:1.5;max-width:44ch}
.checks{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.checks li{display:flex;align-items:center;gap:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:17px}
.checks li>span{flex:none;width:30px;height:30px;border-radius:50%;background:var(--green);color:var(--bg);display:flex;align-items:center;justify-content:center}

/* ---------- Cocktail bar ---------- */
.bar{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);background:#140f0b}
.bar__media{position:relative;min-height:70vh;overflow:hidden}
.bar__media img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform}
.bar__body{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(50px,7vw,110px) var(--px)}
.bar__body h2{font-size:clamp(46px,6vw,96px);line-height:.92}
.bar__body>p{margin:0;font-size:19px;line-height:1.5;color:rgba(243,233,216,.8)}
.drinks{display:flex;flex-direction:column}
.drink{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;padding:14px 0;border-top:1px solid rgba(243,233,216,.15)}
.drink__n{margin:0;font-family:var(--slab);font-weight:400;font-size:20px;text-transform:uppercase}
.drink__p{font-weight:800;font-size:18px;color:var(--green)}
.drink__d{grid-column:1/-1;font-size:15px;color:rgba(243,233,216,.6)}

/* ---------- Smasher Challenge ---------- */
.smasher{position:relative;overflow:hidden;background:#06070a;color:#e9ece8}
.smasher__grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(70% 60% at 30% 50%,#000 0%,transparent 78%);mask-image:radial-gradient(70% 60% at 30% 50%,#000 0%,transparent 78%);pointer-events:none}
.smasher__inner{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(20px,4vw,60px);align-items:center;padding:clamp(20px,3vw,45px) var(--px) clamp(30px,4vw,55px)}
.smasher__robot{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:clamp(280px,42vw,560px);align-self:end;margin-bottom:calc(-1 * clamp(30px,4vw,55px))}
.smasher__glow{position:absolute;left:50%;top:45%;width:min(80%,520px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(92,184,51,.22) 0%,transparent 62%);filter:blur(40px);animation:kpulse 3.6s ease-in-out infinite}
.smasher__robot img{position:relative;width:100%;max-width:620px;max-height:clamp(280px,42vw,560px);object-fit:contain;object-position:bottom;filter:contrast(1.08);animation:kflick 6s steps(1,end) infinite}
.smasher__fade{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(0deg,#06070a,rgba(6,7,10,0))}
.smasher__body{display:flex;flex-direction:column;gap:26px;min-width:0;position:relative;z-index:2}
.smasher__logo{position:relative;margin:0 auto;width:100%;max-width:560px}
.smasher__logo img{width:100%;height:auto}
.smasher__glitch-a,.smasher__glitch-b{position:absolute;left:0;top:0;mix-blend-mode:screen}
.smasher__glitch-a{opacity:.85;animation:kglitchA 3.4s steps(1,end) infinite}
.smasher__glitch-b{opacity:.55;animation:kglitchB 3.4s steps(1,end) infinite}
.smasher__lockup{position:relative;display:block;animation:kflick 6s steps(1,end) infinite}
.smasher__lead{margin:0 auto;font-family:var(--cond);font-weight:700;font-size:clamp(24px,2.6vw,36px);line-height:1.15;text-transform:uppercase;color:#fff;max-width:24ch;text-align:center}
.smasher__lead span{color:var(--green)}
.smasher__cta{align-self:center;display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:13.5px 24px;background:var(--green);color:#06070a;font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:16.5px;letter-spacing:.06em;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);box-shadow:0 0 22px rgba(92,184,51,.4)}
.smasher__cta:hover{background:#6bff33;color:#06070a}
.smasher__cta span{font-family:var(--cond);font-size:12px}

/* ---------- Rezerwacja ---------- */
.resv{padding:clamp(80px,9vw,140px) var(--px)}
.resv__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(36px,5vw,80px);align-items:start}
.resv__intro{display:flex;flex-direction:column;gap:24px}
.resv__intro h2{font-size:clamp(46px,6vw,92px);line-height:.92}
.resv__intro p{margin:0;font-size:19px;line-height:1.5;max-width:40ch;color:rgba(243,233,216,.75)}
.resv__intro p a{color:var(--green);font-weight:700}
.resv__card{background:#1c1a18;border-radius:28px;padding:clamp(24px,3vw,40px)}
/* Formularz z systemu rezerwacji (iframe z embed.js). Wygląd samego formularza ustawia się w panelu systemu:
   Ustawienia → Formularze → Wygląd (kopia ustawień i CSS: formularz-rezerwacji/ w repozytorium strony). */
.resv__card--widget{padding:clamp(10px,1.6vw,24px) clamp(4px,1.2vw,24px) clamp(14px,1.6vw,24px)}
.rezerwacje-widget iframe{display:block;width:100%;border:0}
.resv__alt{margin:10px 16px 0;font-size:14px;line-height:1.5;color:rgba(243,233,216,.6)}
.resv__alt a{color:var(--green);font-weight:700}

/* ---------- Galeria ---------- */
.gallery{padding:0 0 clamp(60px,8vw,120px);overflow:hidden}
.gallery__track{display:flex;width:max-content;animation:kmarq 60s linear infinite}
.gallery__seg{display:flex;gap:20px;padding-right:20px}
.gallery__seg img{flex:none;width:360px;height:360px;object-fit:cover;border-radius:24px}
.gallery__seg img.n{width:280px}
.gallery__seg img.r{border-radius:180px}

/* ---------- O nas / FAQ ---------- */
.about{padding:clamp(60px,8vw,120px) var(--px);background:#1a1816}
.about__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(36px,5vw,80px);align-items:start}
.about__text{display:flex;flex-direction:column;gap:20px}
.about__text h2{font-size:clamp(34px,4vw,56px);line-height:1}
.about__text p{margin:0;font-size:18px;line-height:1.65;color:rgba(243,233,216,.78)}
.faq{display:flex;flex-direction:column;interpolate-size:allow-keywords}
.faq details{border-top:1px solid rgba(243,233,216,.15)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none;color:var(--fg);font-family:var(--cond);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.02em}
.faq summary::-webkit-details-marker{display:none}
.faq__icon{flex:none;width:34px;height:34px;border-radius:50%;background:transparent;color:var(--fg);display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .2s}
.faq__icon::before{content:"+"}
.faq details[open] .faq__icon{background:var(--green);color:var(--bg)}
.faq details[open] .faq__icon::before{content:"\2212"}
.faq details p{margin:0 0 20px;font-size:17px;line-height:1.55;color:rgba(243,233,216,.75);max-width:56ch}
/* Płynne rozwijanie tam, gdzie przeglądarka to wspiera (Chrome 131+); gdzie indziej – natychmiastowe */
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* ---------- Kontakt ---------- */
.contact{padding:clamp(70px,9vw,130px) var(--px) clamp(40px,5vw,60px);background:var(--bg);border-top:1px solid rgba(243,233,216,.1)}
.contact__head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.contact__head h2{font-size:clamp(52px,8vw,128px);line-height:.88}
.contact__ctas{display:flex;gap:12px;flex-wrap:wrap}
.cbtn{display:inline-flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;font-size:16px}
.cbtn--green{background:var(--green);color:var(--bg);padding:18px 30px}
.cbtn--outline{border:2px solid rgba(243,233,216,.5);color:var(--fg);padding:16px 28px}
.cbtn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));border-top:1px solid rgba(243,233,216,.15);border-bottom:1px solid rgba(243,233,216,.15)}
.info__cell{display:flex;flex-direction:column;gap:12px;padding:32px 28px}
.info__cell:first-child{padding-left:0}
.info__cell:not(:last-child){border-right:1px solid rgba(243,233,216,.15)}
.info__label{font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--green)}
.info__big{font-family:var(--slab);font-weight:400;font-style:normal;font-size:clamp(30px,3vw,42px);line-height:1.05;color:var(--fg)}
a.info__big:hover{color:var(--green)}
.info__sub{font-size:16px;color:rgba(243,233,216,.6)}
.hours{margin:0;display:grid;grid-template-columns:auto auto;justify-content:start;gap:6px 24px;font-size:19px;font-weight:700}
.hours dt{color:rgba(243,233,216,.6)}
.hours dd{margin:0}
.map{position:relative;margin-top:clamp(28px,4vw,48px);border-radius:28px;overflow:hidden;height:clamp(320px,38vw,480px);background:#1a1917}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) grayscale(.6) contrast(.9)}
.map:has(>iframe):focus-within{outline:2px solid var(--green);outline-offset:3px} /* fokus w ramce mapy (sama ramka nie dostaje :focus-visible) */
/* Zastępstwo mapy do kliknięcia „Pokaż mapę Google” – ta sama wysokość co mapa (bez CLS), siatka „ulic” w CSS */
.map__zgoda{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;border:1px solid rgba(243,233,216,.12);border-radius:inherit;background:radial-gradient(circle at 50% 45%,rgba(92,184,51,.16),transparent 55%),linear-gradient(rgba(243,233,216,.05) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(243,233,216,.05) 1px,transparent 1px) 0 0/56px 56px,#1a1917}
.map__pin{width:36px;height:36px;fill:var(--green)}
.map__adres{margin:0;font-family:var(--slab);font-size:clamp(24px,2.6vw,36px);line-height:1.1}
.map__btn{border:0;font-family:inherit;cursor:pointer}
.map__uwaga{margin:0;max-width:52ch;font-size:15px;line-height:1.45;color:rgba(243,233,216,.7)}
.map__uwaga a{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.map__zgoda~.map__pill{display:none} /* znaczek „Klasyk · Rynek 10” dopiero na mapie – adres jest już w zastępstwie */
.map__pill{position:absolute;right:20px;top:20px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;pointer-events:none}
.map__pill span{background:var(--green);color:var(--bg);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:13px;padding:8px 14px;border-radius:999px}
.socials{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(36px,5vw,56px)}
.socials__list{display:flex;gap:clamp(18px,3vw,36px);flex-wrap:wrap;justify-content:center}
.socials a{font-family:var(--slab);font-weight:400;font-size:clamp(24px,2.4vw,34px);color:var(--fg);text-transform:uppercase}
.socials a:hover{color:var(--green)}

/* ---------- Nasze marki ---------- */
.brands{background:var(--bg);padding:clamp(50px,7vw,90px) var(--px) clamp(30px,4vw,50px);border-top:1px solid rgba(243,233,216,.1)}
.brands__head{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:clamp(24px,3vw,36px)}
.brands__line{flex:1;max-width:120px;height:1px;background:rgba(243,233,216,.2)}
.brands__title{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(14px,1.3vw,17px);color:var(--fg);text-align:center}
.brands__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin:0 auto;border-top:1px solid rgba(243,233,216,.12);border-bottom:1px solid rgba(243,233,216,.12)}
.brand{display:flex;align-items:center;justify-content:center;height:clamp(110px,14vw,170px);padding:0 clamp(12px,3vw,40px);opacity:.55;transition:opacity .25s,background .25s}
.brand+.brand{border-left:1px solid rgba(243,233,216,.12)}
a.brand:hover{opacity:1;background:rgba(92,184,51,.08)}
.brand img{max-height:clamp(34px,4.4vw,58px);max-width:100%;width:auto;height:auto;display:block}

/* ---------- Stopka ---------- */
.footer{background:var(--bg);color:rgba(243,233,216,.6);padding:32px var(--px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(18,17,16,.15)}
.footer span{font-weight:700;font-size:14px;width:100%;text-align:center;letter-spacing:.04em}

/* ---------- Dolny pasek (telefon) ---------- */
.mbar{display:none}

/* =================== Telefon (< 760 px) =================== */
@media (max-width:759px){
  .nav__links{display:none}
  .burger{display:flex}

  .hero__media{position:absolute;min-height:0}
  .hero__shade{background:linear-gradient(0deg,#121110 18%,rgba(18,17,16,.7) 50%,rgba(18,17,16,.25) 100%)}
  .hero__badge{top:96px;bottom:auto;width:108px;height:108px}

  .marquee__seg>span{font-size:24px}

  .panels{flex-direction:column;height:760px}
  .panel__title{writing-mode:horizontal-tb;transform:none}

  /* Menu: pokaz slajdów nad zakładkami (4:3), lista pod spodem */
  .menu{display:flex;flex-direction:column;align-items:flex-start}
  .menu__head,.menu__grid{display:contents}
  .menu__titles{order:1}
  .menu__grid>.slides{order:2;position:relative;top:auto;width:100%;aspect-ratio:4/3;margin-top:24px}
  .tabs{order:3;gap:6px;margin-top:24px}
  .tab{font-size:13px;padding:8px 12px}
  .menu__list{order:4;width:100%;margin-top:40px}

  .bar{grid-template-columns:minmax(0,1fr)}

  .smasher__robot{align-self:auto;margin-bottom:0}
  .smasher__body{margin-top:-100px}
  .smasher__cta{padding:9px 16px;font-size:11px}
  .smasher__cta span{font-size:8px}

  .gallery__seg img{width:216px;height:216px}
  .gallery__seg img.n{width:168px}
  .gallery__seg img.r{border-radius:108px}

  .info__cell,.info__cell:first-child{padding:26px 0}
  .info__cell:not(:last-child){border-right:none;border-bottom:1px solid rgba(243,233,216,.15)}

  .footer{padding-bottom:104px}

  .mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:7px;border-radius:999px;background:rgba(18,17,16,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(243,233,216,.15);transform:translateY(140%);transition:transform .4s var(--ease)}
  .mbar.is-visible{transform:none}
  .mbar a{display:flex;align-items:center;justify-content:center;height:50px;border-radius:999px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:15px}
  .mbar__call{border:1.5px solid rgba(243,233,216,.4);color:var(--fg)}
  .mbar .mbar__book{background:var(--green);color:var(--bg)}
}
@media (min-width:760px){
  .mmenu{display:none!important}
}

/* =================== Ograniczony ruch =================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .slides__img.is-on{transform:none}
}

/* =================== Stopka: polityka prywatności i ustawienia cookies (baner: zgody.js + zgody.css) =================== */
.footer__links{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px}
.footer__links a,.footer__links button{padding:4px 0;border:0;background:none;color:inherit;font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.footer__links a:hover,.footer__links button:hover{color:var(--fg)}

/* =================== Polityka prywatności (/polityka-prywatnosci/) =================== */
.legal{max-width:860px;margin:0 auto;padding:140px var(--px) 80px;display:flex;flex-direction:column;gap:16px}
.legal h1{font-size:clamp(40px,6vw,76px);line-height:.95;margin-bottom:4px}
.legal h2{margin:26px 0 0;font-family:var(--slab);font-weight:400;font-size:clamp(22px,2.2vw,28px);line-height:1.15;scroll-margin-top:110px} /* kotwice (np. #mapa) pod stałym paskiem */
.legal p,.legal li{margin:0;font-size:18px;line-height:1.6;color:rgba(243,233,216,.85)}
.legal ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.legal strong{color:var(--fg)}
.legal a{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.legal .legal__data{font-size:15px;color:rgba(243,233,216,.6)}
.legal__tabela{overflow-x:auto;border:1px solid rgba(243,233,216,.15);border-radius:14px}
.legal table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:1.45}
.legal th,.legal td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(243,233,216,.12)}
.legal tbody tr:last-child td{border-bottom:0}
.legal th{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--green)}
.legal td small{color:rgba(243,233,216,.6);font-size:13px}
@media (max-width:759px){
  .legal{padding-top:120px}
  .legal p,.legal li{font-size:17px}
  .nav>.nav__cta{padding:10px 14px;font-size:12px;letter-spacing:.04em;white-space:nowrap}
}