/* ============================================================
   BEREK KÚRIA — design system
   Editorial luxury · cream / pine / copper
   ============================================================ */

:root {
  /* palette — cream base · navy (logo) · gold (logo) */
  --cream: #f5efe3;
  --cream-2: #ece3d2;
  --paper: #faf6ec;
  --ink: #182437;
  --ink-soft: #2c3b4f;
  --muted: #4b5a6b;
  --pine: #1e4266;
  --pine-deep: #14304f;
  --night: #0d1f35;
  /* darkened from #a06f27 to clear WCAG AA on cream (4.55:1) and paper (4.83:1).
     Gold stays the display/merit colour; copper is the reading-weight sibling. */
  --copper: #906423;
  --copper-bright: #c9955c;
  --gold: #c49038;
  --free: #3f7d54;
  --line: rgba(24, 36, 55, 0.14);
  --line-light: rgba(245, 239, 227, 0.18);

  /* type */
  --font-display: "Spectral", Georgia, serif;
  --font-body: "Mulish", "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-xl: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.4rem, 1.2rem + 0.85vw, 2rem);
  --text-3xl: clamp(1.6rem, 1.35rem + 1.15vw, 2.5rem);
  --text-hero: clamp(1.9rem, 1.5rem + 1.9vw, 3.5rem);

  /* spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;
  --space-6: 7.5rem;
  --space-7: clamp(5.5rem, 4.25rem + 7vw, 11.5rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max-w: 90rem;

  --radius: 7px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============ reset ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "cv05", "cv11";
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--pine);
  color: var(--cream);
}

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

/* ============ typography helpers ============ */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
  /* every section heading ends in a gold <em>; without balancing, that
     one deliberate flourish can orphan onto its own line at some widths */
  text-wrap: balance;
}
/* ...but not on the headings main.js splits into masked lines. splitLines()
   groups words by measured offsetTop, and balancing changes that measurement
   mid-split, which put every single word on its own line. */
[data-anim="lines"],
.hero__title,
.page-hero h1 {
  text-wrap: normal;
}

/* Hungarian compounds ("Minőségtanúsító", "tollaslabdapálya",
   "cumisüveg-melegítő") strand in narrow columns. lang="hu" is set on
   every page, so the browser hyphenates correctly. */
p,
.lede,
li {
  text-wrap: pretty;
}
p,
.lede {
  hyphens: auto;
  overflow-wrap: break-word;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pine);
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--gold);
}
.eyebrow--bare::before {
  display: none;
}
.eyebrow--light {
  color: var(--copper-bright);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 36em;
}

em {
  font-style: italic;
}
h1 em,
h2 em,
h3 em,
.italic-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--copper);
}

/* ============ layout ============ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-7);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
}
.section-head h2 {
  font-size: var(--text-3xl);
  margin: 1.1rem 0 1.25rem;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .eyebrow::before {
  display: none;
}

/* ============ buttons ============ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease-out);
  cursor: pointer;
  touch-action: manipulation;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-out);
}
.btn:hover::after,
.btn:focus-visible::after {
  transform: translateY(0);
}

.btn--dark {
  background: var(--ink);
  color: var(--cream);
}
.btn--dark::after {
  background: var(--copper);
}

.btn--copper {
  background: var(--gold);
  color: var(--night);
}
.btn--copper::after {
  background: var(--pine-deep);
}
.btn--copper:hover,
.btn--copper:focus-visible {
  color: var(--cream);
}

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn--ghost::after {
  background: var(--ink);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--cream);
}

.btn--light {
  background: var(--cream);
  color: var(--ink);
}
.btn--light::after {
  background: var(--copper);
}
.btn--light:hover,
.btn--light:focus-visible {
  color: #fff;
}

.btn .arr {
  transition: transform 0.4s var(--ease-out);
}
.btn:hover .arr {
  transform: translateX(4px);
}

/* text link with underline draw */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.35rem;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--copper);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.tlink:hover::after {
  transform: scaleX(0);
  transform-origin: right;
  animation: tlink-redraw 0.5s var(--ease-out) 0.1s forwards;
}
@keyframes tlink-redraw {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ============ preloader ============ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--night);
  color: var(--cream);
  /* a címer ablakai/hullámai sötét háttéren */
  --crest-bg: #0d1f35;
  --crest-wave: #f5efe3;
}
.preloader__crest {
  width: clamp(72px, 12vh, 110px);
  height: auto;
}
.preloader__word {
  font-family: var(--font-display);
  /* held to the same 3.5rem ceiling as the rest of the site */
  font-size: clamp(2rem, 6vw, 3.5rem);
  letter-spacing: 0.02em;
  display: flex;
  overflow: hidden;
}
.preloader__word span {
  display: inline-block;
  white-space: pre;
}
.preloader__sub {
  font-size: var(--text-xs);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--copper-bright);
}
.preloader__bar {
  width: min(16rem, 60vw);
  height: 1px;
  background: rgba(245, 239, 227, 0.2);
  overflow: hidden;
}
.preloader__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--copper-bright);
  transform: scaleX(0);
  transform-origin: left;
}
html.is-loading {
  overflow: hidden;
}

/* ============ page transition veil ============ */
.veil {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: var(--night);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(101%);
  pointer-events: none;
}
.veil span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--cream);
  opacity: 0;
}

/* ============ custom cursor ============ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--copper);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
    opacity 0.3s;
  mix-blend-mode: multiply;
}
.cursor.is-hover {
  width: 44px;
  height: 44px;
  opacity: 0.35;
}
@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ============ nav ============ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  transition: background 0.5s, box-shadow 0.5s, transform 0.5s var(--ease-out);
}
.site-nav.is-hidden {
  transform: translateY(-100%);
}
.site-nav.is-solid {
  background: rgba(245, 239, 227, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  line-height: 1.1;
  z-index: 960;
  position: relative;
}
.brand__crest {
  width: 38px;
  height: 47px;
  flex: none;
}
.brand__text {
  display: flex;
  flex-direction: column;
}
.brand__main {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.brand__sub {
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.2rem;
}
.nav--light:not(.is-solid) .brand,
.nav--light:not(.is-solid) .nav-links a,
.nav--light:not(.is-solid) .menu-btn {
  color: var(--cream);
}
.nav--light:not(.is-solid) .brand__sub {
  color: rgba(245, 239, 227, 0.7);
}

.nav-links {
  display: flex;
  gap: 2.2rem;
  align-items: center;
}
.nav-links a {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.4rem 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 100px;
  background: var(--gold);
  color: var(--night);
  transition: background 0.35s, color 0.35s, transform 0.35s var(--ease-out);
}
.nav-cta:hover {
  background: var(--pine);
  color: var(--cream);
  transform: translateY(-2px);
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 960;
  position: relative;
  padding: 0.5rem;
  min-height: 44px;
}
.menu-btn__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.menu-btn__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 26px;
}
.menu-btn__lines span {
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out), width 0.4s var(--ease-out);
  transform-origin: center;
}
.menu-btn__lines span:last-child {
  width: 70%;
  align-self: flex-end;
}
.menu-btn[aria-expanded="true"] {
  color: var(--cream);
}
.menu-btn[aria-expanded="true"] .menu-btn__lines span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.menu-btn[aria-expanded="true"] .menu-btn__lines span:last-child {
  width: 100%;
  transform: translateY(-3.75px) rotate(-45deg);
}

/* fullscreen menu */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: linear-gradient(168deg, #0e2340 0%, #14304f 55%, #0d1f35 100%);
  color: var(--cream);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(5rem, 12vh, 7rem) var(--gutter) 2rem;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  /* overflow-y: auto (not hidden) — a linkelista + lábléc együtt magasabb,
     mint egy telefon képernyője, korábban emiatt a lenti linkek és a
     lábléc egyáltalán nem voltak elérhetők mobilon (nem lehetett
     legörgetni hozzájuk). overflow-x marad hidden, mert a .menu-river
     dekor-elemek szándékosan szélesebbek a konténernél. */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* az Öreg-Túr vonala — folyamatosan úszik a menü mögött */
.menu-river {
  position: absolute;
  left: -10%;
  width: 240%;
  height: auto;
  pointer-events: none;
  color: rgba(196, 144, 56, 0.35);
}
.menu-river--1 {
  bottom: 16%;
}
.menu-river--2 {
  bottom: 6%;
  color: rgba(245, 239, 227, 0.14);
}
.menu-overlay__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-5);
  align-items: center;
  max-width: var(--max-w);
  width: 100%;
  margin-inline: auto;
}
.menu-links {
  display: flex;
  flex-direction: column;
}
.menu-links a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-light);
  overflow: hidden;
}
.menu-links a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.menu-links a:hover::before,
.menu-links a:focus-visible::before {
  transform: scaleX(1);
}
.menu-links .menu-links__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  transition: transform 0.5s var(--ease-out), color 0.4s;
  display: inline-block;
}
.menu-links a:hover .menu-links__title,
.menu-links a:focus-visible .menu-links__title {
  transform: translateX(0.75rem);
  color: var(--copper-bright);
}
.menu-links a[aria-current="page"] .menu-links__title {
  color: var(--copper-bright);
  font-style: italic;
}
.menu-links small {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: rgba(245, 239, 227, 0.55);
  margin-left: auto;
  text-transform: uppercase;
}
.menu-preview {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 60vh;
  overflow: hidden;
  border-radius: var(--radius);
}
.menu-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s, transform 0.6s var(--ease-out);
}
.menu-overlay__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: var(--max-w);
  width: 100%;
  margin-inline: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-light);
  font-size: var(--text-sm);
  color: rgba(245, 239, 227, 0.65);
  flex-wrap: wrap;
}
.menu-overlay__foot a:hover {
  color: var(--copper-bright);
}
body.menu-open {
  overflow: hidden;
}

/* A .site-nav z-index:900-zal saját stacking contextet nyit, ezért a benne
   lévő .menu-btn z-index:960 értéke NEM tudott a z-index:950-es overlay fölé
   emelkedni — a bezáró X gomb végig a menü alá volt festve, ezért tűnt úgy,
   mintha nem is lenne. Nyitott menünél az egész fejlécet emeljük az overlay
   fölé, és átlátszóvá tesszük, hogy csak a bezáró gomb látszódjon rajta. */
body.menu-open .site-nav {
  z-index: 960;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* nyitott menüben a fejléc többi eleme zavaró és félrevezető (a menü saját
   listája már tartalmazza ezeket) — csak a bezáró gomb marad. */
body.menu-open .topbar,
body.menu-open .nav-side,
body.menu-open .brand {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
body.menu-open .menu-btn {
  color: var(--cream);
}

/* ============ hero (home) ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--cream);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
}
.hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(19, 26, 21, 0.42) 0%,
    rgba(19, 26, 21, 0.08) 38%,
    rgba(19, 26, 21, 0.16) 62%,
    rgba(19, 26, 21, 0.78) 100%
  );
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(2.5rem, 6vh, 5rem);
}
.hero__eyebrow {
  color: var(--cream);
  margin-bottom: 1.5rem;
}
.hero__eyebrow .stars {
  color: var(--copper-bright);
  letter-spacing: 0.3em;
}
.hero__title {
  font-size: var(--text-hero);
  line-height: 1.2;
  max-width: 15em;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.hero__title em {
  color: var(--copper-bright);
}
.hero__sub {
  max-width: 34em;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(245, 239, 227, 0.88);
  margin-bottom: clamp(1.75rem, 3.5vh, 2.75rem);
}
.hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.hero__usp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 22rem));
  gap: 2rem;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: rgba(245, 239, 227, 0.85);
}
.hero__usp strong {
  display: block;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 0.3rem;
}
.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero__scroll {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  top: 50%;
  transform: rotate(90deg) translateX(-50%);
  transform-origin: right center;
  font-size: var(--text-xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.65);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.hero__scroll::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  animation: scroll-line 2.4s var(--ease-inout) infinite;
  transform-origin: left;
}
@keyframes scroll-line {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  45% {
    transform: scaleX(1);
    transform-origin: left;
  }
  55% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* ============ book bar (home hero overlap) ============ */
.book-bar {
  position: relative;
  z-index: 3;
  margin: -3.5rem auto 0;
  max-width: 76rem;
  padding-inline: var(--gutter);
}
.book-bar__form {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1.75rem 3.5rem rgba(13, 31, 53, 0.2);
  overflow: hidden;
}
.book-bar__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.15rem 1.6rem;
  border-right: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}
.book-bar__label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.book-bar__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-bar__value svg {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  color: var(--copper);
}
.book-bar__field input {
  border: none;
  background: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
  width: 100%;
  padding: 0;
}
.book-bar__field input:focus {
  outline: none;
}
.book-bar__submit {
  border-radius: 0;
  justify-content: center;
  padding-inline: 2.25rem;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .book-bar {
    margin-top: -2.25rem;
  }
  .book-bar__form {
    grid-template-columns: 1fr 1fr;
  }
  .book-bar__field {
    border-bottom: 1px solid var(--line);
  }
  .book-bar__field:nth-child(2) {
    border-right: none;
  }
  .book-bar__submit {
    grid-column: span 2;
  }
}

/* ============ page hero (subpages) ============ */
.page-hero {
  position: relative;
  padding: clamp(9rem, 20vh, 13rem) 0 var(--space-5);
}
.page-hero__eyebrow {
  margin-bottom: 1.25rem;
}
.page-hero h1 {
  font-size: var(--text-hero);
  max-width: 9em;
  margin-bottom: 1.75rem;
}
.page-hero .lede {
  max-width: 34em;
}
.page-hero__media {
  margin-top: clamp(2.5rem, 5vh, 4.5rem);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 21 / 9;
}
.page-hero__media img {
  width: 100%;
  height: 118%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .page-hero__media {
    aspect-ratio: 4 / 3;
  }
}

/* ============ marquee ============ */
.marquee {
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  overflow: hidden;
  background: var(--paper);
}
.marquee__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  will-change: transform;
}
.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee__track span::after {
  content: "◆";
  font-size: 0.5em;
  color: var(--copper);
}

/* ============ stats ============ */
.stats {
  padding-block: var(--space-6);
}
.stats__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  text-align: center;
}
.stats__n {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  display: block;
  color: var(--pine);
}
.stats__n b {
  font-weight: 400;
}
.stats__l {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
  display: block;
}
@media (max-width: 900px) {
  .stats__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1rem;
  }
  .stats__row li:last-child {
    grid-column: span 2;
  }
}

/* ============ shared line icon ============ */
.ico {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--pine);
  transition: color 0.35s, transform 0.5s var(--ease-out);
}

