/* Oh!Mumbai — revision layer (owner-fix punch-list + editorial creative pass).
   Loads LAST, after frontend-polish-4.css. Overrides prior layers only.
   No structural HTML changes here; this file is CSS-only. */

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 1 — Remove ALL photo hover effects (site-wide).
   Prior layers ADD zoom, lift, shadow, saturation, and a bottom-right zoom
   icon overlay on gallery tiles. Kill every one so images stay put on hover.
   ══════════════════════════════════════════════════════════════════════════ */

/* Gallery / interior / any main <button type=button> holding an <img> */
main button[type="button"] img,
main button[type="button"]:hover img,
main .group:hover img,
main .group:focus-within img{
  transform:none !important;
  filter:none !important;
  transition:none !important;
}

/* Gallery-tile wrapper: kill lift + shadow + saturation on hover */
main.bg-biege .gal button[type="button"]:hover,
main.bg-biege .gal button[type="button"]:focus-visible{
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}

/* Zoom-cue overlay in the bottom-right of gallery tiles — gone. */
main.bg-biege .gal button[type="button"]::after{
  content:none !important;
  display:none !important;
}

/* Menu cards: image no longer lifts, shadow-warms, or glows on hover */
.mn-card:hover .mn-img,
.mn-card:hover .mn-img img,
.mn-card:hover .media-dish,
.mn-card:focus-within .mn-img{
  transform:none !important;
  box-shadow:0 20px 40px -30px rgba(41,27,22,.5) !important; /* keep rest state */
  filter:none !important;
}
.mn-card::before,
.mn-card:hover::before{
  content:none !important;
  display:none !important;
  opacity:0 !important;
}
.mn-card:hover .mn-meta{
  border-top-color:color-mix(in srgb, currentColor 14%, transparent) !important;
}
.mn-card:hover .mn-meta span:last-child{color:var(--color-terracotta) !important}

/* Homepage dish cards */
body.page-index main article[role="button"]:hover .media-dish,
body.page-index main article[role="button"]:focus-within .media-dish{
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}
body.page-index main article[role="button"]:hover > p{color:inherit !important}

/* Menu-panel dropdown cards: no lift, no shadow, no image scale */
.menu-panel .group\/card:hover,
.menu-panel .group\/card:focus-within{transform:none !important}
.menu-panel .group\/card:hover > div.overflow-hidden,
.menu-panel .group\/card:focus-within > div.overflow-hidden{box-shadow:none !important}
.menu-panel .group\/card img,
.menu-panel .group\/card:hover img{transform:none !important;transition:none !important}
.menu-panel .group\/card:hover > span{letter-spacing:.005em !important}

/* About page image column: no filter change on hover */
body.page-about main img,
body.page-about main .col-span-3:hover img,
body.page-about main .col-span-6:hover img{
  filter:none !important;transform:none !important;transition:none !important;
}

/* Footer map (static image) doesn't scale/saturate on hover */
footer img[alt*="Карта"],
footer img[alt*="Карта"]:hover,
footer img[alt*="Map" i]:hover{transform:none !important;filter:none !important;transition:none !important}

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 2 — Simplify button hover effects (remove wavy / halo / glow).
   The base site.js paints a large expanding "ripple" (a rounded-full span
   with an SVG turbulence displacement filter) on pointer-enter. It also
   uses expanding box-shadow rings on the primary CTA. Kill both.
   Retain: a simple color/opacity change on hover.
   ══════════════════════════════════════════════════════════════════════════ */

/* Kill the ripple grow — the span exists in DOM but stays at 0×0, invisible.
   Belt & braces: dimensions locked, background off, filter off, opacity 0. */
main button > span[aria-hidden].rounded-full,
footer button > span[aria-hidden].rounded-full,
.site-header button > span[aria-hidden].rounded-full,
.bk-card button > span[aria-hidden].rounded-full{
  width:0 !important;height:0 !important;
  background:transparent !important;
  filter:none !important;
  opacity:0 !important;
  transition:none !important;
  display:none !important;
}
/* The inline SVG that hosts the feTurbulence filter — remove from flow. */
main button > svg.absolute.size-0,
footer button > svg.absolute.size-0,
.site-header button > svg.absolute.size-0{display:none !important}

