/* === Restaurace Mrač — Production Stylesheet === */

/* --- Custom Properties --- */
:root {
  --bg: oklch(0.97 0.012 60);
  --bg-alt: oklch(0.94 0.015 60);
  --text: oklch(0.22 0.015 50);
  --text-muted: oklch(0.5 0.02 50);
  --text-faint: oklch(0.6 0.01 50);
  --text-footer: oklch(0.55 0.02 50);
  --accent: oklch(0.42 0.1 32);
  --accent-dark: oklch(0.32 0.06 35);
  --label-color: oklch(0.5 0.08 35);
  --border: oklch(0.88 0.02 60);
  --border-dashed: oklch(0.85 0.02 50);
  --border-light: oklch(0.8 0.02 50);
  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;
  --space-section: 50px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 40px;
}

/* --- Base / Reset --- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

a {
  color: inherit;
}

/* --- Layout --- */
.container {
  max-width: 1100px;
  margin: 0 auto;
}

.section {
  padding: var(--space-section) 24px;
}

.section-alt {
  background: var(--bg-alt);
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
  align-items: center;
}

/* --- Header / Nav --- */
/* Zero-height anchor placed at the very top of <body> so the logo's href="#top" scrolls to the
   top: the sticky header is always on-screen, so pointing #top AT it does not scroll (a target that
   never leaves the viewport is treated as already in view). This in-flow sentinel scrolls out of view,
   restoring the link. */
.top-sentinel {
  display: block;
  height: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
}

.site-logo {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--accent-dark);
  text-decoration: none;
}

.desktop-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  font-weight: 500;
}

.nav-link {
  text-decoration: none;
}

.hamburger {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}

.hamburger-line {
  width: 22px;
  height: 2px;
  background: var(--text);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 0 24px 16px;
  gap: 14px;
  font-size: 15px;
  font-weight: 500;
}

/* The open mobile menu is a full-viewport overlay: a translucent dark scrim slightly darkens
   the page behind it while `backdrop-filter` frosts (blurs) it — the pre-regression look. It is a
   sibling of the sticky header and sits BELOW it in the stack (z-index 15 < header 20), so the
   opaque header bar — logo + the hamburger that closes the menu — stays crisp and clickable above
   the scrim; only the page content beneath the header is dimmed/blurred. `-webkit-` prefix for
   Safari; where `backdrop-filter` is unsupported the translucent scrim still darkens the backdrop. */
.mobile-nav.is-open {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 15;
  padding: 88px 24px 24px;
  gap: 22px;
  align-items: flex-start;
  background: rgba(20, 18, 16, .55);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}

.mobile-nav.is-open .nav-link {
  color: var(--bg);
  font-size: 18px;
  font-weight: 600;
}

/* --- Hero --- */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0;
  align-items: stretch;
}

.hero-text {
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation-delay: .05s;
}

.hero-heading {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
}

.hero-subtitle {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 420px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Buttons --- */
.btn-primary {
  padding: 12px 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.btn-outline {
  padding: 12px 22px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* --- Section Headings --- */
.section-header {
  margin-bottom: 28px;
}

.section-label {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label-color);
}

.section-heading {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
}

.sub-heading {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
}

/* --- Menu --- */
.menu-category {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.menu-columns {
  columns: 2 300px;
  column-gap: 36px;
  margin-bottom: 24px;
}

/* Very short sections (1-2 dishes) read better as one column: side-by-side a
   lone pair would leave each dish sitting at the bottom of its own column, so
   the dashed separator would underline nothing. The renderer opts into this. */
.menu-columns--single {
  columns: 1;
}

.menu-item {
  break-inside: avoid;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border-dashed);
}

/* The dashed rule separates two dishes; it is meaningless under the last dish
   of a column, and CSS multicol cannot target "last in column" — so drop it on
   the tail of the flow (the last item of the last column) here. */
.menu-columns > .menu-item:last-child {
  border-bottom: none;
}

.menu-item--no-border {
  border-bottom: none;
}

.menu-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
}

.menu-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.menu-item-portion {
  font-size: 10px;
  color: var(--text-faint);
}

.menu-item-allergens {
  display: block;
  text-align: right;
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 2px;
  text-decoration: underline;
  cursor: pointer;
}

.menu-divider {
  border-top: 1px solid var(--border-light);
  margin: 0 0 20px;
}

.allergen-note {
  margin: 24px 0 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.allergen-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 20px;
  padding: 16px 18px;
  background: var(--bg-alt);
  border-radius: 10px;
  scroll-margin-top: 20px;
}

.allergen-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}