/* ============ house numbers strip ============ */
.ov-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.ov-hero li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 2.25rem 1.75rem;
  border-left: 1px solid var(--line);
}
.ov-hero li:first-child {
  border-left: 0;
  padding-left: 0;
}
.ov-hero .ico {
  width: 30px;
  height: 30px;
}
.ov-hero__n {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.05;
  color: var(--ink);
}
.ov-hero__n b {
  font-weight: 400;
  font-size: 1.35em;
  color: var(--pine);
}
.ov-hero__l {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ov-hero li:hover .ico {
  color: var(--copper);
  transform: translateY(-3px);
}

/* ============ price band ============ */
.ov-band {
  display: flex;
  align-items: center;
  gap: 2rem clamp(2rem, 3vw, 3.5rem);
  flex-wrap: wrap;
  background: var(--night);
  color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3.25rem);
}
.ov-band__price {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-right: clamp(2rem, 3vw, 3.5rem);
  border-right: 1px solid var(--line-light);
}
.ov-band__label {
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--copper-bright);
}
.ov-band__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.1;
  white-space: nowrap;
}
.ov-band__value small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: rgba(245, 239, 227, 0.65);
}
.ov-band__facts {
  flex: 1;
  min-width: 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ov-band__facts li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-base);
  color: rgba(245, 239, 227, 0.85);
}
.ov-band__facts .ico {
  width: 21px;
  height: 21px;
  flex: none;
  color: var(--copper-bright);
}
.ov-band > .btn {
  margin-left: auto;
}
@media (max-width: 900px) {
  .ov-hero li {
    padding: 1.5rem 1rem;
  }
  .ov-band > .btn {
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  .ov-hero {
    grid-template-columns: 1fr;
    border-block: 0;
  }
  .ov-hero li {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 1.4rem 0;
  }
  .ov-hero li:last-child {
    border-bottom: 1px solid var(--line);
  }
  .ov-band__price {
    border-right: 0;
    padding-right: 0;
  }
  .ov-band > .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============ estate cards (a birtok) ============ */
.est-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.est-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  color: var(--cream);
}
.est-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.est-card:hover img,
.est-card:focus-visible img {
  transform: scale(1.05);
}
.est-card__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 31, 53, 0.88) 0%,
    rgba(13, 31, 53, 0.38) 46%,
    rgba(13, 31, 53, 0) 72%
  );
}
.est-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(1.5rem, 2.5vw, 2.4rem);
}
.est-card__body h3 {
  font-size: var(--text-2xl);
  margin-bottom: 1rem;
}
.est-card__body ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.est-card__body li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-size: var(--text-base);
  color: rgba(245, 239, 227, 0.9);
}
.est-card__body li::before {
  content: "◆";
  font-size: 0.45em;
  color: var(--copper-bright);
  transform: translateY(-0.25em);
}
.est-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(201, 149, 92, 0.6);
  transition: color 0.35s, border-color 0.35s;
}
.est-card:hover .est-card__link,
.est-card:focus-visible .est-card__link {
  color: var(--copper-bright);
  border-color: var(--copper-bright);
}
.est-card__link .arr {
  transition: transform 0.4s var(--ease-out);
}
.est-card:hover .est-card__link .arr {
  transform: translateX(4px);
}
@media (max-width: 860px) {
  .est-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ river fact chips ============ */
.river__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
}
.river__facts li {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1.15rem;
  border: 1px solid rgba(245, 239, 227, 0.4);
  border-radius: 100px;
  color: rgba(245, 239, 227, 0.95);
}

/* ============ manifesto ============ */
.manifesto {
  padding-block: var(--space-7);
  text-align: center;
  position: relative;
}
.manifesto p {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.35;
  max-width: 24em;
  margin-inline: auto;
  color: var(--ink-soft);
}
.manifesto .word {
  display: inline-block;
}

/* ============ split section (image + text) ============ */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}
.split--reverse > figure {
  order: 2;
}
.split figure {
  position: relative;
}
.split figcaption {
  margin-top: 0.9rem;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.split h2 {
  font-size: var(--text-3xl);
  margin: 1.1rem 0 1.4rem;
}
.split .lede {
  margin-bottom: 2rem;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--reverse > figure {
    order: 0;
  }
}

/* feature list with dividers */
.feat-list li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  font-size: var(--text-base);
  color: var(--muted);
}
.feat-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.feat-list strong {
  font-weight: 600;
  color: var(--ink);
}
.feat-list .feat-list__n {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--copper);
  min-width: 1.75rem;
}

/* ============ media frames & reveals ============ */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--43 {
  aspect-ratio: 4 / 3;
}
.frame--34 {
  aspect-ratio: 3 / 4;
}
.frame--169 {
  aspect-ratio: 16 / 9;
}
.frame--329 {
  aspect-ratio: 32 / 13;
}

/* parallax inner img gets extra height */
[data-parallax] img {
  height: 118%;
}

/* ============ full-bleed editorial image ============ */
.bleed {
  position: relative;
  overflow: hidden;
}
.bleed figcaption {
  margin-top: 0.9rem;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-inline: var(--gutter);
}

/* ============ cards: rooms teaser ============ */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.room-card {
  display: block;
  position: relative;
}
.room-card .frame {
  aspect-ratio: 3 / 4;
}
.room-card .frame img {
  transition: transform 1.1s var(--ease-out);
}
.room-card:hover .frame img {
  transform: scale(1.06);
}
.room-card__num {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream);
  font-size: var(--text-lg);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.room-card h3 {
  font-size: var(--text-xl);
  margin-top: 1.1rem;
}
.room-card p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 0.4rem;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .rooms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .rooms-grid {
    grid-template-columns: 1fr;
  }
  .room-card .frame {
    aspect-ratio: 4 / 3;
  }
}

/* ============ room editorial blocks (szobak.html) ============ */
.room-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}
.room-block:first-of-type {
  border-top: 0;
}
.room-block__media {
  grid-column: 1 / 8;
}
.room-block__media .frame {
  aspect-ratio: 4 / 3;
}
.room-block__body {
  grid-column: 8 / 13;
}
.room-block--reverse .room-block__media {
  grid-column: 6 / 13;
  order: 2;
}
.room-block--reverse .room-block__body {
  grid-column: 1 / 6;
}
.room-block__index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--copper);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
/* A szobák neve maga a szín — a pötty megmutatja, mit jelent. A színt a
   szoba valódi textiljeiről mintáztuk, inline --hue változóban érkezik. */
.room-hue {
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  background: var(--hue, var(--copper));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.18);
  flex: none;
}
.room-block h2 {
  font-size: var(--text-3xl);
  margin: 0.75rem 0 0.5rem;
}
.room-block__mood {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--pine);
  margin-bottom: 1.25rem;
}
.room-block__desc {
  color: var(--muted);
  max-width: 30em;
  margin-bottom: 1.5rem;
}
.room-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.room-block__meta span {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--muted);
}
@media (max-width: 860px) {
  .room-block,
  .room-block--reverse {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .room-block--reverse .room-block__media {
    order: 0;
  }
}

/* ============ estate list (birtok) ============ */
.estate-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}
.estate-item:first-child {
  border-top: 0;
}
.estate-item__media {
  grid-column: 1 / 7;
}
.estate-item__media .frame {
  aspect-ratio: 4 / 3;
}
.estate-item:nth-child(even) .estate-item__media {
  order: 2;
  grid-column: 7 / 13;
}
.estate-item__body {
  grid-column: 7 / 13;
}
.estate-item:nth-child(even) .estate-item__body {
  grid-column: 1 / 7;
}
/* the one item that is not included in the price: no photograph exists for it,
   and the typographic break marks it as the exception to the list above */
/* must out-specify .estate-item:nth-child(even) .estate-item__body above,
   which would otherwise pull this row back into the left column */
.estate-item.estate-item--text .estate-item__body {
  grid-column: 4 / 10;
  text-align: center;
}
.estate-item--text p {
  margin-inline: auto;
}
.estate-item--text .estate-item__cap {
  color: var(--copper);
}
.estate-item__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--copper);
  display: block;
  margin-bottom: 0.6rem;
}
.estate-item h2 {
  font-size: var(--text-2xl);
  margin-bottom: 0.9rem;
}
.estate-item p {
  color: var(--muted);
  max-width: 30em;
}
.estate-item__cap {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pine);
  border: 1px solid var(--line);
  padding: 0.45rem 1rem;
  border-radius: 100px;
}
@media (max-width: 860px) {
  .estate-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .estate-item:nth-child(even) .estate-item__media {
    order: 0;
  }
}

/* ============ inventory (dark section) ============ */
.dark-section {
  background: var(--night);
  color: var(--cream);
  padding-block: var(--space-7);
}
.dark-section .eyebrow {
  color: var(--copper-bright);
}
.dark-section .section-head h2 {
  color: var(--cream);
}
.dark-section .lede {
  color: rgba(245, 239, 227, 0.65);
}
.inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2rem;
}
.inv-group {
  border-top: 1px solid var(--line-light);
  padding-top: 1.5rem;
}
.inv-group__n {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--copper-bright);
  font-size: var(--text-lg);
}
.inv-group h3 {
  font-size: var(--text-xl);
  margin: 0.5rem 0 1.1rem;
}
.inv-group li {
  font-size: var(--text-sm);
  color: rgba(245, 239, 227, 0.72);
  padding: 0.4rem 0;
  border-bottom: 1px dashed rgba(245, 239, 227, 0.12);
}
.inv-group li:last-child {
  border-bottom: 0;
}
.inv-note {
  margin-top: 3rem;
  font-size: var(--text-sm);
  color: rgba(245, 239, 227, 0.55);
  font-style: italic;
  text-align: center;
}
@media (max-width: 1024px) {
  .inv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .inv-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ river (full bleed parallax) ============ */
.river {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
}
.river__media {
  position: absolute;
  inset: 0;
}
.river__media img {
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.river__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(19, 26, 21, 0.15) 0%,
    rgba(19, 26, 21, 0.05) 40%,
    rgba(19, 26, 21, 0.72) 100%
  );
}
.river__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-5);
}
.river__content .eyebrow {
  color: var(--copper-bright);
}
.river__content h2 {
  font-size: var(--text-3xl);
  max-width: 14em;
  margin: 1.1rem 0 1.25rem;
}
.river__content .lede {
  color: rgba(245, 239, 227, 0.8);
  margin-bottom: 1.75rem;
}
.river__coord {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.6);
}

/* ============ seasons ============ */
.seasons-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.season .frame {
  aspect-ratio: 3 / 4;
}
.season .frame img {
  transition: transform 1s var(--ease-out);
}
.season:hover .frame img {
  transform: scale(1.05);
}
.season__tag {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-top: 1rem;
}
.season__line {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 0.35rem;
}
@media (max-width: 1024px) {
  .seasons-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .seasons-row {
    grid-template-columns: 1fr;
  }
  .season .frame {
    aspect-ratio: 16 / 10;
  }
}

/* ============ near cards ============ */
.near-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.near-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  background: var(--paper);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
    border-color 0.4s;
}
.near-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(29, 35, 29, 0.25);
  border-color: transparent;
}
.near-card h3 {
  font-size: var(--text-xl);
  margin-bottom: 0.7rem;
}
.near-card p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.near-card__tags {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
}
.near-card__dist {
  float: right;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--muted);
}
@media (max-width: 1024px) {
  .near-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .near-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ quote ============ */
.quote {
  padding-block: var(--space-7);
  text-align: center;
}
.quote blockquote p {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.4;
  max-width: 26em;
  margin-inline: auto;
  color: var(--ink-soft);
}
.quote__mark {
  color: var(--copper);
  font-size: 1.4em;
  vertical-align: -0.1em;
  margin-right: 0.1em;
}
.quote cite {
  display: block;
  margin-top: 1.75rem;
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============ who cards ============ */
.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.who-card .frame {
  aspect-ratio: 4 / 3;
}
.who-card .frame img {
  transition: transform 1s var(--ease-out);
}
.who-card:hover .frame img {
  transform: scale(1.05);
}
.who-card h3 {
  font-size: var(--text-xl);
  margin: 1.1rem 0 0.4rem;
}
.who-card p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 0.9rem;
}
@media (max-width: 860px) {
  .who-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ calendar ============ */
.avail-panel {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
}
.cal {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
}
.cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cal__arrow {
  width: 44px;
  height: 44px;
  /* without this the flex parent shrinks them to ~33px at 375px,
     so the declared 44 never actually rendered */
  flex: 0 0 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}
.cal__arrow:hover:not(:disabled) {
  background: var(--ink);
  color: var(--cream);
  transform: scale(1.05);
}
.cal__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cal__legend {
  display: flex;
  gap: 1.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: center;
}
.cal__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.dot--free {
  background: var(--free);
}
.dot--sel {
  background: var(--copper);
}
.dot--busy {
  background: #c65b4e;
}
.dot--closed {
  background: rgba(29, 35, 29, 0.3);
}
.cal__months {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.cal__error {
  grid-column: 1 / -1;
  padding: 2rem 1.25rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
@media (max-width: 720px) {
  .cal__months {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .wizard__main { padding: 1.15rem; }
  .cal { padding: 1rem 0.75rem; }
  .month__grid { gap: 3px; }
  .month__dow { font-size: 0.7rem; letter-spacing: 0; }
  /* below this width there isn't room for a fixed 44px day AND 7 columns
     without the grid pushing past the frame; let aspect-ratio keep each
     day a true circle at whatever width the column actually has, rather
     than forcing 44px height and squashing it into an oval. */
  .day { font-size: 0.85rem; min-height: 0; }
  .cal__legend { gap: 0.7rem; font-size: 0.68rem; }
  .cal__nav { gap: 0.5rem; }
  .cal__arrow { width: 38px; height: 38px; flex-basis: 38px; }
}
.month__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: capitalize;
  margin-bottom: 0.9rem;
}
.month__grid {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: grid items default to min-width:auto,
     so a column whose content (e.g. "Sze"/"Szo") is wider than its 1fr
     share used to force that track to grow past the container, pushing
     the last (Sunday) column out past the calendar's border. minmax(0,1fr)
     lets tracks shrink below their content's intrinsic width instead. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}
.month__dow {
  min-width: 0;
  font-size: var(--text-xs);
  text-align: center;
  color: var(--muted);
  padding-bottom: 0.4rem;
  letter-spacing: 0.05em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.day {
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  border-radius: 50%;
  position: relative;
  /* 44px, not 2.4rem/38.4px: these are the primary tap targets on the
     booking page and were the smallest interactive elements on the site.
     min-width:0 keeps the circle able to shrink with its 1fr column on
     very narrow viewports; aspect-ratio then keeps it visually square. */
  min-height: 44px;
}
.day--free {
  cursor: pointer;
  color: var(--ink);
  transition: background 0.25s, color 0.25s;
}
.day--free:hover {
  background: rgba(63, 125, 84, 0.14);
}
.day--past {
  color: rgba(29, 35, 29, 0.28);
}
.day--busy {
  color: #a84437;
  background: rgba(198, 91, 78, 0.13);
  text-decoration: line-through;
  text-decoration-color: rgba(198, 91, 78, 0.55);
  cursor: not-allowed;
}
/* Vasárnap zárva. Szándékosan MÁS, semleges-szürke jelölés, nem a piros
   "foglalt": a vendégnek látnia kell, hogy ez nem elkelt időpont, hanem
   állandó házszabály — különben hiába próbálkozna másik héten is. */
.day--closed {
  color: rgba(29, 35, 29, 0.34);
  background: repeating-linear-gradient(
    -45deg,
    rgba(29, 35, 29, 0.05) 0 4px,
    transparent 4px 8px
  );
  cursor: not-allowed;
}
.day--in,
.day--out {
  background: var(--copper);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(144, 100, 35, 0.18);
}
.day--range {
  background: rgba(176, 123, 68, 0.18);
  border-radius: 0;
}
.avail-summary {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--night);
  color: var(--cream);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  position: sticky;
  top: 6rem;
}
.avail-summary__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin-bottom: 1.1rem;
}
.avail-summary__dates {
  min-height: 4.5rem;
}
.avail-summary__range {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
}
.avail-summary__range small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.55);
  margin-top: 0.5rem;
}
.avail-summary__placeholder {
  font-size: var(--text-sm);
  color: rgba(245, 239, 227, 0.6);
}
.avail-summary__nights {
  font-size: var(--text-sm);
  color: var(--copper-bright);
  margin: 0.75rem 0 1.25rem;
  min-height: 1.4em;
}
.avail-summary ul {
  border-top: 1px solid var(--line-light);
  padding-top: 1.1rem;
  margin-bottom: 1.5rem;
}
.avail-summary ul li {
  font-size: var(--text-sm);
  color: rgba(245, 239, 227, 0.75);
  padding: 0.3rem 0;
  display: flex;
  gap: 0.6rem;
}
.avail-summary ul li::before {
  content: "—";
  color: var(--copper-bright);
}
.avail-summary .btn {
  width: 100%;
  justify-content: center;
}
.avail-summary__note {
  margin-top: 0.9rem;
  font-size: var(--text-xs);
  color: rgba(245, 239, 227, 0.5);
  text-align: center;
}
@media (max-width: 900px) {
  .avail-panel {
    grid-template-columns: 1fr;
  }
  .avail-summary {
    position: static;
  }
}
/* ---- mobile: the wizard's summary becomes a sticky bottom bar ----
   (dates + running total + CTA always visible while scrolling the
   step content — the sticky-sidebar treatment only makes sense once
   there's a side to stick to) */
@media (max-width: 640px) {
  #wizard .wizard__body {
    padding-bottom: 6.5rem;
  }
  #wizard.is-success .wizard__body {
    padding-bottom: 0;
  }
  #wizard .avail-summary {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    top: auto;
    z-index: 500;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(245, 239, 227, 0.14);
    padding: 0.8rem 1.1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 26px rgba(13, 31, 53, 0.32);
  }
  #wizard .avail-summary__eyebrow,
  #wizard .avail-summary__nights,
  #wizard .avail-summary__addons,
  #wizard #summaryFacts,
  #wizard .avail-summary__note {
    display: none;
  }
  #wizard .avail-summary__dates {
    min-height: 0;
    margin-bottom: 0.4rem;
  }
  #wizard .avail-summary__placeholder {
    font-size: var(--text-xs);
  }
  #wizard .avail-summary__range {
    font-size: var(--text-sm);
    line-height: 1.3;
  }
  #wizard .avail-summary__range small {
    font-size: 0.64rem;
    margin-top: 0.15rem;
  }
  #wizard .avail-summary__total {
    border-top: none;
    padding-top: 0;
    margin: 0 0 0.6rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }
  #wizard .avail-summary__total-label {
    margin-bottom: 0;
  }
  #wizard .avail-summary__total-amount {
    font-size: var(--text-lg);
  }
  #wizard .avail-summary .btn {
    min-height: 48px;
    padding: 0.95rem 1.4rem;
  }
}

