/* ============================================================
   SHIKAR SIKER — site components & sections
   Depends on tokens.css.
   ============================================================ */

/* ============ SECTION GROUNDS (the Polarity rhythm) ============ */
.sec{padding-block:clamp(64px,9vw,132px)}
.sec-tight{padding-block:clamp(48px,6vw,84px)}
.is-dark{background:var(--forest-deep);color:var(--cream)}
.is-dark h1,.is-dark h2,.is-dark h3,.is-dark h4{color:var(--cream)}
.is-paper{background:var(--parchment)}

.sec-head{max-width:62ch}
.sec-head .eyebrow{display:block;margin-bottom:calc(var(--u)*2)}
.sec-head h2{margin-bottom:calc(var(--u)*2.5)}
.sec-head.center{margin-inline:auto;text-align:center}

/* ============ BUTTONS ============ */
/* `justify-content` matters because a .btn stretches when it is a flex item
   (the offer cards do exactly that) — without it the label hugs the left.
   `text-indent` cancels the trailing letter-space that tracking leaves after
   the last glyph, which otherwise shifts every centred label half a space
   to the left. Both are needed for the text to sit truly in the middle. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-weight:500;font-size:13px;
  letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;text-align:center;
  padding:15px 28px;border:1px solid var(--copper);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),
             border-color var(--fast) var(--ease);
}
.btn-solid{background:var(--copper);color:var(--forest-deep);border-color:var(--copper)}
.btn-solid:hover{background:var(--amber);border-color:var(--amber)}
.btn-ghost{color:var(--copper-deep)}
.btn-ghost:hover{background:var(--copper);color:var(--forest-deep)}
.is-dark .btn-ghost{color:var(--amber)}
.is-dark .btn-ghost:hover{background:var(--amber);color:var(--forest-deep)}
.btn-sm{padding:11px 20px;font-size:12px}

/* ============ HEADER ============ */
.head{
  position:fixed;inset:0 0 auto;z-index:60;
  transition:background var(--slow) var(--ease),border-color var(--slow) var(--ease),
             backdrop-filter var(--slow) var(--ease);
  border-bottom:1px solid transparent;
}
.head-in{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
  min-height:76px;
}
.head.is-stuck{
  background:rgba(20,32,26,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom-color:var(--line-solid);
}

.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand-mark{width:26px;height:34px;flex:0 0 auto}
.brand-mark path{stroke:var(--cream)}
.brand-mark circle{fill:var(--copper)}
.brand-word{
  font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.05em;
  color:var(--cream);white-space:nowrap;
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
}
.head.is-stuck .brand-word{opacity:1;transform:none}

.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);margin-inline:auto}
.nav a{
  font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream);opacity:.82;white-space:nowrap;
  padding-block:6px;position:relative;transition:opacity var(--fast) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform var(--fast) var(--ease);
}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{opacity:1;color:var(--amber)}

