/* Restaurace U Berňáku – styly webu */
:root {
  --slate: #151211;      /* tmavá břidlice */
  --slate-2: #1d1917;
  --paper: #eeeae4;      /* světlý papír */
  --paper-2: #e4ded6;
  --red: #95010f;        /* červená z jejich titulky */
  --red-2: #b0101f;
  --ember: #e0782f;
  --text: #f1ebe4;
  --muted: #b3a79c;
  --ink: #1f1a17;
  --ink-muted: #6a5f57;
  --line-dark: #3a312c;
  --line-light: #d3cbc1;

  --head: "Oswald", "Arial Narrow", Impact, sans-serif;
  --script: "Caveat", "Segoe Script", cursive;
  --sans: "Open Sans", Arial, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 32' preserveAspectRatio='none'%3E%3Cpath d='M0 32 L0 6.7 L19 16.1 L34 15.2 L42 5.3 L52 18.9 L62 15.3 L87 11.1 L113 25.8 L126 3.5 L140 7.3 L158 10.7 L176 1.8 L188 11.7 L201 12.2 L215 16.6 L227 13.5 L251 9.2 L277 12.5 L298 12.8 L307 17.8 L325 9.6 L346 14.4 L362 21.0 L379 5.1 L399 21.9 L422 10.9 L442 13.9 L453 1.8 L475 7.4 L490 5.5 L506 19.9 L529 9.0 L544 19.9 L569 7.2 L582 12.7 L600 4.1 L616 14.2 L641 13.3 L660 5.0 L684 19.7 L707 11.2 L716 5.1 L726 6.9 L740 0.0 L750 10.9 L759 15.1 L770 10.3 L784 25.5 L810 12.7 L820 10.3 L832 6.9 L841 13.5 L851 4.5 L869 19.5 L889 10.6 L900 13.6 L922 8.0 L945 19.3 L968 17.3 L980 10.4 L988 8.4 L1001 21.2 L1017 21.8 L1042 8.0 L1054 7.7 L1073 19.1 L1090 18.4 L1100 20.4 L1122 12.6 L1133 10.0 L1155 11.1 L1171 17.0 L1182 4.5 L1206 6.6 L1229 15.8 L1243 6.4 L1251 15.7 L1269 11.8 L1292 7.8 L1305 8.3 L1324 11.5 L1334 10.4 L1350 20.3 L1366 13.0 L1383 4.3 L1399 4.1 L1422 12.5 L1440 14.0 L1440 32 Z'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; -webkit-text-size-adjust: 100%; background: var(--slate); }
body { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--slate); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* Typography */
.kicker { font-family: var(--script); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ember); display: block; margin-bottom: 10px; transform: rotate(-2deg); transform-origin: left; }
.h2 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: .005em; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; background: var(--red); color: #fff; text-decoration: none;
       font-family: var(--head); font-weight: 500; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; border: 0; cursor: pointer; transition: background .2s; }
.btn:hover { background: var(--red-2); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.btn--ghost:hover { background: #fff; color: var(--ink); }

/* Sections with texture + torn edges */
.sec { position: relative; background-color: var(--bg); background-image: var(--grain); }
.sec--dark { --bg: var(--slate); color: var(--text); }
.sec--paper { --bg: var(--paper); color: var(--ink); }
.torn-top::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 30px; z-index: 3; pointer-events: none;
  background-color: var(--bg);
  -webkit-mask: var(--torn) center / 100% 100% no-repeat; mask: var(--torn) center / 100% 100% no-repeat; }
.pad { padding: 112px 0; }
.torn-bottom::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 30px; z-index: 3; pointer-events: none; transform: scaleY(-1);
  background-color: var(--bg); -webkit-mask: var(--torn) center / 100% 100% no-repeat; mask: var(--torn) center / 100% 100% no-repeat; }