/* ============ FAQ ============ */
.faq-list {
  max-width: 46rem;
  margin-inline: auto;
}
.faq-list details {
  border-top: 1px solid var(--line);
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  position: relative;
  transition: color 0.3s;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--copper);
  transition: transform 0.4s var(--ease-out);
}
.faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-list summary:hover {
  color: var(--pine);
}
.faq-body {
  overflow: hidden;
}
.faq-body p {
  padding: 0 0 1.5rem;
  color: var(--muted);
  max-width: 42em;
}

/* ============ contact ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.channels {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}
.channel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  border-top: 1px solid var(--line);
  transition: padding 0.35s var(--ease-out), background 0.35s;
}
.channel:last-child {
  border-bottom: 1px solid var(--line);
}
.channel:hover {
  background: var(--paper);
  padding-inline: 0.9rem;
}
.channel__label {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.channel__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.contact-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.field {
  margin-bottom: 1.4rem;
}
.field label,
.field__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.9rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s, box-shadow 0.3s;
  min-height: 44px;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(176, 123, 68, 0.15);
}
.field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 540px) {
  .field--row {
    grid-template-columns: 1fr;
  }
}
.seg {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.seg label {
  position: relative;
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg span {
  display: inline-block;
  padding: 0.6rem 1.3rem;
  font-size: var(--text-sm);
  border: 1px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.seg input:checked + span {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.seg input:focus-visible + span {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.contact-form .btn {
  width: 100%;
  justify-content: center;
}
.form-note {
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--pine);
  text-align: center;
}
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ CTA band ============ */
.cta-band {
  position: relative;
  background: var(--pine-deep);
  color: var(--cream);
  padding-block: var(--space-7);
  overflow: hidden;
  text-align: center;
}
.cta-band .eyebrow {
  color: var(--copper-bright);
  justify-content: center;
}
.cta-band .eyebrow::before {
  display: none;
}
.cta-band h2 {
  font-size: var(--text-3xl);
  max-width: 16em;
  margin: 1.25rem auto 1.5rem;
}
.cta-band p {
  color: rgba(245, 239, 227, 0.7);
  max-width: 34em;
  margin: 0 auto 2.25rem;
}
/* the only price on the homepage: it closes the argument rather than opening it */
.cta-band__price {
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: rgba(245, 239, 227, 0.72);
  margin-bottom: 2rem;
}
.cta-band__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-band .engrave {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: min(72rem, 110%);
  height: auto;
  color: rgba(245, 239, 227, 0.1);
  pointer-events: none;
}

/* ============ footer ============ */
.footer {
  background: var(--night);
  color: var(--cream);
  padding: var(--space-6) 0 2rem;
  position: relative;
  overflow: hidden;
}
.footer__word {
  font-family: var(--font-display);
  /* was clamp(3rem, 11vw, 9.5rem) — 152px, 2.7x DESIGN.md's 56px ceiling
     and the loudest element on a site whose argument is restraint.
     Presence comes from the space around it instead. */
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 0.6em;
  color: rgba(245, 239, 227, 0.95);
  display: block;
  margin-bottom: var(--space-5);
  white-space: nowrap;
}
.footer__word em {
  color: var(--copper-bright);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-light);
}
.footer__brand p {
  font-size: var(--text-sm);
  color: rgba(245, 239, 227, 0.6);
  max-width: 22em;
}
.footer__h {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin-bottom: 0.9rem;
}
.footer__grid p,
.footer__grid li {
  font-size: var(--text-sm);
  color: rgba(245, 239, 227, 0.75);
  line-height: 1.9;
}
/* footer nav links rendered 19px tall with no padding of their own.
   The anchor carries the target height; li line-height drops so the
   column's overall rhythm stays close to what it was. */
.footer__grid li {
  line-height: 1.35;
}
.footer__grid li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__grid a:hover {
  color: var(--copper-bright);
}
.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: var(--text-xs);
  color: rgba(245, 239, 227, 0.45);
  flex-wrap: wrap;
}
.footer__base a:hover {
  color: var(--copper-bright);
}
.footer__social {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding-top: var(--space-4);
}
.footer__social-label {
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--copper-bright);
}
.footer__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer__social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid rgba(245, 239, 227, 0.25);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: rgba(245, 239, 227, 0.85);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.footer__social-links a:hover {
  color: var(--night);
  background: var(--copper-bright);
  border-color: var(--copper-bright);
}
.footer__social-links a span {
  font-size: 1.05em;
  line-height: 1;
}
@media (max-width: 540px) {
  .footer__social {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
}
.footer .meander {
  width: 100%;
  height: auto;
  color: rgba(245, 239, 227, 0.14);
  margin-bottom: var(--space-4);
}
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ engrave svg motif ============ */
.engrave {
  display: block;
  color: rgba(24, 36, 55, 0.16);
}

/* ============ testimonials (editorial, luxury hospitality) ============ */
.testimonials {
  position: relative;
  background: var(--pine-deep);
  color: var(--cream);
  padding-block: var(--space-7);
  overflow: hidden;
}
.testimonials .engrave {
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%) scaleY(-1);
  width: min(78rem, 120%);
  height: auto;
  color: rgba(245, 239, 227, 0.05);
  pointer-events: none;
}
.testimonials__head {
  position: relative;
  max-width: 34em;
  margin-bottom: clamp(3rem, 3rem + 3vw, var(--space-6));
}
.testimonials__head h2 {
  font-size: var(--text-3xl);
  font-weight: 400;
  margin-top: 1.1rem;
  color: var(--cream);
}

/* grid: tall photo (left) + one featured quote (top right) + a row of 3 small quotes (bottom right) */
.testimonial-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  column-gap: clamp(2rem, 4vw, var(--space-5));
  row-gap: clamp(2.5rem, 4vw, var(--space-5));
}
.testimonial-photo {
  grid-column: 1 / span 5;
  grid-row: 1 / span 2;
}
.testimonial-photo .frame {
  aspect-ratio: 3 / 4;
}
.testimonial-photo .frame img {
  filter: saturate(0.92) brightness(0.94);
}
.testimonial-photo figcaption {
  margin-top: 1rem;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: rgba(245, 239, 227, 0.55);
}
.testimonial--featured {
  grid-column: 6 / span 7;
  grid-row: 1 / 2;
}
.testimonial-grid__row {
  grid-column: 6 / span 7;
  grid-row: 2 / 3;
  display: grid;
  /* v9 — kettő maradt: az esküvői idézet az eskuvo.html-re költözött,
     hogy ne ugyanaz a mondat fogadja a látogatót két oldalon. */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, var(--space-4));
  row-gap: var(--space-4);
}

.testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.testimonial__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.9;
  margin-bottom: 0.6rem;
  display: block;
}
.testimonial--featured .testimonial__mark {
  font-size: 4.5rem;
}
.testimonial blockquote {
  margin: 0;
}
.testimonial blockquote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: rgba(250, 246, 236, 0.96);
}
.testimonial--featured blockquote p {
  font-size: var(--text-xl);
  line-height: 1.45;
}
.testimonial figcaption {
  margin-top: 1.25rem;
  padding-top: 1rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
.testimonial figcaption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 1px;
  background: rgba(201, 149, 92, 0.55);
}
.testimonial__stars {
  color: var(--gold);
  letter-spacing: 0.15em;
  font-size: 0.7rem;
}
.testimonial__name {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream);
}
.testimonial__source {
  color: rgba(245, 239, 227, 0.45);
}
.testimonial__source::before {
  content: "· ";
}

.testimonials__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(245, 239, 227, 0.14);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.55);
}
.testimonials__badge .stars {
  color: var(--gold);
  letter-spacing: 0.2em;
  font-size: var(--text-sm);
}
@media (max-width: 900px) {
  .testimonial-grid {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-4);
  }
  .testimonial-photo .frame {
    aspect-ratio: 4 / 3;
  }
  .testimonial-grid__row {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-4);
  }
  .testimonial__mark,
  .testimonial--featured .testimonial__mark {
    font-size: 3rem;
  }
  .testimonial--featured blockquote p {
    font-size: var(--text-lg);
  }
}

/* ============ interactive map ============ */
.map-embed {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 8;
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.2) contrast(1.05) saturate(0.9);
}
@media (max-width: 640px) {
  .map-embed {
    aspect-ratio: 4 / 3;
  }
}

/* ============ breadcrumb-ish page marker ============ */
.page-marker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============ next-page footer nav ============ */
.next-page {
  display: block;
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
  text-align: center;
}
.next-page__label {
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.9rem;
}
.next-page__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  transition: color 0.35s, letter-spacing 0.5s var(--ease-out);
}
.next-page:hover .next-page__title {
  color: var(--copper);
  letter-spacing: 0.01em;
}

/* ============ anim initial states are set from JS only ============ */
.line-mask {
  display: block;
  overflow: hidden;
}
.line-mask > span {
  display: block;
  will-change: transform;
}

/* clip reveal frames */
[data-clip] {
  will-change: clip-path;
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__scroll::after {
    animation: none;
  }
}

/* ============ small screens ============ */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  /* Mobilon a menü tartalma magasabb a képernyőnél. A "1fr auto" sorozás +
     középre igazítás miatt a tartalom felfelé IS túlcsordult, a felfelé
     túlcsorduló rész pedig görgetéssel elvileg sem érhető el (a görgetés
     csak lefelé tud menni). Ezért itt a sorok automatikus magasságot
     kapnak és a tartalom felülről indul: így a teljes lista végiggörgethető. */
  .menu-overlay {
    display: block;
    padding-bottom: 3rem;
  }
  .menu-overlay__grid {
    grid-template-columns: 1fr;
    align-content: start;
    align-items: start;
  }
  .menu-preview {
    display: none;
  }
  .hero__usp {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .hero__scroll {
    display: none;
  }
}
@media (max-width: 540px) {
  .nav-cta {
    display: none;
  }
  .menu-btn__label {
    display: none;
  }
  .brand__crest {
    width: 30px;
    height: 37px;
  }
}

/* ============================================================
   V7 — bento showcase, gallery, lightbox, floating pill
   ============================================================ */

/* ============ bento showcase (A birtok, Apple-style asymmetric grid) ============ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 13rem;
  gap: 1rem;
}
.bento-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--cream);
  perspective: 1200px;
}
.bento-item__inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.bento-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.bento-item:hover img {
  transform: scale(1.045);
}
.bento-item__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 31, 53, 0.82) 0%,
    rgba(13, 31, 53, 0.28) 42%,
    rgba(13, 31, 53, 0) 68%
  );
}
.bento-item__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(1rem, 2vw, 1.6rem);
}
.bento-item__tag {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin-bottom: 0.4rem;
}
.bento-item__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
}
.bento-item--big {
  grid-column: span 2;
  grid-row: span 2;
}
.bento-item--big .bento-item__title {
  font-size: var(--text-2xl);
}
.bento-item--wide {
  grid-column: span 2;
}
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 11rem;
  }
  .bento-item--big {
    grid-column: span 2;
    grid-row: span 2;
  }
  .bento-item--wide {
    grid-column: span 2;
  }
}
@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 15rem;
  }
  .bento-item--big,
  .bento-item--wide {
    grid-column: span 1;
  }
  .bento-item--big {
    grid-row: span 1;
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* ============ gallery grid (birtok.html — editorial mosaic) ============ */

/* ============ lightbox ============ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 970;
  background: rgba(13, 31, 53, 0.94);
  /* A kép MINDIG beleférjen a képernyőbe, görgetés nélkül. Korábban a
     lightbox maga volt görgethető (overflow-y:auto) és a kép fix 84vh
     magasságot kapott — iOS Safariban viszont a görgethető konténerbe
     ágyazott position:fixed gombok (bezárás, lapozás) elcsúsznak vagy
     elérhetetlenné válnak, ezért ragadt bent a látogató a képben.
     Görgetés helyett most a kép mérete alkalmazkodik, a gombok pedig a
     nem-görgethető rétegen ülnek, ahol megbízhatóan kattinthatók. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 4.5rem)
    1rem
    calc(env(safe-area-inset-bottom, 0px) + 4.5rem);
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox__frame {
  position: relative;
  max-width: min(92vw, 78rem);
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox__frame img {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 13rem);
  object-fit: contain;
  display: block;
  transition: opacity 0.3s;
  /* a vízszintes swipe a lapozásé, a böngésző ne rabolja el */
  touch-action: pan-y;
}
.lightbox__cap {
  text-align: center;
  color: rgba(245, 239, 227, 0.75);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  margin-top: 1rem;
}
.lightbox__close,
.lightbox__nav {
  position: fixed;
  color: var(--cream);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(245, 239, 227, 0.08);
  transition: background 0.25s;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(245, 239, 227, 0.18);
}
.lightbox__close {
  /* safe-area: iPhone notch / Dynamic Island alá csúszott a gomb */
  top: calc(env(safe-area-inset-top, 0px) + clamp(0.75rem, 3vw, 2rem));
  right: calc(env(safe-area-inset-right, 0px) + clamp(0.75rem, 3vw, 2rem));
  z-index: 2;
}
.lightbox__nav--prev {
  left: clamp(0.75rem, 3vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__nav--next {
  right: clamp(0.75rem, 3vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
}
/* A lapozógombok korábban display:none-t kaptak mobilon, swipe pedig nem
   volt — így telefonon semmilyen módon nem lehetett képet váltani. Most
   a képernyő aljára kerülnek, ahol hüvelykujjal kényelmesen elérhetők
   (a swipe emellett külön is működik). */
@media (max-width: 640px) {
  .lightbox__nav {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    transform: none;
    background: rgba(245, 239, 227, 0.14);
  }
  .lightbox__nav--prev {
    left: 1.25rem;
  }
  .lightbox__nav--next {
    right: 1.25rem;
  }
  .lightbox__cap {
    margin-top: 0.75rem;
    padding-inline: 0.5rem;
  }
}

/* ============ day/night full-bleed break ============ */
.night-break {
  position: relative;
  min-height: 72svh;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
}
.night-break img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
}
.night-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 31, 53, 0.86) 0%,
    rgba(13, 31, 53, 0.1) 44%,
    rgba(13, 31, 53, 0.28) 100%
  );
}
.night-break__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(2.5rem, 6vh, 4rem);
}
.night-break__content .eyebrow {
  color: var(--copper-bright);
}
.night-break__content h2 {
  font-size: var(--text-3xl);
  max-width: 16em;
  margin: 1.1rem 0 0;
}

