/* ==========================================================================
   VIBE Budapest — Components
   Header / nav / dropdowns / language toggle / footer / hero / splits /
   cards / watermark / contact band. Reusable across all page templates.
   ========================================================================== */

/* ==========================================================================
   HEADER  (slim ~100px, transparent over hero, solidifies on scroll)
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  transition: height var(--t-med) var(--ease),
              background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 40px);
}

/* scrolled / solid state (toggled by nav.js) + non-hero pages get it by default */
.site-header.is-solid,
.site-header--solid {
  height: var(--header-h-scrolled);
  background: rgba(0,24,7,.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: clamp(34px, 4vw, 46px); width: auto; }

/* --- Primary nav --------------------------------------------------------- */
.nav { display: flex; align-items: center; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__item { position: relative; }
.nav__link {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .4em 0;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  transition: color var(--t-fast) var(--ease);
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav__link:hover,
.nav__item:hover > .nav__link,
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link:hover::after,
.nav__item:hover > .nav__link::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__caret {
  width: .5em; height: .5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--t-fast) var(--ease);
  opacity: .8;
}
.nav__item:hover .nav__caret,
.nav__item.is-open .nav__caret { transform: rotate(225deg) translateY(-1px); }

/* --- Dropdown ------------------------------------------------------------ */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: rgba(1,29,8,.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility var(--t-med);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.nav__dropdown::before {  /* hover bridge so the gap doesn't close the menu */
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nav__item:hover > .nav__dropdown,
.nav__item.is-open > .nav__dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown a {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .7em .9em;
  border-radius: 8px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__dropdown a:hover { background: rgba(201,162,75,.12); color: var(--ink); }

/* --- Header right cluster (lang toggle + CTA + burger) ------------------- */
.header-actions { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 22px); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
}
.lang-toggle a {
  color: var(--ink-mute);
  padding: .2em .15em;
  transition: color var(--t-fast) var(--ease);
}
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle a[aria-current="true"] { color: var(--accent); }
.lang-toggle .sep { color: var(--ink-faint); }

.header-cta { display: inline-flex; }
.header-cta .btn { --btn-pad-y: .7em; --btn-pad-x: 1.4em; }

/* --- Hamburger ----------------------------------------------------------- */
.burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.5px;
  background: var(--accent);
  transform: translate(-50%,-50%);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger span:nth-child(1) { margin-top: -5px; }
.burger span:nth-child(3) { margin-top: 5px; }
.burger.is-active span:nth-child(1) { margin-top: 0; transform: translate(-50%,-50%) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; }
.burger.is-active span:nth-child(3) { margin-top: 0; transform: translate(-50%,-50%) rotate(-45deg); }

/* ==========================================================================
   MOBILE NAV (slide-in panel)
   ========================================================================== */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 8px) var(--gutter) var(--gutter);
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease);
  overflow-y: auto;
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list > li { border-bottom: 1px solid var(--line-soft); }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  color: var(--ink);
  padding: .55em 0;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.mobile-nav__sub { list-style: none; margin: 0 0 .6em; padding: 0 0 0 2px; display: none; }
.mobile-nav__sub.is-open { display: block; }
.mobile-nav__sub a {
  display: block;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .55em 0;
}
.mobile-nav__plus { color: var(--accent); font-size: .7em; transition: transform var(--t-fast) var(--ease); }
.mobile-nav__link.is-open .mobile-nav__plus { transform: rotate(45deg); }
.mobile-nav__foot {
  margin-top: auto;
  padding-top: var(--block-gap);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobile-nav__foot .btn { justify-content: center; }
.mobile-nav__foot .lang-toggle { font-size: .8rem; }

body.nav-open { overflow: hidden; }

/* ==========================================================================
   HERO  (full-bleed photo, scrim, one centred Cormorant headline)
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 880px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,24,7,.42) 0%, rgba(0,24,7,.30) 40%, rgba(0,24,7,.82) 100%),
    radial-gradient(120% 90% at 50% 38%, rgba(0,29,8,0) 30%, rgba(0,29,8,.55) 100%);
}

/* --- Mobile-only hero video (portrait); desktop keeps the photo --------- */
.hero__video { display: none; }
.hero__sound { display: none; }
@media (max-width: 860px) {
  .hero__media .hero__img { display: none; }
  .hero__video {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .hero__sound {
    display: inline-flex;
    align-items: center; justify-content: center;
    position: absolute;
    right: var(--gutter);
    bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
    z-index: 2;
    width: 46px; height: 46px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: rgba(0, 24, 7, .5);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: var(--accent);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .hero__sound svg { width: 22px; height: 22px; fill: currentColor; }
  .hero__sound .hero__sound-on { display: none; }
  .hero__sound.is-on { background: var(--accent); color: var(--bg-deep); }
  .hero__sound.is-on .hero__sound-off { display: none; }
  .hero__sound.is-on .hero__sound-on { display: block; }
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  padding: calc(var(--header-h) + 40px) var(--gutter) 60px;
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 400;
  letter-spacing: .004em;
}
.hero__tagline {
  margin-top: clamp(18px, 2.5vw, 30px);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}
.hero__label { margin-bottom: clamp(18px, 2.5vw, 28px); }
.hero__actions {
  margin-top: clamp(30px, 4vw, 46px);
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
/* shorter hero for inner pages */
.hero--inner { min-height: clamp(440px, 66vh, 600px); }

/* ==========================================================================
   SECTION HEADER (label + one serif headline + optional lead)
   ========================================================================== */
.section-head { max-width: 62ch; }
.section-head--center { max-width: var(--max-narrow); margin-inline: auto; text-align: center; }
.section-head .label { margin-bottom: 18px; }
.section-head .hairline--short { margin-top: 22px; }
.section-head--center .hairline--short { margin-inline: auto; }
.section-head__title { font-size: var(--fs-h1); }
.section-head .lead { margin-top: 22px; }
.section-head--center .lead { margin-inline: auto; }

/* ==========================================================================
   CENTRED SERIF STATEMENT (COYA — generous whitespace)
   ========================================================================== */
.statement { text-align: center; max-width: var(--max-narrow); margin-inline: auto; }
.statement__quote {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: 1.12;
  color: var(--ink);
}
.statement__sub { margin-top: 26px; color: var(--ink-soft); font-size: var(--fs-lead); }

/* Faded gold watermark word behind a band (COYA depth, used sparingly) */
.watermark { position: relative; overflow: hidden; }
.watermark__word {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--serif);
  font-size: clamp(8rem, 30vw, 26rem);
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  opacity: .06;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Icon variant of the watermark (the Instagram band) — same placement, scale
   and opacity as .watermark__word, but a mark rather than a letterform. */
.watermark__mark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  display: block;
  width: clamp(9rem, 32vw, 26rem);
  color: var(--accent);
  opacity: .06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.watermark__mark svg { display: block; width: 100%; height: auto; fill: currentColor; }
.watermark > .container { position: relative; z-index: 1; }

/* ==========================================================================
   SPLIT  (green panel / full-bleed photo — Amazónico signature)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}
.split--reverse .split__media { order: 2; }
.split__media { align-self: stretch; }
.split__media .frame { height: 100%; min-height: clamp(320px, 42vw, 560px); }
.split__body { max-width: 52ch; }
.split__body .label { margin-bottom: 18px; }
.split__body h2 { font-size: var(--fs-h1); margin-bottom: 8px; }
.split__body .hairline--short { margin: 22px 0; }
.split__body .body-copy { margin-bottom: 30px; }

/* ==========================================================================
   CARD GRID  (serif-label-over-photo cards — universal card treatment)
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--img-frame);
  overflow: hidden;
  min-height: clamp(360px, 40vw, 520px);
  isolation: isolate;
}
.card__media { position: absolute; inset: 0; z-index: -1; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--scrim);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__body { margin-top: auto; padding: clamp(22px, 2.4vw, 34px); }
.card__title { font-size: var(--fs-h2); margin-bottom: 12px; }
.card__text { color: var(--ink-soft); font-size: var(--fs-body); margin-bottom: 22px; max-width: 36ch; }
.card__border {  /* thin gold hairline frame inside card */
  position: absolute; inset: 14px; z-index: 0;
  border: 1px solid var(--line); border-radius: calc(var(--img-frame) - 6px);
  pointer-events: none;
}

/* Photo strip (edge-to-edge experience photos, no captions) */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-strip .frame { min-height: clamp(220px, 24vw, 360px); border-radius: 0; }

/* ==========================================================================
   FEATURE FALLBACK  (rounded card paired with serif heading — COYA rows)
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.feature--reverse .feature__media { order: 2; }
.feature__media .frame { min-height: clamp(300px, 38vw, 480px); }

/* ==========================================================================
   CONTACT BAND  ("ESS KÍSÉRTÉSBE!" + hours + address + CTA)
   ========================================================================== */
.contact-band { text-align: center; }
.contact-band__title { font-size: var(--fs-h1); }
.hours {
  list-style: none; margin: 0; padding: 0;
  display: inline-flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.hours li {
  display: flex; justify-content: space-between; gap: 48px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-body);
  color: var(--ink-soft);
}
.hours li span:first-child { color: var(--ink); }
.contact-meta { color: var(--ink-soft); line-height: 1.9; }
.contact-meta a:hover { color: var(--accent); }

/* ==========================================================================
   MENU / DOC CARDS  (PDF download cards, category lists)
   ========================================================================== */
.doc-card {
  border: 1px solid var(--line);
  border-radius: var(--img-frame);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 18px;
  background: rgba(244,239,228,.02);
}
.doc-card h3 { font-size: var(--fs-h3); }
.cat-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.cat-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: var(--fs-h3);
  color: var(--ink);
  break-inside: avoid;
}
.fineprint { font-size: .8rem; color: var(--ink-mute); max-width: 70ch; line-height: 1.6; }

/* Menu layout: the section's category list beside its PDF download card.
   List leads (wider), doc-card rides alongside (narrower). Stacks on phone.
   (Retained for any page that still pairs a list with a card.) */
.menu-doc {
  display: grid;
  grid-template-columns: 1.5fr .9fr;
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
}
.menu-doc .cat-list { columns: 2; }
.menu-doc .doc-card { position: sticky; top: calc(var(--header-h-scrolled) + 24px); }
@media (max-width: 860px) {
  .menu-doc { grid-template-columns: 1fr; }
  .menu-doc .cat-list { columns: 1; }
  .menu-doc .doc-card { position: static; order: 2; }
}

/* Standalone menu block: the category list is the primary content (no PDF card).
   A centred, framed menu panel with the category names set in the display serif,
   two balanced columns on desktop collapsing to one clean column on phone.
   Gold hairline dividers give it the feel of a printed menu page. */
.menu-list {
  max-width: var(--max-narrow);
  margin-inline: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(28px, 4vw, 48px);
}
.menu-list .cat-list {
  columns: 2;
  column-gap: clamp(40px, 6vw, 80px);
}
.menu-list .cat-list li {
  text-align: center;
  font-size: var(--fs-h2);
  letter-spacing: .01em;
  padding: clamp(14px, 1.6vw, 20px) 0;
}
@media (max-width: 700px) {
  .menu-list .cat-list { columns: 1; }
}

/* ==========================================================================
   FORM  (accessible gold-outline inputs + pill submit — contact / recruitment)
   Token-driven; matches the button + hairline language. Used on Contact & Team.
   ========================================================================== */
.form { max-width: var(--max-narrow); margin-inline: auto; }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 28px);
}
.form__field { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.form__field--full { grid-column: 1 / -1; }
.form__label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form__label .req { color: var(--accent); margin-left: .2em; }
.form__control {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--ink);
  background: rgba(244,239,228,.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .85em 1em;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.form__control::placeholder { color: var(--ink-faint); }
.form__control:hover { border-color: var(--accent-faint); }
.form__control:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(244,239,228,.05);
}
textarea.form__control { resize: vertical; min-height: 140px; line-height: 1.6; }
select.form__control {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 22px) center, calc(100% - 16px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6em;
  cursor: pointer;
}
select.form__control option { background: var(--bg-deep); color: var(--ink); }
/* File upload — styled label wrapping a visually-hidden input */
.form__file {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: .85em 1.1em;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.form__file:hover { border-color: var(--accent); color: var(--ink); }
.form__file::before { content: "+"; color: var(--accent); font-size: 1.2em; line-height: 1; }
.form__note { font-size: .8rem; color: var(--ink-mute); margin-top: 4px; }
.form__actions { margin-top: clamp(8px, 1.5vw, 16px); }
.form__hint { font-size: .8rem; color: var(--ink-mute); margin-top: 14px; max-width: 60ch; }
@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTACT GRID  (info column + form / map on the contact page)
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.contact-info { color: var(--ink-soft); }
.contact-info h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.contact-info .info-block { margin-bottom: clamp(24px, 3vw, 36px); }
.contact-info .info-block p { line-height: 1.85; }
.contact-info .info-block a:hover { color: var(--accent); }
.contact-info .label { display: block; margin-bottom: 12px; }
.contact-socials { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.contact-socials a {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-socials a:hover { color: var(--accent); }

/* Embedded Google map — gold-framed, fluid 4:3 / 16:9 */
.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--img-frame);
  overflow: hidden;
  line-height: 0;
}
.map-frame iframe { width: 100%; height: clamp(300px, 42vw, 460px); border: 0; display: block; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   EVENT CARDS  (events listing — repeatable grid; wire to client data source)
   ========================================================================== */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(22px, 2.6vw, 38px);
}
.event-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--img-frame);
  overflow: hidden;
  background: rgba(244,239,228,.02);
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.event-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.event-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.event-card:hover .event-card__media img { transform: scale(1.05); }
.event-card__date {
  position: absolute;
  left: 16px; top: 16px;
  background: rgba(0,24,7,.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4em 1em;
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.event-card__body { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.event-card__kicker {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.event-card__title { font-size: var(--fs-h3); }
.event-card__text { color: var(--ink-soft); font-size: var(--fs-body); }
.event-card__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.event-card__time { font-size: var(--fs-label); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-mute); }

/* ==========================================================================
   LEGAL PAGE  (privacy / terms — restrained, mostly type, readable measure)
   A slim page title + a single readable prose column. Low-key by design:
   no photography, no bands — just disciplined type on the green canvas.
   ========================================================================== */
.legal {
  max-width: 70ch;
  margin-inline: auto;
}
.legal__head { text-align: center; margin-bottom: var(--block-gap); }
.legal__head .label { margin-bottom: 18px; }
.legal__head h1 { font-size: var(--fs-h1); }
.legal__head .hairline--short { margin: 22px auto 0; }
/* Boxed placeholder note — visibly marks the page as awaiting client copy */
.legal__notice {
  border: 1px solid var(--accent);
  border-radius: var(--img-frame);
  background: rgba(201,162,75,.06);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
  margin-bottom: var(--block-gap);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink);
}
.legal__notice strong { font-style: normal; color: var(--accent); }
/* Prose: labelled section headings + readable body, comfortable measure */
.legal__section { margin-bottom: clamp(30px, 4vw, 52px); }
.legal__section h2 {
  font-size: var(--fs-h3);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.legal__section p { color: var(--ink-soft); max-width: 66ch; }
.legal__section p + p { margin-top: 1.1em; }
.legal__section .placeholder {
  color: var(--ink-mute);
  font-style: italic;
}
.legal__meta {
  margin-top: var(--block-gap);
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--line-soft);
  color: var(--ink-mute);
  font-size: .9rem;
  line-height: 1.9;
}
.legal__meta strong { color: var(--ink-soft); font-weight: 500; }

/* ==========================================================================
   REVIEWS  (homepage — SAMPLE/placeholder quote cards; wire to live feed)
   Gold quote marks, restrained card. On .section--paper the colours invert
   via the paper rules below so the placeholder reads cleanly on ivory.
   ========================================================================== */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  margin-top: var(--block-gap);
}
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--img-frame);
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 32px);
  background: rgba(244,239,228,.02);
}
.review-card::before {
  content: "\201C";              /* gold opening quote mark */
  font-family: var(--serif);
  font-size: 4.2rem;
  line-height: .7;
  color: var(--accent);
  opacity: .8;
}
.review-card__text {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--ink);
}
.review-card__foot { margin-top: auto; }
.review-card__name {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.review-card__src { display: block; margin-top: 6px; color: var(--ink-mute); font-size: .82rem; }
.review-card__tag {
  position: absolute;
  right: clamp(16px, 2vw, 24px); top: clamp(16px, 2vw, 24px);
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: .3em .8em;
}
/* Paper variant (homepage reviews sit on .section--paper) */
.section--paper .review-card {
  border-color: var(--line-on-paper);
  background: rgba(28,36,25,.02);
}
.section--paper .review-card::before { color: var(--accent-deep); }
.section--paper .review-card__text { color: var(--ink-on-paper); }
.section--paper .review-card__name { color: var(--accent-deep); }
.section--paper .review-card__src { color: var(--ink-on-paper-soft); }
.section--paper .review-card__tag { color: var(--ink-on-paper-soft); border-color: var(--line-on-paper); }

/* ==========================================================================
   INSTAGRAM GRID  (homepage — on-brand photo tiles → @vibe.budapest)
   Real Vibe photos as tiles; the whole grid links out to the live profile.
   Wire to the live IG feed in the instagram work package (do not fake posts).
   ========================================================================== */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 14px);
  margin-top: var(--block-gap);
}
.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--img-frame) - 4px);
  isolation: isolate;
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.ig-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,29,8,0) 40%, rgba(0,29,8,.5) 100%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.ig-tile:hover img { transform: scale(1.06); }
.ig-tile:hover::after { opacity: 1; }
.ig-tile__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--ink);
  opacity: 0;
  transform: scale(.9);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.ig-tile__mark svg { width: clamp(28px, 3vw, 38px); height: auto; fill: currentColor; }
