/* BongKnot Restaurant page.
   Scoped to #bongknot-restaurant and prefixed bkr- throughout: the theme owns
   bk-, the menu plugin owns bkm-, and three earlier bugs on this site came from
   a class name that already meant something else. Buttons are the one exception
   -- .bk-btn is reused, never redefined, so the page's actions match the site.
   Design tokens come from the theme (style.css :root); the fallbacks here only
   matter if that stylesheet fails to load. */

#bongknot-restaurant {
  --bkr-ink: var(--ink, #241512);
  --bkr-ivory: var(--ivory-ground, #FAF6EF);
  --bkr-paper: #F2EBE0;
  --bkr-maroon: var(--maroon, #7A1220);
  --bkr-maroon-deep: var(--maroon-deep, #5A0D18);
  --bkr-gold: var(--gold, #B08A3E);
  --bkr-muted: var(--muted, #6E5A50);
  --bkr-line: var(--line, #E3DACB);
  --bkr-pad: clamp(56px, 8vw, 116px);

  display: block;
  background: var(--bkr-ivory);
  color: var(--bkr-ink);
}

/* The page renders inside Hello Elementor's .site-main > .page-content, which
   is width-capped and padded. This page is built out of edge-to-edge bands, so
   on this page only that cap is released -- no 100vw, which would overflow by
   the width of the scrollbar. */
html body.bkr-page .site-main,
html body.bkr-page .page-content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
html body.bkr-page .page-header { display: none; }

#bongknot-restaurant .bkr-inner {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

#bongknot-restaurant p { margin: 0 0 1rem; }
#bongknot-restaurant p:last-child { margin-bottom: 0; }

/* One uppercase label per band, and gold only ever as a hairline. */
#bongknot-restaurant .bkr-label {
  font-family: var(--font-body, Karla), system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bkr-gold);
  margin: 0 0 18px;
}

#bongknot-restaurant .bkr-hair {
  width: 56px;
  height: 0;
  border: 0;
  border-top: 1px solid var(--bkr-gold);
  margin: 28px 0 0;
}

/* ---------- Hero ---------- */
#bongknot-restaurant .bkr-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(400px, 54vh, 560px);
  background: var(--bkr-maroon-deep);
  color: var(--bkr-ivory);
  padding-block: clamp(64px, 10vw, 120px);
}
#bongknot-restaurant .bkr-hero .bkr-inner { max-width: 880px; text-align: center; }
#bongknot-restaurant .bkr-mark {
  display: block;
  width: 40px;
  height: 0;
  border-top: 1px solid var(--bkr-gold);
  margin: 0 auto 20px;
}
#bongknot-restaurant .bkr-hero h1 {
  color: var(--bkr-ivory);
  max-width: 20ch;
  text-wrap: balance;
  margin: 0 auto;
  text-shadow: 0 1px 28px rgba(36, 21, 18, 0.3);
}
#bongknot-restaurant .bkr-hero .bkr-lede {
  margin: 22px auto 0;
  max-width: 54ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(250, 246, 239, 0.9);
}
#bongknot-restaurant .bkr-hero .bkr-label {
  color: rgba(250, 246, 239, 0.82);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  #bongknot-restaurant .bkr-hero > .bkr-inner > * {
    animation: bkr-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  #bongknot-restaurant .bkr-mark { animation-delay: 0ms; }
  #bongknot-restaurant .bkr-hero .bkr-label { animation-delay: 80ms; }
  #bongknot-restaurant .bkr-hero h1 { animation-delay: 160ms; }
  #bongknot-restaurant .bkr-hero .bkr-lede { animation-delay: 260ms; }
}
@keyframes bkr-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Story chapters ---------- */
#bongknot-restaurant .bkr-chapter { padding-block: var(--bkr-pad); }
#bongknot-restaurant .bkr-chapter--began { background: var(--bkr-ivory); }
#bongknot-restaurant .bkr-chapter--today { background: var(--bkr-paper); }

#bongknot-restaurant .bkr-chapter .bkr-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
#bongknot-restaurant .bkr-chapter--today .bkr-plate { order: 2; }

#bongknot-restaurant .bkr-copy h2 { margin: 0; max-width: 16ch; text-wrap: balance; }
#bongknot-restaurant .bkr-copy p {
  margin: 20px 0 0;
  max-width: 48ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--bkr-muted);
}