.head-end{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);flex:0 0 auto}
.lang{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.lang b{color:var(--amber);font-weight:500}
.lang span{color:var(--sage);opacity:.55;cursor:not-allowed}
.lang i{color:var(--sage);opacity:.4;font-style:normal}

.burger{display:none;width:44px;height:44px;position:relative;flex:0 0 auto}
.burger span{
  position:absolute;left:11px;right:11px;height:1.5px;background:var(--cream);
  transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
.head.is-open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.head.is-open .burger span:nth-child(2){opacity:0}
.head.is-open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{
  position:relative;overflow:hidden;background:var(--forest-deep);color:var(--cream);
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding-block:0;
}
/* the hero photograph — the design is photography-led (DESIGN_DIRECTION §4);
   the image carries the atmosphere, the scrim keeps the type legible. */
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
/* no scaling of any kind — a transformed raster goes soft, and the photo
   deserves its own pixels. object-fit does the framing, nothing else. */
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
/* two scrims with different jobs: a soft pool ONLY behind the type, and a
   top/bottom wash for the header and the foot bar. The flanks stay light so
   the canopy and the light shaft can breathe. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(68% 52% at 50% 47%,rgba(20,32,26,.62) 0%,rgba(20,32,26,.30) 62%,rgba(20,32,26,0) 100%),
    linear-gradient(180deg,rgba(20,32,26,.86) 0%,rgba(20,32,26,.30) 22%,rgba(20,32,26,.34) 58%,rgba(20,32,26,.94) 100%);
}
.hero-stag{
  position:absolute;right:clamp(-30px,2vw,60px);bottom:0;
  height:clamp(260px,62vh,760px);width:auto;opacity:.06;
  pointer-events:none;user-select:none;z-index:0;
}
.hero-in{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-block:calc(var(--u)*15) calc(var(--u)*4);
}
/* the mark speaks or it goes — no apologetic scratch above the name */
.hero-mark{width:clamp(74px,6.4vw,110px);height:auto;aspect-ratio:1;margin-bottom:calc(var(--u)*3.5)}
.hero-mark path{stroke:var(--cream)}
.hero-mark circle{fill:var(--amber)}
.lockup{display:flex;flex-direction:column;align-items:center;width:100%;max-width:760px}
.lockup-word{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(30px,7.2vw,84px);letter-spacing:.045em;line-height:1;
  white-space:nowrap;color:var(--cream);
}
.lockup-rule{width:100%;height:1px;background:var(--copper);margin-block:calc(var(--u)*2.5)}
.lockup-desc{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(10px,1.35vw,14px);letter-spacing:.4em;text-transform:uppercase;
  color:var(--amber);padding-left:.4em;
}
/* rhythm: identity → (breath) → message → (tight) → its own line → (breath) → action */
.hero-tagline{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,3.1vw,38px);line-height:1.2;color:var(--cream);
  margin-top:calc(var(--u)*5.5);
}
.hero-sub{
  margin-top:calc(var(--u)*1.75);max-width:56ch;
  color:rgba(241,235,222,.80);font-size:clamp(15px,1.3vw,17px);
}
/* Both actions are framed so both read as clickable; the fill carries the
   hierarchy. Their WORDING must stay distinct — two labels starting with
   "Ajánlat…" merged into one phrase and the pair became unreadable. */
.hero-ctas{display:flex;gap:calc(var(--u)*2);margin-top:calc(var(--u)*5);flex-wrap:wrap;justify-content:center;align-items:center}
.hero-foot{
  position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;
  padding-block:calc(var(--u)*3);border-top:1px solid var(--line-dark);gap:calc(var(--u)*2);
}
.hero-foot .eyebrow{color:var(--sage)}
.hero-foot .eyebrow.accent{color:var(--amber)}
.scroll-cue{
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sage);
}
.scroll-cue i{display:block;width:1px;height:22px;background:var(--amber);opacity:.6;font-style:normal;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.35}50%{transform:scaleY(1);opacity:.8}}

/* ============ INTRO ============ */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px);align-items:start}
.intro h2{max-width:16ch}
.intro-body p + p{margin-top:calc(var(--u)*2.5)}
.intro-meta{margin-top:calc(var(--u)*4);display:flex;gap:calc(var(--u)*4);flex-wrap:wrap}
.intro-meta div{border-left:1px solid var(--copper);padding-left:calc(var(--u)*2)}
.intro-meta b{display:block;font-family:var(--serif);font-weight:600;font-size:19px}
.intro-meta span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}

/* ============ BEMUTATKOZÁS ============
   Left-aligned like every other section (the page has one rhythm). The
   heading spans the width; below it the text and the facts each carry a
   column, so neither side is left empty. */
/* Every band spans the full measure, so no column can be left standing
   empty. The client's own strongest sentence is the focal point. */
/* the mark fills the second column, so nothing is left standing empty —
   and the section finally has something for the eye to land on */
.bemu-fo{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,22vw,290px);gap:clamp(32px,5vw,88px);align-items:center}
.bemu-pecset{width:100%;height:auto;color:var(--copper);opacity:.62}
.bemu-allitas{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.6vw,48px);line-height:1.14;letter-spacing:.003em;
  color:var(--ink);margin-block:calc(var(--u)*3) clamp(28px,3.6vw,44px);
  max-width:23ch;
}
/* the rule belongs to the column; the reading measure stays comfortable */
.bemu-szoveg{
  display:grid;gap:calc(var(--u)*2.5);
  padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line-light);
}
.bemu-szoveg p{max-width:62ch}
.bemu-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.5vw,56px);
  margin-top:clamp(40px,5vw,72px);
}
.bemu-meta div{border-top:1px solid var(--copper);padding-top:calc(var(--u)*2)}
.bemu-meta b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.5vw,20px)}
.bemu-meta span{
  display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone);margin-top:8px;line-height:1.75;
}
.is-dark .bemu-allitas{color:var(--cream)}
.is-dark .bemu-szoveg{border-top-color:var(--line-dark)}
.is-dark .bemu-szoveg p{color:var(--sage)}
.is-dark .bemu-meta div{border-top-color:var(--amber)}
.is-dark .bemu-meta b{color:var(--cream)}
.is-dark .bemu-meta span{color:var(--sage)}
.is-dark .bemu-pecset{color:var(--amber);opacity:.5}