.ig-tile:hover .ig-tile__mark { opacity: 1; transform: scale(1); }
@media (max-width: 860px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   FOOTER  (deep green, columns, legal row)
   ========================================================================== */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding-top: var(--section-y);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: var(--block-gap);
}
.footer-brand img { height: 44px; margin-bottom: 22px; }
.footer-brand p { color: var(--ink-mute); max-width: 30ch; font-size: .92rem; }
.footer-col h4 {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 12px; }
.footer-col a, .footer-col p { color: var(--ink-soft); font-size: .92rem; transition: color var(--t-fast) var(--ease); }
.footer-col a:hover { color: var(--accent); }
.socials { display: flex; gap: 16px; flex-wrap: wrap; }
.socials a {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.footer-legal {
  border-top: 1px solid var(--line-soft);
  padding-block: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .78rem;
  color: var(--ink-mute);
}
.footer-legal a { color: var(--ink-mute); }
.footer-legal a:hover { color: var(--accent); }
.footer-legal .legal-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
}

@media (max-width: 860px) {
  .nav, .header-cta { display: none; }
  .burger { display: block; }
  .split, .feature, .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; }
  .split--reverse .split__media,
  .feature--reverse .feature__media { order: 0; }
  .split__media .frame, .feature__media .frame { min-height: clamp(260px, 60vw, 420px); }
  .photo-strip { grid-template-columns: 1fr; }
  .cat-list { columns: 1; }
  .hours li { gap: 24px; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; }
}

