/* Vivien Rendezvényház és Casa Vivien Napoli, koncepció-minta.
   Vezérmotívum: a terítés. Az oldal alapja a sötét asztallap, arra kerülnek
   a világos terítő-panelek, azokra a masni mint dísz. A pizzériás oldalon
   ugyanez a réteg-logika a tésztáé, mélyebb zölddel és égetett akcenttel.
   A paletta a saját fotóikból jön: menta és smaragd masnisorok, kerti lomb,
   a másik teríték arany masnija. */

/* ---------------------------------------------------------------- fontok */
@font-face {
  font-family: "Marcellus";
  src: url("assets/fonts/marcellus-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Familjen";
  src: url("assets/fonts/familjen-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Familjen";
  src: url("assets/fonts/familjen-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Familjen";
  src: url("assets/fonts/familjen-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- alapok */
:root {
  --asztal: #14261c;          /* az asztallap, a lomb és a masni zöldje */
  --asztal-melyebb: #0d1912;  /* a pizzériás sávok mélyebb nápolyi zöldje */
  --asztal-vilagos: #1d3427;
  --lenia: #2f4a39;           /* hajszálvonal a sötéten */
  --terito: #f3eee3;          /* a leterített panel */
  --terito-arny: #e6ded0;
  --kreta: #ede7da;           /* szöveg a sötéten */
  --kreta-halk: #b6c3b6;
  --tinta: #14261c;           /* szöveg a terítőn */
  --tinta-halk: #4e6154;
  --arany: #c9a961;           /* dísz a sötéten */
  --arany-melyeb: #7a5d1b;    /* ugyanaz olvashatóan a terítőn */
  --egetett: #d1743a;         /* a pizzériás akcent a sötéten */
  --egetett-melyeb: #a2481a;  /* ugyanaz a terítőn */
  --akcent: var(--arany);
  --akcent-melyeb: var(--arany-melyeb);
  --hej: 1180px;
  --keret: clamp(20px, 5vw, 56px);
}

.pizzeria {
  --asztal: #0d1912;
  --asztal-vilagos: #16281d;
  --lenia: #2a4231;
  --akcent: var(--egetett);
  --akcent-melyeb: var(--egetett-melyeb);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--asztal);
  color: var(--kreta);
  font-family: "Familjen", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "tnum" 0;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--akcent); color: var(--asztal); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: "Marcellus", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
}

h1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); line-height: 1.03; }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.75rem); line-height: 1.1; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.22; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.hej {
  width: 100%;
  max-width: var(--hej);
  margin: 0 auto;
  padding-left: var(--keret);
  padding-right: var(--keret);
}
.hej--szuk { max-width: 820px; }
.hej--szeles { max-width: 1400px; }

.szoveg { max-width: 62ch; }

/* --------------------------------------------------- demó-sáv és kihagyó */
.demosav {
  margin: 0;
  padding: 9px 16px;
  background: var(--asztal-melyebb);
  color: var(--kreta-halk);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--lenia);
}

.kihagyo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--terito);
  color: var(--tinta);
  padding: 12px 18px;
  z-index: 60;
}
.kihagyo:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------- navigáció */
.fejlec {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--asztal) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lenia);
}
@supports not (backdrop-filter: blur(2px)) {
  .fejlec { background: var(--asztal); }
}

.fejlec-belso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.jel {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-shrink: 0;
}
.jel-nev {
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.42rem;
  letter-spacing: 0.05em;
}
.jel-alsor {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akcent);
}