/* Primary CTA — plain filter:brightness hover, no expanding ring */
.hero button.bg-terracotta,
.hero a > button.bg-terracotta,
.site-header header > button.bg-terracotta{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 6px 18px -12px rgba(41,27,22,.55) !important;
  transition:filter .2s ease, background-color .2s ease !important;
}
.hero button.bg-terracotta:hover,
.hero a > button.bg-terracotta:hover,
.site-header header > button.bg-terracotta:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 6px 18px -12px rgba(41,27,22,.55) !important;
  filter:brightness(1.05) !important;
  transform:none !important;
}
.hero button.bg-terracotta:active,
.site-header header > button.bg-terracotta:active{transform:none !important;filter:brightness(.96) !important}

/* Booking popup messenger icons: no translate/drop-shadow on hover */
.bk-icons a,
.bk-icons a:hover,
.bk-icons a:active{transform:none !important;filter:none !important;transition:filter .2s ease !important}

/* Booking close: no rotate spin */
.bk-close,
.bk-close:hover{transform:none !important;transition:background-color .2s ease, color .2s ease !important}

/* Lightbox controls: no scale on hover */
.lb-btn,
.lb-btn:hover,
.lb-prev:hover,
.lb-next:hover,
.lb-btn:active{transform:none !important;transition:background-color .2s ease, border-color .2s ease !important}

/* Footer social icons: no translate/drop-shadow */
footer .flex.gap-5 > a,
footer .flex.gap-5 > a:hover,
footer .flex.gap-5 > a:active{transform:none !important;filter:none !important;transition:opacity .2s ease !important}
footer .flex.gap-5 > a:hover{opacity:.75}

/* Sec-head "see more" — subtle color, no border-warm on parent */
.sec-head:has(> a:hover){border-bottom-color:var(--rule) !important}

/* Menu-tab underline pop — keep but simplify (no press bounce) */
.mn-tab,
.mn-tab:active{transform:none !important}

/* Nav-burger — no press-scale */
.nav-burger:active{transform:none !important}

/* Header logo hover translate — off */
.site-header header > a[href="index.html"],
.site-header header > a[href="index.html"]:hover{transform:none !important}

/* Header nav link hover: keep only the color change; kill the sliding underline. */
.site-header header > div.col-span-5 > a::after,
.site-header header > div.col-span-5 > span > a::after{content:none !important;display:none !important}

/* Menu tab sliding underline (::before) — remove for cleaner hover */
.mn-tab::before,
.mn-tab:hover::before,
.mn-tab:focus-visible::before{content:none !important;display:none !important}

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 3 — Compact footer bottom band (logo · nav-row · copyright).
   Prior layers use `pt-20` (var(--sec), 80–112px) and `pb-8` (32px), then
   another `py-8` row. Trim both to a tight, editorial ~24–28px each.
   ══════════════════════════════════════════════════════════════════════════ */