/* Desktop: hide mobile-only chrome */
@media (min-width: 861px) {
  .mobile-nav { display: none; }
}

/* ==========================================================================
   ── 2026-08 IA REBUILD ADDITIONS ──────────────────────────────────────────
   New reusable components for the v9 + page-structure(CSV) information
   architecture. Same rules as the rest of the file: tokens only, no page-level
   colours/fonts. Documented in PARTIALS.md.
   ========================================================================== */

/* ==========================================================================
   HEADER — sticky bar layout per the page-structure spec
   Desktop : logo left · nav + language centre · Book now right
   Mobile  : logo left · Book now centre · hamburger right
   Only "Menus" carries a desktop dropdown; every other item navigates.
   ========================================================================== */
.site-header__inner { position: relative; }
.nav--center { flex: 1 1 auto; justify-content: center; }

/* mobile sticky-bar order: brand · cta · burger */
@media (max-width: 860px) {
  .site-header__inner { gap: 12px; }
  .header-actions { gap: 12px; }
  .header-actions .lang-toggle { display: none; }
  .header-cta--mobile {
    display: inline-flex;
    order: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .header-cta--mobile .btn { padding: .62em 1.25em; font-size: .66rem; white-space: nowrap; }
}
@media (min-width: 861px) {
  .header-cta--mobile { display: none; }
}

/* --- Mobile nav as a full-screen pop-up (flat list — no accordions) ------ */
.mobile-nav { background: var(--bg-deep); }
.mobile-nav::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(201,162,75,.10) 0%, rgba(0,27,7,0) 60%);
  pointer-events: none;
}
.mobile-nav__list > li > .mobile-nav__link { position: relative; z-index: 1; }
.mobile-nav__sub--flat { display: block; margin: 0 0 .8em; }