.fo-nav ul {
  display: flex;
  gap: clamp(12px, 2vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fo-nav a {
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 6px 0;
  display: inline-block;
  border-bottom: 1px solid transparent;
  color: var(--kreta);
}
.fo-nav a:hover { border-bottom-color: var(--akcent); }
.fo-nav a[aria-current="page"] {
  color: var(--akcent);
  border-bottom-color: var(--akcent);
}

.mobil-nav { display: none; }
.mobil-nav summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--lenia);
  color: var(--kreta);
}
.mobil-nav summary::-webkit-details-marker { display: none; }
.mobil-nav[open] summary { border-color: var(--akcent); color: var(--akcent); }
.mobil-nav ul {
  position: absolute;
  right: var(--keret);
  left: var(--keret);
  margin-top: 10px;
  padding: 8px 0;
  list-style: none;
  background: var(--asztal-vilagos);
  border: 1px solid var(--lenia);
  z-index: 45;
}
.mobil-nav li { border-bottom: 1px solid var(--lenia); }
.mobil-nav li:last-child { border-bottom: 0; }
.mobil-nav a {
  display: block;
  padding: 13px 18px;
  text-decoration: none;
  font-size: 0.98rem;
}
.mobil-nav a[aria-current="page"] { color: var(--akcent); }

@media (max-width: 900px) {
  .fo-nav { display: none; }
  .mobil-nav { display: block; }
}

/* --------------------------------------------------------- címke, masni */
.cimke {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akcent);
  margin: 0 0 16px;
}
.cimke::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.terito .cimke { color: var(--akcent-melyeb); }

/* a masni: a székmasnik vonalrajza, ez az oldal visszatérő jele */
.masni {
  display: block;
  width: min(210px, 60%);
  height: auto;
  margin: 0;
  color: var(--akcent);
  overflow: visible;
}
.masni--kozep { margin-left: auto; margin-right: auto; width: min(260px, 76%); }
.masni path, .masni circle { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.masni circle { fill: currentColor; stroke: none; }
.terito .masni { color: var(--akcent-melyeb); }

.valaszto {
  border: 0;
  margin: clamp(48px, 7vw, 90px) 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* -------------------------------------------------------------- gombok */
.gomb {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 26px;
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--akcent);
  background: var(--akcent);
  color: var(--asztal);
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
  font-family: inherit;
}
.gomb:hover { background: transparent; color: var(--akcent); }
.gomb-nyil { transition: transform 0.2s ease; }
.gomb:hover .gomb-nyil { transform: translateX(4px); }

.gomb--halk {
  background: transparent;
  color: var(--akcent);
  border-color: var(--lenia);
}
.gomb--halk:hover { border-color: var(--akcent); background: transparent; color: var(--akcent); }

.terito .gomb--halk { color: var(--akcent-melyeb); border-color: rgba(20, 38, 28, 0.22); }
.terito .gomb--halk:hover { border-color: var(--akcent-melyeb); }
.terito .gomb { color: var(--terito); background: var(--tinta); border-color: var(--tinta); }
.terito .gomb:hover { background: transparent; color: var(--tinta); }

.tettek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin: 30px 0 0;
}

.telefon-link {
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.24rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--lenia);
  padding-bottom: 3px;
}
.telefon-link:hover { border-bottom-color: var(--akcent); }

/* -------------------------------------------------------------- sávok */
.sav { padding: clamp(64px, 9vw, 128px) 0; }
.sav--suru { padding: clamp(40px, 5vw, 64px) 0; }
.sav--levegos { padding: clamp(88px, 14vw, 190px) 0; }
.sav--melyebb { background: var(--asztal-melyebb); }

.sav-fej { margin-bottom: clamp(30px, 4vw, 54px); }
.sav-fej p { color: var(--kreta-halk); max-width: 58ch; margin-top: 14px; }
.terito .sav-fej p { color: var(--tinta-halk); }

.sav-fej--ketto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 48px;
  align-items: end;
}
@media (min-width: 900px) {
  .sav-fej--ketto { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .sav-fej--ketto p { margin-top: 0; }
}

/* ------------------------------------------------- terítő (világos panel) */
.terito {
  background: var(--terito);
  color: var(--tinta);
  padding: clamp(28px, 4.4vw, 62px);
  position: relative;
}
.terito::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(122, 93, 27, 0.28);
  pointer-events: none;
}
.terito--sima::after { display: none; }
.terito a { color: var(--tinta); }
.terito .kiemelt-szam,
.terito h2, .terito h3 { color: var(--tinta); }
.terito p { color: var(--tinta); }
.terito .halk { color: var(--tinta-halk); }

