/* Bistro Pergola - site styles. Contract: _lead-pergola/_spec/DESIGN.md
   Concept "Nad hladinou / Na hladině": paper-sun daylight above, their black
   menu board as the dark anchor, lake slab for the půjčovna, under-water
   footer. Slat motif from their real board logo. */

/* ---------- layout primitives ---------- */

.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.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: absolute;
  left: 16px; top: -60px;
  z-index: 60;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 0 0 10px 10px;
  font-weight: 700; text-decoration: none;
  transition: top .2s;
}
.skip:focus-visible { top: 0; }

/* ---------- buttons, links, chips ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px;
  border: 0; border-radius: 10px;
  font-weight: 700; font-size: 16px;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-sun { background: var(--slunce); color: var(--ink); box-shadow: 0 10px 22px -12px rgba(217, 156, 18, .8); }
.btn-sun:hover { background: var(--slunce-deep); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: #fff; }

.lnk {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* Standalone actions - "Ukázat na mapě", "Vyplout na prkně", the Instagram
   handle - were 28px tall. Padded to a thumb-sized target and negative-margined
   back so nothing moves; the underline stays on the text, not the padding. */
.lnk { padding-block: 8px; margin-block: -8px; }
.lnk svg { transition: transform .18s ease; }
.lnk:hover svg { transform: translateX(3px); }
.lnk-water { color: var(--hloubka); }
.lnk-paper { color: var(--paper); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .35);
}
.chip svg { flex: none; }
.chip.is-open { border-color: transparent; background: rgba(var(--boro-rgb), .15); color: var(--boro); }
.chip.is-closed { border-color: transparent; background: rgba(var(--cerven-rgb), .12); color: #A63626; }

/* ---------- section titles ---------- */

.sec-title {
  display: flex; align-items: center; gap: 15px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(31px, 4.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.sec-mark { color: var(--cerven); flex: none; }
.sec-title-water { color: var(--water-text); }
.sec-title-water .sec-mark { color: var(--citron); }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 26px;
  padding: 14px clamp(20px, 4vw, 40px);
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}

.nav-brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none;
  font-weight: 700; font-size: 16px;
  letter-spacing: .05em; text-transform: uppercase;
}
.nav-mark { color: var(--cerven); }

.nav-links {
  display: flex; gap: clamp(14px, 2.2vw, 26px);
  margin-inline: auto;
}
.nav-links a {
  text-decoration: none;
  font-weight: 500; font-size: 15.5px;
  color: var(--ink);
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--slunce); }

.nav-chip { flex: none; }

.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 1px solid var(--hair); border-radius: 10px;
  background: transparent;
}
/* Slat hamburger. The brand mark #i-slats is four rounded lines rising at a
   slope of exactly 0.2 (-11.3deg) with lengths tapering 44.9 / 40.8 / 36 / 26.5;
   these are slats 1, 2 and 4 of it at 22 / 20 / 13px, left-anchored like the
   mark's aligned starts and ragged ends. Three bars sharing one angle read as a
   pattern - a glitch is one tilted bar - and the chip's straight border next to
   it supplies the horizontal reference that makes the tilt legible as intent.
   `right: 11px` is deliberately gone: the widths are per-bar now.
   Open is a louver flip: both arms counter-rotate out of the shared -11.3deg
   into a canonical +/-45deg X, the short slat growing to match so the X lands
   symmetric, with a mild overshoot for the snap of a louver seating. */