/* ============ floating booking pill ============ */
.book-pill {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 880;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.7rem;
  border-radius: 100px;
  background: var(--night);
  color: var(--cream);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 18px 44px -12px rgba(13, 31, 53, 0.45);
  transform: translateY(160%);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.45s, background 0.35s;
}
.book-pill.is-on {
  transform: none;
  opacity: 1;
}
.book-pill:hover {
  background: var(--pine);
}
.book-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--free);
  box-shadow: 0 0 0 0 rgba(63, 125, 84, 0.55);
  animation: pill-beat 2.2s ease-out infinite;
}
@keyframes pill-beat {
  from {
    box-shadow: 0 0 0 0 rgba(63, 125, 84, 0.55);
  }
  to {
    box-shadow: 0 0 0 9px rgba(63, 125, 84, 0);
  }
}
@media (max-width: 640px) {
  .book-pill span:not(.dot) {
    display: none;
  }
  .book-pill {
    padding: 0.9rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-pill .dot {
    animation: none;
  }
}

/* ============================================================
   HOMEPAGE V2 — quiet, confident, single-focus sections
   ============================================================ */

/* ============ trust stats (compact strip under hero) ============ */
.trust-stats {
  padding-block: clamp(2.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.trust-stats__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.trust-stats__row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}
.trust-stats__row .ico {
  width: 26px;
  height: 26px;
  color: var(--copper);
}
.trust-stats__n {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
}
.trust-stats__n b {
  font-weight: 400;
  color: var(--pine);
}
.trust-stats__l {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  .trust-stats__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }
}

/* ============ claim block (egy foglalás = az egész birtok) ============ */
.claim {
  padding-block: var(--space-7);
}
.claim__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}
.claim__text h2 {
  font-size: var(--text-3xl);
  margin: 1.1rem 0 1.4rem;
}
.claim__text .lede {
  margin-bottom: 1.1rem;
}
.claim__text p:not(.lede):not(.eyebrow) {
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 1.1rem;
  line-height: 1.7;
}
.claim__price {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem 0;
  margin: 0.5rem 0 1.75rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.claim__price > span:first-child {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
}
.claim__price small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--muted);
}
.claim__price-note {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pine);
}
.claim__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  /* fekvő arány: a homlokzat teljes szélességében elfér */
  aspect-ratio: 5 / 4;
  align-self: center;
}
.claim__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .claim__grid {
    grid-template-columns: 1fr;
  }
  .claim__media {
    aspect-ratio: 16 / 10;
    order: -1;
  }
}

/* ============ amenities icon grid ============ */
.amenities__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 3vw, 3rem);
}
.amenities__col h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--pine);
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.amenities__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.amenities__col li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.5;
}
.ico--sm {
  width: 21px;
  height: 21px;
  color: var(--copper);
  flex: none;
}
@media (max-width: 1024px) {
  .amenities__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.5rem;
  }
}
@media (max-width: 540px) {
  .amenities__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ active recreation split (compact, icon-led) ============ */
.active-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1.5rem;
  margin: 1.75rem 0;
}
.active-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.active-coord {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
@media (max-width: 540px) {
  .active-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   V2.1 — centered luxury header, hero slideshow, booking bar,
   amenity tiles, rounded feature blocks, grant band
   ============================================================ */

/* ---- top social strip ---- */
.topbar {
  border-bottom: 1px solid rgba(245, 239, 227, 0.16);
  transition: border-color 0.5s;
}
.is-solid .topbar {
  border-bottom-color: var(--line);
}
.topbar__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}
.topbar__social {
  display: inline-flex;
  /* 30px box kept as the visual mark; padding carries it to a 44px target */
  width: 30px;
  height: 30px;
  box-sizing: content-box;
  padding: 7px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}
.topbar__social svg {
  width: 16px;
  height: 16px;
}
.topbar__social:hover {
  color: var(--gold);
  transform: translateY(-1px);
}
.topbar__sep {
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.25;
}
.topbar__note {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}
@media (max-width: 640px) {
  .topbar__note {
    display: none;
  }
}

/* ---- centered nav (logo in middle, links flank) ---- */
.nav-main {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.nav-side {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-side--left {
  justify-content: flex-start;
}
.nav-side--right {
  justify-content: flex-end;
}
.nav-side a:not(.nav-cta) {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0;
}
.nav-side a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav-side a:not(.nav-cta):hover::after,
.nav-side a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.brand--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  line-height: 1;
}
.brand--center .brand__crest {
  width: 54px;
  height: 66px;
  transition: transform 0.5s var(--ease-out);
}
.is-solid .brand--center .brand__crest {
  width: 44px;
  height: 54px;
}
.brand--center .brand__main {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
.brand--center .brand__sub {
  font-size: 0.6rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  opacity: 0.72;
}
/* light-over-hero coloring */
.nav--light:not(.is-solid) .topbar,
.nav--light:not(.is-solid) .nav-main,
.nav--light:not(.is-solid) .brand--center,
.nav--light:not(.is-solid) .nav-side a:not(.nav-cta),
.nav--light:not(.is-solid) .topbar__social {
  color: var(--cream);
}
.nav-main .menu-btn {
  display: none;
}
@media (max-width: 1080px) {
  .nav-side {
    display: none;
  }
  .nav-main {
    grid-template-columns: 1fr auto 1fr;
  }
  .nav-main .nav-cta {
    justify-self: start;
    grid-column: 1;
  }
  .brand--center {
    grid-column: 2;
  }
  .nav-main .menu-btn {
    display: inline-flex;
    justify-self: end;
    grid-column: 3;
  }
}
@media (max-width: 540px) {
  .nav-main .nav-cta {
    display: none;
  }
  .brand--center .brand__main {
    font-size: 1.3rem;
  }
  .brand--center .brand__crest {
    width: 42px;
    height: 52px;
  }
}

/* ---- hero slideshow + centered content ---- */
.hero--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero--center .hero__wash {
  background:
    radial-gradient(ellipse 78% 58% at 50% 47%, rgba(11, 26, 45, 0.52), transparent 72%),
    linear-gradient(rgba(11, 26, 45, 0.26) 0%, rgba(11, 26, 45, 0.16) 42%, rgba(11, 26, 45, 0.44) 100%);
  z-index: 1;
}
.hero--center .hero__title,
.hero--center .hero__sub {
  text-shadow: 0 2px 24px rgba(9, 20, 36, 0.45);
}
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s var(--ease-inout);
  will-change: opacity;
}
.hero__slide.is-active {
  opacity: 1;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__slide.is-active img {
    animation: kenburns 9s var(--ease-out) forwards;
  }
}
@keyframes kenburns {
  from {
    transform: scale(1.03);
  }
  to {
    transform: scale(1.13);
  }
}
.hero--center .hero__content {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero--center .hero__eyebrow {
  justify-content: center;
}
.hero--center .hero__title {
  max-width: 16em;
  margin-inline: auto;
}
.hero--center .hero__sub {
  margin-inline: auto;
}

/* ---- elegant booking bar ---- */
.booking {
  width: 100%;
  max-width: 60rem;
  margin: 0.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: stretch;
  background: rgba(250, 246, 236, 0.14);
  border: 1px solid rgba(245, 239, 227, 0.35);
  border-radius: 3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.booking__field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.25rem;
  border-right: 1px solid rgba(245, 239, 227, 0.22);
  text-align: left;
  min-width: 0;
}
.booking__label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.72);
}
.booking__field input,
.booking__field select {
  border: 0;
  background: none;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.booking__field input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}
.booking__field input:focus,
.booking__field select:focus {
  outline: none;
}
.booking__field select option {
  color: var(--ink);
}
.booking__submit {
  border: 0;
  background: var(--gold);
  color: var(--night);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: background 0.35s, color 0.35s;
}
.booking__submit:hover {
  background: var(--cream);
  color: var(--night);
}
.hero__underlink {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.85);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(201, 149, 92, 0.6);
  transition: color 0.3s, border-color 0.3s;
}
.hero__underlink:hover {
  color: var(--copper-bright);
  border-color: var(--copper-bright);
}
@media (max-width: 760px) {
  .booking {
    grid-template-columns: 1fr 1fr;
    max-width: 30rem;
  }
  .booking__submit {
    grid-column: span 2;
    padding: 0.9rem;
    justify-content: center;
  }
  .booking__field:nth-child(2) {
    border-right: 0;
  }
}

/* ---- amenity tiles (flat centered icon grid, gold hover) ---- */

.amenity-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  padding: 2rem 1rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease-out);
}
.amenity-tile__ring {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: border-color 0.4s, background 0.4s;
}
.amenity-tile .ico {
  width: 30px;
  height: 30px;
  color: var(--pine);
  transition: color 0.4s, transform 0.4s var(--ease-out);
}
.amenity-tile__label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  line-height: 1.35;
}


/* ---- rounded feature blocks (editorial, circular media) ---- */
.feature-round {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.feature-round + .feature-round {
  margin-top: clamp(3rem, 6vw, 6rem);
}
.feature-round--reverse .feature-round__media {
  order: 2;
}
.feature-round__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  max-width: 34rem;
  margin-inline: auto;
  width: 100%;
}
.feature-round__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.feature-round:hover .feature-round__media img {
  transform: scale(1.06);
}
.feature-round__body h3 {
  font-size: var(--text-2xl);
  margin: 0.8rem 0 1rem;
}
.feature-round__body p {
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 30em;
  margin-bottom: 1.5rem;
}
@media (max-width: 860px) {
  .feature-round {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .feature-round--reverse .feature-round__media {
    order: 0;
  }
  .feature-round__media {
    max-width: 24rem;
  }
  .feature-round__body p {
    margin-inline: auto;
  }
}

/* ---- rooms: softer rounded cards ---- */
.rooms-grid .frame {
  border-radius: 10px;
}

/* ---- grant band (Széchenyi 2020, mandatory) ---- */
/* Mandatory notice, so it stays legible — but it sits below the footer and
   reads as an administrative footnote, not as a section of the brand story.
   Image width reduced from 46rem to 24rem. */
.grant {
  background: var(--cream);
}
.grant__inner {
  max-width: 62rem;
  margin-inline: auto;
  padding: 2rem var(--gutter) 2.5rem;
  text-align: center;
}
.grant__img {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  opacity: 0.75;
  transition: opacity 0.3s;
}
.grant__img:hover {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .grant__img {
    transition: none;
  }
}

/* ============================================================
   V2.2 — living amenity tiles, contextual CTAs, subtle ambient motion
   ============================================================ */

/* ---- amenity tile: gold glow + grow + description reveal on hover ---- */
.amenity-tile {
  cursor: default;
}


/* ---- floating leaves (very subtle ambient) ---- */
.amenities-sec {
  position: relative;
  overflow: hidden;
}
.leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.amenities-sec .container {
  position: relative;
  z-index: 1;
}
.leaf {
  position: absolute;
  top: -8%;
  width: 28px;
  height: auto;
  color: var(--pine);
  opacity: 0.34;
  transform: translateZ(0);
  will-change: transform;
}
.leaf svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .leaf {
    animation-name: leaf-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}
@keyframes leaf-fall {
  0% {
    transform: translateY(-60px) translateX(0) rotate(0deg);
  }
  50% {
    transform: translateY(380px) translateX(34px) rotate(170deg);
  }
  100% {
    transform: translateY(820px) translateX(-6px) rotate(340deg);
  }
}

/* ---- steam rising from the jacuzzi (wellness feature circle) ---- */
.feature-round__media {
  position: relative;
}
.steam {
  position: absolute;
  left: 50%;
  bottom: 24%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.steam i {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 248, 0.85), transparent 66%);
  filter: blur(7px);
  opacity: 0;
  will-change: transform, opacity;
}
.steam i:nth-child(2) {
  left: 42px;
  width: 52px;
  height: 52px;
}
.steam i:nth-child(3) {
  left: -36px;
  width: 46px;
  height: 46px;
}
@media (prefers-reduced-motion: no-preference) {
  .steam i {
    animation: steam-rise 8s ease-in-out infinite;
  }
  .steam i:nth-child(2) {
    animation-delay: 2.8s;
    animation-duration: 9s;
  }
  .steam i:nth-child(3) {
    animation-delay: 5s;
    animation-duration: 7.5s;
  }
}
@keyframes steam-rise {
  0% {
    transform: translateY(0) scale(0.7);
    opacity: 0;
  }
  25% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-140px) scale(1.75);
    opacity: 0;
  }
}

/* ---- canoe gently rocking (river feature circle) ---- */
@media (prefers-reduced-motion: no-preference) {
  .feature-round__media--rock {
    animation: gentle-rock 7s ease-in-out infinite;
    transform-origin: center 65%;
  }
}
@keyframes gentle-rock {
  0%,
  100% {
    transform: rotate(-0.7deg);
  }
  50% {
    transform: rotate(0.7deg);
  }
}


/* ============================================================
   V8 — NAVIGÁCIÓ ÚJRAGONDOLVA
   Csendesebb, tágasabb, hierarchikus. A címer marad középen.
   ============================================================ */