/* ---------- Header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.header.is-solid { background: rgba(21,18,17,.97); box-shadow: 0 1px 0 var(--line-dark); }
.header .wrap { display: flex; align-items: center; gap: 32px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: block; height: 78px; width: auto; aspect-ratio: 482 / 300; transition: height .3s; }
/* Velké logo nad úvodní fotkou, menu je zarovnané na jeho střed; po posunutí se hlavička zmenší */
.logo-link { flex: none; display: block; }
.header .logo-link .logo { height: 170px; }
.header.is-solid .logo-link .logo { height: 84px; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 30px; }
.nav a { font-family: var(--head); font-weight: 500; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-color: var(--red-2); }
.header .btn { padding: 12px 20px; font-size: 14px; }
.nav-cta { display: none; }   /* jen v mobilním menu */
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; color: #fff; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; margin: 6px 9px; background: currentColor; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; animation: slowzoom 22s ease-out forwards; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12,10,9,.92) 0%, rgba(12,10,9,.7) 42%, rgba(12,10,9,.15) 75%),
              linear-gradient(0deg, rgba(12,10,9,.85) 0%, rgba(12,10,9,0) 40%); }
@keyframes slowzoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero-content { padding-top: 230px; padding-bottom: 56px; }
.hero h1 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(52px, 8.2vw, 124px); line-height: 1.06; max-width: 9.6em; }
.hero h1 em { font-style: normal; color: var(--red-2); }
.hero-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; font-family: var(--head); font-weight: 500; font-size: clamp(22px, 2.6vw, 34px); text-transform: uppercase; letter-spacing: .03em; }
.pill { display: inline-block; width: 1.75em; height: 1.2em; overflow: hidden; vertical-align: middle; outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; transform: rotate(-3deg); }
.hero-line > span:nth-child(even) .pill { transform: rotate(3deg); }
.pill img { width: 100%; height: 100%; object-fit: cover; }
.hero-line > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.hero-line .amp { font-family: var(--script); text-transform: none; color: var(--ember); font-size: 1.2em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-info { position: relative; border-top: 1px solid rgba(255,255,255,.18); }
.hero-info ul { display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-info li { padding: 22px 0 48px; }
.hero-info li + li { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.18); }
.hero-info small { display: block; font-size: 13px; color: var(--muted); }
.hero-info strong { font-family: var(--head); font-weight: 500; font-size: 24px; letter-spacing: .03em; }
.hero-info a { text-decoration: none; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.framed { position: relative; }
.framed img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.framed::after { content: ""; position: absolute; inset: 16px; border: 2px solid rgba(255,255,255,.7); pointer-events: none; }
.framed .stamp { position: absolute; z-index: 2; right: -22px; bottom: -22px; width: 132px; height: 132px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; text-align: center;
                 font-family: var(--script); font-weight: 700; font-size: 24px; line-height: 1.05; transform: rotate(-10deg); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.about p.lead { font-size: 18px; margin-top: 20px; color: var(--ink); }
.about p + p { margin-top: 14px; color: var(--ink-muted); }
.checks { margin: 24px 0 34px; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.checks li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 96px; }
.tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s ease; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,8,7,.85) 0%, rgba(10,8,7,.25) 55%, rgba(10,8,7,.35) 100%); }
.tile::after { content: ""; position: absolute; inset: 14px; border: 2px solid rgba(255,255,255,.65); transition: inset .4s; }
.tile:hover img { transform: scale(1.07); }
.tile:hover::after { inset: 20px; }
.tile-body { position: absolute; left: 34px; right: 34px; bottom: 34px; }
.tile-body .kicker { font-size: 24px; margin-bottom: 4px; }
.tile-body b { display: block; font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: 32px; line-height: 1; }
.tile-body span:last-child { display: inline-block; margin-top: 12px; font-family: var(--head); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--red-2); }