/* ==========================================================================
   HERO — desktop video (the homepage hero is photo/video swappable)
   ========================================================================== */
.hero__video--desktop { display: none; }
@media (min-width: 861px) {
  .hero__media .hero__video--desktop {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .hero__media .hero__video--desktop ~ .hero__img { display: none; }
}

/* ==========================================================================
   CAROUSEL  (cinematic gallery — scroll-snap track + gold arrows)
   Used on the homepage and at the foot of each menu page.
   Markup:
     <div class="carousel" data-carousel [data-carousel-auto]>
       <div class="carousel__viewport"><ul class="carousel__track">
         <li class="carousel__slide"><figure class="frame frame--scrim">
           <img …><figcaption>…</figcaption></figure></li>… </ul></div>
       <button class="carousel__nav carousel__nav--prev" …>
       <button class="carousel__nav carousel__nav--next" …>
     </div>
   ========================================================================== */
.carousel { position: relative; }
.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel__slide {
  flex: 0 0 clamp(260px, 42vw, 560px);
  scroll-snap-align: center;
}
.carousel--wide .carousel__slide { flex-basis: clamp(280px, 62vw, 860px); }
.carousel__slide .frame { margin: 0; }
.carousel__slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.carousel--tall .carousel__slide img { aspect-ratio: 3 / 4; }
.carousel__caption {
  margin-top: 14px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(0, 24, 7, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--accent);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.carousel__nav:hover { background: var(--accent); color: var(--bg-deep); }
.carousel__nav[disabled] { opacity: .28; cursor: default; }
.carousel__nav[disabled]:hover { background: rgba(0,24,7,.55); color: var(--accent); }
.carousel__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.carousel__nav--prev { left: calc(var(--gutter) * -.35); }
.carousel__nav--next { right: calc(var(--gutter) * -.35); }
.section--paper .carousel__nav { background: rgba(244,239,228,.6); color: var(--accent-deep); border-color: var(--accent-deep); }

@media (max-width: 700px) {
  .carousel__nav { display: none; }
  .carousel__slide { flex-basis: 78vw; }
  .carousel--wide .carousel__slide { flex-basis: 86vw; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
}

/* ==========================================================================
   GALLERY STRIP  (3-up edge-to-edge photo band — quiet punctuation)
   ========================================================================== */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}
.gallery-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--img-frame);
  display: block;
}
@media (max-width: 700px) { .gallery-strip { grid-template-columns: 1fr; } }