.halk { color: var(--kreta-halk); }
.apro { font-size: 0.85rem; line-height: 1.6; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding: 0 0 clamp(40px, 6vw, 80px);
}
.hero-kep {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.hero-kep img {
  width: 100%;
  height: clamp(320px, 62vh, 620px);
  object-fit: cover;
  object-position: center 58%;
}
.hero-kep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 38, 28, 0.42) 0%, rgba(20, 38, 28, 0.05) 38%, rgba(20, 38, 28, 0.62) 100%);
  pointer-events: none;
}

.hero-panel {
  position: relative;
  z-index: 2;
  margin-top: clamp(-90px, -7vw, -40px);
  max-width: 720px;
}
.hero-panel h1 { margin: 0 0 20px; }
.hero-panel .vezeto { font-size: 1.09rem; max-width: 54ch; }

.hero-masni {
  position: absolute;
  right: clamp(-6px, 1vw, 20px);
  bottom: -18px;
  width: 132px;
  color: var(--akcent);
  z-index: 3;
}

.hero-adat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(20, 38, 28, 0.16);
  font-size: 0.88rem;
  color: var(--tinta-halk);
  list-style: none;
}

/* ------------------------------------------------------- alkalom-lista */
.alkalmak {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lenia);
}
.alkalom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 40px;
  padding: 24px 0;
  border-bottom: 1px solid var(--lenia);
  align-items: baseline;
}
@media (min-width: 760px) {
  .alkalom { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); padding: 28px 0; }
}
.alkalom-nev {
  font-family: "Marcellus", Georgia, serif;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.15;
}
.alkalom p { color: var(--kreta-halk); margin: 0; max-width: 62ch; }
.alkalom:hover .alkalom-nev { color: var(--akcent); }

/* --------------------------------------------------------- réteg-sávok */
.retegek {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 5vw, 64px);
}
.reteg { display: grid; gap: 22px; align-items: center; }
@media (min-width: 860px) {
  .reteg { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 60px); }
  .reteg--forditott > figure { order: 2; }
}
.reteg-szoveg h3 { margin-bottom: 12px; }
.reteg-szoveg p { color: var(--kreta-halk); }
.reteg-szam {
  font-family: "Marcellus", Georgia, serif;
  font-size: 0.86rem;
  letter-spacing: 0.24em;
  color: var(--akcent);
  display: block;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------- képek */
figure { margin: 0; }

.kep {
  position: relative;
  display: block;
  margin: 0;
  background: var(--asztal-vilagos);
}
.kep img { width: 100%; height: auto; }
.kep figcaption {
  font-size: 0.84rem;
  color: var(--kreta-halk);
  padding: 11px 2px 0;
  line-height: 1.45;
}
.terito .kep figcaption { color: var(--tinta-halk); }

.nagyithato { cursor: zoom-in; }
.nagyithato::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
  pointer-events: none;
}
.nagyithato:hover::after, .nagyithato:focus-visible::after { border-color: var(--akcent); }

