/* Mobile layer for the Master Kitchen front page + doživetja detail pages.
   The design export uses inline styles throughout, so every rule here is
   !important on purpose — it is the only way a stylesheet can win. Value
   substrings ("80px 32px") are matched instead of full declarations so the
   selectors survive both raw style strings and React's re-serialization. */

/* overflow-x only on html: with hidden on BOTH html and body, body (100%
   tall via the dc-runtime's html,body{height:100%}) becomes its own scroll
   container, and every window.scrollTo — anchor links, scroll-to-top on
   route change — silently does nothing. clip prevents horizontal overflow
   without creating a scroll container. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
img, video { max-width: 100%; }

.mk-tabbar, .mk-sheet, .mk-sheet-backdrop { display: none; }

/* Sticky header: the nav's own bar declares position:sticky, but the runtime
   wraps each dc-import in a host div exactly as tall as the nav, so it has no
   room to stick. Promote that host wrapper instead — only for the solid/black
   variant (the overlay variant on detail pages declares position:relative). */
div:has(> div[style*="sticky"] .mk-nav-row) { position: sticky; top: 0; z-index: 50; }

@media (max-width: 900px) {
  /* ---- navigation: desktop links hidden; bottom tab bar + sheet (recepti-style, black) ---- */
  .mk-nav-links { display: none !important; }
  /* logo centered and sized like the recepti header brand (45px in a 61px bar) */
  .mk-nav-row { padding: 0 16px !important; height: 61px !important; justify-content: center !important; }
  .mk-nav-row > a img { height: 45px !important; }
  body { padding-bottom: 78px !important; }

  .mk-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    align-items: center; gap: 14px; padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #000000; border-top: 1px solid rgba(206, 175, 111, 0.35);
  }
  .mk-tab-cta {
    flex: 1; text-align: center; background: #CEAF6F; color: #000000;
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    padding: 10px 10px; border-radius: 6px; text-decoration: none;
  }
  .mk-tab-meni {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: #FFFFFF; font-size: 11px; cursor: pointer; padding: 2px 10px;
  }

  .mk-sheet-backdrop { position: fixed; inset: 0; z-index: 75; background: rgba(0, 0, 0, 0.5); }
  .mk-sheet-backdrop.is-open { display: block; }

  .mk-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: #0A0A0A; border-radius: 18px 18px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.14); border-bottom: none;
    padding: 6px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mk-sheet.is-open { transform: translateY(0); }
  .mk-sheet::before {
    content: ""; display: block; width: 36px; height: 4px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.28); margin: 8px auto 12px;
  }
  .mk-sheet a {
    display: block; padding: 14px 2px; color: #FFFFFF; font-size: 16px; font-weight: 500;
    text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mk-sheet a:last-child { border-bottom: none; }

  /* ---- typography scale ---- */
  h1 { font-size: clamp(34px, 9vw, 44px) !important; }
  h2 { font-size: clamp(24px, 6.5vw, 32px) !important; }

  /* ---- grids collapse to one column (stats + gallery below re-widen) ---- */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #vrh + div [style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  [style*="repeat(6"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- section paddings ---- */
  [style*="80px 32px"] { padding: 44px 20px !important; }
  [style*="72px 32px"] { padding: 40px 20px !important; }
  [style*="32px 32px 64px"] { padding: 24px 20px 44px !important; }
  [style*="24px 32px 0"] { padding: 18px 20px 0 !important; }
  [style*="20px 32px"] { padding: 16px 20px !important; }
  .mk-mnenja-inner { padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 48px !important; gap: 24px !important; }
  [style*="padding:0 32px"], [style*="padding: 0px 32px"] { padding: 0 20px !important; }

  /* ---- hero ---- */
  #vrh { height: calc(100svh - 64px) !important; min-height: 520px !important; }

  /* ---- doživetja section bands: shorter, lighter overlay cards ---- */
  section[style*="min-height:520px"], section[style*="min-height: 520px"] { min-height: 460px !important; height: 64vh !important; }
  [style*="padding:36px"], [style*="padding: 36px"] { padding: 20px !important; }
  [style*="padding:40px"], [style*="padding: 40px"] { padding: 20px !important; }

  /* ---- /dozivetja overview: 2-up cards on tablets, 1-up on phones ---- */
  .mk-dz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; padding: 0 20px 48px !important; }
  .mk-dz-head { padding: 24px 20px 28px !important; }
  .mk-dz-photo { height: 200px !important; }

  /* ---- footer ---- */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* ---- forms: comfortable tap targets ---- */
  #rezervacija input, #rezervacija select, #rezervacija textarea { font-size: 16px !important; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(30px, 10vw, 38px) !important; }
}

@media (max-width: 640px) {
  .mk-dz-grid { grid-template-columns: 1fr !important; }
  .mk-dz-photo { height: 210px !important; }
}