.nav-toggle-bar,
.nav-toggle::before,
.nav-toggle::after {
  content: '';
  position: absolute; left: 11px;
  height: 2px; background: var(--ink); border-radius: 2px;
  transform: rotate(-11.3deg);
  transition: transform .26s cubic-bezier(.33, .7, .3, 1.18),
              top       .26s cubic-bezier(.33, .7, .3, 1.18),
              width     .26s ease,
              opacity   .15s ease;
}
.nav-toggle::before { top: 14px; width: 22px; }
.nav-toggle-bar     { top: 21px; width: 20px; }
.nav-toggle::after  { top: 28px; width: 13px; }
.nav.open .nav-toggle::before { top: 21px; transform: rotate(45deg); }
.nav.open .nav-toggle-bar     { opacity: 0; transform: rotate(-11.3deg) scaleX(.4); }
.nav.open .nav-toggle::after  { top: 21px; width: 22px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .nav { gap: 14px; }
  .nav-chip { margin-left: auto; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: fixed; inset: 0;
    z-index: 40;
    background: var(--paper);
    padding: 110px clamp(24px, 7vw, 44px) 40px;
    flex-direction: column; gap: 6px;
  }
  .nav.open .nav-links { display: flex; }
  /* The open sheet is a CHILD of the sticky header, so its z-index paints it over
     the header's own contents - the logo and, fatally, the button that closes it.
     There WAS no way out on touch but tapping a link. The X already exists (the
     .nav.open rules above rotate the bars) and the sheet's 110px top padding is
     there to clear the header, so this only ever needed the stacking order. */
  .nav-brand,
  .nav-toggle { position: relative; z-index: 41; }
  .nav-links a {
    font-family: var(--font-display);
    font-weight: 700; font-size: 31px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
  }
  .nav-links a:hover { border-bottom-color: var(--slunce); }
}
@media (max-width: 560px) {
  /* The chip carried `margin-left: auto`, so hiding it took the spacer with it
     and left the menu button stranded beside the logo with 117px of empty header
     to its right - it read as a layout fault, not a choice. The button takes the
     spacer over: a menu control belongs in the corner a thumb reaches for. */
  .nav-chip { display: none; }
  .nav-toggle { margin-left: auto; }
}

/* ---------- hero ---------- */

/* Header + hero fill exactly one viewport, so the seam onto the story section
   lands on the fold at every screen size. Left to its content the hero measured
   a near-constant ~850px, which is 118% of a 1366x768 laptop and 74% of a 2560
   monitor: nobody chose that drift, it is what you get with no height rule.
   The photo band absorbs the remainder (it is the element that can take any
   height without breaking), with a floor so it never collapses on a squat
   window; below that floor the content wins and the hero grows, as it should. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(240, 180, 41, .16), transparent 70%),
    var(--paper);
  padding: clamp(40px, 6vw, 78px) 0 0;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(44px, 7.8vw, 104px);
  line-height: .97;
  letter-spacing: -0.025em;
}
.hero-l1, .hero-l2 { display: block; }
.hero-l2 { color: var(--hloubka); font-size: .62em; letter-spacing: -0.015em; margin-top: 10px; }

.hero-sub {
  margin-top: 22px;
  font-size: 18.5px;
  color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 8px 22px; flex-wrap: wrap;
}
.hero-loc {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 500;
  color: var(--ink-soft);
}
.hero-loc svg { color: var(--cerven); align-self: center; }

.hero-cta {
  margin: 28px 0 clamp(36px, 5vw, 56px);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}

.hero-band {
  position: relative;
  margin: 0;
  /* takes whatever the copy above it did not use */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hero-band picture {
  display: block; position: relative; overflow: hidden;
  flex: 1 1 auto;
  /* the floor: below this the hero grows past the fold rather than the photo
     collapsing to a strip */
  min-height: clamp(220px, 30vh, 340px);
}
/* Absolutely filled, so the picture's height comes from the flex remainder
   instead of the file's 1440x1800 intrinsic ratio. */
.hero-band img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
}
.hero-band picture::after {
  content: '';
  position: absolute; inset: -45%;
  background: repeating-linear-gradient(52deg, rgba(var(--ink-rgb), .055) 0 14px, transparent 14px 46px);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.hero-chalk {
  position: absolute;
  right: clamp(20px, 6vw, 72px); bottom: 42px;
  z-index: 2;
  font-family: var(--font-chalk);
  font-size: 24px;
  color: var(--paper);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  transform: rotate(-2.4deg);
}
.hero-band .seam-paper { top: auto; bottom: -1px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-top > * { animation: hero-rise .65s cubic-bezier(.2, .7, .3, 1) both; }
  .hero-top > :nth-child(2) { animation-delay: .09s; }
  .hero-top > :nth-child(3) { animation-delay: .18s; }
  .hero-band picture::after { animation: slat-drift 80s linear infinite; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slat-drift {
  /* one 46px stripe period along the 52deg gradient axis is (36.25px, -28.32px);
     5 whole periods keeps the loop seamless */
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(181.2px, -141.6px, 0); }
}


/* ---------- story ---------- */

.story { padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 6vw, 80px); }

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}