.nagyito-jel {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(13, 25, 18, 0.72);
  color: var(--kreta);
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.nagyithato:hover .nagyito-jel, .nagyithato:focus-visible .nagyito-jel { opacity: 1; }

/* oszlopos, változó magasságú rács: a képek a saját arányukban maradnak */
.oszlopos {
  columns: 1;
  column-gap: clamp(14px, 1.6vw, 22px);
}
@media (min-width: 620px) { .oszlopos { columns: 2; } }
@media (min-width: 1000px) { .oszlopos { columns: 3; } }
.oszlopos--ketto { columns: 1; }
@media (min-width: 700px) { .oszlopos--ketto { columns: 2; } }
.oszlopos > * {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  display: inline-block;
  width: 100%;
}

/* ----------------------------------------------------------- adat-táblák */
.adatlista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}
@media (min-width: 640px) {
  .adatlista { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
}
.adatlista dt {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akcent);
  padding: 14px 0 2px;
  border-top: 1px solid var(--lenia);
}
.adatlista dd {
  margin: 0;
  padding: 4px 0 16px;
}
@media (min-width: 640px) {
  .adatlista dt { padding: 16px 0; }
  .adatlista dd { padding: 16px 0; border-top: 1px solid var(--lenia); }
}
.terito .adatlista dt { color: var(--akcent-melyeb); border-top-color: rgba(20, 38, 28, 0.16); }
.terito .adatlista dd { border-top-color: rgba(20, 38, 28, 0.16); }
.adatlista a { text-decoration: none; border-bottom: 1px solid var(--lenia); }
.adatlista a:hover { border-bottom-color: var(--akcent); }
.terito .adatlista a { border-bottom-color: rgba(20, 38, 28, 0.3); }
.terito .adatlista a:hover { border-bottom-color: var(--akcent-melyeb); }

/* --------------------------------------------------------- lépés-sorrend */
.lepesek {
  counter-reset: lepes;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .lepesek { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
}
.lepes {
  counter-increment: lepes;
  padding: 26px clamp(16px, 2vw, 28px) 28px;
  border-top: 1px solid var(--lenia);
  position: relative;
}
@media (min-width: 860px) {
  .lepes { border-left: 1px solid var(--lenia); }
  .lepes:first-child { border-left: 0; padding-left: 0; }
}
.lepes::before {
  content: "0" counter(lepes);
  display: block;
  font-family: "Marcellus", Georgia, serif;
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  color: var(--akcent);
  margin-bottom: 12px;
}
.lepes h3 { font-size: 1.16rem; margin-bottom: 8px; }
.lepes p { color: var(--kreta-halk); font-size: 0.95rem; margin: 0; }

/* ---------------------------------------------------------------- étlap */
.etlap {
  margin: 0;
  padding: 0;
  list-style: none;
}
.etel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 18px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid rgba(20, 38, 28, 0.14);
}
.etel:last-child { border-bottom: 0; }
.etel-nev {
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.2;
}
.etel-ar {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  font-size: 1rem;
}
.etel-fel {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  color: var(--tinta-halk);
  margin: 0;
  max-width: 62ch;
}
.etlap--sotet .etel { border-bottom-color: var(--lenia); }
.etlap--sotet .etel-fel { color: var(--kreta-halk); }

.etlap-oszlopok {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 48px;
}
@media (min-width: 820px) {
  .etlap-oszlopok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rovid-etel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(20, 38, 28, 0.14);
}
.rovid-etel span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -------------------------------------------------------------- kiemelt */
.kiemelt-szam {
  font-family: "Marcellus", Georgia, serif;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1;
  display: block;
  color: var(--akcent);
}
.tenyek {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .tenyek { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
}
.teny {
  padding: 26px clamp(14px, 2vw, 30px) 28px;
  border-top: 1px solid var(--lenia);
}
@media (min-width: 760px) {
  .teny { border-left: 1px solid var(--lenia); }
  .teny:first-child { border-left: 0; padding-left: 0; }
}
.teny p { color: var(--kreta-halk); font-size: 0.95rem; margin: 10px 0 0; }
.teny .kiemelt-szam { color: var(--akcent); }

/* ---------------------------------------------------------------- űrlap */
.urlap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 28px;
}
@media (min-width: 760px) {
  .urlap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mezo--teljes { grid-column: 1 / -1; }
}
.mezo { display: flex; flex-direction: column; gap: 7px; }
.mezo label {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-halk);
}
.mezo input, .mezo select, .mezo textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(20, 38, 28, 0.3);
  padding: 9px 2px;
  border-radius: 0;
  width: 100%;
  min-width: 0;
}
.mezo textarea { min-height: 116px; resize: vertical; }
.mezo input:focus, .mezo select:focus, .mezo textarea:focus {
  outline: none;
  border-bottom-color: var(--akcent-melyeb);
  border-bottom-width: 2px;
  padding-bottom: 8px;
}
.mezo select { appearance: none; background-image: none; }
.mezo-sugo { font-size: 0.82rem; color: var(--tinta-halk); }