/* ---------- Steaks ---------- */
.steak-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.steak-photo { position: relative; }
.steak-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.steak-photo::after { content: ""; position: absolute; inset: 16px; border: 2px solid rgba(255,255,255,.6); }
.steak-list { margin-top: 28px; }
.steak { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px dashed var(--line-dark); }
.steak b { font-family: var(--head); font-weight: 600; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.steak small { grid-column: 1; color: var(--muted); font-size: 14px; }
.steak .price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--head); font-weight: 600; font-size: 20px; color: #fff; background: var(--red); padding: 6px 12px; white-space: nowrap; }
.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.extras h3 { font-family: var(--head); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; color: var(--ember); margin-bottom: 6px; }
.extras p { font-size: 14px; color: var(--muted); }

/* ---------- Pinned word swap ---------- */
.pin { position: relative; height: calc(80vh * var(--words, 4)); background: #000; }
.pin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.pin-sticky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(var(--s, 1.05)); }
.pin-sticky::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.7)); }
.words { position: relative; width: 100%; height: 1.1em; font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(72px, 15vw, 220px); line-height: 1; text-align: center; }
.words span { position: absolute; inset: 0; opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .5s, transform .5s; text-shadow: 0 6px 40px rgba(0,0,0,.5); }
.words span.is-on { opacity: 1; transform: none; }
.pin-kicker { position: absolute; top: 22%; left: 0; right: 0; text-align: center; font-family: var(--script); font-weight: 700; font-size: 34px; color: var(--ember); }
.pin-dots { position: absolute; bottom: 9%; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.pin-dots i { width: 34px; height: 3px; background: rgba(255,255,255,.3); }
.pin-dots i.is-on { background: var(--red-2); }

/* ---------- Marquee band ---------- */
.band { background: var(--red); color: #fff; overflow: hidden; padding: 22px 0; }
.band-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.band-track span { font-family: var(--head); font-weight: 600; font-size: 30px; text-transform: uppercase; letter-spacing: .03em; padding: 0 26px; white-space: nowrap; }
.band-track span::before { content: "#"; margin-right: 18px; opacity: .6; font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sport ---------- */
.sport { --bg: #0e0c0b; }
.sport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.sport-photos { position: relative; height: 560px; }
.sport-photos figure { position: absolute; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.sport-photos figure img { width: 100%; height: 100%; object-fit: cover; }
.sport-photos figure::after { content: ""; position: absolute; inset: 12px; border: 2px solid rgba(255,255,255,.6); }
.sport-photos .p1 { left: 0; top: 0; width: 72%; height: 66%; }
.sport-photos .p2 { right: 0; bottom: 0; width: 62%; height: 56%; }
.sport-photos .tag { position: absolute; z-index: 2; padding: 8px 14px; background: var(--red); color: #fff; font-family: var(--head); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .06em; }
.sport-photos .t1 { left: 24px; top: 24px; }
.sport-photos .t2 { right: 24px; bottom: 24px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.08); padding: 6px 12px; margin-bottom: 18px; }
.live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red-2); box-shadow: 0 0 0 0 rgba(176,16,31,.7); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 10px rgba(176,16,31,0); } 100% { box-shadow: 0 0 0 0 rgba(176,16,31,0); } }
.sport-text p { color: var(--muted); font-size: 17px; margin-top: 20px; max-width: 480px; }
.sport-text .btn { margin-top: 30px; }
.sport-text .fine { margin-top: 12px; font-size: 14px; }

/* ---------- Menu ---------- */
.menu-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.menu-head p { color: var(--ink-muted); max-width: 380px; }
.menu-cols { columns: 2; column-gap: 80px; margin-top: 56px; }
.cat { break-inside: avoid; margin-bottom: 46px; }
.cat h3 { display: flex; align-items: center; gap: 14px; font-family: var(--head); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.cat h3::after { content: ""; flex: 1; height: 2px; background: var(--red); }
.item { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; }
.item .name small { display: block; color: var(--ink-muted); font-size: 14px; }
.item .dots { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted currentColor; opacity: .25; transform: translateY(-5px); }
.item .price { flex: none; font-family: var(--head); font-weight: 600; font-size: 18px; white-space: nowrap; color: var(--red); }
.item .qty { flex: none; width: 50px; color: var(--ink-muted); font-size: 14px; }
.item.has-desc .dots { align-self: flex-start; margin-top: 19px; transform: none; }
.item.has-desc .price { align-self: flex-start; }

/* ---------- Lunch ---------- */
.lunch-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.lunch-side p { color: var(--muted); margin-top: 18px; }
.lunch-time { margin-top: 26px; font-family: var(--head); font-size: 54px; font-weight: 700; line-height: 1; }
.lunch-time small { display: block; font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--muted); margin-bottom: 6px; }
.delivery { margin-top: 34px; padding: 22px 24px; border: 2px dashed rgba(255,255,255,.25); }
.delivery strong { display: block; font-family: var(--head); font-weight: 600; font-size: 22px; text-transform: uppercase; color: var(--ember); margin-bottom: 6px; }
.lunch-side .delivery p { margin: 0; font-size: 15px; }
.delivery a { color: #fff; font-weight: 700; }
.lunch-side .delivery .delivery-tel { margin-top: 8px; }
.lunch-card { background: #fff; color: var(--ink); padding: 40px 44px; box-shadow: 0 30px 60px rgba(0,0,0,.4); border-top: 6px solid var(--red); }
.lunch-card .date { font-family: var(--head); font-weight: 700; font-size: 26px; text-transform: uppercase; margin-bottom: 8px; }
.lunch-card .item { border-bottom: 1px solid #ece6df; padding: 13px 0; }
.lunch-card .item:last-child { border-bottom: 0; }

.menu-switch { display: inline-flex; margin-top: 36px; border: 2px solid var(--ink); }
.menu-switch button { font-family: var(--head); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: .06em; padding: 12px 34px; background: transparent; color: var(--ink); border: 0; cursor: pointer; }
.menu-switch button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.menu-switch + .menu-cols { margin-top: 44px; }
.menu-cols--drinks { margin-top: 44px; }
.menu-cols--drinks .item .qty { width: 58px; }
.alg-nums { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--ink-muted); letter-spacing: .02em; vertical-align: 1px; }
.steak .alg-nums, .extras .alg-nums { color: var(--muted); }
.allergen-legend { margin-top: 8px; border-top: 2px solid var(--ink); padding-top: 18px; }
.allergen-legend summary { cursor: pointer; font-family: var(--head); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.allergen-legend ol { list-style: none; columns: 3; column-gap: 32px; margin-top: 14px; font-size: 14px; color: var(--ink-muted); }
.allergen-legend li { padding: 3px 0; break-inside: avoid; }
.allergen-legend b { display: inline-block; width: 22px; color: var(--red); }
.lunch-tabs { display: flex; gap: 6px; overflow-x: auto; margin: -8px -8px 18px; padding: 8px; scrollbar-width: none; }
.lunch-tabs button { flex: none; font-family: var(--head); font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; padding: 9px 14px; border: 2px solid #e2dbd2; background: #fff; color: var(--ink); cursor: pointer; }
.lunch-tabs button small { font-family: var(--sans); font-size: 12px; font-weight: 400; text-transform: none; color: var(--ink-muted); }
.lunch-tabs button.is-today { border-color: var(--ember); }
.lunch-tabs button[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.lunch-tabs button[aria-selected="true"] small { color: rgba(255,255,255,.8); }
.today-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 13px; background: var(--ember); color: #fff; vertical-align: 4px; letter-spacing: .06em; }
.lunch-card .item.is-soup em { font-style: normal; font-family: var(--head); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--red); margin-right: 4px; }
.lunch-note { margin-top: 14px; padding: 10px 14px; background: #f6f1eb; font-size: 15px; }
.lunch-empty { color: var(--ink-muted); }
.lunch-alg { margin-top: 16px; font-size: 13px; color: var(--ink-muted); }
.lunch-alg a { color: var(--red); }

/* ---------- Events ---------- */
.events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.events-list { margin-top: 26px; display: grid; gap: 22px; }
.events-list h3 { font-family: var(--head); font-weight: 600; font-size: 22px; text-transform: uppercase; }
.events-list p { color: var(--ink-muted); margin-top: 2px; }
.events .btn { margin-top: 34px; }
.events-photo { position: relative; }
.events-photo img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 30% 50%; }
.events-photo::after { content: ""; position: absolute; inset: 16px; border: 2px solid rgba(255,255,255,.7); }

/* ---------- Footer / contact ---------- */
.contact { position: relative; padding: 140px 0 0; isolation: isolate; }
.contact > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,12,11,.55), rgba(14,12,11,.92)); }
.contact-card { background: rgba(21,18,17,.96); padding: 56px; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 48px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.contact-card h3 { font-family: var(--head); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: .06em; color: var(--ember); margin-bottom: 14px; }
.contact-card address { font-style: normal; font-size: 18px; line-height: 1.7; }
.contact-card address a { text-decoration: none; font-family: var(--head); font-size: 30px; font-weight: 600; letter-spacing: .02em; display: inline-block; margin-top: 8px; }
.hours { width: 100%; border-collapse: collapse; font-size: 15px; }
.hours td { padding: 7px 0; border-bottom: 1px solid var(--line-dark); }
.hours td:last-child { text-align: right; }
.hours tr.is-today td { color: var(--ember); font-weight: 700; }
.map { position: relative; height: 100%; min-height: 240px; overflow: hidden; }
.map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 53% 50%; }
.map a { position: absolute; right: 0; bottom: 0; background: rgba(255,255,255,.85); color: #333; font-size: 11px; padding: 2px 6px; text-decoration: none; }
.footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 40px 0; color: var(--muted); font-size: 14px; }
.footer-bar .logo { height: 70px; }
.footer-bar ul { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-bar a { text-decoration: none; font-family: var(--head); letter-spacing: .08em; text-transform: uppercase; }
.footer-bar a:hover { color: #fff; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bg, .band-track, .live::before { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pin { height: auto; }
  .pin-sticky { position: relative; height: 70vh; }
  .words { height: auto; font-size: clamp(48px, 9vw, 120px); }
  .words span { position: static; opacity: 1; transform: none; display: block; }
  .pin-dots { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .nav, .header .btn { display: none; }
  /* Mobilní menu přes celou obrazovku, položky na celou šířku */
  .nav-toggle { display: block; position: relative; z-index: 3; }
  .nav-toggle span { transition: transform .25s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .logo-link { position: relative; z-index: 2; }
  .nav.open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1; margin: 0; padding: 215px 0 calc(24px + env(safe-area-inset-bottom)); background-color: var(--slate); background-image: var(--grain); overflow-y: auto; animation: menu-in .25s ease-out; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  .nav.open ul { flex-direction: column; gap: 0; padding: 0; border-top: 1px solid var(--line-dark); }
  .nav.open li { border-bottom: 1px solid var(--line-dark); }
  .nav.open a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px var(--gutter); font-size: 26px; font-weight: 600; letter-spacing: .04em; border: 0; }
  .nav.open ul a::after { content: "›"; font-size: 30px; line-height: 1; color: var(--red-2); }
  .nav.open a:active, .nav.open a:hover { background: rgba(255,255,255,.05); }
  .nav.open .nav-cta { display: grid; gap: 10px; padding: 24px var(--gutter) 0; margin-top: auto; }
  .nav.open .nav-cta .btn { justify-content: center; font-size: 18px; padding: 18px; }
  .nav.open .nav-cta small { text-align: center; color: var(--muted); }
  .header:has(.nav.open) { background: transparent; box-shadow: none; }
  body.menu-open { overflow: hidden; }
  .about-grid, .steak-grid, .sport-grid, .lunch-grid, .events-grid { grid-template-columns: 1fr; gap: 56px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .menu-cols { columns: 1; }
  .allergen-legend ol { columns: 2; }
  .contact-card { grid-template-columns: 1fr 1fr; }
  .map { grid-column: 1 / -1; min-height: 280px; }
  .framed .stamp { right: 12px; }
}
@media (max-width: 640px) {
  .pad { padding: 80px 0; }
  html { scroll-padding-top: 96px; }
  .nav.open { padding-top: 140px; }
  .header .logo-link .logo { height: 104px; }
  .header.is-solid .logo-link .logo { height: 64px; }
  .header .wrap { padding-top: 8px; padding-bottom: 8px; }
  .hero-content { padding-top: 140px; padding-bottom: 36px; }
  .hero-info ul { grid-template-columns: 1fr 1fr; }
  .hero-info li { padding: 16px 0 18px; }
  .hero-info li:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-bottom: 44px; }
  .kicker { font-size: 24px; }
  .tiles { gap: 10px; margin-top: 64px; }
  .tile-body { left: 24px; right: 20px; bottom: 24px; }
  .tile-body b { font-size: 24px; }
  .tile::after { inset: 10px; }
  .extras { grid-template-columns: 1fr; gap: 16px; }
  .steak b { font-size: 19px; }
  .band-track span { font-size: 22px; }
  .sport-photos { height: 380px; }
  .lunch-card { padding: 26px 18px; }
  .lunch-card .item { font-size: 15px; }
  .item .qty { width: 42px; font-size: 13px; }
  .contact { padding-top: 90px; }
  .contact-card { grid-template-columns: 1fr; padding: 32px 22px; gap: 36px; }
  .allergen-legend ol { columns: 1; }
  .hero-line { gap: 8px 14px; }
}

/* ---------- Rezervace ---------- */
.page-res .header { background: rgba(21,18,17,.97); }
.res-hero { padding: 230px 0 70px; background: var(--slate) var(--grain); }
.res-hero p { max-width: 620px; margin-top: 16px; color: #d9cfc5; font-size: 18px; }
.res-hero a { color: #fff; font-weight: 700; }
.res-body { padding: 70px 0 110px; }
.res-form { display: grid; gap: 22px; max-width: 980px; }
.res-step { border: 0; background: #fff; padding: 28px 28px 24px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.res-step legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; font-family: var(--head); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 18px; }
.res-step legend span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; font-size: 20px; }
.res-step legend + * { clear: both; }
.res-grid3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.res-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rf { display: block; margin-bottom: 14px; }
.rf > span { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.rf small { font-weight: 400; color: var(--ink-muted); }
.rf input, .rf select, .rf textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--line-light); background: #fff; font: inherit; font-size: 16px; color: var(--ink); border-radius: 0; }
.rf textarea { min-height: 0; resize: vertical; }
.rf input:focus, .rf select:focus, .rf textarea:focus { border-color: var(--ink); outline: none; }
.res-hint { color: var(--ink-muted); font-size: 15px; }
.res-err { display: block; color: var(--red); font-weight: 700; font-size: 14px; font-style: normal; margin-top: 6px; }
.res-error { background: #fde8ea; color: var(--red); font-weight: 700; padding: 14px 18px; margin-bottom: 18px; }
.rcheck { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-muted); margin-top: 4px; }
.rcheck input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.res-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.res-btn { font-size: 18px; padding: 18px 40px; }
.res-btn:disabled { opacity: .7; cursor: progress; }
.res-submit p { color: var(--ink-muted); }
.is-loading .plan-wrap { opacity: .6; transition: opacity .2s; }

/* Plánek */
.plan-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 14px; font-size: 14px; color: var(--ink-muted); }
.plan-legend li { display: flex; align-items: center; gap: 8px; }
.lg { display: inline-block; width: 22px; height: 16px; border: 2px solid; }
.lg--free { background: #fff; border-color: #2f8a4f; }
.lg--sel { background: var(--red); border-color: var(--red); }
.lg--busy { background: repeating-linear-gradient(45deg, #cfc6bc 0 3px, #e7e0d8 3px 6px); border-color: #b9ada1; }
.lg--off { background: #f0ebe5; border-color: #d8cfc5; }
.plan-rooms { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.plan-rooms button { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 8px 14px; border: 2px solid var(--line-light); background: #fff; cursor: pointer; }
.plan-rooms button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan-wrap { background: #faf7f3; border: 2px solid var(--line-light); padding: 8px; }
.plan { display: block; width: 100%; height: auto; font-family: var(--head); }
.plan-floor { fill: #f4efe8; stroke: #d8cfc5; stroke-width: 2; }
.plan-fixture rect { fill: #3a312c; }
.plan-fixture--entrance rect { fill: none; stroke: #8a7e74; stroke-width: 3; stroke-dasharray: 10 8; }
.plan-fixture--screen rect { fill: #1d3f72; }
.plan-fixture text { fill: #fff; font-size: 22px; text-anchor: middle; text-transform: uppercase; letter-spacing: .08em; }
.plan-fixture--entrance text { fill: #6a5f57; }
.plan-table .chair { fill: #cfc4b8; }
.plan-table .top { fill: #fff; stroke: #2f8a4f; stroke-width: 4; }
.plan-table .num { font-size: 30px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.plan-table .seats { font-family: var(--sans); font-size: 15px; text-anchor: middle; fill: var(--ink-muted); }
.plan-table.is-free { cursor: pointer; }
.plan-table.is-free:hover .top, .plan-table.is-free:focus-visible .top { fill: #eef8f1; stroke-width: 6; }
.plan-table:focus { outline: none; }
.plan-table:focus-visible .top { stroke: var(--ember); }
.plan-table.is-busy .top { fill: url(#hatch); fill: #e3dbd2; stroke: #b9ada1; stroke-dasharray: 8 6; }
.plan-table.is-busy .num, .plan-table.is-busy .seats { fill: #9b8f85; }
.plan-table.is-small .top, .plan-table.is-big .top, .plan-table.is-offline .top { fill: #f0ebe5; stroke: #d8cfc5; }
.plan-table.is-small .num, .plan-table.is-big .num, .plan-table.is-offline .num { fill: #a99d92; }
.plan-table.is-selected .top { fill: var(--red); stroke: var(--red); }
.plan-table.is-selected .num, .plan-table.is-selected .seats { fill: #fff; }
.plan-table.is-selected .chair { fill: var(--red-2); }
.rf--table { margin-top: 16px; }

/* Stav rezervace */
.card-res { max-width: 760px; background: #fff; padding: 32px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.res-done { background: #e6f4ea; color: #1e5b33; padding: 16px 18px; margin-bottom: 22px; }
.res-done b { font-size: 18px; display: block; margin-bottom: 4px; }
.res-done--muted { background: #f1ebe4; color: var(--ink); }
.res-badge { display: inline-block; font-family: var(--head); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 14px; margin-bottom: 18px; }
.res-badge--pending { background: #fff3df; color: #8a4b00; }
.res-badge--confirmed { background: #e6f4ea; color: #1e5b33; }
.res-badge--rejected, .res-badge--cancelled { background: #f1ebe4; color: var(--ink-muted); }
.res-dl { display: grid; gap: 10px; }
.res-dl div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; border-bottom: 1px solid #eee6dc; padding-bottom: 10px; }
.res-dl dt { color: var(--ink-muted); }
.res-dl dd { font-weight: 600; }
.res-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.res-actions form { margin: 0; }
.btn--ghost-dark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost-dark:hover { background: var(--ink); color: #fff; }
.res-fine { margin-top: 18px; font-size: 14px; color: var(--ink-muted); }
.nav-cta small a { color: #fff; }

@media (max-width: 760px) {
  .res-hero { padding: 150px 0 50px; }
  .res-hero p { font-size: 16px; }
  .res-body { padding: 50px 0 80px; }
  .res-step { padding: 22px 16px 18px; margin: 0 calc(var(--gutter) * -1 + 6px); }
  .res-step legend { font-size: 22px; }
  .res-grid3 { grid-template-columns: 1fr 1fr; }
  .res-grid3 .rf:first-child { grid-column: 1 / -1; }
  .res-grid2 { grid-template-columns: 1fr; gap: 0; }
  .plan-wrap { padding: 4px; margin: 0 -8px; }
  .res-btn { width: 100%; justify-content: center; }
  .card-res { padding: 22px 16px; }
  .res-dl div { grid-template-columns: 1fr; gap: 2px; }
}
.nowrap { white-space: nowrap; }

/* Sezónní místnosti */
.plan-rooms small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }
.plan-closed { background: #fff3df; color: #8a4b00; font-weight: 600; padding: 10px 14px; margin-bottom: 8px; }
.plan-table.is-closed .top { fill: #ece6df; stroke: #d8cfc5; stroke-dasharray: 4 6; }
.plan-table.is-closed .num, .plan-table.is-closed .seats { fill: #b4a89d; }
.plan-table.is-closed .chair { fill: #e3dbd2; }

/* Úpravy přímo z webu – vidí jen přihlášená obsluha */
.edit-pen { position: absolute; z-index: 20; top: 46px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #e0782f; color: #fff; font: 700 14px var(--sans); text-decoration: none; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.edit-pen:hover { background: #c4621d; }
.hero > .edit-pen { top: auto; bottom: 120px; }
.pin > .edit-pen { position: sticky; top: 140px; float: right; margin: 140px 16px 0 0; }

.plan-fixture--tv rect { fill: #10151c; }
.tv-badge circle { fill: #1d3f72; stroke: #fff; stroke-width: 3; }
.tv-badge text { font-size: 18px; text-anchor: middle; }
.lg-tv { font-style: normal; }

/* Jednotná animace všech fotek s rámečkem (jako dlaždice): přiblížení fotky + rámeček se zúží */
.framed-clip { display: block; overflow: hidden; }
.steak-photo, .events-photo { overflow: hidden; }
.framed-clip img, .steak-photo img, .events-photo img, .sport-photos figure img { transition: transform .7s ease; }
.framed::after, .steak-photo::after, .events-photo::after, .sport-photos figure::after { transition: inset .4s ease; }
@media (hover: hover) {
  .framed:hover .framed-clip img, .steak-photo:hover img, .events-photo:hover img, .sport-photos figure:hover img { transform: scale(1.07); }
  .framed:hover::after, .steak-photo:hover::after, .events-photo:hover::after { inset: 22px; }
  .sport-photos figure:hover::after { inset: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .framed-clip img, .steak-photo img, .events-photo img, .sport-photos figure img, .tile img { transition: none; transform: none !important; }
}

/* Rezervace na mobilu: pole s datem nesmí přetéct (iOS má u date vlastní min. šířku) */
.res-grid3 > .rf, .res-grid2 > .rf { min-width: 0; }
.rf input[type="date"], .rf input[type="time"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
.rf input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* Tlačítka místností: stejná šířka i výška */
.plan-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.plan-rooms button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 8px 6px; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.plan-rooms button { overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (max-width: 480px) {
  .plan-rooms button { font-size: 14px; letter-spacing: .02em; padding: 8px 4px; }
}
.hero-smoke { pointer-events: none; }