/* ─────────────────────────────────────────────────────────────
   U Mlsné Kočky — responsive overrides
   Cinema part (top) + normal flow part (below) both handled here.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  :root { --spine-text: 42vw; }
  .align-left { padding-right: 56vw; }
  .align-left .section-inner { max-width: 38vw; }
  .section-inner-wide { max-width: 42vw !important; }

  /* Spirits rail gets narrower before it flips to a horizontal rail */
  .spirits-shell { grid-template-columns: minmax(190px, 224px) 1fr; }
}

@media (max-width: 1024px) {
  :root { --spine-text: 46vw; --spine-pad-left: 4vw; }
  .align-left { padding-right: 52vw; }
  .align-left .section-inner { max-width: 42vw; }
  /* Canvas left edge moves to 40vw — keep the blur band riding the same
     stretch as the mask ramp (0→27% of 60vw = 40vw→56vw). */
  .canvas-wrap { width: 60vw; }
  .seam { left: 38vw; width: 18vw; }
  .hero-heading { font-size: clamp(2.6rem, 5.8vw, 5rem); }
  .site-nav { gap: 18px; font-size: 0.72rem; }
}

/* ─────────────────────────────────────────────────────────────
   Short desktop/laptop viewports (720–820px tall).
   The hero stack is label → 2-line h1 → tagline → status dot →
   CTA pair. At 1280×720 the content ran 20px past its padding box
   and, because .hero-inner centres, half of that spilled downward
   into the absolutely-positioned .scroll-cue (measured ctaBottom
   618 vs cueTop 615). Trimmed here rather than in the base clamps
   so 1440×900 keeps its commanding 74px headline.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-height: 820px) {
  .hero-inner {
    gap: clamp(11px, 1.9vh, 18px);
    padding-top: clamp(84px, 12vh, 110px);
  }
  .hero-heading { font-size: clamp(2.3rem, min(6.4vw, 7.2vh), 4.6rem); }
}

@media (max-width: 768px) {
  :root { --spine-text: 100vw; --spine-pad-left: 22px; }

  /* Canvas becomes a top-anchored band, NOT fullscreen fixed behind text.
     Geometry comes from --band-h/--band-top, which app.js writes as PIXELS
     derived from the large viewport (see applyBandGeometry). The vh values are
     only the pre-JS fallback: a raw `58vh`/`42vh` band is re-sized by the
     browser the moment the URL bar collapses on the first scroll, which is what
     made the photo jump ~8% bigger mid-gesture. */
  .canvas-wrap {
    width: 100vw;
    height: var(--band-h, 58vh);
    top: var(--band-top, 42vh);
    /* No left-edge feather on phones — the band spans the full width, so the
       dissolve belongs on the TOP edge (::before below), not the side. */
    -webkit-mask-image: none;
    mask-image: none;
    /* Own compositor layer. A position:fixed band gets re-rastered while iOS
       animates the URL bar away, which reads as the picture pulsing larger and
       smaller for a split second. Promoting it keeps the layer stable. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /* Carries the whole hero/photo transition now that .hero paints nothing.
     Long, soft top ramp so the band melts up into the dark instead of
     starting on a line under the CTA pair — same idea as the desktop left
     edge, rotated 90°. Ends fully clear by 64% (≈78vh), below the stack. */
  .canvas-wrap::before {
    background: linear-gradient(to bottom,
      var(--bg-dark) 0%,
      rgba(14, 11, 10, 0.90) 12%,
      rgba(14, 11, 10, 0.62) 28%,
      rgba(14, 11, 10, 0.28) 44%,
      rgba(14, 11, 10, 0.06) 56%,
      transparent 64%,
      transparent 88%,
      var(--bg-dark) 100%);
  }
  .seam { display: none; }

  /* Same pixel lock as the band above. A `100vh` hero changes height when the
     URL bar collapses, which moves #menu's offsetTop — the value the hero pin
     measures its end against — so the pin re-measures mid-gesture and the whole
     scroll mapping shifts under the reader's thumb. --hero-h is written once. */
  .hero {
    height: var(--hero-h, 100vh);
    min-height: 560px;
  }
  .hero-inner {
    width: 100%;
    max-width: none;
    padding: 110px var(--hero-pad) 80px;
    /* Back to stretch on phones so .hero-cta's stacked buttons stay full
       width (see the CTA block further down). */
    align-items: stretch;
    justify-content: flex-start;
  }
  .scroll-cue { bottom: 24px; }

  /* Header: brand left, actions (phone + burger) right */
  .site-nav { display: none; }
  .nav-burger { display: flex; }
  .site-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: none;
    gap: 10px;
    padding: 14px 16px;
  }
  .brand-sub { display: none; }
  .brand { justify-self: start; }
  .btn-header {
    padding: 9px 13px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0;
  }
  .btn-header svg { width: 11px; height: 11px; flex-shrink: 0; }
  .brand-mark { font-size: 1.1rem; }

  .align-left { padding-right: 22px; }
  .align-left .section-inner {
    max-width: 100%;
    background: rgba(14, 11, 10, 0.84);
    padding: 28px 22px;
    border: 1px solid var(--rule-soft);
    border-radius: 6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  }

  .section-inner-wide { max-width: 100% !important; }

  /* The hero pin (initHeroExit) needs real scroll distance to hold the copy
     while the frame sequence plays, then let #menu shoulder it up — same as
     desktop. This empty driver supplies that distance; #menu begins at
     100vh + this height, so it arrives only after the frames have run. */
  #scroll-container { height: 150vh; }
  .scroll-section,
  .scroll-section[data-enter] {
    position: relative !important;
    top: auto !important;
    left: 0;
    transform: none !important;
    width: 100%;
    padding-top: 12vh;
    padding-bottom: 12vh;
    pointer-events: auto;
  }
  .pos-upper .section-inner,
  .pos-mid .section-inner,
  .pos-lower .section-inner { padding-top: 0; }
  .section-stats {
    top: auto !important;
    padding: 14vh clamp(20px, 5vw, 40px) !important;
  }

  .stats-grid { grid-template-columns: 1fr; gap: 32px; }
  .stat-divider { display: none; }
  .stat-number { font-size: clamp(4rem, 20vw, 7rem); }

  /* Marquee covers the middle of the viewport on phones — hide it. */
  .marquee-wrap { display: none !important; }

  /* Hero phone link — bigger touch target on mobile */
  .hero-tel-num { font-size: 1.3rem; }

  /* Hero CTA pair: at 390px the two buttons wrap onto separate rows at
     mismatched widths, and the ghost variant lands over the bright fruit in
     the backdrop photo, where a fully transparent fill leaves only a faint
     border. Stack them full width and back the ghost with the page dark so
     both read as buttons and both get a full-width touch target. */
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-cta .btn { justify-content: center; }
  .hero-cta .btn-ghost {
    background: rgba(14, 11, 10, 0.72);
    border-color: rgba(242, 233, 221, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Cocktail list — slightly looser spacing on mobile */
  .cocktail-item { gap: 12px; padding: 12px 0; }
  .ci-name { font-size: 1rem; }

  /* ─── FLOW PART (below cinema) ─── */

  /* Signature poster strip: no pin on mobile — native swipe with snap */
  .sig-pin { min-height: auto; padding: 72px 0 40px; }
  .sig-head { align-items: flex-start; text-align: left; }
  /* Hint drops back to the left edge once it wraps onto its own line */
  .sig-hint { margin-left: 0; margin-right: 0; }
  .sig-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .sig-card { scroll-snap-align: center; }
  .sig-card img { height: clamp(260px, 52vh, 400px); }
  /* Once the loop takes over, snapping would fight the transform — it keeps
     yanking the strip back to a card boundary mid-drag. These two undo the
     no-JS fallback above. */
  .sig-loop .sig-viewport { scroll-snap-type: none; }
  .sig-loop .sig-card { scroll-snap-align: none; }
  .sig-nav { padding: 0 20px; }
  .sig-nav-btn { width: 44px; height: 44px; }

  /* Interlude band — px-locked by applyBandGeometry(); 42vh is the pre-JS
     fallback only. See the --vp-h note on .interlude::before in styles.css. */
  .interlude { height: var(--il-h, 42vh); min-height: 300px; }

  /* Menu: chip bar clears the mobile header; categories single-column */
  .menu-nav { top: 58px; }
  .menu-flow { padding: 72px 0 80px; }
  /* #menu rises over the pinned hero (see initHeroExit) once the frames have
     played. Its transparent-topped background lets the frames read behind the
     heading as it climbs; keep a compressed transparent-to-veil ramp (full tint
     by ~46vh) so the first price rows are not asked to sit on a bare photo. */
  .menu-flow {
    background: linear-gradient(to bottom,
      rgba(14, 11, 10, 0) 0,
      rgba(14, 11, 10, 0.10) 10vh,
      rgba(14, 11, 10, 0.34) 20vh,
      rgba(14, 11, 10, 0.62) 30vh,
      rgba(14, 11, 10, 0.82) 38vh,
      rgba(14, 11, 10, 0.88) 46vh,
      rgba(14, 11, 10, 0.88) 100%);
  }
  .mcat { scroll-margin-top: 96px; }
  .mcat-card { scroll-margin-top: 96px; }
  /* Stack the category header so the meta wraps instead of forcing width */
  .mcat-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mcat-meta { white-space: normal; }
  .mcat-grid,
  .mcat-reverse .mcat-grid { grid-template-columns: 1fr; }
  .mcat-reverse .mcat-main { order: 1; }
  .mcat-reverse .mcat-aside { order: 2; }
  .mcat-aside { position: static; top: auto; }
  .mi-cols { grid-template-columns: 1fr; }

  /* T6 — fold Koktejly + Káva into the spirits tab bar. The standalone
     sections disappear; the cloned merged tab + panel (built by initMenuMerge)
     surface so the whole drinks menu reads as one tabbed interface. The title
     swaps to the neutral "Nápojový lístek". */
  #m-koktejly,
  #m-kava { display: none; }
  .sp-tab-merged { display: flex; }
  .sp-panel-merged { display: block; }
  .st-wide { display: none; }
  .st-narrow { display: inline; }

  /* Spirits: rail flips to a horizontal pill scroller above the panel */
  .spirits-shell { grid-template-columns: 1fr; gap: 22px; }
  .spirits-rail {
    flex-direction: row;
    gap: 8px;
    border-left: 0;
    border-bottom: 1px solid var(--rule-soft);
    padding: 0 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .spirits-rail::-webkit-scrollbar { display: none; }
  .sp-marker {
    left: 0;
    top: auto;
    bottom: 0;
    width: var(--m-w, 0px);
    height: 2px;
    transform: translateX(var(--m-x, 0px));
    transition:
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sp-tab {
    flex: 0 0 auto;
    width: auto;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    align-items: center;
  }
  .sp-tab:hover,
  .sp-tab.is-active { padding-left: 15px; }
  .sp-tab.is-active { border-color: var(--accent-copper-dim); }
  .sp-tab-name { font-size: 0.76rem; white-space: nowrap; }
  .sp-tab-count { font-size: 0.58rem; }
  .spirits { scroll-margin-top: 96px; }
  .sp-panel[data-cols="2"] .mi-list { columns: 1; }
  /* Merged panels stack; drop the divider that separated the two columns
     and restore the sub-label's own rule so the sections stay readable. */
  .sp-split { grid-template-columns: 1fr; gap: 0; }
  .sp-split .sp-col + .sp-col {
    padding-left: 0;
    border-left: 0;
  }
  .sp-split .sp-col + .sp-col > .mcat-sub:first-child {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--rule-soft);
  }

  /* Gallery: 2-col with a full-width lead tile, no gaps */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .gallery-grid .g-item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .gallery-grid .g-item:nth-child(1) { grid-column: 1 / -1; }

  /* Contact: stack info over map */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { grid-template-columns: 1fr 1fr; }
  .contact-map { min-height: 340px; }

  /* Footer */
  .foot-spine { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .foot-bottom .footer-credit { justify-content: center; }

  /* Lightbox pan hint: let it wrap instead of running off a narrow screen */
  .lb-hint {
    white-space: normal;
    max-width: min(84vw, 320px);
    text-align: center;
    font-size: 0.66rem;
    padding: 8px 14px;
  }
}

@media (max-width: 640px) {
  /* Phones only (tablets keep the buttons): drop the hero CTA pair so the
     frame animation behind the copy is the whole focus. The hero pin anchors
     its push on .hero-meta instead — see initHeroExit / bottomRef in app.js. */
  .hero-cta { display: none !important; }

  /* Phones only: the hero badge is gone (it duplicated the header logo), so the
     copy already starts higher. Trim the top padding a touch more so even more
     of the frame-animation band shows through above the fold. */
  .hero-inner { padding-top: 90px; }

  /* Phones only: drop the two board-photo posters (Míchané / Kávové nápoje).
     They're big vertical tiles that push the menu lists far down on a phone;
     the lists themselves carry every item + price, and the boards stay tappable
     on tablet/desktop. */
  .mcat-aside { display: none; }
}

@media (max-width: 480px) {
  .hero-heading { font-size: clamp(2.4rem, 11vw, 4.2rem); }
  .section-heading { font-size: clamp(2rem, 7.5vw, 2.8rem); }
  .flow-heading { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .btn-header { padding: 8px 11px; font-size: 0.58rem; letter-spacing: 0.1em; }
  .brand-mark { font-size: 1rem; letter-spacing: -0.02em; }

  /* Spirits: tighter pills on small phones */
  .sp-tab { padding: 8px 13px; }
  .sp-tab:hover,
  .sp-tab.is-active { padding-left: 13px; }
  .sp-tab-name { font-size: 0.72rem; }
  .spirits-title { font-size: clamp(1.5rem, 7vw, 2rem); }

  /* Gallery: single column */
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }
  .gallery-grid .g-item:nth-child(n) { grid-column: auto; grid-row: auto; }

  /* Contact info stacks fully */
  .contact-info { grid-template-columns: 1fr; }
  .contact-map { min-height: 300px; }

  /* Footer single column */
  .foot-spine { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 520px) {
  .site-header .btn-header .btn-text,
  .site-header .btn-header .btn-arrow { display: none !important; }
  .site-header .btn-header .btn-phone { display: block !important; }
  .site-header .btn-header {
    padding: 10px 11px !important;
    gap: 0 !important;
    border-radius: 999px !important;
    font-size: inherit !important;
  }
  .site-header { padding: 12px 14px; }
  .brand-mark { font-size: 0.95rem; }
  .brand-logo { width: 40px; }
}

/* ─────────────────────────────────────────────────────────────
   Touch devices: the interlude photo is now a position:fixed ::before
   layer clipped by the band (see .interlude in styles.css), so it pins
   correctly on iOS Safari and every touch/emulated phone + tablet — no
   background-attachment: fixed anywhere, so nothing to fall back from.
   All we do here is nudge the vertical crop for the taller portrait
   viewport so the glass stays framed. Applied to ::before, not the band.
   ───────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .interlude::before {
    background-position: center 42%;
  }
}