footer .border-b-2.pt-20.pb-8,
footer .col-span-12.border-b-2{
  padding-top:1.75rem !important;
  padding-bottom:1rem !important;
}
footer .col-span-12.flex.gap-6.py-8{
  padding-top:.75rem !important;
  padding-bottom:1.25rem !important;
  row-gap:.25rem !important;
}
footer .border-b-2.pt-20 a[href="index.html"] svg{
  width:clamp(120px, 10vw, 156px) !important;
}
@media (max-width:768px){
  footer .border-b-2.pt-20.pb-8,
  footer .col-span-12.border-b-2{
    padding-top:1.25rem !important;
    padding-bottom:1rem !important;
    gap:16px !important;
  }
  footer .col-span-12.flex.gap-6.py-8{
    padding-top:.5rem !important;
    padding-bottom:1rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 4 — Alcohol regulatory paragraph → discreet fine-print.
   Legally required copy must stay. Shrink it, mute the color, tighten
   leading, and let it span the full width so it reads as a footnote.
   ══════════════════════════════════════════════════════════════════════════ */

body.page-menu main p.caption[class*="col-span-6"],
body.page-menu main p.caption.text-gray{
  font-size:.6875rem !important;
  line-height:1.35 !important;
  letter-spacing:.01em !important;
  color:#9a8f83 !important;
  opacity:.75 !important;
  max-width:none !important;
  grid-column:1 / -1 !important;
  margin-top:1.5rem !important;
  padding-top:1rem !important;
  border-top:1px solid rgba(41,27,22,.06);
  text-align:left;
}
@media (max-width:768px){
  body.page-menu main p.caption[class*="col-span-6"]{
    font-size:.625rem !important;
    line-height:1.4 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 5 — Homepage 'Меню' button contrast.
   Two things: (a) the header nav "Меню" trigger and (b) the hero ghost
   button. The hero ghost had a near-transparent background against a
   busy image; force a solid warm-cream slab so the label is legible.
   The header trigger already sits on chocolate but hover→terracotta on
   chocolate reads muddy; deepen it.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero ghost button — solid cream slab, chocolate text; overrides char.css */
.hero a > button:not(.bg-terracotta){
  background:var(--color-cream, #f2e8d4) !important;
  color:var(--color-chocolate) !important;
  border:1px solid rgba(41,27,22,.10) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:0 8px 20px -14px rgba(41,27,22,.45) !important;
  transition:filter .2s ease, background-color .2s ease !important;
}
.hero a > button:not(.bg-terracotta):hover{
  background:#fff !important;
  border-color:rgba(41,27,22,.14) !important;
  filter:none !important;
}
.hero a > button:not(.bg-terracotta) > span{color:var(--color-chocolate) !important}

/* Header nav trigger — stay legible; hover to saffron (warm and clearly
   distinguished from the surrounding white/biege text) */
.site-header .nav-menu-trigger{color:inherit !important}
.site-header .nav-menu-trigger:hover,
.site-header header > div.col-span-5 > span > a.nav-menu-trigger:hover{
  color:var(--color-saffron, #d4a256) !important;
}
/* Header current-page "Меню" chip — cleaner treatment when dropdown open */
.site-header.is-open .nav-menu-trigger,
.site-header.is-open .nav-menu-trigger svg{color:var(--color-chocolate) !important}

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 6 — Menu popup (lightbox) images not rounded.
   ══════════════════════════════════════════════════════════════════════════ */

.lb img,
.lb.is-open img{border-radius:0 !important}

/* Also un-round the menu-panel dropdown thumbnails (they read as menu-popup
   imagery too and the owner asked for menu popup / lightbox unrounded) */
.menu-panel .group\/card > div.overflow-hidden,
.menu-panel .group\/card img{border-radius:0 !important}

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 7 — Interior page: separate text and imagery cleanly.
   Give copy blocks a cream card treatment so they never sit on top of
   image edges. Promote key panoramic tiles to full-bleed (edge-to-edge).
   The creative direction (Part B) also lands here — see below.
   ══════════════════════════════════════════════════════════════════════════ */

/* Copy blocks on the interior page — sit them in their own warm ivory
   card so they read as a considered pause, not text-lost-between-images.
   Card is a full shade lighter than the biege ground so it's *seen* as a
   card (not close-to-invisible), with a thin chocolate leading rule that
   picks up the column's editorial rhythm. */
body.page-interior main .sec > p.font-geometria.col-span-6,
body.page-interior main .sec > .gal-copy{
  background:#faf3e2;
  padding:clamp(22px, 2.4vw, 36px) clamp(22px, 2.6vw, 40px);
  border-radius:2px;
  border-left:3px solid var(--color-chocolate);
  box-shadow:0 12px 30px -22px rgba(41,27,22,.28);
  color:#3d2d24;
  align-self:start;
}
body.page-interior main .sec > .gal-copy > p{color:inherit}
body.page-interior main .sec > .gal-copy .gal-pair{margin-top:1.75rem}
/* The two paragraph pair immediately under the section head — split them
   into a clearly-separated pair with a hair of air between so they aren't
   read as one wall of copy. */
body.page-interior main .sec > p.font-geometria.col-span-6 + p.font-geometria.col-span-6{
  margin-left:0;
}

/* Panorama tiles (`media-pano`, and the .col-span-12 gallery tile) go
   full-bleed on wide viewports — edge-to-edge editorial. Uses viewport
   width with a negative margin to escape the 90rem container. */
@media (min-width:900px){
  body.page-interior main .sec > button[type="button"].col-span-12.media-pano,
  body.page-interior main .sec > button[type="button"].col-span-12{
    grid-column:1 / -1;
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    border-radius:0 !important;
    aspect-ratio:21/8;
    max-height:none;
  }
  body.page-interior main .sec > button[type="button"].col-span-12 img{border-radius:0 !important}
}

/* Section spacing — more air between the text block and the pano so the
   editorial rhythm reads clearly. */
body.page-interior main .sec{row-gap:clamp(28px, 3vw, 44px)}
body.page-interior main .sec .gal-pair{gap:clamp(12px, 1.4vw, 20px)}

/* Kill the nth-child(4n+2) vertical stagger — too much noise once the
   copy blocks are cream-carded; the eye already reads structure. */
@media (min-width:900px){
  body.page-interior main .gal > button.col-span-6:nth-child(4n+2){transform:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 8 — Simplify the Yandex map (fewer controls).
   The iframe has heavy widget chrome. Wrap it in an "iframe-simple"
   container that pointer-events-locks the map (view-only) and adds a
   single "Открыть в Яндекс.Картах" affordance on hover / focus.
   ══════════════════════════════════════════════════════════════════════════ */

.map-simple{position:relative;overflow:hidden;border-radius:2px}
.map-simple iframe{
  pointer-events:none;                 /* no zoom/pan/controls interaction */
  border:0;
  width:100%; height:100%;
  filter:saturate(.92) contrast(.98);
}
.map-simple .map-cta{
  position:absolute;
  left:12px; bottom:12px;
  padding:8px 14px;
  background:color-mix(in srgb, var(--color-chocolate) 88%, transparent);
  color:var(--color-cream, #f2e8d4);
  font-family:var(--font-geometria), sans-serif;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  border-radius:2px;
  z-index:2;
  transition:background-color .2s ease;
}
.map-simple .map-cta:hover{background:var(--color-chocolate)}

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 10 — Mobile footer: remove embedded map, show button only.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:768px){
  footer iframe,
  footer .map-simple iframe{display:none !important}
  footer .map-simple{
    height:auto !important;
    min-height:56px;
    background:transparent;
    display:flex; align-items:stretch; justify-content:stretch;
  }
  footer .map-simple .map-cta{
    position:static !important;
    display:flex; flex:1 1 auto; align-items:center; justify-content:center;
    padding:16px 20px;
    text-align:center;
    background:var(--color-chocolate);
    color:var(--color-cream);
    font-size:.8125rem; letter-spacing:.14em;
    border-radius:2px;
  }
  /* the static map JPEG right next to the iframe — also hide on mobile;
     the CTA becomes the sole map affordance. */
  footer img[alt*="Карта"]{display:none !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   PUNCH-LIST 11 — Mobile burger visibility + reliable tap target.
   Root cause: mobile.css sets `color:inherit` on .nav-burger. The parent
   <header> has no explicit color, so on the chocolate site-header the
   burger bars inherited an undefined/dark color and disappeared into the
   background. Force cream on chocolate; force chocolate when the sheet
   is open (white background). Also raise the z-index and enlarge the
   tap area so the tap actually lands.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:768px){
  .nav-burger{
    color:var(--color-cream, #f2e8d4) !important;
    z-index:60; position:relative;
    min-width:44px; min-height:44px;
  }
  .nav-burger span{background:currentColor !important}
  .site-header.is-nav .nav-burger{color:var(--color-chocolate) !important}

  /* Force the mobile nav sheet fully-open the moment `is-nav` is set.
     Root cause of the flake: the layered transitions and Tailwind
     `transition-colors` on the sheet div can leave it at opacity 0 and
     a transparent background after tap. We bypass transitions and pin
     every layout+paint prop explicitly. Height is computed rather than
     relying on top+bottom (some ancestors' containment appeared to make
     Chromium collapse the sheet to padding-only height). */
  html[lang] .site-header:not(.is-nav) header > div.col-span-5{
    display:none !important;
    opacity:1 !important;
    visibility:hidden !important;
    transform:none !important;
    transition:none !important;
  }
  html[lang] .site-header.is-nav header > div.col-span-5{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    position:fixed !important;
    top:64px !important;
    left:0 !important; right:0 !important;
    height:calc(100vh - 64px) !important;
    max-height:calc(100dvh - 64px) !important;
    padding:24px 20px calc(32px + env(safe-area-inset-bottom,0px)) !important;
    background:#fff !important;
    color:var(--color-chocolate) !important;
    text-align:left !important;
    overflow-y:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    transition:none !important;
    z-index:55 !important;
  }
  /* Child items — inline nav links inside the sheet — full-opacity
     immediately, no staggered reveal, no transform-off-canvas.
     Also normalise font/size so links read as a proper menu. */
  html[lang] .site-header.is-nav header > div.col-span-5 > a,
  html[lang] .site-header.is-nav header > div.col-span-5 > span,
  html[lang] .site-header.is-nav header > div.col-span-5 > span > a{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    transition-delay:0s !important;
    display:flex !important;
    color:var(--color-chocolate) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PART B — CREATIVE DIRECTION: less cookie-cutter, editorial and confident.
   Full-bleed heroes; edge-bleed panoramas; asymmetric layout accents on
   the homepage; considered overlap of image + heading; brand-safe.
   ══════════════════════════════════════════════════════════════════════════ */

/* Homepage hero — image already fills the viewport, but the copy sits
   dead-center like every template. Nudge the composition:
   • Push the CTA row a touch left so it reads as intentional off-center.
   • Add a saffron corner rule (bottom-left) so the eye has a leading edge. */
body.page-index .hero{position:relative}
body.page-index .hero > .mx-auto{width:100%}
body.page-index .hero > .mx-auto > .flex.flex-col{
  align-items:center;                          /* keep readable center */
}
@media (min-width:1100px){
  body.page-index .hero::before{
    /* editorial hairline rule: bottom-left corner mark */
    content:"";
    position:absolute;
    left:clamp(24px,4vw,80px); bottom:clamp(40px,5vh,80px);
    width:56px; height:1px;
    background:var(--color-saffron, #d4a256);
    z-index:11; opacity:.75;
  }
  body.page-index .hero .mx-auto{
    /* subtle right-of-center weight — 2% shift, unmistakably intentional */
    transform:translateX(1.5%);
  }
}

/* Homepage: promote panoramic imagery to true full-bleed edges.
   The site's `.h-197` big-photo blocks and the `.media-pano` blocks
   look padded on wide screens — kill the container padding for them. */
@media (min-width:1200px){
  body.page-index main img.h-197,
  body.page-index main .h-197,
  body.page-index main .media-pano{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    border-radius:0 !important;
  }
}

/* Homepage dish cards — remove the terracotta hover text (kept in fix #1)
   and give the row a hair more air so it reads editorial, not tiled. */
body.page-index main article[role="button"]{
  padding-bottom:.5rem;
}

/* Section heads on the homepage: bigger display type; the h2s currently
   sit modestly next to the eyebrow. Give the "Меню" / "Интерьер" / "О нас"
   heads a proper editorial scale — restrained, not shouting. */
@media (min-width:1200px){
  body.page-index main .sec-head h2{
    font-size:clamp(2.5rem, 3.6vw, 3.5rem);
    letter-spacing:-.025em;
  }
}

/* Interior page hero: image already full-bleed via .page-hero → just
   deepen the vignette and shift the title so it reads as an editorial
   plate rather than a centered card. */
body.page-interior .page-hero > .absolute.inset-0::after{
  background:linear-gradient(180deg,
    rgba(41,27,22,.28) 0%,
    rgba(41,27,22,.10) 40%,
    rgba(41,27,22,.55) 100%) !important;
}
body.page-interior .page-hero h1{
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}

/* (Editorial sidebar rule now unified with the base card rule above —
   both text blocks and .gal-copy share the same chocolate leading rule.) */

/* Menu page: bring the tab bar a hair closer to the content, and let
   the first row of cards feel less like it starts flush with a rule.
   Small, restrained editorial move. */
body.page-menu .mn-bar{padding-block:.5rem 1.75rem}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile safety net — hide any residual "reveal" transforms that leave
   the burger button off-canvas at the first paint (some devices).
   ══════════════════════════════════════════════════════════════════════════ */
.site-header .nav-burger{opacity:1 !important;visibility:visible !important;transform:none !important}

/* ── owner fix 2026-09-16: remove image hover-scale + square menu images ── */
.hover\:scale-105:hover{transform:none !important}
main button[type="button"]:hover img{transform:none !important;filter:none !important}
.mn-card:hover .mn-img img,.mn-img:hover img,.gal img:hover,.gal a:hover img,.menu-panel img:hover{transform:none !important}
.mn-img,.mn-img img,.mn-pdf-page,.menu-panel .mn-img,.menu-panel img{border-radius:0 !important}