/* ==========================================================================
   BOOKING BAR  ("foglalás sáv" — gold-hairline band: line + two CTAs)
   Sits at the foot of every menu page, pointing at the matching experience.
   ========================================================================== */
.booking-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(26px, 3.4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.booking-bar__copy { max-width: 46ch; }
.booking-bar__title {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  color: var(--ink);
  margin-top: 12px;
}
.booking-bar__text { margin-top: 12px; color: var(--ink-soft); font-size: .96rem; }
.booking-bar__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.section--paper .booking-bar__title { color: var(--ink-on-paper); }
.section--paper .booking-bar__text { color: var(--ink-on-paper-soft); }
@media (max-width: 700px) {
  .booking-bar { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   MENU (EDITORIAL)  — sticky category rail + priced rows
   Replaces the old .menu-list for the à-la-carte / wine / cocktail pages:
   the printed-menu feel, but navigable. .menu-list stays for simple lists.
   ========================================================================== */
.menu-editorial {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.menu-rail { position: sticky; top: calc(var(--header-h-scrolled) + 28px); }
.menu-rail__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}
.menu-rail__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.menu-rail__list a {
  display: block;
  padding: .58em 0 .58em 18px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: .84rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.menu-rail__list a:hover { color: var(--ink); }
.menu-rail__list a.is-active { color: var(--accent); border-left-color: var(--accent); }
.menu-rail__note {
  margin-top: 26px;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 32ch;
}

.menu-category + .menu-category { margin-top: clamp(44px, 6vw, 84px); }
.menu-category__kicker {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}
.menu-category__title {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--ink);
  margin-top: 10px;
}
.menu-category__title + .hairline--short { margin-top: 18px; }
.menu-items { margin-top: clamp(22px, 3vw, 34px); }
.menu-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: .82em;
  border-bottom: 1px solid var(--line-soft);
}
.menu-row:last-child { border-bottom: 0; }
.menu-row__name {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
}
.menu-row__desc { display: block; margin-top: 5px; font-size: .86rem; color: var(--ink-mute); }
.menu-row__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.menu-row__price { font-size: .92rem; color: var(--accent); white-space: nowrap; letter-spacing: .04em; }
.menu-download { margin-top: clamp(32px, 4vw, 52px); display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .menu-editorial { grid-template-columns: 1fr; }
  .menu-rail { position: static; }
  .menu-rail__list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .menu-rail__list::-webkit-scrollbar { display: none; }
  .menu-rail__list a {
    padding: .5em 14px;
    border-left: 0;
    border-bottom: 1px solid transparent;
    margin: 0 0 -1px;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-wide);
  }
  .menu-rail__list a.is-active { border-bottom-color: var(--accent); }
  .menu-rail__note { max-width: none; margin-top: 18px; }
}

/* ==========================================================================
   MAP CARD  (the drawn neighbourhood map — contact page + footer)
   ========================================================================== */
/* Click-to-load Google Maps. The illustrated map the structure spec asks for
   ("Térkép (rajzolt, nevezetességek rajta)") has not been drawn yet — the
   placeholder that shipped with v9 was a generated approximation with invented
   streets and off-palette colours, so it was removed rather than published.
   See FOLLOWUP.md. */
.map-embed {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--img-frame);
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(201,162,75,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  rgba(201,162,75,.05) 0 1px, transparent 1px 64px),
    var(--bg-2);
  min-height: clamp(320px, 42vw, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-embed__body { text-align: center; padding: clamp(24px, 3vw, 40px); }
.map-embed__addr {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  color: var(--ink);
  margin: 14px 0 22px;
}
.map-embed .btn-row { justify-content: center; }
.map-embed__note {
  margin-top: 18px;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 42ch;
  margin-inline: auto;
}
.map-embed.is-loaded { display: block; min-height: 0; background: var(--bg-2); }
.map-embed iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  border: 0;
}

.footer-maplink {
  display: inline-block;
  margin-top: 14px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.footer-maplink:hover { color: var(--accent-soft); }

/* --- info rows (opening hours / address / reach us) --------------------- */
.info-rows { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.info-rows--2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.info-rows strong {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.info-rows p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 6px; }
.info-rows a { color: var(--ink-soft); }
.info-rows a:hover { color: var(--accent); }

/* ==========================================================================
   SPOTIFY EMBED  (Late-Night VIBE — the room's playlist)
   ========================================================================== */
.spotify-frame {
  border: 1px solid var(--line);
  border-radius: var(--img-frame);
  overflow: hidden;
  background: var(--bg-2);
  max-width: var(--max-narrow);
  margin-inline: auto;
}
.spotify-frame iframe { display: block; width: 100%; height: 352px; border: 0; }
@media (max-width: 560px) { .spotify-frame iframe { height: 400px; } }

/* ==========================================================================
   VIDEO FRAME  (a single embedded/inline film — Happenings)
   ========================================================================== */
.video-frame {
  position: relative;
  border-radius: var(--img-frame);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}
.video-frame video { display: block; width: 100%; height: auto; }

/* ==========================================================================
   FOOTER — Visit / Explore / Follow the VIBE per the page-structure spec
   ========================================================================== */
.footer-col .footer-sub { color: var(--ink-mute); font-size: .8rem; margin-top: -6px; margin-bottom: 14px; }
.footer-socials { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-socials a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.footer-socials a:hover { color: var(--bg-deep); background: var(--accent); border-color: var(--accent); }
.footer-socials svg { width: 17px; height: 17px; fill: currentColor; }

/* ==========================================================================
   ENQUIRY / NOTICE HELPERS
   ========================================================================== */
.notice {
  border: 1px solid var(--line);
  border-radius: var(--img-frame);
  padding: clamp(20px, 2.6vw, 32px);
  background: var(--bg-2);
  max-width: var(--max-narrow);
  margin-inline: auto;
}
.notice .label { margin-bottom: 12px; }
.notice p { color: var(--ink-soft); }

/* anchor targets must clear the sticky header */
.menu-category[id], [id]:target { scroll-margin-top: calc(var(--header-h-scrolled) + 24px); }

/* button rows outside the hero (statement / split / notice blocks) */
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }

/* --- legibility fixes (2026-08 IA rebuild) ------------------------------- */
/* Cards now carry an eyebrow above the serif title, so the photo behind the
   body needs a deeper foot to the scrim. */
.card::after {
  background: linear-gradient(180deg,
              rgba(0,24,7,.14) 0%, rgba(0,24,7,.34) 38%,
              rgba(0,24,7,.74) 72%, rgba(0,24,7,.94) 100%);
}
.card__eyebrow { display: block; margin-bottom: 12px; }

/* The homepage hero runs a film rather than a still — busier, so it needs a
   stronger veil than the photo heroes on inner pages. */
.hero--film .hero__media::after {
  background:
    linear-gradient(180deg, rgba(0,24,7,.58) 0%, rgba(0,24,7,.46) 38%, rgba(0,24,7,.88) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(0,29,8,.10) 20%, rgba(0,29,8,.70) 100%);
}


/* Review cards sit three-up on the homepage; at that column width the h3-scale
   serif broke to ~12 characters a line. Lead scale reads as a quote and fits. */
.review-card__text { font-size: var(--fs-lead); line-height: 1.55; }
.review-card::before { font-size: 3rem; }

/* The mobile menu is a full-screen pop-up; lift the sticky bar above it so the
   logo stays put and the burger's close (×) state remains tappable. */
body.nav-open .site-header {
  z-index: calc(var(--z-menu) + 1);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.nav-open .header-cta--mobile { display: none; }

/* Grid children default to min-width:auto, so the horizontally scrolling
   category rail widened its column and pushed the priced rows off-screen. */
.menu-editorial > * { min-width: 0; }

/* ==========================================================================
   NAV BREAKPOINT — the Hungarian labels ("Csoportok & Rendezvények") need more
   room than the 860px used for the layout breakpoints — more still in Gotham,
   which is wider than the Inter this baseline started from — so the sticky bar
   switches to the hamburger + centred CTA at 1140px. Layout breakpoints
   (splits, card grids, hero film) stay at 860px on purpose.
   ========================================================================== */
@media (max-width: 1140px) {
  .nav,
  .header-actions .lang-toggle,
  .header-actions .header-cta { display: none; }
  .burger { display: block; }
  .mobile-nav { display: flex; }
  .header-cta--mobile {
    display: inline-flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .header-cta--mobile .btn { padding: .62em 1.25em; font-size: .66rem; white-space: nowrap; }
}

/* --- nav + carousel corrections ----------------------------------------- */
/* Long Hungarian labels ("Csoportok & Rendezvények") must not wrap in the bar. */
.nav__link { white-space: nowrap; }

/* The carousel caption is a sibling of the framed photo — .frame clips its
   overflow, so a figcaption inside it was cropped and lost under the scrim. */
.carousel__figure { margin: 0; }
.carousel__slide .carousel__figure .frame { margin: 0; }
.carousel__caption {
  margin-top: 14px;
  color: var(--ink-soft);
}
.section--paper .carousel__caption { color: var(--ink-on-paper-soft); }

/* Between the nav breakpoint and a roomy desktop the six Hungarian labels are a
   tight fit; tighten the tracking and the gaps rather than dropping to the
   hamburger on a 1200px laptop. */
@media (min-width: 1141px) and (max-width: 1400px) {
  .nav__list { gap: 16px; }
  .nav__link { letter-spacing: .1em; }
  .header-actions { gap: 12px; }
}

/* --- testimonial cards: density ------------------------------------------
   `.review-card` is a <figure> and the reset never cleared the user-agent
   `margin: 1em 40px`, so each card sat 80px narrower than its grid track —
   which is what forced the four-word line wraps and the very tall cards.  */
figure { margin: 0; }

.reviews { margin-top: clamp(26px, 3vw, 44px); }
.review-card {
  padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 28px);
  gap: 14px;
}
.review-card::before { font-size: 2.6rem; line-height: .5; }
.review-card__foot { padding-top: 4px; }


/* Paper surface: the ivory-on-green text colours are invisible here. Only the
   headings, labels and review cards had overrides — the section lead was being
   painted ivory on ivory, which is why the reviews band looked like a void
   between the hairline and the cards. */
.section--paper .lead,
.section--paper .body-copy,
.section--paper .body-copy p,
.section--paper .statement__sub,
.section--paper .contact-meta p,
.section--paper .menu-rail__note,
.section--paper .form__hint,
.section--paper .form__note { color: var(--ink-on-paper-soft); }
.section--paper .fineprint { color: rgba(28, 36, 25, .55); }
.section--paper .link-more { color: var(--accent-deep); }
.section--paper .hairline--short,
.section--paper .hairline--center { background: var(--line-on-paper); }

/* Optical sizing for the footer marks. The brand glyphs carry very different
   visual mass at the same box size — Facebook and Spotify are solid discs,
   YouTube is a wide rounded rectangle — so a single width makes the row look
   uneven. These nudges even it out; they are optical, not geometric. */
.footer-socials [data-icon="facebook"] svg,
.footer-socials [data-icon="spotify"] svg { width: 15px; }
.footer-socials [data-icon="tiktok"] svg { width: 16px; }
.footer-socials [data-icon="youtube"] svg { width: 19px; }