.story-copy p + p { margin-top: 16px; }
.story-copy { max-width: 54ch; }

.story-bridge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--hloubka);
}

.story-photos {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 22px;
  min-width: 0;
}

.sp { position: relative; min-width: 0; }
.sp img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  object-fit: cover;
}
.sp-a { grid-column: 1; grid-row: 1; transform: rotate(-1.6deg); }
.sp-a img { aspect-ratio: 1; }
.sp-b { grid-column: 1; grid-row: 2; width: 92%; justify-self: end; transform: rotate(1.4deg); }
.sp-b img { aspect-ratio: 4 / 3; }
.sp-c { grid-column: 2; grid-row: 1 / 3; align-self: center; transform: rotate(.9deg) translateY(8px); }
.sp-c img { aspect-ratio: 4 / 5.1; }

@media (max-width: 860px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-photos { margin-top: 10px; }
}

/* ---------- menu board ---------- */

.board-wrap { padding: clamp(30px, 5vw, 60px) 0 clamp(60px, 8vw, 100px); }
.board-intro { margin-bottom: 34px; }
.board-lead { max-width: 58ch; color: var(--ink-soft); }

.board-panels {
  --mcol: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.board-panel {
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, .028) 47% 53%, transparent 58%),
    radial-gradient(700px 420px at 50% -8%, rgba(255, 255, 255, .05), transparent 70%),
    var(--board);
  color: var(--board-text);
  border-radius: 18px;
  padding: clamp(26px, 3.4vw, 42px) clamp(22px, 3vw, 36px);
  box-shadow: 0 34px 60px -34px rgba(var(--ink-rgb), .6);
}
.board-panel:first-child { transform: rotate(-.35deg); }
.board-panel:last-child { transform: rotate(.3deg); }

.mcat { margin-bottom: 34px; }
.mcat:last-child { margin-bottom: 0; }

.mcat-title {
  color: var(--citron);
  font-size: 20px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 6px;
}
.mcat-sub {
  font-size: 13.5px;
  color: var(--board-mut);
  margin-bottom: 8px;
}
.mcat-sub-chalk {
  font-family: var(--font-chalk);
  font-size: 18px;
  color: var(--citron);
  transform: rotate(-1.6deg);
  width: max-content;
  margin-bottom: 10px;
}

.mcat-list { display: grid; gap: 7px; }

.mi {
  display: grid;
  grid-template-columns: var(--mcol) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  font-size: 16.5px;
}
.mi-size { font-size: 13px; color: var(--board-mut); font-variant-numeric: tabular-nums; }
.mi-name { font-weight: 500; }
.mi-note { font-style: normal; font-size: 13.5px; color: var(--board-mut); margin-left: 4px; }
.mi-price, .mi-price2 {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.mcat-2p .mi { grid-template-columns: minmax(0, 1fr) var(--mcol) var(--mcol); }
.mcat-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mcol) var(--mcol);
  gap: 12px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--board-mut);
  margin-bottom: 8px;
}
.mcat-cols span { text-align: right; }
.mcat-cols span:first-child { grid-column: 2; }

.mi-hand, .mi-hand .mi-name, .mi-hand .mi-price {
  font-family: var(--font-chalk);
  font-weight: 400;
  font-size: 18.5px;
}
.mi-hand { transform: rotate(-.9deg); }

.board-fine {
  color: var(--citron);
  font-size: 13px;
  letter-spacing: .04em;
  margin-top: 28px;
  opacity: .85;
}

@media (max-width: 760px) {
  .board-panels { grid-template-columns: minmax(0, 1fr); --mcol: 44px; }
  .board-panel:first-child, .board-panel:last-child { transform: none; }
  .mi, .mcat-2p .mi, .mcat-cols { gap: 9px; }
}

/* ---------- voda / půjčovna ---------- */