/* ============ TWO WORLDS ============ */
.worlds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,36px);margin-top:calc(var(--u)*7)}
.world{
  position:relative;display:block;overflow:hidden;background:var(--forest-deep);
  min-height:clamp(340px,44vw,520px);color:var(--cream);
}
.world img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.world:hover img{transform:scale(1.04)}
.world::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,32,26,.18) 0%,rgba(20,32,26,.55) 52%,rgba(20,32,26,.92) 100%);
}
.world-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,2.6vw,36px)}
.world-in .eyebrow{color:var(--amber)}
.world h3{margin-block:calc(var(--u)*1.5) calc(var(--u)*1)}
.world p{color:var(--sage);font-size:15px;max-width:34ch}
.world-go{margin-top:calc(var(--u)*2.5);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:8px}
.world:hover .world-go i{transform:translateX(5px)}
.world-go i{font-style:normal;transition:transform var(--fast) var(--ease)}
.world-list{display:flex;gap:calc(var(--u)*1.5);flex-wrap:wrap;margin-top:calc(var(--u)*2)}
.world-list span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-indent:.12em;text-transform:uppercase;color:var(--cream);border:1px solid var(--line-solid);padding:4px 9px}

/* ============ PROCESS (01 → 02 → 03) ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:calc(var(--u)*8)}
.step{border-top:1px solid var(--line-dark);padding-top:calc(var(--u)*3)}
.step .n{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.2em;color:var(--amber)}
.step h3{margin-block:calc(var(--u)*1.5) calc(var(--u)*1.5)}
.step p{color:var(--sage);font-size:15.5px}
.steps-foot{margin-top:calc(var(--u)*7);display:flex;gap:calc(var(--u)*3);align-items:center;flex-wrap:wrap}

/* ============ SERVICES (the client's five, numbered) ============ */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,72px);margin-top:calc(var(--u)*7)}
.svc-item{display:grid;grid-template-columns:52px 1fr;gap:calc(var(--u)*2);padding-block:calc(var(--u)*3.5);border-top:1px solid var(--line-dark)}
.svc-item .n{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.18em;color:var(--amber);padding-top:5px}
.svc-item h3{font-size:clamp(18px,1.6vw,22px);margin-bottom:calc(var(--u)*1)}
.svc-item p{color:var(--sage);font-size:15px}

/* ============ SERVICE / ADVISORY PAGES ============ */
.szolg{display:flex;flex-direction:column}
.szolg-item{
  display:grid;grid-template-columns:clamp(56px,7vw,96px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,36px);align-items:start;
  border-top:1px solid var(--line-light);padding-block:clamp(28px,3.6vw,48px);
}
.szolg-item:last-child{border-bottom:1px solid var(--line-light)}
.szolg-item .n{
  font-family:var(--mono);font-weight:500;font-size:clamp(13px,1.3vw,16px);
  letter-spacing:.2em;color:var(--copper-deep);padding-top:8px;
}
.is-dark .szolg-item{border-color:var(--line-dark)}
.is-dark .szolg-item .n{color:var(--amber)}
.szolg-item h2{font-size:clamp(22px,2.4vw,32px);margin-bottom:calc(var(--u)*1.5);display:flex;align-items:center;gap:calc(var(--u)*1.5);flex-wrap:wrap}
.szolg-item .lede{max-width:64ch}

/* ============ OFFERS ============ */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,26px);margin-top:calc(var(--u)*7)}
.offer-price{
  font-family:var(--serif);font-weight:600;font-size:clamp(19px,1.7vw,23px);
  color:var(--ink);display:flex;align-items:baseline;gap:7px;
  white-space:nowrap;flex-wrap:wrap;
}
.offer-price small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:500}
.offer-extra{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--stone)}
/* a destination with no photograph yet — an honest panel, not a broken frame */
.offer-noimg{
  aspect-ratio:4/3;background:var(--forest);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.offer-noimg svg{width:64px;height:64px;opacity:.34}
.offer-noimg svg path{stroke:var(--cream)}
.offer-noimg svg circle{fill:var(--amber)}
.offer-noimg span{
  position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-indent:.18em;
  text-transform:uppercase;color:var(--sage);opacity:.7;
}
.offer{display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line-light)}
.is-paper .offer{background:var(--cream)}
.offer-img{aspect-ratio:4/3;overflow:hidden}
.offer-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.offer:hover .offer-img img{transform:scale(1.04)}
.offer-in{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1;gap:calc(var(--u)*1.5)}
.offer-place{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-deep);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.offer h3{font-size:clamp(19px,1.7vw,23px)}
.offer p{color:var(--stone);font-size:15px;flex:1}
/* fixed height so the price, the facts and the button sit on the same line
   in every card, however long the description is */