/* ---- felső sáv: social · minősítés · telefon ---- */
.topbar__inner {
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.55rem var(--gutter);
}
.topbar__side {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 0;
  min-width: 0;
}
.topbar__side--end {
  justify-content: flex-end;
  gap: 1rem;
}
.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.9;
}
.topbar__stars {
  /* gold fails AA on the scrolled cream topbar (2.48:1); copper is the
     documented reading-weight substitute where gold can't carry text */
  color: var(--copper);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.topbar__tel {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: color 0.3s;
}
.topbar__tel:hover {
  color: var(--gold);
}
@media (max-width: 1080px) {
  .topbar__badge {
    display: none;
  }
  .topbar__side--end {
    flex: 0 0 auto;
  }
}
@media (max-width: 640px) {
  .topbar__note,
  .topbar__sep {
    display: none;
  }
}

/* ---- fő sor: nagyobb levegő, halkabb linkek ---- */
.nav-main {
  padding: 1.05rem var(--gutter) 1.15rem;
  gap: 2rem;
}
.nav-side {
  gap: 2.75rem;
}
.nav-side a:not(.nav-cta),
.nav-group__btn {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.45rem 0;
  opacity: 0.86;
  transition: opacity 0.35s var(--ease-out);
}
.nav-side a:not(.nav-cta):hover,
.nav-group__btn:hover,
.nav-group.is-open .nav-group__btn {
  opacity: 1;
}

/* ---- lenyíló csoportok ---- */
.nav-group {
  position: relative;
}
.nav-group__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  cursor: pointer;
}
.nav-group__btn::after,
.nav-side a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.nav-group__btn:hover::after,
.nav-group:focus-within .nav-group__btn::after,
.nav-group.is-open .nav-group__btn::after,
.nav-group.is-current .nav-group__btn::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-group__chev {
  /* 9px / 0.55 opacity volt: nagy felbontású kijelzőn gyakorlatilag
     észrevehetetlen pötty. A nyílnak az a dolga, hogy ELSŐ RÁNÉZÉSRE
     elárulja, melyik menüpont nyílik le — ehhez látszania kell. */
  width: 12px;
  height: 8px;
  flex: none;
  opacity: 0.85;
  color: var(--gold);
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
/* A forgatás KIZÁRÓLAG a valós nyitott állapotot követi.
   Korábban a :hover és a :focus-within is forgatta — emiatt ha a
   látogató a gombra kattintva zárta be a menüt, a kurzor a gombon
   maradt, a hover tovább élt, és a nyíl lefelé fordítva ragadt,
   miközben a menü már zárva volt. A nyíl így hazudott az állapotról. */
.nav-group.is-open .nav-group__chev {
  transform: rotate(180deg);
  opacity: 1;
}
/* hoveren csak kiemelkedik, de nem fordul — a jelentése marad pontos */
.nav-group:hover .nav-group__chev,
.nav-group:focus-within .nav-group__chev {
  opacity: 1;
}

.nav-drop {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1.5rem;
  min-width: 22rem;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out),
    visibility 0.35s;
}
/* JS nélkül is működik: hover és fókusz egyaránt nyitja */
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop,
.nav-group.is-open .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* láthatatlan híd a gomb és a panel között, hogy hoverben ne csukódjon be */
.nav-drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.9rem;
  height: 0.9rem;
}
.nav-drop__inner {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 2px;
  padding: 0.6rem;
  box-shadow: 0 24px 60px -28px rgba(13, 31, 53, 0.45),
    0 2px 10px -6px rgba(13, 31, 53, 0.18);
}
/* finom hegy a gomb alatt */
.nav-drop__inner::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 2.1rem;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}
.nav-drop a {
  display: block;
  position: relative;
  padding: 0.75rem 1.1rem 0.8rem;
  border-radius: 2px;
  color: var(--ink);
  opacity: 1;
  transition: background 0.3s var(--ease-out);
}
.nav-drop a + a {
  border-top: 1px solid var(--line);
}
.nav-drop a::after {
  display: none;
}
.nav-drop a:hover,
.nav-drop a:focus-visible {
  background: var(--cream-2);
}
.nav-drop__t {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-transform: none;
  transition: transform 0.4s var(--ease-out), color 0.3s;
}
.nav-drop a:hover .nav-drop__t,
.nav-drop a:focus-visible .nav-drop__t {
  transform: translateX(0.3rem);
  color: var(--copper);
}
.nav-drop a[aria-current="page"] .nav-drop__t {
  color: var(--copper);
  font-style: italic;
}
.nav-drop__s {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* a hero fölött világos fejléc — a panel viszont mindig papír színű */
.nav--light:not(.is-solid) .nav-group__btn,
.nav--light:not(.is-solid) .topbar__badge,
.nav--light:not(.is-solid) .topbar__tel {
  color: var(--cream);
}

/* ---- CTA: visszafogottabb, de erősebb ---- */
.nav-cta {
  padding: 0.72rem 1.65rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  border: 1px solid var(--gold);
}
.nav-cta:hover {
  background: var(--pine);
  border-color: var(--pine);
}

/* ---- címer: pontosan középen, minden bontásponton ---- */
.brand--center .brand__main {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.brand--center .brand__sub {
  font-size: 0.56rem;
  letter-spacing: 0.4em;
  opacity: 0.66;
}

@media (max-width: 1180px) {
  .nav-side {
    gap: 1.9rem;
  }
  .nav-drop {
    min-width: 19rem;
  }
}

/* ---- tablet / mobil: a foglalás gomb marad, a linkek a menübe költöznek ----
   A címer itt abszolút középre kerül, így a két oldal eltérő szélessége
   sem tolhatja el — a logó minden bontásponton pontosan középen áll. ---- */
@media (max-width: 1080px) {
  .nav-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .nav-side--left {
    display: none;
  }
  .nav-side--right {
    display: flex;
    order: 1;
    justify-content: flex-start;
  }
  .nav-side--right a:not(.nav-cta) {
    display: none;
  }
  .brand--center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
  .nav-main .menu-btn {
    display: inline-flex;
    order: 2;
  }
}
@media (max-width: 540px) {
  /* a CTA marad — csak összehúzódik; a foglalás sosem tűnhet el */
  .nav-main .nav-cta {
    display: inline-flex;
    padding: 0.6rem 1rem;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    min-height: 44px; /* érintőfelület */
  }
  .nav-main {
    padding-inline: clamp(0.9rem, 4vw, 1.5rem);
  }
  .brand--center .brand__crest {
    width: 34px;
    height: 42px;
  }
}
@media (max-width: 400px) {
  .brand--center .brand__main {
    font-size: 1.12rem;
  }
  .brand--center .brand__sub {
    display: none;
  }
  .nav-main .nav-cta {
    padding: 0.55rem 0.8rem;
    letter-spacing: 0.1em;
  }
}

/* ============================================================
   V8 — teljes képernyős menü: hasábos, áttekinthető
   ============================================================ */
.menu-overlay__grid {
  grid-template-columns: 1.45fr 0.55fr;
}
.menu-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
  align-content: start;
}
.menu-col {
  display: flex;
  flex-direction: column;
}
.menu-col--lead {
  grid-column: 1 / -1;
  margin-bottom: 0.75rem;
}
.menu-col__h {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.5rem;
  margin-top: 1.5rem;
}
.menu-col--lead .menu-links__title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
}
.menu-links .menu-links__title {
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  line-height: 1.3;
}
.menu-links a {
  align-items: center;
  gap: 0.9rem;
  padding: 0.62rem 0;
}
.menu-links small {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-align: right;
}
@media (max-width: 900px) {
  .menu-overlay__grid {
    grid-template-columns: 1fr;
  }
  .menu-preview {
    display: none;
  }
  .menu-links {
    grid-template-columns: 1fr;
  }
  .menu-col__h {
    margin-top: 1.1rem;
  }
  .menu-links small {
    display: none;
  }
}

/* ============================================================
   V8 — MINŐSÍTÉSI SÁV
   Halk, széles levegő, a birtok tipográfiai ritmusában.
   ============================================================ */
.cert-band {
  padding: var(--space-5) 0;
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.cert-band__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1.35fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.cert-band__seal {
  color: var(--gold);
  flex: none;
}
.cert-band__seal svg {
  width: clamp(58px, 6vw, 82px);
  height: auto;
}
.cert-band__body h2 {
  font-size: var(--text-2xl);
  margin: 0.7rem 0 0.9rem;
}
.cert-band__body p {
  color: var(--muted);
  max-width: 44ch;
}
.cert-band__marks {
  display: grid;
  gap: 1.1rem;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--line);
}
.cert-band__marks li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.cert-band__marks b {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--copper);
  font-variant-numeric: tabular-nums;
  min-width: 3.4rem;
}
.cert-band__marks span {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 1080px) {
  .cert-band__inner {
    grid-template-columns: auto 1fr;
  }
  .cert-band__marks {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    padding-left: 0;
    padding-top: 1.75rem;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 640px) {
  .cert-band__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .cert-band__marks {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* ============================================================
   V8 — SZOBAKÁRTYA MIKROADATOK
   ============================================================ */
.room-card__spec {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s var(--ease-out);
}
.room-card:hover .room-card__spec {
  color: var(--copper);
}
.rooms-note {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

/* ============================================================
   V8 — „KINEK SZÓL" kerek átvezetők
   A birtok kerek kompozícióinak folytatása.
   ============================================================ */
.paths-sec {
  padding-top: 0;
}
.paths-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
/* v9 — négy közönség: család, barátok, esküvő, céges.
   A körök egy sorban maradnak, csak kisebbek; kettesével törve
   a „kinek szól” kérdés kettéesne, és elveszne az áttekintés. */
.paths-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.75vw, 2.75rem);
}
@media (max-width: 1080px) {
  .paths-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3rem);
  }
}
.path-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.path-card__ring {
  position: relative;
  display: block;
  width: clamp(11rem, 17vw, 15.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.9rem;
  box-shadow: 0 0 0 1px var(--line), 0 0 0 0 rgba(196, 144, 56, 0);
  transition: box-shadow 0.55s var(--ease-out), transform 0.65s var(--ease-out);
}
.path-card__ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.9s var(--ease-out), filter 0.6s var(--ease-out);
}
.path-card:hover .path-card__ring {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(196, 144, 56, 0.55),
    0 0 0 9px rgba(196, 144, 56, 0.09);
}
.path-card:hover .path-card__ring img {
  transform: scale(1.09);
}
.path-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: 0.7rem;
}
.path-card p {
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 32ch;
  margin-bottom: 1.15rem;
}
.path-card__link {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}
.path-card__link .arr {
  display: inline-block;
  transition: transform 0.45s var(--ease-out);
}
.path-card:hover .path-card__link .arr {
  transform: translateX(0.4rem);
}
@media (max-width: 860px) {
  .paths-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .path-card__ring {
    width: 12rem;
    margin-bottom: 1.4rem;
  }
}

/* ============================================================
   V8 — LÁBLÉC: SVG ikonok (emoji helyett)
   V9 — a márkaszöveg saját sort kap, alatta öt egyenlő hasáb.
   A „Kinek szól” csoporttal hatra nőtt a lista; egyetlen sorba
   préselve mindegyik hasáb keskeny és sűrű lenne, márpedig itt
   a levegő a lényeg. ============================================================ */
.footer__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: var(--space-5);
}
.footer__brand {
  grid-column: 1 / -1;
  max-width: 46em;
}
.footer__cert {
  margin-top: 1.1rem;
  font-size: var(--text-xs) !important;
  line-height: 1.7 !important;
  color: rgba(245, 239, 227, 0.5) !important;
  max-width: 24em;
}
.footer__cert-stars {
  color: var(--gold);
  letter-spacing: 0.1em;
}
.footer__addr {
  margin-top: 0.9rem;
}
.footer__social-links a svg {
  width: 16px;
  height: 16px;
  flex: none;
}
@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 2.5rem;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- claim: ár melletti másodlagos link ---- */
.claim__actions {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  flex-wrap: wrap;
}

/* ============================================================
   V8 — SZOBA-ADATLAP
   Hajszálvonalas, tipográfiai — nem táblázatos.
   ============================================================ */
.room-specs {
  margin-top: 2.25rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
}
.room-specs > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.4fr) 1fr;
  gap: 1.5rem;
  padding: 0.72rem 0;
  align-items: baseline;
}
.room-specs > div + div {
  border-top: 1px solid var(--line);
}
.room-specs dt {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.room-specs dd {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .room-specs > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* akadálymentes jelölés a chipeken */
.room-block__meta .is-access {
  border-color: var(--free) !important;
  color: var(--free) !important;
}

/* ============================================================
   V8 — ÁRSÁV (arak.html)
   Egyetlen szám, körülötte levegő.
   ============================================================ */
.price-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 2px;
}
.price-block__main {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.price-block__n {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-block__u {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-block__terms {
  display: grid;
  gap: 0;
}
.price-block__terms li {
  display: grid;
  grid-template-columns: minmax(9rem, 0.42fr) 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  align-items: baseline;
}
.price-block__terms li + li {
  border-top: 1px solid var(--line);
}
.price-block__terms b {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--copper);
}
.price-block__terms span {
  font-size: var(--text-sm);
  color: var(--muted);
}
.price-block__cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  margin-top: 0.5rem;
  padding-top: 2rem;
}
@media (max-width: 860px) {
  .price-block {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .price-block__terms li {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* ============================================================
   V8 — KAPACITÁS BLOKK (Mézes Házikó, 18 fő)
   ============================================================ */
.capacity-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.capacity-block__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(9rem, 14vw, 12.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 9px rgba(196, 144, 56, 0.07);
  color: var(--copper);
}
.capacity-block__n {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 2rem + 2.6vw, 3.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.capacity-block__u {
  margin-top: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.capacity-block__body h2 {
  font-size: var(--text-2xl);
  margin: 0.7rem 0 1rem;
}
.capacity-block__body > p {
  color: var(--muted);
  max-width: 56ch;
}
.capacity-block__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.capacity-block__list li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.capacity-block__list b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--copper);
}
.capacity-block__list span {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .capacity-block {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .capacity-block__list {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}

/* halk kiegészítő sor a törzsszöveg alatt */
.note-line {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.75rem;
}

/* ============================================================
   V8 — FINOMHANGOLÁS
   Nem új design — a meglévő elemek élesebbre húzása.
   ============================================================ */

/* ---- kártyák: hajszálvékony arany akcentus hoverre ---- */
.near-card {
  position: relative;
}
.near-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  border-radius: var(--radius) var(--radius) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
.near-card:hover::before,
.near-card:focus-within::before {
  transform: scaleX(1);
}

/* ---- szoba- és évszakkártyák: lágy emelés a kép mellé ---- */
.room-card .frame,
.season .frame {
  transition: box-shadow 0.6s var(--ease-out);
}
.room-card:hover .frame,
.season:hover .frame {
  box-shadow: 0 26px 52px -30px rgba(13, 31, 53, 0.4);
}
.season .frame img {
  transition: transform 1.1s var(--ease-out);
}
.season:hover .frame img {
  transform: scale(1.05);
}

/* ---- gombok: az árnyék is kövesse a mozdulatot ---- */
.btn {
  transition: transform 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out),
    color 0.35s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(13, 31, 53, 0.5);
}
.btn:active {
  transform: translateY(0);
  transition-duration: 0.12s;
}

/* ---- fókusz: mindenhol látható, sosem levágva ---- */
.nav-drop a:focus-visible,
.path-card:focus-visible,
.near-card:focus-within,
.room-card:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- számadatok: ne ugráljon a tördelés ---- */
.trust-stats__n b,
.cert-band__marks b,
.capacity-block__n,
.price-block__n {
  font-variant-numeric: tabular-nums;
}

/* ---- mozgáscsökkentés: az új elemek is tartsák magukat ---- */
@media (prefers-reduced-motion: reduce) {
  .nav-drop,
  .nav-group__chev,
  .path-card,
  .path-card__ring,
  .path-card__ring img,
  .btn,
  .near-card,
  .near-card::before,
  .room-card .frame,
  .season .frame img {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
  .path-card:hover .path-card__ring,
  .btn:hover {
    transform: none !important;
  }
}

/* ============================================================
   V8 — KÉPPÁR (figure-duo)
   Két kép egymás mellett, enyhén elcsúsztatva — nem rács.
   ============================================================ */
.figure-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.figure-duo > figure:nth-child(2) {
  margin-top: clamp(1.5rem, 5vw, 4.5rem);
}
.figure-duo figcaption {
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 34ch;
}
.figure-duo .frame img {
  transition: transform 1.2s var(--ease-out);
}
.figure-duo figure:hover .frame img {
  transform: scale(1.04);
}
@media (max-width: 720px) {
  .figure-duo {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .figure-duo > figure:nth-child(2) {
    margin-top: 0;
  }
}

/* ---- foglalási pill: érintőbarát méret, biztonságos zóna ---- */
.book-pill {
  min-height: 48px;
  padding-block: 0.95rem;
}
@supports (padding: max(0px)) {
  .book-pill {
    bottom: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-bottom));
  }
}

/* ============================================================
   V8.1 — „AMI AZ ÁRBAN BENNE VAN" újraépítve
   Hajszálvonalas rács, vízszintes cellák, mindig látható leírás.
   A rács vonalait a gap adja: 1px rés + vonal színű háttér.
   ============================================================ */
.amenity-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  perspective: 1200px;
}
.amenity-tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 1.15rem;
  padding: 1.75rem 1.5rem;
  background: var(--cream);
  border: 0;
  border-radius: 0;
  transition: background 0.45s var(--ease-out);
}
/* arany hajszálvonal fut be a cella bal élén hoverre */
.amenity-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-out);
}
.amenity-tile:hover {
  background: var(--paper);
  transform: none;
  border-color: transparent;
}
.amenity-tile:hover::before {
  transform: scaleY(1);
}
.amenity-tile__ring {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: border-color 0.45s, background 0.45s;
}
.amenity-tile:hover .amenity-tile__ring {
  border-color: var(--gold);
  background: rgba(196, 144, 56, 0.1);
}
.amenity-tile .ico {
  width: 26px;
  height: 26px;
  color: var(--pine);
  transition: color 0.45s, transform 0.5s var(--ease-out);
}
.amenity-tile:hover .ico {
  color: var(--gold);
  transform: scale(1.1);
}
.amenity-tile__text {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}
.amenity-tile__label {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--ink);
}
/* a leírás MINDIG látszik — nincs max-height animáció, nincs reflow */
.amenity-tile__desc {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--muted);
  max-height: none;
  opacity: 1;
  overflow: visible;
  margin-top: 0;
  transition: color 0.45s;
}
.amenity-tile:hover .amenity-tile__desc {
  max-height: none;
  opacity: 1;
  margin-top: 0;
  color: var(--ink-soft);
}