.allergen-num {
  font-weight: 700;
  color: var(--accent);
}

/* --- Menu (data-driven): rendered by main.js from menu.json --- */
.menu-banner {
  margin: 0 0 20px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.menu-empty {
  color: var(--text-muted);
  font-size: 15px;
  margin: 6px 0 0;
}

/* --- Events / Capacity Cards --- */
#akce .section-heading {
  margin-bottom: 12px;
}

.events-description {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
}

.capacity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-sm);
}

.capacity-card {
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  text-align: center;
}

.capacity-number {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--accent);
}

.capacity-label {
  font-size: 12px;
  color: var(--text-muted);
}

.section-image {
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

#akce .section-image {
  height: 200px;
}

/* --- Garden --- */
#zahrada .section-heading {
  margin: 0 0 10px;
}

.garden-text {
  order: 2;
}

.garden-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.garden-image {
  height: 260px;
  order: 1;
}

/* --- Hours / Contact --- */
#hours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.hrs-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.contact-address {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.6;
}

.contact-links {
  margin: 0 0 10px;
  font-size: 15px;
}

.contact-link {
  color: var(--accent);
  text-decoration: none;
}

.contact-phone {
  font-weight: 600;
}

.contact-id {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* --- Map --- */
.map-section {
  padding: var(--space-lg) 24px 40px;
}

.map-container {
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
}

.map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Footer --- */
.site-footer {
  padding: 18px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-footer);
  border-top: 1px solid var(--border);
}

/* --- Gallery --- */
.hero-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
  animation-delay: .2s;
  touch-action: pan-y;
}

.gallery-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* .9s (was .5s): the auto-advance wants a long, soft crossfade, not a cut. */
  transition: opacity .9s ease;
}

.gallery-slide[data-slide="0"] {
  opacity: 1;
}

.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-prev {
  left: 10px;
}

.gallery-next {
  right: 10px;
}

.gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}

.gallery-dot[data-dot="0"] {
  background: var(--accent);
}

/* Auto-advance pause control — a small disc echoing ‹ › (same ink wash), top-right where
   nothing else sits. Pause bars show while drifting; a play triangle once paused
   (aria-pressed="true"). WCAG 2.2.2: auto-advancing content needs a visible way to stop.
   The gate class is set by initGallery ITSELF (main.js) — not by any inline marker — so
   the button can only ever appear once it is actually wired: no JS, or a main.js that
   failed to load, leaves it hidden rather than dead. */
.gallery-pause {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.gallery-pause svg {
  display: block;
}

.gallery-pause .gp-play {
  display: none;
}

.gallery-pause[aria-pressed="true"] .gp-pause {
  display: none;
}

.gallery-pause[aria-pressed="true"] .gp-play {
  display: block;
}

html:not(.gallery-ready) .gallery-pause {
  display: none;
}

/* Reduced motion: no crossfade, and main.js starts the auto-advance OFF from the
   same query (drift stays available behind the explicit pause/play opt-in). */
@media (prefers-reduced-motion: reduce) {
  .gallery-slide {
    transition: none;
  }
}

/* --- Animations --- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
}

.reveal.is-visible {
  animation: fadeUp .7s cubic-bezier(.22, .61, .36, 1) forwards;
}

/* --- Scroll-margin for anchor targets --- */
#menu, #akce, #zahrada, #kontakt, #alergeny-tabulka {
  scroll-margin-top: 84px;
}

/* --- Responsive overrides --- */
@media (max-width: 700px) {
  .desktop-nav {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
  }
}

@media (max-width: 700px) {
  [data-hero-text] {
    padding: 32px 24px 24px !important;
  }

  #hero-gallery {
    width: calc(100% - 48px) !important;
    margin: 24px auto !important;
  }

  #zahrada > div {
    order: 1 !important;
  }

  #zahrada > img {
    order: 2 !important;
  }

  #alergeny-tabulka {
    scroll-margin-top: 16px;
  }
}

@media (min-width: 701px) {
  .soup-1 {
    border-bottom: none !important;
  }

  /* The two-column hero grid has no side padding or gap, so the image column (unlike the text
     column's own 24px padding) sat flush against the container's right edge. The slides are
     absolutely positioned and the item is width:100%, so a margin would only overflow outward;
     the gutter must come from a reduced width — the desktop counterpart of the mobile
     `calc(100% - 48px)` centering, here a 24px right gutter. */
  #hero-gallery {
    width: calc(100% - 24px);
  }
}