/* tall enough for the longest fact block (3 rows, one of them wrapping),
   so the price and the button sit on one line across every card */
.offer-facts{
  display:flex;flex-direction:column;gap:7px;min-height:98px;
  padding-top:calc(var(--u)*1.5);border-top:1px solid var(--line-light);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--stone);
}
.offer-facts b{color:var(--ink);font-weight:500}
.offer .btn{margin-top:calc(var(--u)*1)}

/* ============ SUBPAGE HEADS ============ */
/* the fixed header is 76px — every page head clears it deliberately */
.page-head{padding-top:clamp(140px,13vw,196px);padding-bottom:clamp(56px,7vw,96px)}
.page-head h1{margin-block:calc(var(--u)*2) calc(var(--u)*3);max-width:16ch}
.page-head .lede{max-width:62ch}

.dest-hero{position:relative;overflow:hidden;background:var(--forest-deep);color:var(--cream);isolation:isolate}
.dest-hero .hero-bg::after{
  background:
    linear-gradient(180deg,rgba(20,32,26,.90) 0%,rgba(20,32,26,.52) 34%,rgba(20,32,26,.72) 74%,rgba(20,32,26,.96) 100%),
    linear-gradient(90deg,rgba(20,32,26,.80) 0%,rgba(20,32,26,.30) 62%,rgba(20,32,26,.18) 100%);
}
.dest-hero-in{
  position:relative;z-index:1;
  padding-top:clamp(132px,12vw,180px);padding-bottom:clamp(56px,7vw,92px);
  min-height:clamp(420px,54vh,620px);display:flex;flex-direction:column;justify-content:flex-end;
}
.dest-hero-plain{background:var(--forest)}
.dest-hero h1{margin-block:calc(var(--u)*1.5) calc(var(--u)*2.5);font-size:clamp(38px,6vw,76px)}
.dest-hero .lede{max-width:52ch;color:var(--sage)}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:calc(var(--u)*3)}
.crumbs a{color:var(--amber)}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs i{font-style:normal;opacity:.45;margin-inline:6px}
.dest-meta{display:flex;gap:calc(var(--u)*3);flex-wrap:wrap;margin-top:calc(var(--u)*4)}
.dest-meta a{
  font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-indent:.14em;
  text-transform:uppercase;color:var(--amber);border:1px solid var(--line-dark);padding:8px 14px;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.dest-meta a:hover{border-color:var(--amber);background:rgba(217,164,94,.08)}

/* ============ FEATURED OFFER (top of a destination page) ============ */
.kiemelt{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  background:var(--cream);border:1px solid var(--line-light);
  margin-top:calc(var(--u)*7);align-items:stretch;
}
.kiemelt-kep{position:relative;overflow:hidden;min-height:clamp(260px,30vw,420px)}
.kiemelt-kep img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kiemelt-kep-ures{
  background:var(--forest);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:calc(var(--u)*2);
}
.kiemelt-kep-ures svg{width:64px;height:64px;opacity:.34}
.kiemelt-kep-ures svg path{stroke:var(--cream)}
.kiemelt-kep-ures svg circle{fill:var(--amber)}
.kiemelt-kep-ures span{
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.24em;text-indent:.24em;
  text-transform:uppercase;color:var(--sage);opacity:.75;
}
.kiemelt-in{
  padding:clamp(26px,3.4vw,52px);display:flex;flex-direction:column;
  align-items:flex-start;gap:calc(var(--u)*2);
}
.kiemelt-in h3{font-size:clamp(24px,2.8vw,38px)}
.kiemelt-in .lede{max-width:52ch}
.kiemelt-ar{
  font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.2vw,42px);
  color:var(--ink);display:flex;align-items:baseline;gap:9px;white-space:nowrap;flex-wrap:wrap;
  margin-top:calc(var(--u)*1);
}
.kiemelt-ar small{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--stone);font-weight:500;
}
.kiemelt-tenyek{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:calc(var(--u)*2) clamp(20px,2.6vw,40px);width:100%;
  padding-block:calc(var(--u)*2.5);border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
}
.kiemelt-tenyek dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.kiemelt-tenyek dd{font-family:var(--serif);font-weight:600;font-size:16px;margin-top:4px}
.kiemelt-in .btn{margin-top:calc(var(--u)*1)}