@media (max-width: 1200px) {
  .amenity-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .amenity-tiles {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .amenity-tile {
    padding: 1.35rem 1.15rem;
    gap: 1rem;
  }
  .amenity-tile__ring {
    width: 48px;
    height: 48px;
  }
  .amenity-tile .ico {
    width: 23px;
    height: 23px;
  }
  .amenity-tile__desc {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .amenity-tile,
  .amenity-tile::before,
  .amenity-tile .ico {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   V9.1 — HERO HÁTTÉRVIDEÓ, 9:16-OS MESTERRŐL
   A forrás mostantól az álló, 9:16-os felvétel. Korábban egy
   9:16-ból 16:9-re kirenderelt (tehát széthúzott) változat ment,
   és a CSS is 16:9-re volt méretezve — ezért torzult a kép.

   A látogatók ~80%-a telefonon nézi, ahol a 9:16 natívan passzol.
   Minden más képarányon a videó BELENAGYÍT és levág, sosem húz
   szét: a megjelenített képarány mindig pontosan 9:16 marad.

   Két út van, ugyanazzal az eredménnyel:
     1. saját MP4  → <video object-fit:cover>, a böngésző számol
     2. Vimeo      → iframe, a méretezést nekünk kell megadnunk
   ============================================================ */

/* A videóréteg saját doboza. Ez adja a méretezés viszonyítási
   alapját (container query) és ez vágja le a kilógó részt.
   Azért nem a .hero kapja a container-type-ot: a hero magassága
   a tartalmától is függ (min-height + flex), a `size` típus pedig
   levágná róla ezt a függést, és összeesne a szekció. */
.hero__vidbox {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  container-type: size;
  container-name: herovid;

  /* a forrás képaránya — egy helyen, hogy ne szórjunk el számokat */
  --vid-w: 9;
  --vid-h: 16;

  /* A KIVÁGÁS HELYE, 0–1 között. Ez a két érték hangolható.
       --vid-y: 0 = a felvétel teteje látszik
                0.5 = közepe (alapérték)
                1 = alja
       --vid-x ugyanez vízszintesen.
     Széles kijelzőn az álló képnek csak egy sávja fér ki, ezért
     ott ez dönti el, mi marad látható. Mindkét lejátszási út
     ugyanezt a két változót használja. */
  --vid-x: 0.5;
  --vid-y: 0.5;
}

/* ---- 1. saját MP4: a cover-t a böngésző számolja ---- */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(var(--vid-x) * 100%) calc(var(--vid-y) * 100%);
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero__video.is-ready {
  opacity: 1;
}

/* ---- 2. Vimeo-iframe: kézzel méretezett cover ----
   Az iframe-et PONTOSAN a forrás képarányára állítjuk, így a
   Vimeo-lejátszó nem tesz fekete sávot köré, a fölösleg pedig a
   .hero__vidbox overflow-ja alatt levágódik.

   Méret: a klasszikus cover-képlet — mindkét tengelyen a nagyobbik
   követelmény nyer, a másik tengely ebből következik.
   Pozíció: a kilógó rész (doboz − iframe, negatív szám) és a
   --vid-x/--vid-y szorzata. Középre igazításnál ez épp a felét
   tolja el, tehát a 0.5 alapérték a klasszikus középre vágás. */
.hero__vimeo {
  position: absolute;
  border: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);

  /* tartalék, ha nincs container query (régi böngésző):
     a hero gyakorlatilag viewport magasságú, így ez pontos */
  width: max(100vw, calc(100svh * var(--vid-w) / var(--vid-h)));
  height: max(100svh, calc(100vw * var(--vid-h) / var(--vid-w)));
  left: calc((100vw - max(100vw, 100svh * var(--vid-w) / var(--vid-h))) * var(--vid-x));
  top: calc((100svh - max(100svh, 100vw * var(--vid-h) / var(--vid-w))) * var(--vid-y));
}
/* a pontos, doboz-alapú változat — ez fut minden mai böngészőn.
   Akkor is helyes marad, ha a hero magasabb a viewportnál (hosszú
   felirat + foglalósáv kis telefonon ezt simán előidézi). */
@supports (container-type: size) {
  .hero__vimeo {
    width: max(100cqw, calc(100cqh * var(--vid-w) / var(--vid-h)));
    height: max(100cqh, calc(100cqw * var(--vid-h) / var(--vid-w)));
    left: calc((100cqw - max(100cqw, 100cqh * var(--vid-w) / var(--vid-h))) * var(--vid-x));
    top: calc((100cqh - max(100cqh, 100cqw * var(--vid-h) / var(--vid-w))) * var(--vid-y));
  }
}
.hero__vimeo.is-ready {
  opacity: 1;
}

/* ---- eszközönkénti kivágás ----
   A MÉRET mindenhol matematikailag cover, azt nem kell állítani.
   Csak az állítható, hogy az álló képből melyik sáv maradjon.

   Mérve, ennél a képaránynál ennyi látszik a felvételből:
     telefon állva      0–18% oldalvágás, függőlegesen a TELJES kép
     tablet állva       14–25% vágás fent-lent
     laptop / asztali   kb. 65% vágás → a kép középső ~35%-a
     fekvő telefon      kb. 74% vágás

   Széles kijelzőn tehát a --vid-y dönti el, mi marad a képen.
   Alapértéken (0.5) a felvétel közepe. Ha a lényeg feljebb van,
   csökkentsd; ha lejjebb, növeld — például:

     @media (orientation: landscape) {
       .hero__vidbox { --vid-y: 0.38; }
     }

   A --vid-y mindkét lejátszási útra (saját MP4 és Vimeo) egyformán
   hat, tehát elég egy helyen átírni. */

/* csökkentett mozgás: nincs videó, marad a sötét alapréteg */
@media (prefers-reduced-motion: reduce) {
  .hero__vidbox {
    display: none;
  }
}

/* ---- hero mobilon: a középre igazított tartalom sose csússzon
   a fix fejléc alá, bármilyen hosszú is a felirat ---- */
@media (max-width: 900px) {
  .hero--center {
    padding-top: 9rem;
  }
}
@media (max-width: 480px) {
  /* három sor felirat túl sok ilyen kis kijelzőn */
  .hero__eyebrow-more {
    display: none;
  }
  .hero--center {
    padding-top: 8.5rem;
  }
}

/* ---- videós hero: erősebb felső sötétítés ----
   A mozgókép világosabb és változékonyabb, mint az állóképek
   voltak, ezért a krém színű fejléc helyenként beleolvadt.
   Csak akkor lép életbe, ha tényleg megy a videó. */
.hero.is-video .hero__wash::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  background: linear-gradient(
    to bottom,
    rgba(11, 26, 45, 0.58) 0%,
    rgba(11, 26, 45, 0.24) 55%,
    transparent 100%
  );
  pointer-events: none;
}

/* ============================================================
   V8.3 — TISZTA VIDEÓS HERO
   Nincs fotó-diavetítés a videó alatt, ezért nem villan be kép,
   amíg a videó töltődik. A tartalom a hero alsó harmadába kerül,
   így a felvétel felső része szabadon látszik.
   ============================================================ */
.hero__base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, #1b3a5c 0%, transparent 70%),
    linear-gradient(180deg, #0e2340 0%, #14304f 55%, #0b1a2d 100%);
}
/* a tartalom lejjebb: a videó felső része maradjon tiszta */
.hero--center {
  justify-content: flex-end;
}
.hero--center .hero__content {
  padding-bottom: clamp(4.5rem, 12vh, 9rem);
}
@media (max-width: 900px) {
  .hero--center {
    padding-top: 0;
  }
  .hero--center .hero__content {
    padding-bottom: clamp(3.5rem, 9vh, 6rem);
  }
}

/* ============================================================
   V8.3 — NAVIGÁCIÓ: SZERKESZTŐSÉGI MEGA-PANEL
   A korábbi verzió a szokásos sablon-recept volt: 0,7rem-es,
   0,26em-mel kihúzott nagybetűk + kis lebegő kártya. Helyette:
   Spectral kisbetűs linkek olvasható méretben, és teljes
   szélességű panel bevezetővel, számozott listával, fotóval.
   ============================================================ */

/* ---- fejléc linkek: kisbetűs Spectral ---- */
.nav-side a:not(.nav-cta),
.nav-group__btn {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0.92;
  padding: 0.5rem 0;
}
.nav-side {
  gap: 2.25rem;
}
.nav-group__btn {
  gap: 0.45rem;
}
/* arany hajszálvonal a link alatt */
.nav-group__btn::after,
.nav-side a:not(.nav-cta)::after {
  bottom: 0.05rem;
  height: 1px;
}
/* A korábbi fejléc-átdolgozás itt display:none-ra tette a nyilat (és a
   gap-et 0-ra), ezért maradt láthatatlan akkor is, amikor a markupot
   pótoltuk — ez a szabály lejjebb van a fájlban, tehát felülírta a
   fentebbi méret/szín beállításokat. A nyíl kell: enélkül semmi nem
   jelzi, hogy az "A Kúria" lenyitható. */
.nav-group__chev {
  display: inline-block;
}

/* ---- teljes szélességű panel ---- */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 28px 60px -34px rgba(13, 31, 53, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out),
    visibility 0.4s;
}
.nav-mega[hidden] {
  display: block; /* a láthatóságot az .is-open vezérli, nem a display */
}
.nav-mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-mega__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(2.25rem, 4vw, 3.5rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* bevezető hasáb */
.nav-mega__label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.nav-mega__intro {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
  max-width: 26ch;
  margin-bottom: 1.5rem;
}
.nav-mega__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}
.nav-mega__cta .arr {
  transition: transform 0.4s var(--ease-out);
}
.nav-mega__cta:hover .arr {
  transform: translateX(0.35rem);
}

/* számozott linklista */
.nav-mega__links {
  display: flex;
  flex-direction: column;
}
.nav-mega__links a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.95rem 0.25rem 0.95rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  transition: padding-left 0.4s var(--ease-out);
}
.nav-mega__links a:last-child {
  border-bottom: 1px solid var(--line);
}
.nav-mega__links a:hover,
.nav-mega__links a:focus-visible {
  padding-left: 0.7rem;
}
.nav-mega__n {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  flex: none;
  padding-top: 0.28rem;
  transition: color 0.35s;
}
.nav-mega__links a:hover .nav-mega__n {
  color: var(--gold);
}
.nav-mega__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.nav-mega__t {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  transition: color 0.35s;
}
.nav-mega__links a:hover .nav-mega__t,
.nav-mega__links a[aria-current="page"] .nav-mega__t {
  color: var(--copper);
}
.nav-mega__links a[aria-current="page"] .nav-mega__t {
  font-style: italic;
}
.nav-mega__s {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* kísérő fotó */
.nav-mega__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
}
.nav-mega__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s var(--ease-out);
}
.nav-mega__media.is-swapping img {
  opacity: 0;
}

/* a hero fölött világos fejléc — a panel viszont mindig papírszínű */
.nav--light:not(.is-solid) .nav-mega {
  color: var(--ink);
}