.voda {
  position: relative;
  margin-top: 46px;
  background: linear-gradient(180deg, var(--hladina) 0%, #5793A9 9%, #35708A 19%, var(--hloubka) 52%, #1B4655 100%);
  color: var(--water-text);
  padding: clamp(64px, 8vw, 110px) 0 clamp(56px, 7vw, 96px);
  overflow-x: clip;
}

.voda-seam, .footer-seam, .seam-paper {
  position: absolute;
  left: 0; right: 0; top: -22px;
  height: 24px;
  overflow: hidden;
  pointer-events: none;
}
.voda-seam::before, .footer-seam::before, .seam-paper::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(100% + 180px);
  background: var(--seam-fill, var(--hladina));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 24' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q 22.5 2 45 14 T 90 14 T 135 14 T 180 14 V 24 H 0 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 24' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q 22.5 2 45 14 T 90 14 T 135 14 T 180 14 V 24 H 0 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 180px 24px;
  mask-size: 180px 24px;
}
.footer-seam { --seam-fill: var(--dno); }
.seam-paper { --seam-fill: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  .voda-seam::before, .footer-seam::before, .seam-paper::before { animation: lap 15s linear infinite; }
}
@keyframes lap {
  from { transform: translateX(0); }
  to { transform: translateX(-180px); }
}

.voda-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.voda-chalk {
  font-family: var(--font-chalk);
  font-size: 25px;
  color: var(--citron);
  transform: rotate(-1.8deg);
  width: max-content;
  margin: -8px 0 18px;
}

.voda-copy > p { max-width: 52ch; }

.voda-steps {
  margin: 26px 0 22px;
  display: grid; gap: 12px;
}
.voda-steps li {
  display: flex; align-items: center; gap: 14px;
  font-weight: 500; font-size: 17px;
}
.vs-n {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px;
}

.sup-cenik {
  margin: 24px 0 20px;
  max-width: 370px;
  background: var(--paper-card);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 18px 22px 16px;
  box-shadow: 0 20px 38px -22px rgba(13, 34, 42, .55);
}
.sup-cenik-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 10px;
}
.sup-cenik-list { display: grid; gap: 7px; }
.sup-cenik-list li {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 15.5px;
}
.sup-cenik-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sup-cenik-note { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }

.voda-note {
  font-size: 15px;
  color: rgba(var(--water-text-rgb), .82);
  max-width: 50ch;
}

.voda-cta {
  margin-top: 28px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}

.voda-prkna {
  position: relative;
  min-height: 470px;
  min-width: 0;
}
.prkno {
  position: absolute;
  width: auto;
  filter: drop-shadow(0 24px 26px rgba(13, 34, 42, .45));
}
.prkno-z { height: 460px; left: 8%; top: 0; transform: rotate(6.5deg); }
.prkno-c { height: 420px; left: 52%; top: 34px; transform: rotate(-5.5deg); }

@media (prefers-reduced-motion: no-preference) {
  .prkno-z { animation: bob-z 6.4s ease-in-out infinite alternate; }
  .prkno-c { animation: bob-c 7.6s ease-in-out infinite alternate; }
  .voda.anim-paused .prkno { animation-play-state: paused; }
}
@keyframes bob-z {
  from { transform: rotate(6.5deg) translateY(0); }
  to { transform: rotate(4.8deg) translateY(9px); }
}
@keyframes bob-c {
  from { transform: rotate(-5.5deg) translateY(4px); }
  to { transform: rotate(-3.8deg) translateY(-7px); }
}

@media (max-width: 860px) {
  .voda-grid { grid-template-columns: minmax(0, 1fr); }
  .voda-prkna { min-height: 330px; max-width: 420px; }
  .prkno-z { height: 320px; left: 10%; }
  .prkno-c { height: 292px; left: 54%; top: 22px; }
}

/* ---------- akce ---------- */

.akce { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); }

.akce-lead { max-width: 60ch; color: var(--ink-soft); margin-bottom: 34px; }
.akce-lead a { color: var(--ink); font-weight: 600; }

.oslavy {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr) auto;
  gap: clamp(20px, 3.2vw, 44px);
  align-items: center;
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: clamp(16px, 2.2vw, 22px) clamp(22px, 3.4vw, 38px) clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 22px);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.oslavy-photo { margin: 0; min-width: 0; align-self: stretch; }
.oslavy-photo img {
  width: 100%; height: 100%;
  min-height: 214px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.oslavy h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 8px;
}
/* Two offers share the copy column: the party you hold here, and the food we
   drive to you. Same card, so they read as one decision with two answers. */