/* ============ SPECIES ============
   One species per row: the name spans the width, then TWO columns that start
   on the same line — data left, season right. Every block has the identical
   skeleton, so the page reads as a field guide, not a ragged grid. */
.fajok{display:flex;flex-direction:column;gap:clamp(36px,4.4vw,68px);margin-top:calc(var(--u)*7)}
.faj{
  display:grid;grid-template-columns:clamp(180px,18vw,252px) minmax(0,1fr);
  gap:clamp(22px,2.8vw,44px);
  border-top:1px solid var(--line-light);padding-top:calc(var(--u)*3.5);
}
/* the photo fills the row so the pair reads as one block, never a short
   image with a gap under it */
.faj-foto{align-self:stretch;min-height:clamp(240px,26vw,340px);overflow:hidden;background:var(--parchment)}
.is-paper .faj-foto{background:var(--cream)}
.faj-foto img{width:100%;height:100%;object-fit:cover}
/* the slot waits for Laci's photographs — a panel, never a broken frame */
.faj-foto-ures{
  background:var(--forest);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:calc(var(--u)*2);
}
.faj-foto-ures svg{width:56px;height:56px;opacity:.34}
.faj-foto-ures svg path{stroke:var(--cream)}
.faj-foto-ures svg circle{fill:var(--amber)}
.faj-foto-ures span{
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.24em;
  text-indent:.24em;text-transform:uppercase;color:var(--sage);opacity:.75;
}
/* two columns, not three: the data needs room, and the season panel — one
   line for a hare, six for a red stag — must run wide or it leaves holes */
.faj-torzs{display:flex;flex-direction:column}
.faj-head{margin-bottom:calc(var(--u)*3)}
.faj-head h3{font-size:clamp(22px,2.3vw,30px)}
.faj-latin{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--stone);margin-top:5px}
.faj-latin i{font-style:italic}
.faj-data{width:100%}
.faj-row{display:grid;grid-template-columns:minmax(150px,23%) 1fr;gap:calc(var(--u)*2.5);padding-block:9px;border-bottom:1px solid var(--line-light)}
.faj-row dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);line-height:1.7}
.faj-row dd{font-size:15px;line-height:1.55}
/* the season is the differentiator — a wide strip under the data, so six
   entries lay out in columns instead of stacking into a tall sliver */
.faj-idany{margin-top:calc(var(--u)*3);background:var(--parchment);border-left:2px solid var(--copper);padding:calc(var(--u)*2.5) calc(var(--u)*3)}
.is-paper .faj-idany{background:var(--cream)}
.faj-idany ul{margin-top:calc(var(--u)*1.5);display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:7px clamp(20px,3vw,44px)}
.faj-idany li{font-size:15px}
.faj-sc{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-deep);margin-right:8px}

/* ============ HUB / DEST VARIANTS ============ */
.worlds-one{grid-template-columns:1fr}
.worlds-one .world{min-height:clamp(320px,34vw,440px)}
.worlds-three{grid-template-columns:repeat(3,1fr)}
.world-plain{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:16%;background:var(--forest)}
.world-plain svg{width:74px;height:74px;opacity:.3}
.world-plain svg path{stroke:var(--cream)}
.world-plain svg circle{fill:var(--amber)}
.offers-one{grid-template-columns:minmax(0,520px);justify-content:start}
.dest-cta{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,64px);flex-wrap:wrap}
.dest-cta h2{margin-block:calc(var(--u)*2) calc(var(--u)*2)}
.dest-cta .lede{max-width:46ch}