@media (max-width: 1180px) {
  .nav-mega__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .nav-mega__media {
    display: none;
  }
}
@media (max-width: 1080px) {
  /* mobilon a teljes képernyős menü veszi át */
  .nav-mega {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-mega,
  .nav-mega__links a,
  .nav-mega__media img {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   V9 — ART DIRECTION: LÉLEGZETVÉTEL, FILMKOCKA, FOLYÓVONAL
   Nem új komponensek: ritmus. Információ · szünet · kép.
   ============================================================ */

/* ---- szerkesztőségi szünet: csak tipográfia és egy kép ---- */
.pause {
  padding-top: var(--space-7);
  padding-bottom: 0;
  text-align: center;
}
.pause__inner {
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}
.pause__line {
  font-family: var(--font-display);
  /* visszafogott: a hero H1 nagyságrendjében marad */
  font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.9rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0.005em;
  color: var(--ink);
  max-width: 20ch;
  margin-inline: auto;
}
.pause__line em {
  font-style: italic;
  color: var(--copper);
}
.pause__note {
  margin-top: 1.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
/* teljes szélességű kép, a tartalomsávból kilépve */
.pause__media {
  position: relative;
  width: 100%;
  aspect-ratio: 24 / 10;
  overflow: hidden;
}
.pause__media img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* ---- filmszerű zárókép: szöveg nélkül ---- */
.cine {
  position: relative;
  width: 100%;
  aspect-ratio: 24 / 10;
  overflow: hidden;
  background: var(--night);
}
.cine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .pause__media,
  .cine {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   V9 — FEJEZETKÉP (.chapter)
   Az Avalon Resort ritmusából átvett eszköz, a Kúria nyelvén:
   teljes szélességű fotó, rajta EGYETLEN mondat. A kép vezeti be
   a fejezetet, nem illusztrálja. Két információs blokk közé kerül,
   hogy legyen hol levegőt venni.

   Amit szándékosan NEM csinál: nincs kitrackelt verzál (az Avalon
   megoldása, nem a miénk), nincs gomb, nincs kártya, nincs
   gradiens-dísz. A fátyol egyetlen célja az olvashatóság.
   ============================================================ */
.chapter {
  position: relative;
  width: 100%;
  aspect-ratio: 24 / 10;
  overflow: hidden;
  background: var(--night);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.chapter img {
  position: absolute;
  inset: 0;
  width: 100%;
  /* Korábban 116% volt, „helyet hagyva a parallaxnak” — csakhogy egyetlen
     fejezetkép sem kap data-parallax attribútumot, így a fölösleg csak
     levágta minden kép alsó 14%-át. Emiatt maradt le az épület alja. */
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* fátyol: éjszakai víz a fotó fölött. Nem hangulat, olvashatóság.
   Az érték mérésből jön, nem érzésből: a legvilágosabb fejezetkép
   legvilágosabb pontja (naplemente, ablak) fölött is tartania kell
   a nagy szövegre előírt 3:1-et. 0,36-nál a mért kontraszt 1,96 volt,
   0,52 körül fordul át 3:1 fölé — ezért ennyi, és nem kevesebb. */
.chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(13, 31, 53, 0.6) 0%,
    rgba(13, 31, 53, 0.54) 45%,
    rgba(13, 31, 53, 0.64) 100%
  );
}
.chapter__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--gutter);
  max-width: 34ch;
}
.chapter__line {
  font-family: var(--font-display);
  /* a 3,5rem-es plafon alatt marad — a márka nem kiabál */
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-wrap: balance;
}
/* Az egyetlen tipográfiai dísz — pontosan egy <em> fejezetenként.
   Fotó fölött a réz NEM használható: mérve 1,17:1 a világos pontokon,
   és a fátyol annyira sosem sötétedhet, hogy átvigye a küszöböt anélkül,
   hogy a fotót tönkretenné. Itt tehát a dőlt betű maga a hangsúly —
   ugyanaz a gesztus, szín nélkül. Rézre festett <em> továbbra is minden
   krémalapú szekciócímen ott van, ahol a kontraszt bőven megvan. */
.chapter__line em {
  font-style: italic;
  color: inherit;
}
.chapter__note {
  margin-top: 1.15rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.78);
}

/* ---- záró fejezetsáv: a következő oldalra visz ----
   Ez váltja a minden oldal alján ismétlődő, azonos .cta-band-et.
   A történet nem ér véget, hanem továbbmegy — a foglalás marad
   elérhető, de másodlagos hangsúllyal. ---- */
.chapter--next {
  aspect-ratio: 24 / 8.5;
}
.chapter--next .chapter__inner {
  max-width: 40ch;
}
/* A záró sávon apró szöveg is van (előcím, linkek), annak 4,5:1 kell,
   nem 3:1. A középre húzott fátyol ehhez kevés volt — mérve 2,91 —,
   ezért itt lefelé sötétedő változat megy, épp ott a legerősebb, ahol
   a linksor ül. A kép fölső harmada közben tisztán marad. */
.chapter--next::after {
  background: linear-gradient(
    to bottom,
    rgba(13, 31, 53, 0.68) 0%,
    rgba(13, 31, 53, 0.64) 45%,
    rgba(13, 31, 53, 0.8) 100%
  );
}
.chapter__kicker {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
}
.chapter__actions {
  margin-top: 1.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  justify-content: center;
  align-items: center;
}
/* a fejezetlink: hajszálvonal-aláhúzás, ami hoverre újrarajzolódik */
.chapter__go {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.chapter__go::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.chapter__go:hover::after,
.chapter__go:focus-visible::after {
  transform: scaleX(0);
}
.chapter__go .arr {
  transition: transform 0.45s var(--ease-out);
}
.chapter__go:hover .arr {
  transform: translateX(4px);
}
/* a másodlagos akció: ugyanaz a forma, halkabb hangon.
   A foglalás sosem tűnik el, de nem is versenyez a fejezetlinkkel. */
.chapter__go--soft {
  color: var(--cream);
  font-weight: 500;
}
.chapter__go--soft::after {
  background: rgba(245, 239, 227, 0.4);
}

@media (max-width: 720px) {
  .chapter,
  .chapter--next {
    aspect-ratio: 4 / 3;
  }
}

/* a fejezetkép mozdulatlan, ha a látogató ezt kéri
   (a magasság már alapból 100% — itt csak az átmenetek állnak le) */
@media (prefers-reduced-motion: reduce) {
  .chapter__go::after,
  .chapter__go .arr {
    transition: none;
  }
}

/* ============================================================
   V9 — 44px-es érintőfelületek a közös kereten
   A topbar telefonszáma, a menü lábléce, a lábléc elérhetőségei és
   a „vissza a tetejére” 19–25px magasak voltak. A PRODUCT.md 44px-et
   ír elő, és ez az a közönség (nagyszülők, telefonról foglaló szülők),
   ahol ez tényleg számít. A vizuális méret nem változik, csak a
   kattintható terület nő meg körülöttük.
   ============================================================ */
.topbar__tel,
.menu-overlay__foot a,
.footer__grid p a,
.footer__base a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* a lábléc kétsoros elérhetőség-blokkjában a sormagasság vinné el a
   ritmust, ezért ott negatív margóval visszavesszük a plusz helyet */
.footer__grid p a {
  margin-block: -0.55rem;
}

/* ---- kiemelt vendégidézet: hajszálvonal, nem kártya ---- */
.pull-quote {
  max-width: 34ch;
  margin-inline: auto;
  padding-left: 1.75rem;
  border-left: 1px solid var(--line);
  text-align: left;
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-style: italic;
  line-height: 1.42;
  color: var(--ink);
}
.pull-quote cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
}

/* ---- egyszerű felsorolás, hajszálvonallal tagolva ---- */
.plain-list {
  margin-top: 1.75rem;
  list-style: none;
  padding: 0;
}
.plain-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.plain-list li:first-child {
  border-top: 1px solid var(--line);
}

/* ---- folyóvonal: alig látható szekcióhatár ----
   Az Öreg-Túr rajza a meander motívumból. Lassú, vízszintes
   sodrás; díszítésnek szánva sosem, csak lélegzetnek. ---- */
.river-rule {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  color: var(--pine);
  opacity: 0.13;
  pointer-events: none;
}
.river-rule svg {
  display: block;
  width: 200%;
  height: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .river-rule svg {
    animation: river-drift 88s linear infinite;
  }
}
@keyframes river-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- a mega-panel is kap egy halk folyót ---- */
.nav-mega__inner {
  position: relative;
}
.nav-mega__river {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5rem;
  width: 200%;
  height: auto;
  color: var(--pine);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-mega__river {
    animation: river-drift 104s linear infinite;
  }
}
.nav-mega__lead,
.nav-mega__links,
.nav-mega__media {
  position: relative;
  z-index: 1;
}

/* ============================================================
   V9.1 — GALÉRIA: KATEGÓRIASOROK, VÍZSZINTES GÖRGETÉS
   Minden kártya azonos méretű. A sorok a tartalomsáv bal élére
   igazodnak, jobbra viszont kifutnak a képernyőről — így látszik,
   hogy folytatódik. Nyilak egérrel, húzás érintéssel.
   ============================================================ */
.gal-sec {
  padding-bottom: var(--space-6);
}
.gal-rails {
  display: flex;
  flex-direction: column;
  gap: clamp(2.75rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

/* ---- sor fejléce ---- */
.gal-rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  /* a tartalomsáv bal élére igazít */
  padding-inline: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
  padding-bottom: 1.1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.gal-rail__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
}
.gal-rail__note {
  margin-top: 0.35rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.gal-rail__nav {
  display: flex;
  gap: 0.5rem;
  flex: none;
}
.gal-rail__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  transition: border-color 0.35s, background 0.35s, color 0.35s, opacity 0.35s;
}
.gal-rail__btn svg {
  width: 17px;
  height: 17px;
}
.gal-rail__btn:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(196, 144, 56, 0.1);
  color: var(--copper);
}
.gal-rail__btn:disabled {
  opacity: 0.28;
  cursor: default;
}

/* ---- a sín ---- */
.gal-rail__track {
  display: flex;
  gap: clamp(0.7rem, 1.2vw, 1.1rem);
  overflow-x: auto;
  overflow-y: hidden;
  /* nincs snap: a víz nem pattan a helyére — a lendület visz ki */
  scroll-behavior: smooth;
  /* balra a tartalomsávhoz igazít, jobbra hagyja kifutni */
  padding-inline: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
  padding-block: 0.4rem;
  /* a görgetősáv elrejtve, de a görgetés megmarad */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.gal-rail__track::-webkit-scrollbar {
  display: none;
}
.gal-rail__track:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .gal-rail__track {
    scroll-behavior: auto;
  }
}

/* ---- kártya: minden azonos méretű ---- */
.gal-card {
  flex: 0 0 clamp(13.5rem, 20vw, 18.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  cursor: pointer;
}
.gal-card__frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-2);
}
.gal-card__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.gal-card:hover .gal-card__frame img,
.gal-card:focus-visible .gal-card__frame img {
  transform: scale(1.05);
}
.gal-card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 31, 53, 0.3), transparent 45%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.gal-card:hover .gal-card__frame::after,
.gal-card:focus-visible .gal-card__frame::after {
  opacity: 1;
}
.gal-card__zoom {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(250, 246, 236, 0.92);
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.gal-card:hover .gal-card__zoom,
.gal-card:focus-visible .gal-card__zoom {
  opacity: 1;
  transform: translateY(0);
}
.gal-card__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s;
}
.gal-card:hover .gal-card__label {
  color: var(--copper);
}
.gal-card:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
  border-radius: 3px;
}