.valaszcsik {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.valaszcsik legend {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-halk);
  padding: 0;
  margin-bottom: 12px;
}
.valaszcsik label {
  border: 1px solid rgba(20, 38, 28, 0.24);
  padding: 9px 16px;
  font-size: 0.94rem;
  cursor: pointer;
}
.valaszcsik input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.valaszcsik input:checked + span,
.valaszcsik label:has(input:checked) { background: var(--tinta); color: var(--terito); }
.valaszcsik label:has(input:focus-visible) { outline: 2px solid var(--akcent-melyeb); outline-offset: 2px; }

/* -------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 48px);
  background: rgba(8, 16, 11, 0.94);
}
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  object-fit: contain;
}
.lightbox-alairas {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  margin: 0 auto;
  max-width: 70ch;
  padding: 0 20px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--kreta-halk);
}
.lightbox button {
  position: absolute;
  background: transparent;
  border: 1px solid var(--lenia);
  color: var(--kreta);
  width: 46px;
  height: 46px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.lightbox button:hover { border-color: var(--akcent); color: var(--akcent); }
.lb-zar { top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); }
.lb-elozo { left: clamp(6px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.lb-kovetkezo { right: clamp(6px, 2vw, 24px); top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------------- lábléc */
.lablec {
  background: var(--asztal-melyebb);
  border-top: 1px solid var(--lenia);
  padding: clamp(50px, 7vw, 92px) 0 34px;
}
.lablec-fo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 900px) {
  .lablec-fo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 60px; }
}
.lablec-nav ul { list-style: none; margin: 0; padding: 0; }
.lablec-nav li { border-top: 1px solid var(--lenia); }
.lablec-nav a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  font-size: 0.94rem;
}
.lablec-nav a:hover { color: var(--akcent); }
.lablec-zaras {
  margin-top: clamp(34px, 5vw, 60px);
  padding-top: 22px;
  border-top: 1px solid var(--lenia);
  color: var(--kreta-halk);
  font-size: 0.82rem;
  line-height: 1.6;
}
.lablec-zaras p { margin: 0 0 8px; max-width: 78ch; }

/* -------------------------------------------------- szignatúra: terítés */
/* A világos panel úgy nyílik ki, ahogy a terítőt húzzák le az asztalra. */
.terit {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.45s ease, clip-path 0.75s cubic-bezier(0.22, 0.68, 0.16, 1);
  transition-delay: var(--kesleltetes, 0ms);
}
.terit.latszik { opacity: 1; clip-path: inset(0 0 0 0); }

[data-fel] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--kesleltetes, 0ms);
}
[data-fel].latszik { opacity: 1; transform: none; }

html:not(.js) .terit,
html:not(.js) [data-fel] { opacity: 1; transform: none; clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .terit { clip-path: none; }
  html.js .terit, html.js [data-fel] { opacity: 1; transform: none; }
  .gomb:hover .gomb-nyil { transform: none; }
}

/* ------------------------------------------------------------ nyomtatás */
@media print {
  .fejlec, .demosav, .lightbox, .mobil-nav { display: none !important; }
  body { background: #fff; color: #000; }
}

/* A pizzeria hero-kepe szokatlanul szeles (2,16:1), ezert alacsonyabb savban
   ul meg jol; a base hero magassaga itt levagna a pizza szeleit. */
.hero--pizzeria .hero-kep img {
  height: clamp(260px, 46vh, 460px);
  object-position: center 52%;
}