/* ============ TRUST ============ */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,56px)}
.trust-item h3{font-size:clamp(19px,1.8vw,24px);margin-bottom:calc(var(--u)*1.5)}
.trust-item p{color:var(--sage);font-size:15.5px}
.trust-item .eyebrow{display:block;margin-bottom:calc(var(--u)*2)}
.partners{margin-top:clamp(40px,5vw,72px);padding-top:calc(var(--u)*4);border-top:1px solid var(--line-dark);display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.partners .eyebrow{color:var(--sage)}
.partner-slot{
  height:44px;min-width:118px;border:1px dashed var(--line-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-indent:.16em;
  color:var(--sage);opacity:.55;
}

/* ============ KNOWLEDGE (Tanácsadás + Hírek) ============ */
.know{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);margin-top:calc(var(--u)*7)}
.know-card{display:flex;flex-direction:column;gap:calc(var(--u)*1.5);border-top:1px solid var(--line-light);padding-top:calc(var(--u)*3)}
.know-card .eyebrow{font-size:11px}
.know-card h3{font-size:clamp(18px,1.5vw,21px)}
.know-card p{color:var(--stone);font-size:15px}
.know-card .more{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-deep);margin-top:auto;padding-top:calc(var(--u)*2)}

/* ============ CONTACT ============ */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.contact h2{max-width:14ch}
.contact-lede{margin-top:calc(var(--u)*2.5)}
.contact-list{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.contact-row{
  display:flex;align-items:baseline;gap:calc(var(--u)*2.5);
  border-bottom:1px solid var(--line-dark);padding-bottom:calc(var(--u)*2);flex-wrap:wrap;
}
.contact-row .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);min-width:104px}
.contact-row .v{font-family:var(--serif);font-size:clamp(18px,1.7vw,23px);color:var(--cream)}
.contact-social{display:flex;gap:calc(var(--u)*2);margin-top:calc(var(--u)*3);flex-wrap:wrap}
.contact-social a{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;color:var(--sage);border:1px solid var(--line-solid);padding:9px 15px;transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.contact-social a:hover{color:var(--amber);border-color:var(--amber)}

/* ============ NEWS ============ */
.hirek{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(24px,3vw,44px)}
.hir-kartya{display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line-light)}
.is-paper .hir-kartya{background:var(--cream)}
.hir-kep{aspect-ratio:16/10;overflow:hidden}
.hir-kep img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.hir-kartya:hover .hir-kep img{transform:scale(1.04)}
.hir-in{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:calc(var(--u)*1.5);flex:1}
.hir-in time{color:var(--copper-deep)}
.hir-in h2{font-size:clamp(20px,1.9vw,25px)}
.hir-in p{color:var(--stone);font-size:15px;flex:1}
.hir-in .more{margin-top:auto;padding-top:calc(var(--u)*1.5)}
.hir-ures{
  border:1px dashed var(--line-light);padding:clamp(32px,5vw,72px);
  display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*3);
}
.hir-torzs{max-width:74ch}
.hir-torzs .hir-kep{aspect-ratio:16/9;margin-bottom:clamp(28px,3.6vw,48px)}
.hir-szoveg p{font-size:17px;line-height:1.75;margin-bottom:calc(var(--u)*2.5)}

/* ============ ADMIN (news composer) ============ */
.admin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.admin-elonezet{display:flex;flex-direction:column;gap:calc(var(--u)*3);position:sticky;top:110px}
.admin-elonezet > .eyebrow{display:block}
.admin-kimenet{border-top:1px solid var(--line-light);padding-top:calc(var(--u)*3);display:flex;flex-direction:column;gap:calc(var(--u)*2);align-items:flex-start}
.admin-kimenet pre{
  width:100%;background:var(--forest-deep);color:var(--cream);
  font-family:var(--mono);font-size:12px;line-height:1.6;
  padding:calc(var(--u)*2.5);overflow-x:auto;white-space:pre;
}
.admin-kimenet code{font-family:var(--mono);font-size:12px;background:var(--parchment);padding:1px 5px}
.admin-jegyzet{border-left:2px solid var(--copper);background:var(--parchment);padding:calc(var(--u)*2.5) calc(var(--u)*3)}
.admin-jegyzet .minta{margin-bottom:calc(var(--u)*1.5)}
.admin-jegyzet p{font-size:14.5px;color:var(--stone);margin:0}