/* érintésen a nyilak feleslegesek: a kilógó kártya jelzi a görgetést */
@media (hover: none), (pointer: coarse) {
  .gal-rail__nav {
    display: none;
  }
  .gal-card__zoom {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 640px) {
  .gal-rail__title {
    font-size: var(--text-lg);
  }
}

/* ============================================================
   V9.2 — A GALÉRIA MOZGÁSA: SODRÁS, NEM FORGÁS
   Három réteg, mind a vízszintes pozíció függvénye:
     1. a kártya lapos szinuszhullámon ring (vízfelszín)
     2. a kép a kereten belül ellenirányba sodródik (mélység)
     3. alul a meander lassabban halad (áramlás)
   A transzformációkat a JS írja; itt csak a színpad készül el.
   ============================================================ */
.gal-rail__stream {
  position: relative;
  /* a 200% széles áramlásvonalat ide kell vágni — enélkül a
     böngésző a teljes oldal scrollWidth-jét megduplázta (1425px-es
     nézeten 2850px), amit csak a body overflow-x:hidden takart el
     láthatatlanul. A kártyasor (.gal-rail__track) pontosan a
     konténer szélességéig ér, ezt a vágás nem érinti. */
  overflow: hidden;
}
/* az áramlás vonala a kártyák alatt */
.gal-rail__current {
  position: absolute;
  left: 0;
  bottom: 0.75rem;
  width: 200%;
  height: auto;
  color: var(--pine);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.gal-rail__track {
  position: relative;
  z-index: 1;
  /* húzható: a felszínt megfogod és viszed */
  cursor: grab;
}
.gal-rail__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.gal-rail__track.is-dragging .gal-card {
  /* húzás közben ne induljon el a lightbox */
  pointer-events: none;
}
.gal-card {
  will-change: transform;
}
/* a kép a kereten belül kap mozgásteret a mélység-sodráshoz */
.gal-card__frame img {
  width: 112%;
  left: -6%;
  will-change: transform;
}

/* mozgáscsökkentés: marad a sima, egyenes görgetés */
@media (prefers-reduced-motion: reduce) {
  .gal-rail__current,
  .gal-card,
  .gal-card__frame img {
    transform: none !important;
    will-change: auto;
  }
  .gal-card__frame img {
    width: 100%;
    left: 0;
  }
  .gal-rail__track {
    cursor: default;
  }
}

/* ============================================================
   TÉNYRÚD — a hero alatt, a lényeg egy pillantásra
   Halk, hajszálvonalas sáv: a hat legfontosabb tény scannelhetően.
   ============================================================ */
.factrail {
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.factrail__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: clamp(0.75rem, 2vw, 2rem);
  row-gap: 2rem;
}
.factrail__item {
  text-align: center;
}
.factrail__value {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.factrail__value .stars {
  color: var(--gold);
  letter-spacing: 0.1em;
  font-size: 0.9em;
}
.factrail__label {
  margin-top: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--muted);
}
@media (min-width: 901px) {
  .factrail__item + .factrail__item {
    border-left: 1px solid var(--line);
  }
}
@media (max-width: 900px) {
  .factrail__inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .factrail__inner { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   ÚJ SZÖVEGBLOKKOK — szekció-bevezetők, záró mondatok, stílusblokk
   ============================================================ */
.section-head--center .lede {
  max-width: 46ch;
  margin: 1.1rem auto 0;
  color: var(--ink-soft);
  font-size: var(--text-lg);
  line-height: 1.65;
}
.amenities__close {
  max-width: 52ch;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: center;
  color: var(--muted);
  line-height: 1.7;
}
.style-sec__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.style-sec__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.style-sec__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.style-sec__text p {
  margin-bottom: 1.35rem;
  line-height: 1.75;
}
.pause--closing .pause__line {
  max-width: 22ch;
}
/* a záró két rövid mondat ritmusa: ne apró verzál jegyzet legyen */
.pause--closing .pause__note {
  margin-top: 1.35rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
@media (max-width: 860px) {
  .style-sec__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V9.2 — ÉRINTŐFELÜLETEK A MOBIL FOGLALÓSÁVBAN ÉS A SZÖVEGKÖZI
   LINKEKBEN
   A szövegcsere után végigmérve: a foglalósáv mezői 21px, a
   .tlink és a hero alatti link 25–30px magasak voltak, tehát a
   projekt saját 44px-es mércéje alatt. A tipográfia változatlan
   marad — csak a kattintható terület nő meg.
   ============================================================ */
@media (max-width: 900px) {
  .booking__field input,
  .booking__field select {
    min-height: 44px;
    padding-block: 0.55rem;
  }
}
/* a szövegközi linkek kattintható sávja a sorköz miatt volt szűk;
   a negatív margó megtartja az eredeti tipográfiai ritmust */
.tlink,
.hero__underlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -0.5rem;
}

/* ============================================================
   V9.3 — HERO KÖTEG: A FOGLALÁS LEKERÜL A VIDEÓRÓL

   Korábban az űrlap a mozgóképre ült. Két baja volt: a mögötte
   futó videó miatt sosem volt kiszámítható a kontrasztja, és
   vizuálisan versenyzett a fő mondanivalóval.

   Most a hero csak a mondandót viszi (H1, H2, egy tovább-link),
   a foglalás pedig saját, szilárd felületű blokkot kap közvetlenül
   alatta, még a tényrúd előtt.

   Asztali gépen a kettő egy .hero-stack-ben ül, ami pontosan egy
   képernyő magas — a hero kitölti a maradékot, a foglalósáv a saját
   magasságát kapja. Nincs bűvös szám: a flexbox számol.
   ============================================================ */
.bookbar {
  position: relative;
  z-index: 3;
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.bookbar__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(1rem, 2.2vh, 1.6rem) var(--gutter);
}

/* asztali gép: hero + foglalósáv = pontosan egy képernyő */
@media (min-width: 901px) {
  .hero-stack {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }
  .hero-stack .hero {
    /* a min-height:100svh itt átadja a helyét a köteg számításának */
    min-height: 0;
    flex: 1 1 auto;
    /* A hero tartalma alulra igazodik. Mivel a köteg most elvesz a hero
       magasságából, alacsony ablakban (pl. 1280×640) a cím felcsúszott
       a fix fejléc alá — ez tartja alatta. */
    padding-top: 13.5rem;
  }
  .hero-stack .bookbar {
    flex: 0 0 auto;
  }
}

/* ---- az űrlap világos felületen ----
   A korábbi változat áttetsző krém volt, üvegdarabbal a fotó fölött.
   Szilárd papíron ez olvashatatlan lenne, ezért a felület tintás
   hajszálvonalakra vált. A gomb arany marad: az elsődleges akció
   nem változik. ---- */
.bookbar .booking {
  margin: 0 auto;
  background: transparent;
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bookbar .booking__field {
  border-right: 1px solid var(--line);
}
.bookbar .booking__label {
  color: var(--muted);
}
.bookbar .booking__field input,
.bookbar .booking__field select {
  color: var(--ink);
}
.bookbar .booking__field input::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.55;
}
/* látható fókuszgyűrű — sötét háttéren korábban a keret vitte a szerepet */
.bookbar .booking__field:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* ---- mobil: egymás alatt, teljes szélességű gombbal ---- */
@media (max-width: 900px) {
  .bookbar__inner {
    padding-block: 1.25rem;
  }
  .bookbar .booking {
    grid-template-columns: 1fr 1fr;
  }
  .bookbar .booking__field:nth-child(3) {
    grid-column: 1 / -1;
    border-right: 0;
  }
  .bookbar .booking__field:nth-child(2) {
    border-right: 0;
  }
  .bookbar .booking__field:nth-child(1),
  .bookbar .booking__field:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
  .bookbar .booking__field:nth-child(3) {
    border-bottom: 1px solid var(--line);
  }
  .bookbar .booking__submit {
    grid-column: 1 / -1;
    padding-block: 1rem;
  }
}

/* nagyon alacsony asztali ablak (kb. 700px alatt): a hero függőleges
   ritmusa összehúzódik, hogy a foglalósáv se csússzon a hajtás alá.
   A tipográfia mérete nem változik, csak a levegő. */
@media (min-width: 901px) and (max-height: 720px) {
  .hero-stack .hero {
    padding-top: 12.5rem;
  }
  /* az alsó térközt a V9.4 blokk adja — a foglalósáv átlógása miatt
     ott van alsó határa, ezért itt szándékosan nem írjuk felül */
  .bookbar__inner {
    padding-block: 0.85rem;
  }
}

/* ============================================================
   V9.4 — HERO FINOMHANGOLÁS
   Csak függőleges ritmus és a fátyol erőssége változik. A
   szerkezet, a tipográfia mérete és a foglalósáv helye marad.
   ============================================================ */

/* ---- a fátyol egy hajszállal sötétebb, a felirat kedvéért ----
   Asztali gépen +5%, mobilon +7% — a kisebb kijelzőn a videó
   világosabb részei nagyobb arányban esnek a szöveg mögé. */
.hero--center .hero__wash {
  background:
    radial-gradient(ellipse 78% 58% at 50% 47%, rgba(11, 26, 45, 0.57), transparent 72%),
    linear-gradient(rgba(11, 26, 45, 0.31) 0%, rgba(11, 26, 45, 0.21) 42%, rgba(11, 26, 45, 0.49) 100%);
}

@media (min-width: 901px) {
  /* a tartalom kb. 45 px-szel lejjebb: több levegő fent, a videó
     nagyobb felületen érvényesül. A blokk alulra igazodik, ezért
     a lejjebb tolás az alsó térköz csökkentése. */
  .hero-stack .hero--center .hero__content {
    /* Az alsó határ nem eshet a foglalósáv 30 px-es átlógása alá,
       különben alacsony ablakban a tovább-link a sáv mögé kerül. */
    padding-bottom: clamp(4rem, 7vh, 4.5rem);
  }
  /* a cím és az alatta futó mondat közé kb. 20 px extra levegő */
  .hero-stack .hero__title {
    margin-bottom: clamp(2.75rem, 5.2vh, 4rem);
  }
  /* a foglalósáv 30 px-szel feljebb ül, így belelóg a hero aljába:
     nem különálló doboz, hanem összeköti a videót az adatsávval */
  .hero-stack .bookbar {
    margin-top: -30px;
  }
}

@media (max-width: 900px) {
  /* mobilon erősebb fátyol: +7% */
  .hero--center .hero__wash {
    background:
      radial-gradient(ellipse 78% 58% at 50% 47%, rgba(11, 26, 45, 0.59), transparent 72%),
      linear-gradient(rgba(11, 26, 45, 0.33) 0%, rgba(11, 26, 45, 0.23) 42%, rgba(11, 26, 45, 0.51) 100%);
  }
  /* a teljes hero-tartalom lejjebb — de nem annyira, hogy a
     tovább-link nekiérjen a foglalósáv felső élének */
  .hero--center .hero__content {
    padding-bottom: clamp(2.25rem, 4.6vh, 3.25rem);
  }
  /* a tovább-link kap még kb. 20 px levegőt maga fölé */
  .hero__underlink {
    margin-top: 2.75rem;
  }
  /* a hamburger ne tapadjon a kijelző széléhez: +18 px belső margó */
  .nav-main .menu-btn {
    padding-right: 1.625rem;
  }
}

/* ============================================================
   V9.5 — VILÁGOS FEJEZETKÉP (.chapter--light)
   Olyan fotókhoz, ahol a meleg, világos tónus maga az üzenet —
   a galériás nappalinál például a fa, a textilek és a beeső fény.
   A teljes felületre húzott sötét fátyol ezt kékesre és szürkére
   fojtotta.

   Helyette: a kép szinte érintetlen marad, és csak a FELIRAT MÖGÉ
   kerül egy lágy, ovális sötétítés. A kontraszt így mérve is tartja
   a nagy szövegre előírt 3:1-et, de a fotó világos és prémium marad.
   ============================================================ */
.chapter--light::after {
  /* a korábbi, teljes felületű fátyol töredéke: éppen csak annyi,
     hogy a fehér falak ne izzanak ki a felirat körül */
  background:
    radial-gradient(ellipse 58% 78% at 50% 50%, rgba(11, 26, 45, 0.5), transparent 70%),
    linear-gradient(to bottom, rgba(11, 26, 45, 0.1) 0%, rgba(11, 26, 45, 0.06) 45%, rgba(11, 26, 45, 0.14) 100%);
}
/* a betű saját, halk árnyéka viszi a maradék terhet — így a fátyol
   maradhat ennyire visszafogott */
.chapter--light .chapter__line {
  text-shadow: 0 1px 2px rgba(9, 20, 36, 0.55), 0 6px 28px rgba(9, 20, 36, 0.45);
}

/* ============================================================
   V9.6 — SZOBA-ELŐNÉZET, ELTOLT FEJEZETFELIRAT, HÁRMAS KÖRÖK
   ============================================================ */

/* ---- szoba-teaser: csak fotók ----
   A név, a méret és a felszereltség A ház oldalon él. A főoldalon
   ugyanezt megismételni két katalógust csinált ugyanabból. */
.rooms-teaser {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.rooms-teaser__item {
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line);
}
.rooms-teaser__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.rooms-teaser__item:hover img {
  transform: scale(1.04);
}
@media (max-width: 720px) {
  .rooms-teaser {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .rooms-teaser__item img {
    transition: none;
  }
  .rooms-teaser__item:hover img {
    transform: none;
  }
}

/* ---- fejezetfelirat bal alsó sarokban ----
   Ha a fotó közepén arcok vannak, a középre zárt felirat rájuk ül.
   Ilyenkor a szöveg elmozdul, és a fátyol súlypontja vele megy. */
.chapter--text-bl {
  place-items: end start;
}
.chapter--text-bl .chapter__inner {
  text-align: left;
  max-width: 26ch;
  padding-inline: clamp(1.25rem, 5vw, 4.5rem);
  padding-bottom: clamp(1.5rem, 5vh, 3.5rem);
}
.chapter--text-bl::after {
  /* A súly a felirat sarkába kerül, a kép többi részéről leszáll.
     A szaunaképnél így a fa, a meleg fények és a vendégek megmaradnak,
     miközben a bal alsó sarokban mért kontraszt 6:1 fölött van. */
  background:
    radial-gradient(ellipse 62% 70% at 22% 82%, rgba(11, 26, 45, 0.52), transparent 72%),
    linear-gradient(to bottom, rgba(11, 26, 45, 0.14) 0%, rgba(11, 26, 45, 0.12) 45%, rgba(11, 26, 45, 0.32) 100%);
}
.chapter--text-bl .chapter__line {
  text-shadow: 0 1px 2px rgba(9, 20, 36, 0.6), 0 6px 28px rgba(9, 20, 36, 0.5);
}

/* ---- hármas kör-sor a wellness és a folyó szekcióban ----
   Ugyanaz a kör alakú nyelv, mint a „kinek szól” átvezetőknél,
   csak nem link, hanem bemutató. Egyetlen kép nem tudta elmondani,
   mi mindenből áll a wellness, illetve a vízparti élet. */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.trio__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.trio__ring {
  position: relative;
  display: block;
  width: clamp(10rem, 16vw, 14rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.6rem;
  box-shadow: 0 0 0 1px var(--line);
}
.trio__ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trio__item h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  margin-bottom: 0.6rem;
}
.trio__item p {
  max-width: 32ch;
  color: var(--muted);
}
@media (max-width: 860px) {
  .trio {
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 6vw, 3rem);
  }
}

/* ============================================================
   V9.7 — FEJEZETFELIRAT TÖRDELÉSE (hibajavítás)
   A sorhossz-korlát eddig a KONTÉNEREN ült, ch egységben. A ch a
   saját betűméretre vonatkozik, a konténeré viszont 16px — így a
   34ch alig 300 px lett, miközben a felirat 42 px-es. Mind a három
   fejezetkép szavanként tördelt („A / wellness / nyitvatartás /
   nélkül.”). A korlát ezért a FELIRATRA kerül, ahol a ch már a
   display-méretre vonatkozik.
   ============================================================ */
.chapter__inner {
  max-width: none;
}
.chapter__line {
  max-width: 20ch;
  margin-inline: auto;
}
.chapter--next .chapter__line {
  max-width: 24ch;
}
.chapter--text-bl .chapter__inner {
  max-width: none;
}
.chapter--text-bl .chapter__line {
  max-width: 19ch;
  margin-inline: 0;
}

/* ============================================================
   V9.8 — VENDÉGÉRTÉKELÉSEK
   A korábbi elrendezés egy kiemelt idézetet tett fölülre, kettőt
   jóval alá — köztük nagy üres lyukakkal —, és sehol nem volt név,
   csillag vagy forrás. Így az idézetek névtelen töltelékként hatottak.

   Helyette: fejléc az összesített értékeléssel, mellette a fotó,
   jobbra pedig hajszálvonallal elválasztott, letisztult lista.
   Minden tételnél csillag, szó szerinti idézet, név és dátum.
   A bejövetel a meglévő data-anim-group-ra épül (stagger fade).
   ============================================================ */
.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.reviews__head h2 {
  margin: 0;
}
/* az összesített pontszám: a Google-oldalra visz, ellenőrizhetően */
.reviews__score {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(245, 239, 227, 0.28);
  transition: border-color 0.4s var(--ease-out);
}
.reviews__score:hover {
  border-bottom-color: var(--gold);
}
.reviews__stars {
  color: var(--gold);
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}
.reviews__score-n {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cream);
}
.reviews__score-t {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.72);
}

.reviews {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.reviews__photo {
  margin: 0;
}
.reviews__photo .frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.reviews__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- a lista: hajszálvonal választja el a tételeket ---- */
.reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.review {
  padding-block: clamp(1.35rem, 2.6vw, 1.9rem);
  border-top: 1px solid rgba(245, 239, 227, 0.16);
}
.review:first-child {
  border-top: 0;
  padding-top: 0;
}
.review__stars {
  display: block;
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.75rem;
}
.review__text {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  line-height: 1.62;
  color: rgba(245, 239, 227, 0.94);
}
.review__by {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.review__by b {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cream);
}
.review__by span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.6);
}

@media (max-width: 900px) {
  .reviews {
    grid-template-columns: 1fr;
  }
  .reviews__photo .frame {
    aspect-ratio: 3 / 2;
  }
  .reviews__head {
    align-items: flex-start;
  }
}

/* ============================================================
   V9.9 — MINŐSÍTÉS-SÁV KÖZÉPRE
   A rács három oszlopos volt (auto / 1.35fr / 0.85fr), de csak két
   eleme van — a harmadik, üres oszlop húzta balra az egészet, ezért
   hatott beragadt töredéknek. Helyette középre zárt, függőleges
   kompozíció: pecsét, cím, alatta a tanúsítvány adatai.
   ============================================================ */
.cert-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.cert-band__body {
  max-width: 46ch;
}
.cert-band__body h2 {
  margin-bottom: 0.75rem;
}
.cert-band__body p {
  color: var(--muted);
}

/* ============================================================
   FOGLALÁS — booking system additions (real availability + price
   + extras, on top of the existing calendar/summary/form markup)
   ============================================================ */

/* becsült összeg sor az avail-summary (sötét) oldalsávban */
.avail-summary__total {
  border-top: 1px solid var(--line-light);
  padding-top: 1rem;
  margin: 0 0 1.25rem;
}
.avail-summary__total-label {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-bright);
  display: block;
  margin-bottom: 0.35rem;
}
.avail-summary__total-amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--gold);
}

/* segéd-alszöveg a mező-címkékben (pl. "Extra élmények (opcionális)") */
.field__label small {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted);
}

/* extra szolgáltatás választó kártyák a foglalási űrlapban */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
  align-items: start;
}
.addon-tile {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.addon-tile:hover {
  border-color: rgba(196, 144, 56, 0.45);
}
.addon-tile.is-selected {
  border-color: var(--gold);
  background: rgba(196, 144, 56, 0.08);
  box-shadow: 0 0 0 3px rgba(196, 144, 56, 0.16);
}
.addon-tile__toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.85rem 2.4rem 0.85rem 1rem;
  cursor: pointer;
  min-height: 44px;
  background: none;
  border: 0;
}
.addon-tile__toggle:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.addon-tile__check {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--cream);
  color: transparent;
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  transform: scale(0.85);
}
.addon-tile.is-selected .addon-tile__check {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: scale(1);
}
.addon-tile__body {
  display: block;
}
.addon-tile__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.addon-tile.is-selected .addon-tile__name {
  color: var(--copper);
}
.addon-tile__price {
  display: block;
  font-size: var(--text-xs);
  color: var(--copper);
}
.addon-tile__price-note {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
  .addon-tile, .addon-tile__check, .addon-tile__qty { transition: none !important; }
}

/* mennyiség-választó a fő-alapú extráknál (reggeliző kosár, privát séf) —
   csak kiválasztott állapotban nyílik ki, a kártya alján */
.addon-tile__qty {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  padding: 0 1rem;
  border-top: 0 solid transparent;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  transition: max-height 0.35s var(--ease-out), opacity 0.3s var(--ease-out),
    padding 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.addon-tile.is-selected .addon-tile__qty {
  max-height: 8rem;
  opacity: 1;
  visibility: visible;
  padding: 0.8rem 1rem 0.9rem;
  border-top: 1px solid var(--line);
  transition: max-height 0.35s var(--ease-out), opacity 0.3s var(--ease-out),
    padding 0.35s var(--ease-out);
}
.addon-tile__qty-label {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  font-weight: 600;
}
.addon-tile__qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}
.addon-tile__qty-btn {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.addon-tile__qty-btn:hover:not(:disabled) {
  background: var(--paper);
}
.addon-tile__qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.addon-tile__qty-count {
  min-width: 1.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
}
.addon-tile__qty-total {
  flex-basis: 100%;
  font-size: var(--text-xs);
  color: var(--copper);
  font-weight: 600;
}

/* hiba állapot a form-note-on belül (siker: alapértelmezett .form-note) */
.form-note--error {
  color: #9c3b30;
}

/* naptár nap — foglalás alatt álló (függőben), csak az admin oldalon
   használt harmadik állapot; a publikus naptár csak free/busy-t mutat */
.day--pending {
  background: rgba(196, 144, 56, 0.16);
  color: var(--copper);
  cursor: not-allowed;
}

/* ============================================================
   FOGLALÁSI WIZARD — 3 lépéses foglalási élmény, éles backenddel
   ============================================================ */
.wizard__steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
}
.wizard__steps li {
  display: flex;
  align-items: center;
}
.wizard__steps li:not(:last-child)::after {
  content: "";
  width: clamp(2rem, 5vw, 4rem);
  height: 1px;
  background: var(--line);
  margin: 0 0.9rem;
  align-self: center;
  transform: translateY(-0.85rem);
}
.wizard__steps li.is-done:not(:last-child)::after {
  background: var(--gold);
}
.wizard__step-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.wizard__num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  color: var(--muted);
  flex-shrink: 0;
  background: var(--cream);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.wizard__steps li.is-active .wizard__num {
  border-color: var(--gold);
  color: var(--ink);
  background: rgba(196, 144, 56, 0.12);
}
.wizard__steps li.is-done .wizard__num {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.wizard__label {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.wizard__steps li.is-active .wizard__label {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 640px) {
  .wizard__label { display: none; }
  .wizard__steps li:not(:last-child)::after { width: 1.5rem; margin: 0 0.5rem; }
}

.wizard__body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .wizard__body { grid-template-columns: 1fr; }
}
.wizard__main {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
}
.wizard__panel h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: 0.4rem;
}
.wizard__panel .lede { margin-bottom: 1.75rem; }
.wizard__back {
  margin-top: 1.75rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--font-body);
}
.wizard__back:hover { color: var(--ink); }

.guest-stepper {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  background: var(--cream);
}
.guest-stepper__btn {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: var(--font-body);
  line-height: 1;
}
.guest-stepper__btn:hover:not(:disabled) { background: var(--paper); }
.guest-stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.guest-stepper__count {
  min-width: 1.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.review-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.review-table td {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.review-table tr:last-child td { border-bottom: none; }
.review-table td:last-child { text-align: right; }
.review-table .is-total td {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  padding-top: 1rem;
}

.wizard-success {
  text-align: center;
  padding: clamp(2rem, 6vw, 3.5rem) 1rem;
}
.wizard-success__icon {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--free);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 1.75rem;
  box-shadow: 0 0 0 6px rgba(63, 125, 84, 0.12), 0 0 0 1px rgba(196, 144, 56, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .wizard-success__icon {
    animation: wizardSuccessPop 0.55s var(--ease-out);
  }
  .wizard-success__icon svg {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: wizardSuccessDraw 0.5s var(--ease-out) 0.15s forwards;
  }
}
@keyframes wizardSuccessPop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes wizardSuccessDraw {
  to { stroke-dashoffset: 0; }
}
.wizard.is-success .wizard__steps,
.wizard.is-success .avail-summary,
.wizard.is-success .wizard__back {
  display: none;
}
.wizard.is-success .wizard__body {
  grid-template-columns: 1fr;
}
.wizard.is-success .wizard__main {
  max-width: 34rem;
  margin: 0 auto;
}

.avail-summary__addons {
  border-top: 1px solid var(--line-light);
  padding-top: 1rem;
  margin: 0 0 1.25rem;
  font-size: var(--text-xs);
  color: rgba(245, 239, 227, 0.75);
}
.avail-summary__addons li { display: flex; justify-content: space-between; padding: 0.2rem 0; gap: 0.5rem; }