.oslavy-copy { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.oslavy-copy p { max-width: 62ch; font-size: 16.5px; color: var(--ink-soft); }
.oslavy-cta {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.oslavy-note { font-size: 13.5px; color: var(--ink-soft); }

@media (max-width: 760px) {
  .oslavy { grid-template-columns: minmax(0, 1fr); }
  .oslavy-photo img { min-height: 0; aspect-ratio: 16 / 10; }
  .oslavy-cta { align-items: flex-start; }
}

.akce-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4.5vw, 56px);
  align-items: start;
}

.akce-empty {
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: 26px 28px;
  font-size: 16.5px;
  color: var(--ink-soft);
}

.akce-list { display: grid; gap: 16px; }

.akce-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  background: var(--paper-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 10px 26px -18px rgba(var(--ink-rgb), .4);
}
.akce-date {
  text-align: center;
  border-right: 1px solid var(--hair);
  padding-right: 16px;
  align-self: start;
}
.akce-date .ad-day {
  display: block;
  font-family: var(--font-display);
  font-weight: 900; font-size: 30px;
  line-height: 1.05;
  color: var(--terakota);
}
.akce-date .ad-mon {
  display: block;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}
.akce-item h3 { font-size: 19px; font-weight: 700; margin-bottom: 3px; }
.akce-item .ai-note { font-size: 15px; color: var(--ink-soft); }
.akce-item .ai-time { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); margin-top: 7px; display: block; }
.akce-item .ai-fb {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 14px; font-weight: 600;
  color: var(--hloubka);
}
.akce-item .ai-img { margin-top: 12px; border-radius: 9px; max-height: 190px; width: auto; }

.akce-archiv figure {
  position: relative;
  background: var(--paper-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 14px 14px 18px;
  box-shadow: var(--shadow);
  transform: rotate(-1.1deg);
}
.akce-archiv figure::before {
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--terakota);
  box-shadow: 0 3px 5px rgba(var(--ink-rgb), .3);
}
.akce-archiv img { border-radius: 9px; }
.akce-archiv figcaption { padding: 14px 6px 0; font-size: 14.5px; color: var(--ink-soft); }
.akce-archiv figcaption strong { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 2px; }
.akce-archiv-tag {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--terakota);
  margin-bottom: 7px;
}

@media (max-width: 860px) {
  .akce-grid { grid-template-columns: minmax(0, 1fr); }
  .akce-archiv figure { max-width: 480px; }
}

/* ---------- galerie ---------- */

.galerie { padding: clamp(30px, 4vw, 56px) 0 clamp(60px, 8vw, 104px); }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 14px;
}

.gal-item { position: relative; min-width: 0; margin: 0; }
.gal-a { grid-column: 1 / 6; grid-row: 1 / 3; }
.gal-b { grid-column: 6 / 13; grid-row: 1 / 2; }
.gal-c { grid-column: 6 / 10; grid-row: 2 / 4; }
.gal-d { grid-column: 10 / 13; grid-row: 2 / 3; }
.gal-e { grid-column: 1 / 6; grid-row: 3 / 4; }
.gal-f { grid-column: 10 / 13; grid-row: 3 / 4; }

.gal-btn {
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-deep);
  position: relative;
}
.gal-btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.gal-b img { object-position: 50% 74%; }
.gal-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(52deg, rgba(var(--paper-rgb), .55) 0 9px, transparent 9px 26px);
  background-size: 300% 300%;
  background-position: 0% 0%;
  opacity: 0;
  transition: opacity .3s ease, background-position .55s ease;
}
/* iOS paints its own grey flash over a tapped tile, which looks like a bug on a
   full-bleed photo. Suppress it and give touch its own brief press state. */
.gal-btn { -webkit-tap-highlight-color: transparent; }
.gal-btn:active img { transform: scale(.995); }
.gal-btn:hover img { transform: scale(1.035); }
.gal-btn:hover::after { opacity: .5; background-position: 42% 30%; }