/* ============ LEGAL PAGES ============ */
.jogi{max-width:74ch}
.jogi h2{font-size:clamp(21px,2.1vw,27px);margin-block:clamp(36px,4vw,56px) calc(var(--u)*2.5)}
.jogi h2:first-of-type{margin-top:0}
.jogi p{margin-bottom:calc(var(--u)*2)}
.jogi a{color:var(--copper-deep);border-bottom:1px solid var(--line-light)}
.jogi a:hover{border-bottom-color:var(--copper)}
.jogi-figyelem{
  border-left:2px solid var(--copper);background:var(--parchment);
  padding:calc(var(--u)*3);margin-bottom:clamp(32px,4vw,52px);
}
.jogi-figyelem .minta{margin-bottom:calc(var(--u)*1.5)}
.jogi-figyelem p{margin:0;font-size:15px;color:var(--stone)}
.jogi-lista div{
  display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:calc(var(--u)*2.5);
  padding-block:11px;border-bottom:1px solid var(--line-light);
}
.jogi-lista dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);line-height:1.8}
.jogi-lista dd{font-size:15.5px}
.jogi-datum{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--stone);margin-top:calc(var(--u)*4)}
.foot-jogi{display:flex;gap:calc(var(--u)*2.5);flex-wrap:wrap}
.foot-jogi a{font-family:var(--mono);font-size:11px;letter-spacing:.1em}

/* ============ GALLERY ============
   CSS columns, not a grid: Laci's photographs mix portrait and landscape,
   and columns let each keep its own proportion without cropping. */
.galeria{columns:3;column-gap:clamp(14px,1.8vw,24px)}
.gal-kep{break-inside:avoid;margin:0 0 clamp(14px,1.8vw,24px);background:var(--parchment);overflow:hidden}
.gal-kep img{width:100%;height:auto;display:block;cursor:zoom-in;transition:opacity var(--fast) var(--ease)}
.gal-kep img:hover{opacity:.88}

.nagyito{
  position:fixed;inset:0;z-index:120;background:rgba(12,20,16,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,64px);
}
.nagyito img{max-width:100%;max-height:100%;object-fit:contain}
.nagyito button{
  position:absolute;color:var(--cream);font-size:30px;line-height:1;
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-solid);background:rgba(20,32,26,.6);
  transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
.nagyito button:hover{color:var(--amber);border-color:var(--amber)}
.nagyito-zar{top:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px)}
.nagyito-lep{top:50%;transform:translateY(-50%);font-size:22px}
.nagyito-elozo{left:clamp(8px,1.6vw,24px)}
.nagyito-kovetkezo{right:clamp(8px,1.6vw,24px)}

/* ============ CONTACT PAGE + ENQUIRY FORM ============ */
.kapcs{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.kapcs-form .sec-head{margin-bottom:calc(var(--u)*5)}

.urlap{display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.urlap-sor{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3)}
.mezo{display:flex;flex-direction:column;gap:8px}
.mezo-cimke{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.mezo-cimke i{font-style:normal;color:var(--copper-deep)}
.mezo input,.mezo select,.mezo textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line-light);
  padding:13px 15px;width:100%;transition:border-color var(--fast) var(--ease);
}
.mezo textarea{resize:vertical;min-height:120px;line-height:1.6}
.mezo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--copper-deep) 50%),linear-gradient(135deg,var(--copper-deep) 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:42px}
.mezo input:focus,.mezo select:focus,.mezo textarea{outline:none}
.mezo input:focus,.mezo select:focus,.mezo textarea:focus{border-color:var(--copper)}
.mezo input::placeholder,.mezo textarea::placeholder{color:var(--stone);opacity:.55}
.mezo-hiba{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#8C3A22}
.mezo.hibas input,.mezo.hibas select,.mezo.hibas textarea{border-color:#8C3A22}
.mezo.hibas .mezo-hiba{display:block}

.mezo-jelolo{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:14.5px;color:var(--stone)}
.mezo-jelolo input{width:20px;height:20px;margin-top:2px;accent-color:var(--copper)}
.mezo-jelolo i{font-style:normal;color:var(--copper-deep)}
.mezo-jelolo a{color:var(--copper-deep);border-bottom:1px solid var(--line-light)}
.mezo-jelolo a:hover{border-bottom-color:var(--copper)}
.mezo-jelolo .mezo-hiba{grid-column:2}
.mezo-jelolo.hibas .mezo-hiba{display:block}

.urlap-lab{display:flex;align-items:center;gap:calc(var(--u)*3);flex-wrap:wrap;margin-top:calc(var(--u)*1)}
.urlap-jegyzet{font-size:12.5px;color:var(--stone);max-width:44ch;line-height:1.55}
.urlap-jegyzet .minta{margin-right:6px}

.urlap-kesz{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*2.5)}
.urlap-kesz .pipa{width:56px;height:56px;color:var(--copper)}
.urlap-kesz h3{font-size:clamp(24px,2.6vw,32px)}
.kesz-lista{width:100%;border-top:1px solid var(--line-light)}
.kesz-lista div{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:calc(var(--u)*2);padding-block:11px;border-bottom:1px solid var(--line-light)}
.kesz-lista dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.kesz-lista dd{font-size:15px}

.kapcs-adat{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,44px)}
.kapcs-blokk{border-top:1px solid var(--line-light);padding-top:calc(var(--u)*3)}
.kapcs-blokk .eyebrow{display:block;margin-bottom:calc(var(--u)*2.5)}
.kapcs-blokk .contact-row{border-bottom-color:var(--line-light);gap:calc(var(--u)*2)}
.kapcs-blokk .contact-row .k{color:var(--copper-deep);min-width:88px}
.kapcs-blokk .contact-row .v{color:var(--ink);font-size:clamp(16px,1.4vw,19px)}
.kapcs-blokk .contact-social a{color:var(--stone);border-color:var(--line-light)}
.kapcs-blokk .contact-social a:hover{color:var(--copper-deep);border-color:var(--copper)}
.kapcs-menet ol{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.kapcs-menet li{display:grid;grid-template-columns:34px 1fr;gap:calc(var(--u)*1.5);font-size:14.5px;color:var(--stone)}
.kapcs-menet li span{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--copper-deep)}

