/* ==========================================================================
   PARTON RENDEZVÉNYTEREM — stíluslap
   Betűk:  Cormorant Garamond (címek) · Open Sans (szöveg) · Allison (kézírás)
   Színek: #fff6e0 bézs · #6c7d58 zöld · #4e5b3f mélyzöld
   ========================================================================== */

/* --- 1. Tokenek ---------------------------------------------------------- */
:root{
  --cream:        #fff6e0;
  --cream-light:  #fffcf2;
  --cream-dim:    #f8eed6;
  --paper:        #fffbec;
  --green:        #6c7d58;
  --green-dark:   #4e5b3f;
  --ink:          #363a2e;
  --ink-soft:     #5c6155;
  --line:         rgba(78, 91, 63, .18);
  --line-strong:  rgba(78, 91, 63, .34);

  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body:    "Open Sans", "Segoe UI", system-ui, sans-serif;
  --script:  "Allison", "Segoe Script", cursive;

  --wrap:    1560px;
  --gutter:  clamp(20px, 4vw, 64px);
  --section: clamp(72px, 9vw, 132px);

  --ease:    cubic-bezier(.22, .61, .36, 1);
  --slow:    .9s;
}

/* --- 2. Alapok ----------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(.95rem, .35vw + .86rem, 1.02rem);
  line-height: 1.85;
  letter-spacing: .006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; }

h1, h2, h3, h4{
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .002em;
  margin: 0;
  text-wrap: balance;
}

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

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

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

.skip{
  position: absolute; left: 16px; top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--green-dark); color: var(--cream);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: top .25s var(--ease);
}
.skip:focus{ top: 16px; }

/* --- 3. Elrendezés ------------------------------------------------------- */
.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow{ max-width: 820px; }

.section{ padding-block: var(--section); }
.section--tight{ padding-block: clamp(52px, 6vw, 88px); }
.section--dim{ background: var(--cream-dim); }
.section--paper{ background: var(--paper); }

/* --- 4. Tipográfiai elemek ----------------------------------------------- */
.eyebrow{
  font-family: var(--script);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  color: var(--green);
  margin: 0 0 .1em;
}

.kicker{
  font-family: var(--body);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 1.4em;
}

.h-display{ font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 400; }
.h-section{ font-size: clamp(1.95rem, 3.6vw, 3rem); }
.h-block  { font-size: clamp(1.5rem, 2.2vw, 2.05rem); }

.lede{
  font-size: clamp(1rem, .5vw + .9rem, 1.14rem);
  color: var(--ink-soft);
  line-height: 1.8;
}

.prose > * + h3{ margin-top: 2.2em; }
.prose h3{
  font-size: clamp(1.28rem, 1.6vw, 1.6rem);
  margin-bottom: .55em;
}
.prose p{ color: var(--ink-soft); }
.prose strong{ font-weight: 600; color: var(--ink); }

/* Szövegközi hivatkozás: a bekezdésben maradjon látható, de ne kiabáljon.
   A .textlink (nagybetűs, nyilas gomb-link) kivétel – annak saját formája van. */
.prose a:not(.textlink):not(.btn),
.note a,
.dl dd a,
.contact__value a{
  color: var(--green-dark);
  text-decoration-color: var(--line-strong);
  text-underline-offset: .2em;
  transition: color .35s var(--ease), text-decoration-color .35s var(--ease);
}
.prose a:not(.textlink):not(.btn):hover,
.note a:hover,
.contact__value a:hover{
  color: var(--green);
  text-decoration-color: currentColor;
}

/* Zöld sávon a hivatkozás krémszínű, különben beleolvad a háttérbe. */
.band--green .band__copy a:not(.textlink):not(.btn){
  color: var(--cream);
  text-decoration-color: rgba(255, 246, 224, .5);
}
.band--green .band__copy a:not(.textlink):not(.btn):hover{
  text-decoration-color: currentColor;
}

.center{ text-align: center; }
.center .divider{ margin-inline: auto; }

/* Kézírásos aláhúzás / olajfaág motívum */
.divider{
  width: 168px;
  height: 22px;
  object-fit: contain;
  margin-block: 1.5em;
  opacity: .9;
}
.center .divider{ margin-block: 1.2em 1.6em; }

/* --- 5. Gombok ----------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: 1.05em 1.9em;
  border: 1px solid transparent;
  background: var(--green-dark);
  color: var(--cream);
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background: var(--green); transform: translateY(-2px); }

.btn__arrow{
  width: 18px; height: 6px;
  transition: transform .4s var(--ease);
  flex: none;
}
.btn:hover .btn__arrow{ transform: translateX(5px); }

.btn--ghost{
  background: transparent;
  color: var(--green-dark);
  border-color: var(--line-strong);
}
.btn--ghost:hover{
  background: var(--green-dark);
  color: var(--cream);
  border-color: var(--green-dark);
}

.btn--light{
  background: var(--cream);
  color: var(--green-dark);
}
.btn--light:hover{ background: #fff; color: var(--green-dark); }

.textlink{
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green-dark);
  padding-bottom: .35em;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color .4s var(--ease), gap .4s var(--ease);
}
.textlink:hover{ border-color: var(--green-dark); gap: 1.1em; }

/* --- 6. Fejléc ----------------------------------------------------------- */
.header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  /* hajszálvonal zárja a fejlécet, hogy elváljon az alatta lévő sávtól
     akkor is, ha ugyanaz a bézs */
  border-bottom: 1px solid var(--line);
  transition: box-shadow .5s var(--ease);
}
.header.is-stuck{ box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(78,91,63,.06); }

/* Lefelé görgetve a fejléc összezár, felfelé görgetve visszanyílik. */
.header__inner,
.brand__mark,
.brand__name,
.brand__sub,
.nav__cta{
  transition: min-height .45s var(--ease), width .45s var(--ease),
              height .45s var(--ease), font-size .45s var(--ease),
              opacity .35s var(--ease), padding .45s var(--ease),
              margin .45s var(--ease);
}
.header.is-compact .header__inner{ min-height: 74px; }
.header.is-compact .brand__mark{ width: 54px; height: 54px; }
.header.is-compact .brand__name{ font-size: 1.22rem; }
.header.is-compact .brand__sub{
  font-size: 0;
  opacity: 0;
  margin-top: -2px;
}
.header.is-compact .nav__cta{ padding: .82em 1.35em; }

/* a fejléc szélesebb, mint a többi szakasz: a logó a bal szélen ül */
.header > .wrap{ max-width: 1840px; }

.header__inner{
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.5vw, 72px);
  min-height: 124px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: none;
}
.brand__mark{
  width: 98px; height: 98px;
  object-fit: contain;
}
.brand__text{ display: flex; flex-direction: column; gap: 2px; }
.brand__name{
  font-family: var(--display);
  font-size: 1.62rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--ink);
}
.brand__sub{
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* a menü kitölti a maradék szélességet: a linkek egyenletesen oszlanak el,
   az ajánlatkérés gomb a jobb szélre kerül */
.nav{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.1vw, 22px);
}
.nav__link{
  position: relative;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 6px;
  transition: color .35s var(--ease);
  white-space: nowrap;
}
.nav__link::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav__link:hover{ color: var(--green-dark); }
.nav__link:hover::after{ transform: scaleX(1); }
.nav__link[aria-current="page"]{ color: var(--green-dark); }
.nav__link[aria-current="page"]::after{ transform: scaleX(1); }

.nav__cta{ padding: 1.05em 1.7em; margin-left: clamp(6px, 1vw, 18px); font-size: .76rem; }