/* ---------- Photograph plates ---------- */
#bongknot-restaurant .bkr-plate { margin: 0; }
#bongknot-restaurant .bkr-frame {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}
/* The offset keyline reads as a mount, not a border, and keeps gold to 1px. */
#bongknot-restaurant .bkr-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(36, 21, 18, 0.16);
  pointer-events: none;
}
#bongknot-restaurant .bkr-plate img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#bongknot-restaurant .bkr-frame:hover img { transform: scale(1.028); }

#bongknot-restaurant .bkr-plate--began .bkr-frame { max-width: 460px; }
#bongknot-restaurant .bkr-plate--today .bkr-frame { max-width: 380px; margin-inline-start: auto; }
/* The Bhartiya City photograph is a tall phone frame. Cropped to 2:3 it keeps
   the signage and the menu board, and the section stops running to two screens. */
#bongknot-restaurant .bkr-plate--today img { aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 14%; }

#bongknot-restaurant figcaption {
  margin: 18px 0 0;
  font-family: var(--font-body, Karla), system-ui, sans-serif;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bkr-muted);
  max-width: 460px;
}
#bongknot-restaurant .bkr-plate--today figcaption { max-width: 380px; margin-inline-start: auto; }

/* ---------- Address ---------- */
#bongknot-restaurant .bkr-addr {
  margin: 28px 0 0;
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--bkr-gold);
  font-style: normal;
  line-height: 1.75;
  color: var(--bkr-ink);
}
#bongknot-restaurant .bkr-addr span { display: block; }
#bongknot-restaurant .bkr-addr .bkr-addr-note {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--bkr-muted);
}

/* ---------- Forward look ---------- */
#bongknot-restaurant .bkr-forward {
  background: var(--bkr-ivory);
  padding-block: clamp(48px, 7vw, 92px);
  border-top: 1px solid var(--bkr-line);
}
#bongknot-restaurant .bkr-forward .bkr-inner { max-width: 760px; text-align: center; }
#bongknot-restaurant .bkr-forward h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0; }
#bongknot-restaurant .bkr-forward p {
  margin: 18px auto 0;
  max-width: 54ch;
  color: var(--bkr-muted);
  line-height: 1.75;
}
#bongknot-restaurant .bkr-forward .bkr-label { color: var(--bkr-gold); }

/* ---------- Brand statement ---------- */
#bongknot-restaurant .bkr-statement {
  background: var(--bkr-maroon);
  color: var(--bkr-ivory);
  padding-block: clamp(72px, 11vw, 148px);
}
#bongknot-restaurant .bkr-statement .bkr-say {
  font-family: var(--font-heading, Marcellus), Georgia, serif;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--bkr-ivory);
}
#bongknot-restaurant .bkr-statement .bkr-say span { display: block; }
#bongknot-restaurant .bkr-statement .bkr-say::before {
  content: '';
  display: block;
  width: 56px;
  border-top: 1px solid var(--bkr-gold);
  margin-bottom: 36px;
}
#bongknot-restaurant .bkr-statement p {
  margin: 32px 0 0;
  max-width: 46ch;
  color: rgba(250, 246, 239, 0.75);
  line-height: 1.7;
}

/* ---------- Visit ---------- */
#bongknot-restaurant .bkr-visit {
  background: var(--bkr-ivory);
  padding-block: var(--bkr-pad);
}
#bongknot-restaurant .bkr-visit .bkr-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
#bongknot-restaurant .bkr-visit h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); }
#bongknot-restaurant .bkr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: start;
  padding-top: 8px;
}
#bongknot-restaurant .bkr-actions .bk-btn { flex: 0 0 auto; padding: 15px 24px; }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  #bongknot-restaurant .bkr-chapter .bkr-inner,
  #bongknot-restaurant .bkr-visit .bkr-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  #bongknot-restaurant .bkr-chapter--today .bkr-plate { order: 0; }
  #bongknot-restaurant .bkr-plate--today .bkr-frame,
  #bongknot-restaurant .bkr-plate--today figcaption { margin-inline-start: 0; }
  #bongknot-restaurant .bkr-copy h2,
  #bongknot-restaurant .bkr-hero h1 { max-width: none; }
}
@media (max-width: 480px) {
  #bongknot-restaurant .bkr-actions { flex-direction: column; align-items: stretch; }
  #bongknot-restaurant .bkr-actions .bk-btn { text-align: center; }
}