/* ============ FOOTER ============ */
.foot{background:#0F1813;color:var(--sage);padding-block:clamp(48px,6vw,80px) calc(var(--u)*4)}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,56px)}
.foot h4{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:calc(var(--u)*2.5)}
.foot li + li{margin-top:calc(var(--u)*1.25)}
.foot a{font-size:14.5px;transition:color var(--fast) var(--ease)}
.foot a:hover{color:var(--cream)}
.foot-brand .brand-word{opacity:1;transform:none;font-size:19px}
.foot-brand p{margin-top:calc(var(--u)*2);font-size:14.5px;max-width:34ch}
.foot-bottom{
  margin-top:clamp(36px,4.5vw,64px);padding-top:calc(var(--u)*3);
  border-top:1px solid var(--line-solid);
  display:flex;justify-content:space-between;gap:calc(var(--u)*2);flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--sage);opacity:.7;
}

/* ============ RESPONSIVE ============ */
@media (max-width:1060px){
  .nav{
    position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;
    gap:0;background:rgba(20,32,26,.98);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line-solid);
    padding:calc(var(--u)*2) var(--pad) calc(var(--u)*4);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);
  }
  .head.is-open .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding-block:15px;font-size:14px;border-bottom:1px solid var(--line-solid)}
  .nav a::after{display:none}
  .burger{display:block;order:3}
  .head-end{margin-left:auto}
  .head-end .btn{display:none}
  .brand-word{opacity:1;transform:none}
}
@media (max-width:1180px){
  .offers{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .galeria{columns:2}
  .worlds-three{grid-template-columns:1fr}
  .faj{grid-template-columns:1fr;gap:calc(var(--u)*3)}
  .faj-foto{aspect-ratio:16/9;max-height:320px}
  .kiemelt{grid-template-columns:1fr}
  .kiemelt-kep{min-height:240px;aspect-ratio:16/9}
  .kapcs,.admin{grid-template-columns:1fr}
  .admin-elonezet{position:static}
}
@media (max-width:880px){
  .intro,.contact{grid-template-columns:1fr}
  .bemu-fo{grid-template-columns:1fr;gap:clamp(28px,6vw,48px)}
  .bemu-pecset{width:clamp(124px,32vw,180px);justify-self:center}
  .bemu-meta{grid-template-columns:1fr;gap:calc(var(--u)*3)}
  .worlds,.steps,.trust,.know,.svc{grid-template-columns:1fr}
  .offers{grid-template-columns:repeat(2,1fr)}
  .offers-one{grid-template-columns:1fr}
  .dest-cta{flex-direction:column;align-items:flex-start}
  .foot-cols{grid-template-columns:1fr 1fr}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:calc(var(--u)*1.5)}
  .world{min-height:300px}
}
@media (max-width:560px){
  .galeria{columns:1}
  .offers{grid-template-columns:1fr}
  .urlap-sor{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%;justify-content:center}
  .contact-row .k{min-width:100%}
  .partners{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2)}
  .partners .eyebrow{grid-column:1/-1}
  .partner-slot{min-width:0;width:100%}
}