.burger{
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
}
.burger span{
  display: block;
  width: 20px; height: 1px;
  margin: 4px auto;
  background: var(--green-dark);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* A Szállás menüponttal nyolc link van a sorban. 1400px alatt a sor szűkösen
   fér el, ezért ott a betűköz, a logó és az ajánlatkérés gomb egy fokkal
   visszafogottabb – így 1180px-ig kifér, alatta jön a hamburger menü. */
@media (min-width: 1181px) and (max-width: 1400px){
  .header__inner{ gap: 22px; }
  .brand__mark{ width: 78px; height: 78px; }
  .brand__name{ font-size: 1.42rem; letter-spacing: .16em; }
  .nav{ gap: 8px; }
  .nav__link{ font-size: .72rem; letter-spacing: .1em; }
  .nav__cta{ padding: .95em 1.3em; font-size: .7rem; margin-left: 6px; }
  .header.is-compact .brand__mark{ width: 50px; height: 50px; }
  .header.is-compact .brand__name{ font-size: 1.12rem; }
  .header.is-compact .nav__cta{ padding: .8em 1.15em; }
}

/* A hamburger menü határa. A main.js ugyanezt az értéket használja
   (NAV_BREAK), a kettőnek együtt kell mozognia. */
@media (max-width: 1180px){
  /* a menü a fejléchez van kötve (top:100%), így összezárt állapotban sem
     nyílik rés a fejléc és a lenyitott menü között */
  .nav{
    position: absolute;
    /* a fejléc hajszálvonala alatt kezdődjön, ne takarja el */
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
    padding: 8px var(--gutter) 32px;
    max-height: 78dvh;
    overflow-y: auto;
    box-shadow: 0 24px 40px -26px rgba(78,91,63,.35);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  }
  .nav.is-open{ transform: none; opacity: 1; visibility: visible; }
  .nav__link{
    font-size: .78rem;
    letter-spacing: .2em;
    padding-block: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after{ display: none; }
  .nav__cta{ margin: 26px 0 0; justify-content: center; }
  .burger{ display: block; }
  .brand__mark{ width: 76px; height: 76px; }
  .header__inner{ justify-content: space-between; }
}

/* --- 7. Hero ------------------------------------------------------------- */
.hero{
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 880px);
  background: var(--cream);
  overflow: hidden;
}
.hero__copy{
  position: relative;
  z-index: 2;
  /* content-box: a középre igazítást szolgáló bal padding NEM eszi meg a szöveg
     szélességét – a width itt a tényleges szövegoszlop.
     A bal igázítás a fejléc szélességéhez (1840px) illeszkedik, így a cím
     egy vonalban indul a logóval. */
  box-sizing: content-box;
  width: min(560px, 40vw);
  flex: none;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 2.5vw, 44px) clamp(48px, 6vw, 96px)
           max(var(--gutter), calc((100vw - 1840px) / 2 + var(--gutter)));
}
.hero__title{
  font-size: clamp(2.7rem, 5.4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
}
.hero__script{
  display: block;
  font-family: var(--script);
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  line-height: 1.15;
  color: var(--green);
  margin-top: .12em;
}
.hero__text{
  max-width: 34ch;
  color: var(--ink-soft);
  margin-bottom: 2.4em;
}
/* A kép bal felé hosszú átmenettel olvad a bézsbe. A maszk ellipszise
   függőlegesen sokkal nagyobb, mint a szakasz – így a határ csak enyhén
   ívelt (középen kb. 50px-szel mélyebb), nem látszik körnek. */
.hero__media{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: 14%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(42% 135% at 0% 50%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.35) 68%, #000 100%);
          mask-image: radial-gradient(42% 135% at 0% 50%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.35) 68%, #000 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hero__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  /* a vágás felfölé tolva: a csillár teljes egészében beléfér, a padlóból
     kerül le több (felül 2%, alul 22% vágás) */
  object-position: 50% 8%;
  /* Ket maszkreteg egyesitve (alapertelmezett 'add' kompozit):
     1) vizszintes: a jobb oldal MINDIG teljesen latszik -> ott a kep felso es
        also ele elesen zar, ahogy kell;
     2) fuggoleges savok: felul/alul elhalvanyodas.
     Az unio miatt csak a BAL oldali sarkok (a szoveg melletti sav) halvanyulnak
     el felul es alul, a kep tobbi resze erintetlen. */
  -webkit-mask-image:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, #000 52%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 5%, #000 95%, rgba(0,0,0,0) 100%);
          mask-image:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, #000 52%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 5%, #000 95%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  animation: heroIn 1.9s var(--ease) both;
}
@keyframes heroIn{
  from{ transform: scale(1.07); opacity: 0; }
  to  { transform: scale(1);    opacity: 1; }
}

@media (max-width: 900px){
  .hero{ flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__media{
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    order: -1;
    width: 100%;
    aspect-ratio: 4 / 3;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* a képen lévő kétrétegű maszkot is ki kell kapcsolni, különben
     telefonon is elhalványul a felső és alsó éle */
  .hero__media img{
    -webkit-mask-image: none;
            mask-image: none;
    object-position: 50% 40%;
  }
  .hero__copy{
    box-sizing: border-box;
    width: auto;
    padding: clamp(30px, 6vw, 48px) var(--gutter) clamp(36px, 7vw, 56px);
  }
  .hero__title{ font-size: clamp(2.3rem, 9.5vw, 3.2rem); }
  .hero__script{ font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero__text{ max-width: 46ch; margin-bottom: 1.9em; }
  .hero__copy .divider{ margin-block: 1.1em; }
}

/* --- 8. Kiemelt tulajdonságok (bézs sáv, levél motívummal) --------------- */
.features{
  position: relative;
  background: var(--cream-dim);
  padding-block: clamp(62px, 7vw, 108px);
  overflow: hidden;
}
.features__leaf{
  position: absolute;
  top: 50%;
  width: clamp(130px, 15vw, 250px);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  /* a növekedés: a szár tövéből bontakozik ki */
  clip-path: circle(0% at 6% 94%);
  transition: clip-path 1.9s var(--ease), opacity 1.2s var(--ease),
              transform 1.9s var(--ease);
}
.features__leaf--l{
  left: -22px;
  transform: translateY(-50%) rotate(-7deg) scale(.86);
}
.features__leaf--r{
  right: -22px;
  transform: translateY(-50%) scaleX(-1) rotate(-7deg) scale(.86);
}
.features.is-grown .features__leaf{
  opacity: .26;
  clip-path: circle(150% at 6% 94%);
}
.features.is-grown .features__leaf--l{
  transform: translateY(-50%) rotate(0deg) scale(1);
}
.features.is-grown .features__leaf--r{
  transform: translateY(-50%) scaleX(-1) rotate(0deg) scale(1);
}

.features__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  max-width: 1180px;
  margin-inline: auto;
}
.feature{ text-align: center; padding-inline: clamp(8px, 1.8vw, 30px); }
.feature + .feature{ border-left: 1px solid var(--line); }
.feature__icon{
  width: 50px; height: 50px;
  margin: 0 auto 20px;
  object-fit: contain;
}
.feature__title{
  font-family: var(--body);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .75em;
}
.feature__text{
  font-size: .97rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 1000px){
  .features__grid{ grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .feature:nth-child(3){ border-left: 0; }
  /* egymás alá tördelt ikonoknál az ágak nem a középső szövegre esnek,
     hanem a szakasz két átellénes sarkát keretezik */
  .features__leaf{ width: clamp(130px, 36vw, 220px); top: auto; }
  .features__leaf--l{
    top: 0;
    left: -34px;
    transform: rotate(-7deg) scale(.86);
  }
  .features__leaf--r{
    top: auto;
    bottom: 0;
    right: -34px;
    transform: scaleX(-1) rotate(-7deg) scale(.86);
  }
  .features.is-grown .features__leaf{ opacity: .2; }
  .features.is-grown .features__leaf--l{ transform: rotate(0deg) scale(1); }
  .features.is-grown .features__leaf--r{ transform: scaleX(-1) rotate(0deg) scale(1); }
}
@media (max-width: 760px){
  .features__grid{ grid-template-columns: 1fr; gap: 34px; }
  .feature + .feature{ border-left: 0; border-top: 1px solid var(--line); padding-top: 34px; }
}

/* --- 9. Kétoszlopos szöveg + kép ----------------------------------------- */
.split{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.split--even{ grid-template-columns: 1fr 1fr; }
.split--text-right > .split__media{ order: -1; }
.split__copy{ max-width: 52ch; }

/* a képoszlop túlér a középre igazított sávon – nagyobb képek –, de a
   viewport jobb szélénél megáll egy margin, hogy ne levágva lógjon ki */
.split--bleed-right{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.34fr); }
.split--bleed-right > .split__media{
  margin-right: calc(-1 * max(0px, (100vw - var(--wrap)) / 2));
}

@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; gap: 40px; }
  .split--text-right > .split__media{ order: 0; }
  .split--bleed-right{ grid-template-columns: 1fr; }
  .split--bleed-right > .split__media{ margin-right: 0; }
  .split__copy{ max-width: none; }
}

/* Három álló kép egymás mellett */
.trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}
.trio figure{ margin: 0; overflow: hidden; }
.trio img{
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.trio figure:hover img{ transform: scale(1.04); }
@media (max-width: 560px){
  .trio{ grid-template-columns: 1fr 1fr; }
  .trio figure:last-child{ display: none; }
}

.frame{ overflow: hidden; }
.frame img{
  width: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.frame--tall{ max-width: 480px; margin-inline: auto; }
.frame--tall img{ aspect-ratio: 3 / 4; }
.frame--wide img{ aspect-ratio: 4 / 3; }
.frame:hover img{ transform: scale(1.035); }

/* --- 10. Alkalom kártyák ------------------------------------------------- */
.cards{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.2vw, 20px);
}
.card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: clamp(240px, 22vw, 300px);
  padding: clamp(34px, 3.4vw, 50px) clamp(16px, 1.8vw, 26px);
  background: rgba(255, 251, 236, .55);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: background .45s var(--ease), border-color .45s var(--ease),
              transform .45s var(--ease);
}
.card:hover{
  background: rgba(255, 251, 236, .95);
  border-color: var(--line-strong);
  transform: translateY(-4px);
}
.card__icon{
  width: 44px; height: 44px;
  margin-bottom: 26px;
  object-fit: contain;
  transition: transform .5s var(--ease);
}
.card:hover .card__icon{ transform: translateY(-3px); }
.card__title{
  font-family: var(--body);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .8em;
}
.card__text{
  font-size: .82rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 1000px){ .cards{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px){  .cards{ grid-template-columns: repeat(2, 1fr); } }

/* --- 11. Illusztrációs blokk (vonalas grafika) -------------------------- */
/* A multiply kiveszi a fehér hátteret akkor is, ha az átlátszó PNG még nem
   lett újragenerálva. FONTOS: ez a blokk NEM kap .reveal osztályt – az
   opacity-animáció saját réteget csinálna, és emiatt villanna fel a fehér. */
.illu{
  mix-blend-mode: multiply;
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

/* --- 12. Vízszintes galéria (görgetéssel vezérelt) --------------------- */
/* A .hscroll magasságát a JS állítja be: 100vh + a vízszintes út hossza.
   Amíg ezen áthalad a görgetés, a belső sáv ragadva marad és oldalra mozog,
   utána az oldal normálisan folytatódik. */
.hscroll{
  position: relative;
  background: var(--cream-dim);
}
.hscroll__sticky{
  position: sticky;
  top: 0;
  height: min(92vh, 880px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 4vh, 56px);
  overflow: hidden;
  /* A sáv a képernyő két szélén beleolvad a háttérbe. Így nem kell a szélső
     képeket átlátszóvá (szürkévé) tenni, mégsem látszik éles elvágás. */
  -webkit-mask-image: linear-gradient(90deg,
      rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg,
      rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* a cím a ragadó sávon belül ül, közvetlenül a képek felett – így nincs
   nagy üres sáv a szöveg és a képek között */
.hscroll__head{
  flex: none;
  text-align: center;
  padding-inline: var(--gutter);
}
.hscroll__head .kicker{ margin-bottom: .8em; }
.hscroll__track{
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  padding-inline: clamp(12px, 1.4vw, 24px);
  width: 100%;
  will-change: transform;
}
.hscroll__item{
  flex: none;
  height: min(56vh, 600px);
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  will-change: transform;
}
.hscroll__item img{
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

/* haladásjelző hajszálvonal */
.hscroll__bar{
  position: absolute;
  left: clamp(12px, 1.4vw, 24px);
  right: clamp(12px, 1.4vw, 24px);
  bottom: clamp(28px, 5vh, 64px);
  height: 1px;
  background: var(--line);
}
.hscroll__bar span{
  display: block;
  width: 0;
  height: 1px;
  background: var(--green);
}

/* Mobilon és csökkentett mozgás esetén: hagyományos, ujjal húzható sáv. */
/* nyilak – csak kis kijelzőn látszanak */
.hscroll__nav{
  display: none;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}
.hscroll__arrow{
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--green-dark);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease),
              opacity .35s var(--ease), border-color .35s var(--ease);
}
.hscroll__arrow:hover,
.hscroll__arrow:active{
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--cream);
}
.hscroll__arrow[disabled]{ opacity: .3; cursor: default; }
.hscroll__arrow svg{ width: 17px; height: 10px; }
.hscroll__arrow--prev svg{ transform: scaleX(-1); }

@media (max-width: 900px){
  .hscroll{ height: auto !important; }
  .hscroll__sticky{
    position: static;
    height: auto;
    padding-block: clamp(28px, 5vw, 48px);
    overflow: visible;
    gap: clamp(20px, 4vw, 32px);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hscroll__track{
    overflow-x: auto;
    /* csak vízszintesen legyen mozgatható: függőlegesen ne lehessen
       elhúzni a képeket – a függőleges görgetés az oldalé marad */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none !important;
    gap: clamp(10px, 3vw, 18px);
    padding-inline: 8vw;
    -webkit-mask-image: linear-gradient(90deg,
        rgba(0,0,0,0) 0%, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(90deg,
        rgba(0,0,0,0) 0%, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
  }
  .hscroll__track::-webkit-scrollbar{ display: none; }
  .hscroll__item{
    height: auto;
    width: 84vw;
    scroll-snap-align: center;
  }
  .hscroll__item img{ height: auto; }
  .hscroll__bar{ display: none; }
  .hscroll__nav{ display: flex; }
}
@media (prefers-reduced-motion: reduce){
  .hscroll{ height: auto !important; }
  .hscroll__sticky{
    position: static;
    height: auto;
    padding-block: 40px;
    overflow: visible;
  }
  .hscroll__track{ overflow-x: auto; transform: none !important; }
  .hscroll__item{
    height: auto;
    width: min(84vw, 760px);
    transform: none !important;
    opacity: 1 !important;
  }
  .hscroll__item img{ height: auto; transform: none !important; }
  .hscroll__bar{ display: none; }
}

/* --- 13. Ikonos felsorolás (Amit a helyszín kínál) ---------------------- */
.offers{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(24px, 3vw, 44px) clamp(18px, 2.4vw, 34px);
}
.offer{ text-align: center; }
.offer > img,
.offer > svg{
  width: 38px; height: 38px;
  margin: 0 auto 14px;
  object-fit: contain;
}
.offer__label{
  font-family: var(--body);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .5em;
}
.offer__note{
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
/* Rögzített hasábszám nagy kijelzőn: az auto-fit annyi hasábot nyit, amennyi
   befér, és így könnyen egyedül marad egy tétel az utolsó sorban. Ahol a
   tételek száma ismert (helyszín: 8, szállás: 6), inkább osztható rácsot
   kérünk – a kisebb kijelzőkre a lentebbi 3, illetve 2 hasábos szabály él. */
@media (min-width: 1001px){
  .offers--4{ grid-template-columns: repeat(4, 1fr); }
  .offers--3{ grid-template-columns: repeat(3, 1fr); }
}

/* --- 14. Teremelrendezések ---------------------------------------------- */
.layouts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
}
.layout{
  margin: 0;
  padding: clamp(18px, 2vw, 30px);
  background: var(--paper);
  border: 1px solid var(--line);
  text-align: center;
}
.layout img{ width: 100%; margin-bottom: 18px; }
.layout figcaption{
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.layout p{
  margin: .8em 0 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
@media (max-width: 840px){ .layouts{ grid-template-columns: 1fr; } }

/* --- 15. Szolgáltatás / rendezvény blokkok ------------------------------ */
.stack{ display: grid; gap: clamp(48px, 6vw, 92px); }

.block{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 76px);
  align-items: center;
  scroll-margin-top: 110px;
}
.block--reverse > .block__media{ order: -1; }
.block__icon{
  width: 44px; height: 44px;
  margin-bottom: 22px;
  object-fit: contain;
}
@media (max-width: 900px){
  .block{ grid-template-columns: 1fr; gap: 32px; }
  .block--reverse > .block__media{ order: 0; }
}

/* Két hasáb, keret nélkül: minden tételt egy hajszálvonal nyit, mint az
   oldal többi elválasztója – nem táblázat, hanem szerkesztői hasábok. */
.notes{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(38px, 4vw, 66px) clamp(44px, 5.5vw, 104px);
}
.note{
  padding-top: clamp(22px, 2vw, 30px);
  border-top: 1px solid var(--line-strong);
}
.note h3{
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  margin-bottom: .7em;
}
.note p{
  font-size: .92rem;
  max-width: 46ch;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 760px){
  .notes{ grid-template-columns: 1fr; }
}

/* --- 16. Árak ----------------------------------------------------------- */
.price{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 4.5vw, 64px);
  /* Ez a lap legfontosabb eleme, ezért a zöld sávokkal egy nyelvet beszél:
     zöld alap, krém tipográfia. A .price csak az Árak oldalon szerepel, így
     nem kell hozzá modifier. */
  background: var(--green-dark);
  border: 0;
}
/* Krém tipográfia a zöld alapon. A pontos árnyalatok ugyanazok, mint a
   .band--green blokkban, hogy a két zöld felület egyformán viselkedjen.
   (Az árat és a mértékegységét lentebb, a saját szabályában színezzük: ott
   ugyanez a specificitás, viszont az áll később a fájlban.) */
.price h2{ color: var(--cream); }
.price__intro{
  max-width: 44ch;
  color: rgba(255, 246, 224, .86);
}
.price .kicker{ color: rgba(255, 246, 224, .78); }
.price__amount{
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--cream);
  margin: 0 0 .35em;
}
.price__amount small{
  display: block;
  margin-top: .5em;
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 246, 224, .72);
}
.price__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.price__list li{
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: .88rem;
  color: rgba(255, 246, 224, .86);
}
.price__list li::before{
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: .55em;
  border: 1px solid rgba(255, 246, 224, .6);
  border-radius: 50%;
}
@media (max-width: 820px){ .price{ grid-template-columns: 1fr; } }

/* --- 17. Kapcsolat ------------------------------------------------------ */
.contact{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
}
.contact__list{
  list-style: none;
  margin: 0 0 2.4em;
  padding: 0;
  display: grid;
  gap: 22px;
}
.contact__row{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  align-items: start;
}
.contact__row > img,
.contact__row > svg{ width: 22px; height: 22px; margin-top: 5px; }
.contact__label{
  display: block;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.contact__value{
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  text-decoration: none;
  transition: color .35s var(--ease);
}
a.contact__value:hover{ color: var(--green); }

/* --- 17c. Váltakozó hátterű sávok, átnyúló képpel --------------------- */
/* Egyik sáv bézs, a következő mélyzöld, és a kép átnyúlik a két szín
   határán – ez adja a szerkesztői, rétegzett hatást. */
.band{
  --band-pad: clamp(72px, 8vw, 130px);
  /* alaphelyzetben a kép a saját sávján belül marad */
  --band-overhang: 0px;
  position: relative;
  padding-block: var(--band-pad);
  background: var(--cream);
}
.band--green{ background: var(--green-dark); }

/* Minden sáv legalább egy teljes képernyőt kitölt – így görgetéskor egy
   képernyő zöld, majd egy képernyő bézs következik. A nyitósáv kivétel:
   annak saját, rögzített magassága van. */
.band:not(.band--hero){
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.band:not(.band--hero) > .band__inner{ width: 100%; }

.band__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.band--media-left .band__media{ order: -1; }

/* Kép nélküli sáv: a szöveg két hasábban tölti ki a teljes szélességet
   (cím balra, bekezdések jobbra), és a sáv csak a tartalma magasságát veszi
   fel – így nem marad üres félhasáb a szöveg mellett, sem üres képernyő. */
.band--text:not(.band--hero){ min-height: 0; }
.band--text .band__inner{
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: start;
}
.band--text .band__copy--head{ max-width: 24ch; }
.band--text .band__copy--head .divider{ margin-bottom: 0; }
@media (max-width: 900px){
  .band--text .band__inner{ grid-template-columns: 1fr; }
  .band--text .band__copy--head{ max-width: none; }
}

.band__copy{
  max-width: 52ch;
}
.band__copy .lede{ color: inherit; }

/* A kép alsó éle a sáv alatti színbe nyúlik át. A negatív margin miatt a
   sáv magassága nem nő, a z-index pedig a következő szakasz háttere elé
   emeli. (A szakaszokon nincs z-index, ezért ez működik.) */
.band__media{
  position: relative;
  z-index: 2;
  /* stretch: a kép a sor teljes magasságát kitölti, így nem marad üres sáv
     a kép felett, ha a szöveg magasabb */
  align-self: stretch;
  margin: 0 0 calc(-1 * var(--band-overhang));
  overflow: hidden;
}
.band__media img{
  width: 100%;
  height: 100%;
  min-height: clamp(300px, 28vw, 500px);
  object-fit: cover;
}
.band__media--tall img{ min-height: clamp(360px, 34vw, 620px); }

/* Nyitósáv: ugyanaz a bézs, mint a fejléc (a hajszálvonal választja el), és
   csak ITT nyúlik át a kép a következő színbe – lentebb minden kép a saját
   sávjában marad. */
.band--hero{
  background: var(--cream);
  /* kisebb felső padding, hogy a nagyobb képek mellett a zöld vonal ne
     kerüljön lejjebb */
  --band-pad: clamp(28px, 3vw, 34px);
  /* a kép csak kicsit nyúlik bele a zöld sávba – minden más (sorméret,
     szöveg, zöld vonal helye) változatlan */
  --band-overhang: clamp(24px, 3.2vw, 64px);
  padding-block: var(--band-pad) 0;
}
/* a nyitósáv képe teljes egészében látszik: saját oldalarány, nincs vágás.
   A magasság fix (nem a szöveg hossza szabja meg), így minden oldalon
   ugyanott kezdődik a zöld sáv és ugyanolyan méretű a kép. */
.band--hero .band__inner{ min-height: clamp(440px, 33.5vw, 676px); }
.band--hero .band__media{
  align-self: end;
  display: flex;
  justify-content: flex-end;
}
.band--hero .band__media img{
  height: clamp(330px, 28vw, 568px);
  width: auto;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.band--hero .band__media--wide img{ aspect-ratio: 3 / 2; }
/* álló kép: magasabb, mint a fekvők, de az alja ugyanoda ér – a zöld vonal
   nem mozdul, mert azt a sor fix magassága szabja meg */
.band--hero .band__media--portrait img{
  aspect-ratio: 2 / 3;
  height: clamp(400px, 33.5vw, 676px);
}
/* álló, 3:4 arányú nyitókép (Kapcsolat). A magasság a képernyő magasságához
   is igazodik, hogy a fotó a nyitó nézetben egészben látszódjon, ne vágja el
   a képernyő alja. */
.band--hero .band__media--portrait-34 img{
  aspect-ratio: 3 / 4;
  height: min(clamp(360px, 31vw, 620px), 62vh);
}
/* ott, ahol nem zöld sáv következik, a kép felülre igazodik – nincs üres sáv
   a kép felett, és nincs értelme az átnyúlásnak sem */
.band--hero .band__media--top{
  align-self: start;
  margin-bottom: 0;
  margin-top: clamp(16px, 2vw, 32px);
}
/* ...és ilyenkor a sávnak sem kell a fix magasság, különben nagy üres hely
   marad a kép alatt a következő szakasz előtt */
.band--hero--compact{ padding-block: var(--band-pad) clamp(28px, 3vw, 44px); }
.band--hero--compact .band__inner{ min-height: 0; }
/* Nagyobb nyitókép (Rólunk, Helyszín, Szállás, Rendezvények): szélesebb
   képoszlop, és a fotó a viewport jobb széléig kifut. A .band--hero-vel együtt
   írjuk, mert a lentebbi .band--hero .band__inner szabályt is felül kell
   írnia. */
.band--hero.band--hero--media-big .band__inner{
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}
.band--hero--media-big .band__media{
  margin-right: calc(-1 * max(0px, (100vw - var(--wrap)) / 2));
}
/* A keret arányát FIXEN mi adjuk meg, nem a fotó hozza magával: így minden
   nyitókép ugyanolyan méretű és ugyanott áll, függetlenül attól, hogy az
   eredeti 3:2 (Rólunk, Helyszín) vagy 4:3 (Szállás). A magasságot tehát
   csak az oszlopszélesség szabja meg. Ezért cover: a 4:3-as fotóból felül-
   alul vágunk annyit, hogy a 3:2-es keretet kitöltse.
   A kép alulra igazodik (.band--hero .band__media align-self: end), és a
   negatív alsó margó miatt pontosan --band-overhang mértékben csúszik bele a
   következő zöld sávba. */
.band--hero--media-big .band__media img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Rendezvények: az eredeti fotó álló (2:3), itt fix 3:2-es kivágásban
   mutatjuk. A kivágás nem középen áll, hanem harmadával feljebb toljuk, így a
   két megterített asztal és a székek kerülnek a képbe, nem a fotó felső
   harmadát kitöltő üres mennyezet és fal.

   A méretezés a fenti --media-big szabályból jön, itt csak a kivágás helyét
   toljuk el. */
.band--hero .band__media--crop img{ object-position: center 83%; }
/* Szállás: az eredeti 4:3, a 3:2-es keret tehát 100px-t vág a 900-ból –
   pont annyit, amennyit a fakazettás mennyezet elfoglal a kép tetején. Ezért
   nem középre, hanem ALULRA igazítjuk a kivágást: a mennyezet így teljesen
   kimarad, és az ágyak alja is beljebb kerül a képbe. */
.band--hero .band__media--crop-bottom img{ object-position: center bottom; }

/* Zöld nyitósáv (Szolgáltatások, Árak). Ezen a két oldalon a nyitókép melletti
   nagy krém felület túl bézses és üres volt, a meleg tónusú fotó pedig a krém
   alapon még melegebbnek látszott. Ezért itt maga a sáv zöld: hideg alap fogja
   körbe a fotót, a tipográfia krémre fordul. A fejléc krém marad – nem a
   hajszálvonal, hanem a színváltás választja el a sávtól.
   A --media-big-gel együtt használjuk: a nagy, jobbra kifutó fotó tölti ki azt
   a helyet, ami eddig üresen állt. */
.band--hero.band--hero--green{ background: var(--green-dark); }
.band--hero--green .band__copy,
.band--hero--green .band__copy p{ color: rgba(255, 246, 224, .88); }
.band--hero--green .band__copy h1{ color: var(--cream); }
.band--hero--green .band__copy .lede{ color: rgba(255, 246, 224, .9); }
.band--hero--green .kicker{ color: rgba(255, 246, 224, .72); }

/* Kapcsolat nyitósáv. Négy dolgot kezel:
   1) A nyitó nézetben a két gombnak is látszania kell, ezért itt szorosabb a
      szöveg vertikális ritmusa (kb. 55px-t nyerünk vissza). A gombok helyét
      csak a szövegoszlop saját magassága szabja meg, mert a .band__copy
      felülre igazított – a kép magassága tehát nem tolja lejjebb őket.
   2) A kép felső éle a szöveggel egy vonalban indul: a margin-top ugyanaz az
      érték, mint a .band__copy padding-top-ja.
   3) A kép kitölti a képoszlopot és a viewport jobb széléig kifut – eddig egy
      keskeny álló fotó állt jobbra tolva, és nagy üres krém felület maradt a
      szöveg és a kép között.
   4) A kép egészben belefér a nyitó nézetbe – a magasságát lentebb a
      viewportból számoljuk. */
/* Egy változóban tartjuk a felső belső teret, mert két helyen kell
   pontosan ugyanaz: a szöveg padding-top-ja és a kép margin-top-ja – ezen
   áll a két elem felső élének az igazítása. */
.band--hero--contact{ --contact-top: clamp(16px, 2vw, 32px); }
/* A .band--hero-vel együtt írjuk: a .band--hero .band__copy szabály
   lentebb áll a fájlban, ugyanezzel a specificitással. */
.band--hero.band--hero--contact .band__copy{
  padding-top: var(--contact-top);
  padding-bottom: clamp(16px, 2vw, 28px);
}
.band--hero--contact .contact__list{ gap: 18px; }
.band--hero--contact .band__copy .contact__list{
  margin-top: clamp(14px, 1.8vw, 24px);
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.band--hero--contact .band__media{
  align-self: start;
  margin-top: var(--contact-top);
  margin-bottom: 0;
  margin-right: calc(-1 * max(0px, (100vw - var(--wrap)) / 2));
}
/* A kép egészben beleér a nyitó nézetbe: a magasságát a viewportból
   számoljuk, nem az arányából. Levonjuk a fejlécet (.header__inner
   min-height 124px + 1px hajszálvonal), a sáv felső belső terét és a kép
   saját felső margóját, végül hagyunk egy kis levegőt a hajtás előtt.
   A 46vw felső korlát a nagyon magas ablakokban tartja kordában a méretet,
   a 320px alsó korlát pedig a nagyon alacsonyakban akadályozza meg, hogy
   fekvő csíkká lapuljon. Szélességben a képoszlopot kitölti, a 3:4-es
   eredetiből tehát a cover vág – a csokor középen van, benne marad. */
.band--hero--contact .band__media img{
  width: 100%;
  height: max(320px, min(
    calc(100svh - 125px - var(--band-pad) - var(--contact-top) - 28px),
    46vw));
  aspect-ratio: auto;
  object-fit: cover;
}

/* Nyitósáv kép nélkül (Kapcsolat): a szöveg egyetlen hasábban áll. A
   kétoszlopos rács helyett egy oszlop, de a szöveg nem fut ki a sáv teljes
   szélességére – az olvasható sorhossz marad. */
.band--hero--solo .band__inner{ grid-template-columns: minmax(0, 1fr); }
.band--hero--solo .band__copy{ max-width: 42rem; }

/* Kép nélkül nincs mit kiegyensúlyozni a sáv alján, ezért a fotós
   nyitósávok alsó levegője itt elmarad, és a következő szakasz is szűkebb
   felső belsővel indul – így a lede után rögtön jön a tartalom.
   A .band--hero-vel együtt írjuk, hogy a lentebbi mobil-szabályt is felülírja. */
.band--hero.band--hero--solo{ padding-bottom: 0; }
.band--hero.band--hero--solo .band__copy{ padding-bottom: 0; }
.band--hero--solo + .section{ padding-top: clamp(34px, 4vw, 56px); }

/* Két fekvő kép egymás alatt, ugyanazon bekezdés mellett. Szélességben
   korlátozva, mert ezek régi, kis felbontású családi fotók. */
.band__media--pair{
  display: grid;
  gap: clamp(10px, 1.2vw, 18px);
  align-self: center;
  width: min(100%, 600px);
  margin-inline-start: auto;
}
.band__media--pair img{
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
}
.band--hero .band__inner{
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
}
.band--hero .band__copy{
  max-width: none;
  /* felülre igazítva, egy fix belső térrel: így a szöveg minden belső oldalon
     pontosan ugyanabban a magasságban kezdődik, függetlenül a hosszától */
  align-self: start;
  padding-top: clamp(24px, 3.5vw, 56px);
  padding-bottom: clamp(24px, 3vw, 48px);
}
.band--hero .band__copy .lede{ max-width: 54ch; }
.band--hero .kicker{ margin-bottom: 1.2em; }
.band--hero h1{
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  font-weight: 400;
}

/* Ikonok a sávokban. Zöld háttéren a kliens zöld ikonjai eltűnnének, ezért
   ott krémszínűre váltanak (PNG: filter, inline SVG: stroke). */
.band__icon{
  width: 46px; height: 46px;
  margin-bottom: 22px;
  object-fit: contain;
}
/* Az ikon és a rendezvény neve egy .band__head-ben ül, hogy telefonon egy
   sorba kerülhessenek. Asztali nézetben viszont maradjon minden úgy, ahogy
   volt: a cím ott a .prose > * + h2 szabálytól kapta a nagy felső margót,
   ami a beágyazás után már nem illeszkedik rá, ezért itt pótoljuk. */
.band__head .h-block{ margin-top: 2.6em; }
.band--green img.band__icon{ filter: brightness(0) invert(1); opacity: .9; }
.band--green svg.band__icon g{ stroke: var(--cream); }

/* zöld sávon krémszínű tipográfia. A .prose p / strong szabályokat is felül
   kell írni, különben a bekezdések sötétek maradnak és olvashatatlanok. */
.band--green .band__copy{ color: rgba(255, 246, 224, .86); }
.band--green .band__copy p,
.band--green .band__copy li{ color: rgba(255, 246, 224, .86); }
.band--green .band__copy h2,
.band--green .band__copy h3,
.band--green .band__copy strong{ color: var(--cream); }
.band--green .band__copy .lede{ color: rgba(255, 246, 224, .94); }
.band--green .textlink{ color: var(--cream); border-color: rgba(255,246,224,.4); }
.band--green .textlink:hover{ border-color: var(--cream); }

@media (max-width: 900px){
  /* Kisebb képernyőn minden sáv legalább egy képernyőt kitölt, így a
     zöld–bézs váltás ugyanúgy érezhető, mint asztali nézetben. A 100svh
     a kisebbik viewport-magasság, így a böngésző sávjának eltűnésekor sem
     ugrál. Hosszabb tartalomnál a sáv természetesen tovább nő. */
  .band{
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .band > .band__inner{ width: 100%; }
  .band{ padding-block: clamp(46px, 9vw, 76px); }
  .band--hero{
    min-height: 0;
    align-items: flex-start;
    padding-block: clamp(22px, 5vw, 36px) clamp(24px, 6vw, 40px);
  }
  .band__inner,
  .band--hero .band__inner{ grid-template-columns: 1fr; gap: clamp(26px, 6vw, 36px); }
  /* A fenti sor csak két class-os, a .band--hero.band--hero--media-big
     .band__inner viszont három – és a media query nem ad specificitást.
     Ezért itt ugyanazzal a három class-szal kell egy hasábra bontani,
     különben telefonon is kéthasábos marad a nyitósáv: a szöveg pár szó
     széles csíkba szorul, a kép meg a fél oszlopra zsugorodik. */
  .band--hero.band--hero--media-big .band__inner{ grid-template-columns: 1fr; }
  .band--media-left .band__media{ order: 0; }
  .band__copy{ max-width: none; }
  .band--hero .band__inner{ min-height: 0; }
  .band--hero .band__media{ display: block; }
  .band--hero .band__media img,
  .band--hero--media-big .band__media img{
    height: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .band--hero--media-big .band__media{ margin-right: 0; }
  /* Telefonon nem kell külön arány: a nyitóképek is a fenti 4:3-as keretet
     kapják, mint a többi sáv képe – ez a teljes szövegszélességben jóval
     nagyobb kép, mint a korábbi 3:2-es csík. A vágást a cover végzi, a
     --crop és a --crop-bottom object-position-je érvényben marad. */
  .band--hero .band__copy{ padding-bottom: clamp(26px, 6vw, 36px); }
  /* a Kapcsolat szűkebb alsó belső tere csak a kéthasábos nézetben kell –
     a fenti sort a három class-os szabálya különben itt is felülírná */
  .band--hero.band--hero--contact .band__copy{ padding-bottom: clamp(26px, 6vw, 36px); }
  /* telefonon sem lóg bele a nyitókép a zöld sávba */
  .band--hero .band__media{ margin-bottom: 0; }
  .band--hero .band__media--top{ margin-top: 0; }
  /* Telefonon az ikon a rendezvény neve MELLÉ kerül, nem fölé. Így elmarad
     az ikon alatti margó és a cím 2.6em-es felső margója is – korábban
     ketten együtt kb. 85px üres helyet hagytak az ikon és a cím között. */
  .band__head{
    display: flex;
    align-items: center;
    gap: clamp(12px, 3vw, 16px);
  }
  .band__head .band__icon{
    flex: none;
    width: 38px; height: 38px;
    margin-bottom: 0;
  }
  .band__head .h-block{ margin-top: 0; }
  .band__media img{ height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  /* az álló nyitókép telefonon is a saját arányát tartja, különben széles
     üres sávok maradnának mellette */
  .band--hero .band__media--portrait-34 img{ aspect-ratio: 3 / 4; }
}

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

/* Kapcsolat: az elérhetőségek a nyitósáv szövegoszlopában állnak, nem külön
   szakaszban – így az oldal egy képernyőn elfér, és a fotó mellett sem marad
   üres sáv. */
.band__copy .contact__list{
  margin-top: clamp(20px, 2.6vw, 34px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.contact__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0;
}

/* --- 18. Záró felhívás (kézírás animáció) ------------------------------ */
.callout{
  /* felül szűk: korábban nagy üres sáv volt a kézírás felett, és ezért
     az animáció is későn indult el */
  padding-block: clamp(18px, 2vw, 34px) clamp(58px, 7vw, 106px);
  text-align: center;
  background: var(--cream-dim);
}
.callout__script{
  font-family: var(--script);
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  /* A maszk az elem határoló dobozához van vágva, ezért a sormárető legyen
     nagyobb, mint a betűk tényleges magassága – különben az Allison hosszú
     alsó szárai (g, j, p) kilógnak a maszkból és letörődnek. */
  line-height: 1.5;
  padding-block: .08em .2em;
  /* az 1.5-es sorméret kell a maszknak (különben letöri az alsó szárakat),
     de a felül keletkező felesleget negatív marginóval vissza is vesszük */
  margin: -.2em 0 .16em;
  color: var(--green-dark);
  /* a JS balról jobbra "megírja" — alapból teljesen látszik */
  -webkit-mask-image: linear-gradient(90deg, #000 var(--pen, 110%),
                                       rgba(0,0,0,0) calc(var(--pen, 110%) + 7%));
          mask-image: linear-gradient(90deg, #000 var(--pen, 110%),
                                       rgba(0,0,0,0) calc(var(--pen, 110%) + 7%));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.callout__text{
  max-width: 42ch;
  margin: 0 auto 2.6em;
  color: var(--ink-soft);
}

/* --- 19. Lábléc -------------------------------------------------------- */
.footer{
  background: var(--green-dark);
  color: rgba(255, 246, 224, .76);
  font-size: .85rem;
}
.footer a{ text-decoration: none; color: inherit; }

.footer__top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(32px, 4vw, 56px);
  padding-block: clamp(56px, 6vw, 84px);
}
.footer__brand{ display: flex; flex-direction: column; gap: 18px; }
.footer__mark{
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
}
.footer__name{
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: .18em;
  color: var(--cream);
  margin: 0;
}
.footer__tag{
  max-width: 34ch;
  margin: 0;
  font-size: .84rem;
  line-height: 1.75;
}
.footer__script{
  font-family: var(--script);
  font-size: 2.3rem;
  line-height: 1;
  color: rgba(255, 246, 224, .9);
  margin-top: 4px;
}

.footer__title{
  font-family: var(--body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 1.5em;
}
.footer__list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 12px;
}
.footer__list a{
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.footer__list a:hover{ color: var(--cream); padding-left: 4px; }

.footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 246, 224, .16);
  font-size: .72rem;
  letter-spacing: .04em;
}
.footer__legal{ display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__legal a:hover{ color: var(--cream); text-decoration: underline; }

@media (max-width: 940px){
  .footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns: 1fr; }
}

/* --- 20. Belső oldalak fejrésze ---------------------------------------- */
/* Jogi oldalakhoz: egyszerű szövegsáv. */
.pagehead{
  padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 68px);
  background: var(--cream-dim);
}
.pagehead__inner{ max-width: 760px; }
.pagehead .kicker{ margin-bottom: 1.1em; }

/* Tartalmi oldalak nyitósávja: a főoldali hero fordítottja. Ott a kép a nagy
   és a szöveg a kicsi; itt a súlypont a szövegen van, a kép pedig keskenyebb
   sávban ül a jobb szélen, és a bal éle olvad bele a bézsbe. */
.pagehero{
  position: relative;
  display: flex;
  align-items: center;
  /* A magasság a képsáv szélességéhez van kötve (52vw / 1.5), így a sáv
     aránya követi a fotó 3:2 arányát és nem vág le belőle. */
  min-height: clamp(500px, 34.5vw, 780px);
  /* eltérő tónus, mint a fejléc és az alatta következő szakaszok */
  background: var(--cream-dim);
  overflow: hidden;
}
.pagehero__copy{
  position: relative;
  z-index: 2;
  box-sizing: content-box;
  width: min(600px, 40vw);
  flex: none;
  padding: clamp(48px, 5.5vw, 84px) clamp(24px, 2.5vw, 44px) clamp(48px, 5.5vw, 84px)
           max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
.pagehero__cta{ margin-top: 2.2em; }
.pagehero__copy .kicker{ margin-bottom: 1.2em; }
.pagehero__copy h1{
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  font-weight: 400;
}
.pagehero__copy .lede{ max-width: 52ch; }

.pagehero__media{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: 48%;
  overflow: hidden;
  /* ugyanaz az ívelt átmenet, mint a főoldalon, csak keskenyebb sávon */
  -webkit-mask-image: radial-gradient(46% 150% at 0% 50%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.35) 64%, #000 100%);
          mask-image: radial-gradient(46% 150% at 0% 50%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.35) 64%, #000 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.pagehero__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  animation: heroIn 1.9s var(--ease) both;
  /* a felső és alsó él csak a szöveg felé eső sávban halványul */
  -webkit-mask-image:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, #000 58%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
          mask-image:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, #000 58%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
}

@media (max-width: 900px){
  .pagehero{ flex-direction: column; align-items: stretch; min-height: 0; }
  .pagehero__copy{
    box-sizing: border-box;
    width: auto;
    padding: clamp(32px, 7vw, 52px) var(--gutter) clamp(28px, 6vw, 40px);
  }
  .pagehero__media{
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .pagehero__media img{
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* --- 20b. Galéria: mozaik és nagy nézet -------------------------------- */
/* A mozaik 12 hasábos rács, és minden kép helyét kézzel osztjuk ki
   (nth-child). Az automatikus – akár "dense" – elrendezés vegyes méretű
   csempéknél lyukakat hagy; így viszont a kompozíció mindig hézagmentes.
   A sormagasság nagyjából egy hasáb szélessége, ezért a 3 hasáb × 2 sor
   csempe fekvő, a 3 × 4 álló, a 6 × 2 pedig panoráma. */
.mosaic{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(64px, 6.1vw, 104px);
  gap: clamp(8px, 1vw, 18px);
}
.mosaic__item{ min-width: 0; }

.mosaic__btn{
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cream-dim);
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mosaic__btn img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.mosaic__btn:hover img,
.mosaic__btn:focus-visible img{ transform: scale(1.06); }
.mosaic__btn:focus-visible{ outline: 2px solid var(--green-dark); outline-offset: 3px; }

/* A kompozíció: sor-kezdet / hasáb-kezdet / hány sor / hány hasáb. */
.mosaic__item:nth-child(1){  grid-area:  1 /  1 / span 4 / span 6; }
.mosaic__item:nth-child(2){  grid-area:  1 /  7 / span 2 / span 3; }
.mosaic__item:nth-child(3){  grid-area:  1 / 10 / span 2 / span 3; }
.mosaic__item:nth-child(4){  grid-area:  3 /  7 / span 4 / span 6; }
.mosaic__item:nth-child(5){  grid-area:  5 /  1 / span 2 / span 3; }
.mosaic__item:nth-child(6){  grid-area:  5 /  4 / span 2 / span 3; }
.mosaic__item:nth-child(7){  grid-area:  7 /  1 / span 4 / span 3; }
.mosaic__item:nth-child(8){  grid-area:  7 /  4 / span 4 / span 6; }
.mosaic__item:nth-child(9){  grid-area:  7 / 10 / span 2 / span 3; }
.mosaic__item:nth-child(10){ grid-area:  9 / 10 / span 2 / span 3; }
.mosaic__item:nth-child(11){ grid-area: 11 /  1 / span 2 / span 6; }
.mosaic__item:nth-child(12){ grid-area: 11 /  7 / span 2 / span 6; }
.mosaic__item:nth-child(13){ grid-area: 13 /  1 / span 4 / span 3; }
.mosaic__item:nth-child(14){ grid-area: 13 /  4 / span 4 / span 6; }
.mosaic__item:nth-child(15){ grid-area: 13 / 10 / span 2 / span 3; }
.mosaic__item:nth-child(16){ grid-area: 15 / 10 / span 2 / span 3; }

/* Táblagépen és telefonon a kézi kompozíció túl aprót adna, ezért egyenlő
   csempékre váltunk. A :nth-child(n) csak azért van itt, hogy a fenti
   szabályokkal azonos súlyú legyen a kijelölés. */
@media (max-width: 1100px){
  .mosaic{ grid-auto-rows: clamp(70px, 11vw, 132px); }
  .mosaic__item:nth-child(n){ grid-area: auto / auto / span 3 / span 6; }
}
@media (max-width: 640px){
  .mosaic{ grid-auto-rows: clamp(46px, 13vw, 78px); }
  .mosaic__item:nth-child(n){ grid-area: auto / auto / span 4 / span 12; }
}

/* Nagy nézet. A háttér nem fekete, hanem a márka mélyzöldje – a krém
   vezérlők és a képek is ezen ülnek. */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(4px, 1.5vw, 26px);
  padding: clamp(56px, 8vh, 86px) clamp(10px, 2.5vw, 40px) clamp(20px, 4vh, 46px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lightbox[hidden]{ display: none; }
.lightbox.is-open{ opacity: 1; }

.lightbox__backdrop{
  position: absolute;
  inset: 0;
  /* Nem teljesen átlátszatlan, mert így érződik, hogy az oldal ott van a
     nagy nézet mögött – az elhomályosítás viszont olvashatatlanná teszi,
     különben a szöveg kísértetként átüt. */
  background: rgba(38, 42, 32, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
}

.lightbox__figure{
  position: relative;
  grid-column: 2;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
}
/* A picture teljes szélességű, és ő középre igazítja a képet. Enélkül a kép
   a bal szélre ülne: a picture magától a képhez zsugorodna, a kép max-width
   szabálya pedig ehhez a zsugorított dobozhoz mérne. */
.lightbox__figure picture{
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.lightbox__figure img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - clamp(130px, 18vh, 185px));
  object-fit: contain;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.lightbox__figure img.is-shown{ opacity: 1; transform: none; }

/* A képek alatt csak a sorszám áll – a leírás a kép alt szövegében marad,
   a képernyőolvasóknak. */
.lightbox__caption{
  display: flex;
  justify-content: center;
  margin: 0;
}
.lightbox__count{
  font-family: var(--body);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 246, 224, .5);
}

.lightbox__nav,
.lightbox__close{
  position: relative;
  /* a figura fölé: az is pozicionált elem, és a jelölésben megelőzi a
     gombokat, így nélküle rátakarna a nyilakra */
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 246, 224, .09);
  color: var(--cream);
  cursor: pointer;
  transition: background .3s var(--ease);
}
.lightbox__nav:hover,
.lightbox__close:hover{ background: rgba(255, 246, 224, .22); }
.lightbox__nav:focus-visible,
.lightbox__close:focus-visible{ outline: 2px solid var(--cream); outline-offset: 3px; }
.lightbox__nav--prev{ grid-column: 1; }
.lightbox__nav--next{ grid-column: 3; }
.lightbox__close{
  position: absolute;
  top: clamp(10px, 2vh, 24px);
  right: clamp(10px, 2.5vw, 30px);
}

/* Keskeny kijelzőn nincs hely a kép mellett két hasábnak, ezért a lapozás
   rákerül a fotó két szélére. A gombok itt sötét korongot kapnak, mert a
   kép fölött ülnek: világos részleteken is látszaniuk kell. */
@media (max-width: 700px){
  .lightbox{ grid-template-columns: minmax(0, 1fr); }
  .lightbox__figure{ grid-column: 1; }
  .lightbox__figure img{ max-height: calc(100vh - clamp(140px, 20vh, 200px)); }
  .lightbox__nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(30, 34, 25, .55);
  }
  .lightbox__nav:hover{ background: rgba(30, 34, 25, .72); }
  .lightbox__nav--prev{ left: clamp(6px, 2vw, 16px); }
  .lightbox__nav--next{ right: clamp(6px, 2vw, 16px); }
}

/* --- 21. Megjelenítő animáció ------------------------------------------ */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in{ opacity: 1; transform: none; }

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

/* --- 21b. Jogi és tájékoztató oldalak ---------------------------------- */
/* Az impresszum, az adatkezelési tájékoztató és a feltételek hosszú,
   számozott dokumentumok: itt a szakaszcímeknek és a listáknak is kell
   forma, különben a szöveg egyetlen szürke tömbként olvasódik. */
.prose h2{
  font-size: clamp(1.4rem, 1.9vw, 1.8rem);
  margin-bottom: .6em;
}
.prose > * + h2{ margin-top: 2.6em; }

.prose ol{
  margin: 0 0 1.25em;
  padding-left: 1.5em;
  color: var(--ink-soft);
}
.prose ol > li{ margin-bottom: .5em; }
.prose ol > li::marker{ color: var(--green); }

/* Felsorolás: ugyanaz a vékony körös jelölő, mint az árlistában */
.prose ul{
  list-style: none;
  margin: 0 0 1.25em;
  padding: 0;
  color: var(--ink-soft);
}
.prose ul > li{
  position: relative;
  padding-left: 1.5em;
  margin-bottom: .5em;
}
.prose ul > li::before{
  content: "";
  position: absolute;
  left: .25em;
  top: .82em;
  width: 5px; height: 5px;
  border: 1px solid var(--green);
  border-radius: 50%;
}

/* Hatályosság dátuma a jogi oldalak élén */
.legal-date{
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 2.6em;
}

/* Szakaszra ugró horgony: a ragadó fejléc alá ne csússzon a cím */
.legal-section{ scroll-margin-top: 140px; }

/* Adatsorok (impresszum): kicsi címke, alatta az érték, hajszálvonallal */
.dl{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(22px, 2.6vw, 34px) clamp(28px, 4vw, 64px);
  margin: 0;
}
.dl > div{
  padding-top: clamp(14px, 1.4vw, 20px);
  border-top: 1px solid var(--line-strong);
}
.dl dt{
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .6em;
}
.dl dd{
  font-family: var(--display);
  font-size: 1.14rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.dl dd a{ text-decoration: none; transition: color .35s var(--ease); }
.dl dd a:hover{ color: var(--green); }

/* Tartalomjegyzék a hosszabb feltételekhez. Szándékosan a .prose blokkon
   KÍVÜL áll, hogy a fenti lista-szabályok ne írják át. */
.toc{
  margin-bottom: clamp(34px, 4vw, 54px);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 40px);
  background: var(--paper);
  border: 1px solid var(--line);
}
.toc__title{
  font-family: var(--body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 1.3em;
}
.toc ol{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 9px clamp(20px, 3vw, 44px);
  counter-reset: toc;
}
.toc li{ counter-increment: toc; }
.toc a{
  display: flex;
  gap: .7em;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .35s var(--ease);
}
.toc a::before{
  content: counter(toc) ".";
  flex: none;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.toc a:hover{ color: var(--green-dark); }

/* --- 22. Nyomtatás ----------------------------------------------------- */
@media print{
  .header, .footer, .hscroll, .callout{ display: none; }
  body{ background: #fff; color: #000; }
}

/* --- 23. Mobil finomhangolás ------------------------------------------- */

/* Kéthasábos kártyarácsnál az ötödik kártya egyedül marad az utolsó sorban –
   kerüljön középre, ne a bal szélre. */
@media (max-width: 620px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .card:last-child:nth-child(odd){
    grid-column: 1 / -1;
    width: calc(50% - clamp(6px, .8vw, 12px));
    margin-inline: auto;
  }
  .card{
    min-height: clamp(200px, 46vw, 260px);
    padding: clamp(26px, 6vw, 36px) 16px;
  }

  /* hét tétel két hasábban: az utolsó (Parkolás) egyedül marad – középre */
  .offers{ grid-template-columns: repeat(2, 1fr); }
  .offer:last-child:nth-child(odd){
    grid-column: 1 / -1;
    width: calc(50% - clamp(9px, 1.2vw, 17px));
    margin-inline: auto;
  }
}

/* Három hasábnál hét tételből szintén egy marad az utolsó sorban –
   kerüljön a középső hasábba. */
@media (min-width: 621px) and (max-width: 1000px){
  .offers{ grid-template-columns: repeat(3, 1fr); }
  .offer:last-child:nth-child(3n + 1){ grid-column: 2 / 3; }
}

@media (max-width: 900px){
  /* kisebb kijelzőn a szakaszok közötti levégő kevésbé pázarló */
  :root{ --section: clamp(56px, 12vw, 88px); }

  .split{ gap: clamp(26px, 6vw, 40px); }
  .block{ gap: clamp(24px, 6vw, 34px); }
  .stack{ gap: clamp(40px, 10vw, 64px); }
  .frame--tall{ max-width: 420px; }

  .pagehead{ padding-block: clamp(38px, 9vw, 64px) clamp(28px, 6vw, 44px); }
  .callout{ padding-block: clamp(56px, 14vw, 96px); }
  .price{ padding: clamp(26px, 6vw, 40px); }
  .hscroll__head{ padding-inline: var(--gutter); }
}

/* Lábléc telefonon: rövidebb, ne legyen egy teljes oldal. */
@media (max-width: 700px){
  .footer{ font-size: .82rem; }
  .footer__top{
    grid-template-columns: 1fr;
    gap: clamp(26px, 7vw, 38px);
    padding-block: clamp(38px, 9vw, 52px);
  }
  /* a Rendezvények lista ugyanoda vezet, mint a főmenü – telefonon elhagyjuk */
  .footer__top > div:nth-child(3){ display: none; }

  .footer__brand{ gap: 12px; }
  .footer__mark{ width: 62px; height: 62px; }
  .footer__name{ font-size: 1.16rem; }
  .footer__tag{ font-size: .8rem; max-width: none; }
  .footer__script{ font-size: 1.9rem; }

  .footer__title{ margin-bottom: 1em; }
  .footer__list{ gap: 9px; }
  /* az oldallista két hasábban fér el */
  .footer__top > div:nth-child(2) .footer__list{
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }

  .footer__bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-block: 20px;
    font-size: .68rem;
  }
  .footer__legal{ gap: 6px 16px; }
}

/* Nagyon kicsi kijelző (~360px). */
@media (max-width: 400px){
  .brand__name{ font-size: 1.3rem; letter-spacing: .16em; }
  .brand__sub{ font-size: .5rem; letter-spacing: .22em; }
  .brand__mark{ width: 62px; height: 62px; }
  .header__inner{ min-height: 92px; gap: 12px; }
  .btn{ padding: 1em 1.5em; font-size: .68rem; }
  .offers{ grid-template-columns: 1fr 1fr; }
}