@media (max-width: 860px) {
  .gal-grid { grid-auto-rows: 150px; }
  .gal-a { grid-column: 1 / 8; grid-row: 1 / 3; }
  .gal-b { grid-column: 8 / 13; grid-row: 1 / 2; }
  .gal-c { grid-column: 8 / 13; grid-row: 2 / 3; }
  .gal-d { grid-column: 1 / 6; grid-row: 3 / 4; }
  .gal-e { grid-column: 6 / 13; grid-row: 3 / 4; }
  .gal-f { grid-column: 1 / 13; grid-row: 4 / 5; }
}
@media (max-width: 520px) {
  .gal-grid { grid-auto-rows: 130px; }
}

/* ---------- lightbox ---------- */

.lightbox {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(94vw, 1000px);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(14, 20, 15, .85); }

.lb-figure { position: relative; margin: 0; }
.lb-figure img {
  max-width: 100%;
  max-height: 82vh;
  width: auto; height: auto;
  margin-inline: auto;
  border-radius: var(--radius);
}

.lb-btn {
  position: absolute;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
.lb-btn:hover { background: #fff; }
.lb-close { top: -14px; right: -12px; }
.lb-prev { left: -12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: -12px; top: 50%; transform: translateY(-50%); }

@media (max-width: 700px) {
  .lb-close { right: 6px; top: 6px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}

/* ---------- kontakt ---------- */

.kontakt {
  background: var(--paper-deep);
  padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 130px);
}

.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.kontakt-adresa {
  font-style: normal;
  font-size: 17.5px;
  line-height: 1.7;
  margin-bottom: 22px;
}
.kontakt-adresa strong { font-family: var(--font-display); font-weight: 700; font-size: 21px; }

.kontakt-map { margin-top: 2px; }

.kontakt-chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }

.kontakt-h3 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 24px;
  margin-bottom: 12px;
}
.chip-live { margin-bottom: 16px; }

.hours-table { width: 100%; border-collapse: collapse; max-width: 340px; }
.hours-table th, .hours-table td {
  text-align: left;
  padding: 9px 2px;
  border-bottom: 1px solid var(--hair);
  font-size: 16px;
}
.hours-table th { font-weight: 600; }
.hours-table td { text-align: right; font-variant-numeric: tabular-nums; }

.kontakt-note { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); max-width: 44ch; }

.kontakt-links { margin-top: 24px; display: grid; gap: 12px; }
.kontakt-links a {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-weight: 600; font-size: 16.5px;
  /* Phone, Instagram and Facebook are what a visitor actually reaches for, and
     they were 27px tall - under the 44px a thumb wants and under the 24px WCAG
     2.5.8 asks for. The padding is negative-margined back so the visual rhythm
     of the list does not change. */
  padding-block: 9px;
  margin-block: -9px;
}
.kontakt-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kontakt-links svg { color: var(--hloubka); }

@media (max-width: 760px) {
  .kontakt-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- footer ---------- */

.footer {
  position: relative;
  background: var(--dno);
  color: var(--dno-text);
  margin-top: 24px;
}
.footer-inner {
  padding: clamp(46px, 6vw, 70px) clamp(20px, 5vw, 48px) 40px;
  display: grid; gap: 16px;
}

.footer-brand {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 15.5px;
  color: rgba(var(--dno-text-rgb), .85);
}
.footer-brand svg { color: var(--citron); flex: none; }
.footer-brand strong { color: var(--dno-text); }

.footer-fine { font-size: 13px; color: rgba(var(--dno-text-rgb), .55); }
.footer-credit { font-size: 13px; color: rgba(var(--dno-text-rgb), .45); }
.footer-credit a { color: rgba(var(--dno-text-rgb), .7); }
.footer-fine a { color: rgba(var(--dno-text-rgb), .7); }

.footer-fin {
  position: absolute;
  top: 14px; right: clamp(24px, 8vw, 90px);
  background: transparent; border: 0;
  color: rgba(var(--dno-text-rgb), .4);
  padding: 6px;
}
.footer-fin:hover { color: rgba(var(--dno-text-rgb), .75); }
.footer-fin-bubble {
  position: absolute;
  bottom: calc(100% + 6px); right: 0;
  white-space: nowrap;
  font-family: var(--font-chalk);
  font-size: 18px;
  color: var(--citron);
  transform: rotate(-2deg);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn, .lnk svg, .gal-btn img, .gal-btn::after { transition: none; }
}