/* ==========================================================================
   Campona Kalandpark Jatszohaz - atmeneti oldal
   Token-alapu stiluslap. Hardcoded szin/terkoz TILOS a komponensekben.
   ========================================================================== */

/* ==========================================================================
   Webfont - ONKISZOLGALAS (K20)
   A betuk a sajat kiszolgalonkrol jonnek, NEM a fonts.gstatic.com-rol.
   Ok: CDN-rol a latogato IP-je es User-Agentje minden oldalletoltesnel
   kimegy a Google fele, elozetes hozzajarulas nelkul - ez volt az egyetlen
   akaratlan, harmadik fel fele iranyulo adataramlas az oldalon.
   Sulyok: Jost 600 (cimsor) + DM Sans 400/700 (szoveg) - amit a lap tenylegesen
   hasznal. Az 500-as vagat es a cirill subset kimaradt: sehol nincs ra szukseg.
   ========================================================================== */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* --- Szin --------------------------------------------------------------
     A markaszinek a HATALYOS logo VEKTORABOL (CJ_logo_2024-02.svg, 2024-10-04),
     nem mintavetelezve: a fajlban szereplo egzakt ertekek.
     A 2022-es .ai ELAVULT (menta+magenta) - user megerositette 2026-09-16:
     a logo szinei Sarga, Piros, Lila, Kek. Forras: brand-forras/
     Uj szin CSAK a logobol johet.                                         */
  --ground:  #f4f7ff;   /* hideg papir - tisztasag, higienia (NEM a logobol) */
  --paper:   #ffffff;
  --ink:     #3a3a3a;   /* A LOGO wordmarkjanak szine */
  --muted:   #63636a;
  --line:    #e0e3f0;
  --ground-rgb: 244 247 255;
  --on-grape:  #ffffff;
  --on-grape-muted: #e4ddeb;
  --on-ink-muted:   #bcbec4;
  --on-ink-line:    #55555c;

  /* A logo negy figuraja (2024): */
  --grape:   #6b4192;   /* jobb figura - LILA, dominans (gomb, link, cimke) */
  --punch:   #e7343e;   /* felso figura - PIROS, akcent */
  --sun:     #fbb81b;   /* bal figura - SARGA */
  --sky:     #1894d2;   /* also figura - KEK */

  /* Levezetett arnyalatok (nem uj szinek): */
  --grape-d: #53327a;   /* hover */
  --grape-l: #ede8f2;   /* halvany lila hatter */
  --punch-t: #c4212b;   /* a --punch SZOVEGKENT: a #e7343e csak 3,95:1 a papiron */
  --punch-l: #fce7e8;   /* halvany piros hatter */
  --sky-t:   #15709f;   /* a --sky SZOVEGKENT: a #1894d2 csak 3,16:1 */
  /* --sun SZOVEGKENT NEM hasznalhato: 1,64:1. Kizarolag dekoracio. */

  /* --- Terkoz ----------------------------------------------------------- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;
  --s9: 7rem;

  /* --- Forma ------------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* --- Tipografia ------------------------------------------------------- */
  /* Jost = a logo wordmarkjanak Futura-jellegu parja (hegyes A, alapvonalig ero M,
     kor alaku O). DM Sans a folyoszoveghez: nagyobb x-magassag, tomorebb sor.     */
  --font-display: "Jost", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs:   .8125rem;
  --t-sm:   .9375rem;
  --t-base: 1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.625rem;
  --t-2xl:  2.25rem;
  --t-3xl:  clamp(2.5rem, 7vw, 4rem);
  --t-hero: clamp(2.75rem, 11vw, 6.5rem);

  /* Sorhossz. A ch a helyes egyseg (a betumerettel egyutt skalazodik) -
     csak az ertek volt rossz: 64ch ~95 karaktert adott. Merve ebben a
     betuben: 1ch = 1,5625 atlagos karakter, tehat 46ch ~= 72 karakter,
     BARMILYEN betumereten. (rem-mel a kisebb szovegek lettek tul hosszuak.) */
  --measure: 46ch;
  --wrap: 1120px;
  --gutter: 1rem;
}

@media (min-width: 40em) { :root { --gutter: 2rem; } }

/* ==========================================================================
   Alap
   ========================================================================== */

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

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: hidden;
  /* Ha egy szo onmagaban szelesebb, mint a doboz, torjon - ne toljon ki
     mindent. Normal meretnel soha nem lep be; 200%-os szovegnagyitasnal
     (WCAG 1.4.4) viszont a hosszu magyar szavak enelkul kilognak. */
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
  /* A cimsor a legnagyobb betu -> itt lognak ki eloszor a hosszu szavak.
     A lang="hu" miatt a bongeszo rendes elvalasztassal tori oket. */
  hyphens: auto;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); letter-spacing: -.01em; line-height: 1.2; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }

a { color: var(--grape); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--punch-t); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--punch);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm); z-index: 200;
}
.skip:focus { left: var(--s4); top: var(--s4); }

/* ==========================================================================
   Fejlec
   ========================================================================== */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--ground-rgb) / .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-head__inner {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 66px;
  /* Nagy szovegmeretnel (WCAG 1.4.4, 200% szoveg) a sor tordelhessen,
     kulonben a markanev kitolja a hamburgert a kepbol. */
  flex-wrap: wrap;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; flex: 0 1 auto; min-width: 0; text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1.1;
  color: var(--ink);
}
.brand:hover { color: var(--grape); }
.brand__mark { display: block; width: auto; height: 34px; flex: 0 0 auto; }
@media (min-width: 52em) {
  .brand { font-size: 1.1875rem; gap: var(--s3); }
  .brand__mark { height: 40px; }
}

.nav-toggle {
  margin-left: auto; flex: 0 0 auto;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding-inline: var(--s3);
  font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars { transition: background-color .15s ease; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
  transition: top .18s cubic-bezier(.2,.8,.25,1), transform .18s cubic-bezier(.2,.8,.25,1);
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

.nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgb(58 58 58 / .5);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .2s ease, transform .24s cubic-bezier(.2, .8, .25, 1),
              visibility .24s;
}
.nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

/* A menusorok lepcsozetesen erkeznek - egyetlen mozdulat, nem effekt-halmaz */
@media (prefers-reduced-motion: no-preference) {
  .nav[data-open="true"] li { animation: menusor .34s cubic-bezier(.2,.8,.25,1) both; }
  .nav[data-open="true"] li:nth-child(1) { animation-delay: .04s; }
  .nav[data-open="true"] li:nth-child(2) { animation-delay: .08s; }
  .nav[data-open="true"] li:nth-child(3) { animation-delay: .12s; }
  .nav[data-open="true"] li:nth-child(4) { animation-delay: .16s; }
}
@keyframes menusor { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.nav ul { list-style: none; margin: 0; padding: var(--s3) var(--gutter) var(--s5); }
.nav li + li { border-top: 1px solid var(--line); }
.nav a {
  display: block; padding: var(--s3) 0;
  font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--grape); }

@media (min-width: 52em) {
  .nav-toggle { display: none; }
  .nav {
    position: static; margin-left: auto;
    opacity: 1; visibility: visible; transform: none; transition: none;
    background: none; border: 0; box-shadow: none;
  }
  .nav li { animation: none !important; }
  .nav ul { display: flex; gap: var(--s5); padding: 0; }
  .nav li + li { border-top: 0; }
  .nav a { padding: var(--s3) 0; font-size: var(--t-sm); min-height: 44px; display: flex; align-items: center; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--punch); }
}

/* ==========================================================================
   Gombok
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--s3) var(--s5);
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: var(--t-base); font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .14s ease, background-color .14s ease, color .14s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--grape); color: var(--paper); }
.btn--primary:hover { background: var(--grape-d); color: var(--paper); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--ground); }

/* ==========================================================================
   Hero - a labdameder. Ez az oldal EGYETLEN merész eleme.
   ========================================================================== */

.hero { position: relative; padding-block: var(--s8) var(--s7); overflow: hidden; }

.pit { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pit span {
  position: absolute; display: block; border-radius: 50%;
  opacity: .7;
}
/* A labdak a szoveg melle esnek, nem ala: mobilon csak a jobb szelen,
   nagyobb kepernyon a szovegoszlopon kivuli jobb savban. */
.pit span[data-on="lg"] { display: none; }

@media (min-width: 52em) {
  .pit { left: 46%; }
  .pit span { opacity: .85; }
  .pit span[data-on="lg"] { display: block; }
  .pit span[data-on="sm"] { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .pit span { animation: drop .9s cubic-bezier(.2, .85, .3, 1.02) both; }
}
@keyframes drop {
  from { transform: translateY(-55vh) scale(.6); opacity: 0; }
  to   { transform: translateY(0) scale(1); }
}

.hero__inner { position: relative; z-index: 1; }

.hero__title {
  font-size: var(--t-hero);
  letter-spacing: -.03em;
  /* A Jost "J"-je melyen lelog - kulonben a lead beleer a szarkapcsaba */
  margin-bottom: var(--s6);
  max-width: 14ch;
}
.hero__title span { display: block; }
.hero__title .is-grape { color: var(--grape); }

.hero__lead {
  font-size: var(--t-lg); line-height: 1.45;
  max-width: 34ch; margin-bottom: var(--s6);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }

/* Nyitva-allapot jelzo */
.status {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: var(--s2) var(--s4);
  font-size: var(--t-sm); font-weight: 600;
}
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.status[data-state="open"]   .status__dot { background: #1a9e5c; }  /* nyitva-jelzes: nem markaszin, hanem allapot */
.status[data-state="closed"] .status__dot { background: var(--punch-t); }
.status__hours { font-weight: 400; color: var(--muted); }

/* ==========================================================================
   Szekciok
   ========================================================================== */

.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s7); }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: var(--ground); }
.section--ink h2 { color: var(--paper); }
.section--ink a { color: var(--sun); }
.section--ink a:hover { color: var(--paper); }

.section__intro { margin-bottom: var(--s6); }
.section__intro p { max-width: var(--measure); }
.section__intro p:last-child { margin-bottom: 0; }

/* Szeles kepernyon: cim balra, bevezeto szoveg jobbra.
   Igy a ketto EGYUTT tolti ki a szelesseget, es nem ugy nez ki, mintha a
   szoveg a bal hasabban ragadt volna. (A korabbi max-width a KONTENEREN
   volt - attol allt meg minden feluton.) */
/* Ket hasab CSAK akkor, ha tenyleg van mit a masodikba tenni: a :has(> p)
   kapu. Ha az intro csak egy <h2>, a racs a cimet a bal felbe szoritana es
   a jobb fel ures maradna - pont az a "ket hasabra tort oldal" latvany,
   ami ellen ez az egesz atnezes szol. (Ket ilyen hely volt: a nyitolap
   "Gyakori kerdesek" es a kapcsolat "Mielott elindulsz" cime.) */
@media (min-width: 64em) {
  .section__intro:has(> p) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--s4) var(--s7); align-items: start;
  }
  /* A cim az ELSO oszlop, a bekezdesek MIND a masodik - explicit hely-
     kijelolessel. Automatikus elhelyezessel a masodik bekezdes a cim ALA,
     a bal oszlopba esett (a-park "Es a szuloknek"), es mellette ures maradt
     a jobb fel. Pont az a hiba, ami ellen ez a rács van. */
  .section__intro:has(> p) > h2 { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .section__intro:has(> p) > p  { grid-column: 2; max-width: none; }
  .section__intro:has(> p) > p:not(:last-child) { margin-bottom: var(--s4); }
}
/* Keskeny konteneRben ne tordeljunk ketfele - ott nincs ures hely */
.wrap--szoveg .section__intro { display: block; }
.wrap--szoveg .section__intro > h2 { margin-bottom: var(--s4); }

/* Tenyek - nem kartyak, hanem egy elvalasztott lista */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.facts li {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline;
  padding-block: var(--s4); border-top: 1px solid var(--line);
}
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts b {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl);
  letter-spacing: -.02em; color: var(--grape);
  flex: 0 0 5.5ch;
}
/* auto-fit, NEM fix ket oszlop: a TUV-sor kivetele utan harom teny maradt,
   es a 2x2 racsban a negyedik cella uresen tatongott - pont az a fel-ures
   sav, amit a hasabok-kapu tilt. Az auto-fit a felesleges savot 0-ra huzza,
   igy a sor barmennyi tetelnel kitolt. */
@media (min-width: 40em) {
  .facts { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); column-gap: var(--s7); }
}

/* Jatek-lista: EGYSEGES meret, racsban.
   Volt egy verzio, ahol a betumeret a jatek meretet kodolta (15 meteres
   ugralovar = nagy, leghoki = kicsi). Elmeletben informacio, gyakorlatban
   "zsarololevel": ot kulonbozo betumeret osszezsufolva, a sorok kozepen
   torve. A nezo nem meretnek latja, hanem rendetlensegnek. Kidobva. */
.jatekok {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0 var(--s6); grid-template-columns: 1fr;
}
@media (min-width: 40em) { .jatekok { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .jatekok { grid-template-columns: repeat(3, 1fr); } }

.jatekok li {
  display: flex; align-items: baseline; gap: var(--s3);
  padding-block: var(--s3); border-top: 1px solid var(--line);
  font-weight: 600; min-width: 0;
}
.jatekok li::before {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--grape); transform: translateY(-.15em);
}
.jatekok li:nth-child(4n+1)::before { background: var(--sun); }
.jatekok li:nth-child(4n+2)::before { background: var(--punch); }
.jatekok li:nth-child(4n+3)::before { background: var(--sky); }
.jatekok li:nth-child(4n+4)::before { background: var(--grape); }

.jatekok__note { margin-top: var(--s5); color: var(--muted); font-size: var(--t-sm); max-width: var(--measure); }

/* ==========================================================================
   Ar-tablazatok - a savok maguk hordozzak az informaciot
   ========================================================================== */

.band { margin-bottom: var(--s7); }
.band:last-child { margin-bottom: 0; }
.band__head {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline;
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 3px solid var(--ink);
}
.band__head h3 { margin: 0; }
.band__when { color: var(--muted); font-size: var(--t-sm); }

.rate { list-style: none; margin: 0; padding: 0; }
.rate li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--s2) var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.rate__what { flex: 1 1 12rem; min-width: 0; }
.rate__what { font-weight: 600; }
.rate__when { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--muted); }
.rate__sum {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-xl); letter-spacing: -.02em;
  /* Nincs nowrap: az ezres elvalaszto U+202F (keskeny nem-toro szokoz),
     tehat "3 800 Ft" igy is egyben marad, de a "/" torhet. */
  flex: 0 0 auto; max-width: 100%;
}
.rate li[data-lead="true"] .rate__sum { color: var(--grape); }

.note {
  background: var(--grape-l); border-radius: var(--r-md);
  padding: var(--s5); margin-top: var(--s6);
  /* A DOBOZ szukul a sorhosszra (mérték + belső padding), nem a benne levo
     szoveg - igy a doboz belsejeben nincs ures jobb fel, es a szoveg
     ugyanarra az oszlopra igazodik, mint a szekcio bevezetoje. */
  max-width: calc(var(--measure) + var(--s5) * 2);
}
.note--punch { background: var(--punch-l); }
/* Datumhoz kotott kozlemeny (data-until): a JS a lejarat utan elrejti.
   !important: a szeles .note:has() grid-szabalya specifikusabb (merve). */
[data-until][hidden] { display: none !important; }
.note--szunet { margin-top: 0; margin-bottom: var(--s6); }
.hours + .note--szunet { margin-top: var(--s5); margin-bottom: 0; }
.note .hours { margin-block: 0 var(--s4); }
.hours b { white-space: nowrap; }
.note .hours li { border-color: var(--line); }
.note > :last-child { margin-bottom: 0; }
.note h2, .note h3 { font-size: var(--t-lg); letter-spacing: -.01em; line-height: 1.2; margin-bottom: var(--s3); }

/* Szeles szekcioban a cimes doboz ugyanazt a rendet koveti, mint a szekcio
   bevezetoje: cim balra, szoveg jobbra, a doboz teljes szelessegu. Kulonben
   egy 600 px-es doboz all a 1120 px-es savban, es mellette ures a fel oldal.
   A :has(h3) kapu kell: cim nelkuli dobozban nincs mit balra tenni. */
@media (min-width: 64em) {
  .wrap:not(.wrap--szoveg) .note:has(> h2, > h3) {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: var(--s3) var(--s7); align-items: start;
    padding: var(--s6);
  }
  .wrap:not(.wrap--szoveg) .note:has(> h2, > h3) > :is(h2, h3) {
    grid-column: 1; grid-row: 1 / -1; margin-bottom: 0;
  }
  .wrap:not(.wrap--szoveg) .note:has(> h2, > h3) > :not(h2):not(h3) { grid-column: 2; }
}

/* ==========================================================================
   Zsur-csomagok - itt a tartalom valoban parhuzamos, tehat itt van kartya
   ========================================================================== */

.packs { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
.packs > * { min-width: 0; }
@media (min-width: 40em) { .packs { grid-template-columns: 1fr 1fr; } }

.pack {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s6);
}
.pack--lead { border-color: var(--grape); border-width: 2px; }
.pack__time { font-family: var(--font-display); font-weight: 600; font-size: var(--t-2xl); letter-spacing: -.02em; margin: 0; }
.pack__sum { font-size: var(--t-xl); font-weight: 700; color: var(--grape); margin: var(--s2) 0 0; }
.pack__sum small { font-size: var(--t-sm); font-weight: 400; color: var(--muted); }

.checks { list-style: none; margin: 0; padding: 0; }
@media (min-width: 60em) {
  .checks--ket-hasab { columns: 2; column-gap: var(--s8); }
  .checks--ket-hasab li { break-inside: avoid; }
}
.checks li { position: relative; padding-left: 1.75rem; margin-bottom: var(--s2); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--punch);
}

.rules { list-style: none; margin: 0; padding: 0; }
.rules li { padding-block: var(--s3); border-bottom: 1px solid var(--line); max-width: var(--measure); }
.rules li:first-child { border-top: 1px solid var(--line); }

/* Csoportok egymas mellett szeles kepernyon.
   Miert NEM a listat hasaboljuk: a max-width nem csak a szoveget, hanem a
   doboz szelet is levagja, tehat az elvalaszto vonal is megall feluton -
   ugy nez ki, mintha az oldal ket hasabra lenne osztva es csak a bal
   oldalon lenne tartalom. A listan beluli `columns` viszont a csoportokat
   tori szet, es a kozeikbe ures csikok kerulnek. A helyes megoldas: a
   CSOPORTOKAT (cim + lista) tesszuk egymas melle, egyben. */
.tudnivalok { display: grid; gap: var(--s7); }
.tudnivalok > div { min-width: 0; }
.tudnivalok h3 { margin-top: 0; }
.tudnivalok .rules li { max-width: none; }

/* Szeles kepernyon NEM 1fr 1fr racs, hanem kiegyensulyozott hasab.
   A racs sorokba kenyszeriti a csoportokat, ezert ha 3 csoport van (szulinap)
   vagy ha ket csoport hossza nagyon elter (a-park: 7 vs 4 sor), a sor vegen
   ures cella marad - pont a "ket hasab, de csak a balban van szoveg" latvany.
   A hasab magassagra egyensulyoz, igy nincs arva cella.
   FIGYELEM: a `columns` a LISTAN rossz volt (szetvagta a csoportokat); itt a
   KONTENEREN van, es a break-inside: avoid tartja egyben a csoportokat.
   Es: itt nincs <details>, tehat nincs olyan ujratordeles, mint a FAQ-nal. */
@media (min-width: 60em) {
  .tudnivalok {
    display: block; columns: 2; column-gap: var(--s8);
    orphans: 3; widows: 3;
  }
  .tudnivalok > div { break-inside: avoid; margin-bottom: var(--s7); }
  .tudnivalok > div:last-child { margin-bottom: 0; }
}

/* ==========================================================================
   Kapcsolat
   ========================================================================== */

.contact { display: grid; gap: var(--s6); }
.contact > * { min-width: 0; }
@media (min-width: 48em) { .contact { grid-template-columns: 1fr 1fr; gap: var(--s8); } }

.dl { margin: 0; }
.dl div { padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.dl div:first-child { border-top: 1px solid var(--line); }
.dl dt { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s1); }
.dl dd { margin: 0; font-weight: 600; font-size: var(--t-lg); }
.dl dd a { font-weight: 700; }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.hours li:first-child { border-top: 1px solid var(--line); }
.hours b { font-weight: 700; }

.map { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--grape-l); display: block; }

/* Terkep-facade: az iframe csak kattintasra toltodik be (suly + adatvedelem) */
.map-facade {
  aspect-ratio: 4 / 3; border-radius: var(--r-md);
  background: var(--grape-l); border: 1px dashed var(--grape);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4); padding: var(--s6); text-align: center;
}
.map-facade__text { max-width: 36ch; color: var(--muted); font-size: var(--t-sm); margin: 0; }

/* ==========================================================================
   CTA sav
   ========================================================================== */

.cta-strip { background: var(--grape); color: var(--paper); border-radius: var(--r-lg); padding: var(--s7) var(--s6); }
.cta-strip h2 { color: var(--paper); margin-bottom: var(--s3); }
.cta-strip p { color: var(--on-grape-muted); margin-bottom: var(--s5); }
.cta-strip .btn--primary { background: var(--paper); color: var(--grape); }
.cta-strip .btn--primary:hover { background: var(--sun); color: var(--ink); }

/* A savba agyazott szoveg-link: a globalis link-szin (--grape) itt a sajat
   hatteren tunne el, ezert a vilagos alapszint hasznaljuk. */
.cta-strip p a { color: var(--paper); text-decoration-thickness: 2px; }
.cta-strip p a:hover { color: var(--sun); }

/* Szeles kepernyon a sav VALOBAN sav: szoveg balra, gomb jobbra, egy sorban.
   Enelkul a teljes szelessegu lila doboz belsejeben a tartalom a bal felben
   allt, es alatta-mellette ures maradt - ugyanaz a fel-ures latvany, amit a
   dobozoknal is javitottunk. A szoveg tovabbra is --measure-on marad. */
@media (min-width: 64em) {
  .cta-strip:not(.cta-strip--foto) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: var(--s3) var(--s7);
    padding-inline: var(--s7);
  }
  .cta-strip:not(.cta-strip--foto) > :is(h2, p) { grid-column: 1; }
  .cta-strip:not(.cta-strip--foto) > p { margin-bottom: 0; }
  .cta-strip:not(.cta-strip--foto) > .btn {
    grid-column: 2; grid-row: 1 / -1; justify-self: end; white-space: nowrap;
  }
}

/* ==========================================================================
   Lablec
   ========================================================================== */

.site-foot {
  background: var(--ink); color: var(--ground);
  margin-top: var(--s8);
  padding-block: var(--s7) var(--s6);
  /* Helyet hagyunk a "vissza a tetejere" gombnak, hogy ne uljon szovegre */
  padding-bottom: calc(var(--s6) + 64px);
}
@media (min-width: 52em) { .site-foot { padding-bottom: calc(var(--s6) + 24px); } }
.site-foot a { color: var(--ground); }
.site-foot a:hover { color: var(--sun); }
.site-foot__grid { display: grid; gap: var(--s6); margin-bottom: var(--s6); }
.site-foot__grid > * { min-width: 0; }
@media (min-width: 40em) { .site-foot__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s7); } }
.site-foot h2 { font-size: var(--t-lg); color: var(--paper); margin-bottom: var(--s3); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: var(--s2); }
.site-foot__fine {
  border-top: 1px solid var(--on-ink-line);
  padding-top: var(--s5);
  font-size: var(--t-sm); color: var(--on-ink-muted);
}
.site-foot__fine p { max-width: none; }

/* ==========================================================================
   Segedek
   ========================================================================== */

.lede { font-size: var(--t-lg); line-height: 1.5; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.page-head { padding-block: var(--s7) var(--s5); }
.page-head p { max-width: 52ch; font-size: var(--t-lg); color: var(--muted); }

/* ==========================================================================
   Fotok
   ========================================================================== */

.shot { border-radius: var(--r-lg); overflow: hidden; background: var(--grape-l); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero: szoveg + foto */
.hero--foto .hero__inner {
  display: grid; gap: var(--s6); align-items: center;
}
@media (min-width: 60em) {
  .hero--foto .hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--s8); }
  .hero--foto .pit { display: none; }
}
.hero__shot { aspect-ratio: 4 / 5; max-height: 560px; }
@media (max-width: 59.99em) { .hero__shot { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   Attrakcio-kartyak
   ========================================================================== */

.cards { display: grid; gap: var(--s5); margin-bottom: var(--s7); }
.cards > * { min-width: 0; }
@media (min-width: 46em) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card { display: flex; flex-direction: column; }
.card .shot { aspect-ratio: 3 / 2; margin-bottom: var(--s4); }
.card h3 { margin-bottom: var(--s2); }
.card p { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.card__tag {
  display: inline-block; margin-bottom: var(--s2);
  font-size: var(--t-xs); font-weight: 700; color: var(--grape);
}
.card:nth-child(2) .card__tag { color: var(--punch-t); }
.card:nth-child(3) .card__tag { color: var(--sky-t); }

/* ==========================================================================
   Programok - a logo negy szine jeloli oket
   ========================================================================== */

.programs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
/* Paratlan elemszam (7) -> kiegyensulyozott hasabok racs helyett: oszloponkent idorendben olvashato */
@media (min-width: 40em) {
  .programs { display: block; columns: 2; column-gap: var(--s6); }
  .programs li { break-inside: avoid; margin-bottom: var(--s4); }
}
.programs li {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding-block: var(--s4); border-top: 1px solid var(--line);
}
.programs .dot {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; margin-top: .42em;
}
.programs li:nth-child(4n+1) .dot { background: var(--sun); }
.programs li:nth-child(4n+2) .dot { background: var(--punch); }
.programs li:nth-child(4n+3) .dot { background: var(--sky); }
.programs li:nth-child(4n+4) .dot { background: var(--grape); }
.programs b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -.02em; }
.programs > li > span > span { display: block; color: var(--muted); font-size: var(--t-sm); }

/* Sotet sávon a szoveg- es vonalszinek cserelodnek */
.section--ink .programs li { border-color: var(--on-ink-line); }
.section--ink .programs b { color: var(--paper); }
.section--ink .programs > li > span > span { color: var(--on-ink-muted); }
.section--ink .note {
  background: transparent; border: 1px solid var(--on-ink-line);
}
.section--ink .note h2, .section--ink .note h3 { color: var(--paper); }
.section--ink .note p { color: var(--on-ink-muted); }

/* ==========================================================================
   GYIK - reszletek/osszefoglalo, JS nelkul
   ========================================================================== */

/* Gyakori kerdesek: TELJES szelessegu, EGY hasabos lista.
   Volt egy verzio `columns: 2`-vel. A meres kimutatta, hogy nem elmeleti
   a baj: a jobb ALSO kerdest kinyitva a jobb FELSO kerdes atugrott a bal
   hasabba - vagyis a kattintastol tavoli elem mozdult el a szem elol.
   A CSS-hasab minden nyitaskor ujra kiegyensulyoz, ezert accordionhoz
   rossz eszkoz. A sav teljes szelessegu, a VALASZ marad olvashato
   sorhosszon; a kerdes rovid, annak nem kell korlat. */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq details > p { max-width: var(--measure); }
.faq summary {
  cursor: pointer; list-style: none;
  padding-block: var(--s4); padding-right: var(--s6);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg);
  letter-spacing: -.02em; position: relative; min-height: 44px;
  display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--grape); border-bottom: 2.5px solid var(--grape);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > p { margin: 0 0 var(--s4); color: var(--muted); }

/* Kepaláírás / forras-jelzes */
.caption { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s2); }

/* CTA sav fotoval */
.cta-strip--foto { display: grid; gap: var(--s6); align-items: center; padding: var(--s6); }
@media (min-width: 52em) {
  .cta-strip--foto { grid-template-columns: 1fr 1fr; gap: var(--s7); padding: var(--s7); }
}
.cta-strip--foto .shot { aspect-ratio: 4 / 3; background: var(--grape-d); }
.cta-strip--foto > div > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Hatter-textura: halvany labda-mezo
   A park legjellemzobb targya a labdameder, a logo pedig negy figura
   rozettaja - mindketto KOR. Ez a textura ebbol jon, nem diszites.
   Tiszta CSS: nulla plusz keres, nulla plusz byte a halozaton.
   ========================================================================== */

.section { position: relative; isolation: isolate; }

.section::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(34rem 34rem at 10% -12%, rgb(107 65 146 / .07), transparent 62%),
    radial-gradient(26rem 26rem at 94% 26%, rgb(24 148 210 / .06), transparent 62%),
    radial-gradient(22rem 22rem at 76% 112%, rgb(251 184 27 / .09), transparent 62%);
}

/* Papir-szekcio (feher): erosebben kell, mert a feher elnyeli a halvany szint */
.section--paper::before {
  background-image:
    radial-gradient(30rem 30rem at 94% -10%, rgb(231 52 62 / .085), transparent 62%),
    radial-gradient(26rem 26rem at 4% 82%, rgb(107 65 146 / .075), transparent 62%),
    radial-gradient(20rem 20rem at 58% 118%, rgb(24 148 210 / .06), transparent 62%);
}

/* Aloldal-fejlec: ez NEM .section, ezert eddig csupasz volt.
   Itt fogadja a latogato az aloldalt - kapjon sajat alnyomatot. */
.page-head { position: relative; isolation: isolate; overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(28rem 28rem at 88% -30%, rgb(251 184 27 / .16), transparent 62%),
    radial-gradient(24rem 24rem at 100% 70%, rgb(107 65 146 / .09), transparent 62%),
    radial-gradient(18rem 18rem at 4% 120%, rgb(24 148 210 / .07), transparent 62%);
}
/* A jel halvanyan itt is - a fejlec jobb szelen, ahol ures a felulet */
.page-head::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -4rem; top: -5rem; width: 17rem; height: 17rem;
  background: url("../img/jel.svg") no-repeat center / contain;
  opacity: .1;
}
@media (max-width: 51.99em) {
  .page-head::after { width: 10rem; height: 10rem; right: -3rem; top: -3rem; opacity: .08; }
}

/* Szekcionkent kicsit mas elrendezes, hogy ne legyen mind ugyanaz a folt */
.section:nth-of-type(even)::before { transform: scaleX(-1); }

/* Sotet sav: a sotet hatter elnyeli a halvany szint, itt erosebb kell */
.section--ink::before {
  background-image:
    radial-gradient(32rem 32rem at 88% -10%, rgb(251 184 27 / .12), transparent 60%),
    radial-gradient(26rem 26rem at 4% 90%, rgb(24 148 210 / .14), transparent 60%);
}

/* A mozgas: EGYETLEN, nagyon lassu sodrodas. 70 masodperc alatt par szazalek -
   eszre sem veszed, de nem all halott a felulet.                              */
@media (prefers-reduced-motion: no-preference) {
  .section::before,
  .page-head::before { animation: sodrodas 70s ease-in-out infinite; }
}
@keyframes sodrodas {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  50%      { background-position: 3% -2%, -3% 2%, 2% -3%; }
}

/* ==========================================================================
   Az EGYETLEN betoltesi pillanat: a hero lepcsozetesen erkezik.
   Nem szekcionkent - egyszer, a nyitokepen.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero--foto .hero__title,
  .hero--foto .hero__lead,
  .hero--foto .hero__actions,
  .hero--foto .status,
  .hero--foto .hero__shot { animation: belep .75s cubic-bezier(.2, .8, .25, 1) both; }

  .hero--foto .hero__title  { animation-delay: .05s; }
  .hero--foto .hero__lead   { animation-delay: .15s; }
  .hero--foto .hero__actions{ animation-delay: .23s; }
  .hero--foto .status       { animation-delay: .31s; }
  .hero--foto .hero__shot   { animation-delay: .12s; }
}
@keyframes belep {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Mikro-animaciok - CSAK ott, ahol jelentenek valamit
   ========================================================================== */

/* A "most nyitva" pont lüktet: ez INFORMACIO, nem disz - azt mondja, elo. */
@media (prefers-reduced-motion: no-preference) {
  .status[data-state="open"] .status__dot { animation: elo 2.6s ease-in-out infinite; }
}
@keyframes elo {
  0%   { box-shadow: 0 0 0 0 rgb(26 158 92 / .45); }
  70%  { box-shadow: 0 0 0 8px rgb(26 158 92 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(26 158 92 / 0); }
}

/* GYIK: a nyitas valaszol a kattintasra - a sor finoman kiemelkedik */
.faq summary { transition: color .16s ease, background-color .16s ease; border-radius: var(--r-sm); }
.faq summary:hover { color: var(--grape); }
.faq details[open] summary { color: var(--grape); }

/* Navigacio: alahuzas balrol no ki, nem hirtelen villan */
@media (min-width: 52em) {
  .nav a { position: relative; }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
    background: var(--punch); transform: scaleX(0); transform-origin: left;
    transition: transform .22s cubic-bezier(.2, .8, .25, 1);
  }
  .nav a:hover::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { box-shadow: none; }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* A jel a fejlecben: kattintasra egy pici visszajelzes */
.brand__mark { transition: transform .25s cubic-bezier(.2, .8, .25, 1); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }

/* Kepek: a lekerekitett keret alatt finom melyseg */
.shot { box-shadow: 0 18px 40px -28px rgb(58 58 58 / .45); }

/* ==========================================================================
   A jel mint halvany vizjel
   Nem uj grafika: ugyanaz az img/jel.svg, amit a fejlec is hasznal - tehat
   mar a cache-ben van, nulla plusz keres. Csak ott, ahol ures a felulet.
   ========================================================================== */

.section--ink::after,
.cta-strip::after {
  content: ""; position: absolute; pointer-events: none;
  background: url("../img/jel.svg") no-repeat center / contain;
}

/* A vizjel kilog a szekciobol -> a szekcionak vagnia KELL, kulonben
   vizszintes gorgetes lesz az egesz oldalon. (Mert: 2026-09-16.) */
.section--ink { overflow: hidden; }
.section--ink::after {
  right: -6rem; bottom: -7rem; width: 24rem; height: 24rem;
  opacity: .07; z-index: -1;
}

/* isolation: isolate KELL, kulonben a z-index:-1 a sav sajat hattere MOGE
   esne es eltunne. Nelkule viszont a vizjel a szoveg ES a gomb FOLE fest.
   (Mert: 2026-09-16, az "A park" oldal "Mennyibe kerul?" savja.) */
.cta-strip { position: relative; overflow: hidden; isolation: isolate; }
.cta-strip::after {
  left: -5rem; bottom: -6rem; width: 18rem; height: 18rem;
  opacity: .1; z-index: -1;
}

/* Mobilon a vizjel elvesz a helyet - kisebb es halvanyabb */
@media (max-width: 51.99em) {
  .section--ink::after { width: 15rem; height: 15rem; right: -4rem; bottom: -4rem; opacity: .05; }
  .cta-strip::after    { width: 11rem; height: 11rem; left: -3rem; bottom: -3rem; opacity: .07; }
}

/* A vizjel is sodrodik - meg lassabban, mint a hatter */
@media (prefers-reduced-motion: no-preference) {
  .section--ink::after,
  .cta-strip::after,
  .page-head::after { animation: vizjel 90s ease-in-out infinite; }
}
@keyframes vizjel {
  0%, 100% { transform: rotate(0deg)   translateY(0); }
  50%      { transform: rotate(6deg)   translateY(-10px); }
}

/* ==========================================================================
   Tovabbi mikro-animaciok - mind VALASZ egy felhasznaloi cselekvesre
   ========================================================================== */

/* --- GYIK: a nyitas/zaras kibomlik, nem ugrik -------------------------------
   A ::details-content + interpolate-size a natv modja. Ahol a bongeszo nem
   tudja, ott egyszeruen nincs animacio - a GYIK ugyanugy mukodik.           */
:root { interpolate-size: allow-keywords; }

@supports selector(::details-content) {
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .32s cubic-bezier(.2, .8, .25, 1),
                content-visibility .32s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* --- Kepek: halvanyan uszanak be, nem pattannak ----------------------------
   @starting-style, tehat NULLA JS. Ahol a bongeszo nem ismeri, ott a kep
   egyszeruen azonnal latszik - nincs kockazat, hogy lathatatlan marad.      */
@media (prefers-reduced-motion: no-preference) {
  .shot img { opacity: 1; transition: opacity .55s ease; }
  @starting-style { .shot img { opacity: 0; } }
}

/* --- Gombok: a hover megemeli oket ------------------------------------- */
.btn--primary {
  box-shadow: 0 8px 18px -12px rgb(107 65 146 / .7);
  transition: transform .14s ease, background-color .14s ease,
              box-shadow .2s ease, color .14s ease;
}
.btn--primary:hover { box-shadow: 0 14px 26px -12px rgb(107 65 146 / .75); }
.btn--ghost { transition: transform .14s ease, background-color .16s ease, color .16s ease; }

/* --- Lablec-linkek: ugyanaz az alahuzas, mint a navigacioban ------------ */
.site-foot li a, .site-foot__grid p a {
  position: relative; text-decoration: none;
  background-image: linear-gradient(var(--sun), var(--sun));
  background-size: 0 1.5px; background-repeat: no-repeat;
  background-position: left 100%;
  transition: background-size .22s cubic-bezier(.2, .8, .25, 1), color .16s ease;
  padding-bottom: 2px;
}
.site-foot li a:hover, .site-foot__grid p a:hover { background-size: 100% 1.5px; }

/* --- Ar-sorok: a kiemelt ar finoman elkulonul ---------------------------- */
.rate li[data-lead="true"] { position: relative; }
.rate li[data-lead="true"]::before {
  content: ""; position: absolute; left: calc(var(--s4) * -1); top: 50%;
  width: 3px; height: 0; margin-top: 0; border-radius: 2px;
  background: var(--grape);
  transition: height .3s cubic-bezier(.2, .8, .25, 1), margin-top .3s cubic-bezier(.2, .8, .25, 1);
}
.rate:hover li[data-lead="true"]::before { height: 60%; margin-top: -30%; }

/* --- Terkep: a beagyazas halvanyan erkezik a kattintas utan -------------- */
@media (prefers-reduced-motion: no-preference) {
  iframe.map { animation: belep .5s ease both; }
}

/* --- Program-pottyok: a sor foleérésekor a pont kicsit no ---------------- */
.programs .dot { transition: transform .22s cubic-bezier(.2, .8, .25, 1); }
.programs li:hover .dot { transform: scale(1.5); }

/* --- Attrakcio-kartyak: a cimke es a cim egyutt reagal a kep foleére ----- */
.card .shot { overflow: hidden; }
.card .shot img { transition: transform .5s cubic-bezier(.2, .8, .25, 1), opacity .55s ease; }

/* ==========================================================================
   Kepek hoverre
   Alapelv: a kep akkor "el", ha a kurzor rajta van. De ahol a kep REAGAL,
   ott legyen is mire kattintani - kulonben a hover hazudik. Ezert az
   attrakcio-kartyak valodi linkek lettek.
   ========================================================================== */

.shot img { will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  .shot img {
    transition: transform .65s cubic-bezier(.2, .8, .25, 1),
                filter .35s ease,
                opacity .55s ease;
  }
  /* Minden fotoe: finom kozelites + egy hajszalnyi telitettseg */
  .shot:hover img { transform: scale(1.045); filter: saturate(1.1); }
}

/* --- Az attrakcio-kartya mint link -------------------------------------- */

.card {
  text-decoration: none; color: inherit;
  border-radius: var(--r-lg);
  transition: transform .28s cubic-bezier(.2, .8, .25, 1);
}
.card h3 { transition: color .18s ease; }
.card .shot { transition: box-shadow .28s ease; }

.card:hover,
.card:focus-visible { color: inherit; transform: translateY(-4px); }

.card:hover h3,
.card:focus-visible h3 { color: var(--grape); }

.card:hover .shot,
.card:focus-visible .shot { box-shadow: 0 26px 46px -26px rgb(58 58 58 / .6); }

@media (prefers-reduced-motion: no-preference) {
  .card:hover .shot img,
  .card:focus-visible .shot img { transform: scale(1.07); filter: saturate(1.12); }
}

/* A billentyuzetes fokusz a TELJES kartyat jelolje, ne csak a kepet */
.card:focus-visible { outline: 3px solid var(--punch); outline-offset: 4px; }

/* A kartya-cim kapjon egy finom "tovabb" jelzest, hogy latszodjon: link */
.card h3::after {
  content: "";
  display: inline-block; vertical-align: middle;
  width: .48em; height: .48em; margin-left: .38em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-.1em, -.1em);
  opacity: 0; transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.25,1);
}
.card:hover h3::after,
.card:focus-visible h3::after { opacity: .75; transform: rotate(-45deg) translate(.1em, .1em); }

/* ==========================================================================
   "Vissza a tetejere" gomb
   Csak akkor jelenik meg, ha a latogato mar elgorgetett - addig hidden,
   tehat a billentyuzetes sorrendbol is kimarad.
   ========================================================================== */

#teteje { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.fel {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 40;
  width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--grape); color: var(--paper);
  box-shadow: 0 10px 26px -10px rgb(58 58 58 / .55);
  cursor: pointer;
  /* visibility is kell, kulonben a lathatatlan gomb is benne marad a
     tab-sorrendben - billentyuzettel egy "semmire" lehet fokuszalni. */
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .24s ease, transform .28s cubic-bezier(.2, .8, .25, 1),
              visibility .28s, background-color .16s ease, box-shadow .2s ease;
}
.fel[hidden] { display: none; }
.fel[data-latszik="true"] { opacity: 1; visibility: visible; transform: none; }

.fel:hover { background: var(--grape-d); box-shadow: 0 16px 32px -10px rgb(58 58 58 / .6); }
.fel:active { transform: translateY(2px); }
.fel svg { width: 22px; height: 22px; display: block; }

/* A nyil megmozdul, amikor fole viszed - valasz a szandekra */
.fel svg { transition: transform .22s cubic-bezier(.2, .8, .25, 1); }
.fel:hover svg { transform: translateY(-2px); }

@media (min-width: 52em) {
  .fel { width: 52px; height: 52px; right: var(--s6); bottom: var(--s6); }
  .fel svg { width: 24px; height: 24px; }
}

/* A .facts szoveges resze zsugorodhasson nagy betumeretnel */
.facts li > span { flex: 1 1 12rem; min-width: 0; }

/* ==========================================================================
   Kepgaleria (carousel)
   Natv vizszintes gorgetes + scroll-snap. A swipe, a gorgetes es a
   nyilbillentyuk a bongeszotol jonnek - a JS csak a ket gombot koti be.
   NINCS automata leptetes: a [[rules/design]] tiltja, es a latogato
   olvasas kozben nem szereti, ha alatta mozog a tartalom.
   ========================================================================== */

.galeria { margin-top: var(--s6); }

.galeria__sav {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: var(--s4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;                 /* a sajat gombjaink vezetnek */
  border-radius: var(--r-lg);
}
.galeria__sav::-webkit-scrollbar { display: none; }
.galeria__sav:focus-visible { outline: 3px solid var(--punch); outline-offset: 4px; }

/* EGY kep egyszerre, minden szelessegen - a nagyobb kep tobbet mutat. */

.galeria__elem { scroll-snap-align: start; }
.galeria__elem img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border-radius: var(--r-lg); background: var(--grape-l);
}

.galeria__vezerlo {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s3); margin-top: var(--s4); flex-wrap: wrap;
}
.galeria__allas { margin-right: auto; text-align: left; }
.galeria__allas {
  margin: 0; font-size: var(--t-sm); color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: center;
}
.galeria__gomb {
  width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer;
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, transform .14s ease;
}
.galeria__gomb svg { width: 20px; height: 20px; }
.galeria__gomb:hover { background: var(--grape); color: var(--paper); border-color: var(--grape); }
.galeria__gomb:active { transform: scale(.94); }
.galeria__gomb[disabled] { opacity: .35; cursor: default; }
.galeria__gomb[disabled]:hover { background: var(--paper); color: var(--ink); border-color: var(--line); }

/* Ov + nadrag: az SVG [hidden] attributuma biztosan vagjon.
   (A valodi hiba az volt, hogy az `.hidden = true` SVG-n nem ir attributumot -
   ezt a JS-ben `toggleAttribute` oldja meg.) */
.galeria__gomb svg[hidden] { display: none; }

/* ==========================================================================
   Szoveg-only szekciok: keskeny konteneR
   Miert: az 1120px-es .wrap jo a kep-racsoknak es a kartyaknak, de a szoveg
   sorhossza 552px (--measure). Egy 1120-as dobozban ez 568px ures helyet
   hagy jobbra - ugy nez ki, mintha az oldal ket hasabra lenne osztva es
   csak a bal oldalon lenne tartalom. Ahol a szekcio TISZTAN szoveg, ott a
   konteneRt is szukitjuk: a szoveg kitolti, az ures hely szimmetrikus margo.
   Ahol van racs/kep/kartya (ami kitolti a szelesseget), ott marad az 1120.
   ========================================================================== */

.wrap--szoveg { max-width: calc(var(--measure) + var(--gutter) * 2); }

/* A doboz belsejeben a szoveg toltse ki a dobozt - kulonben a dobozon
   belul is megjelenik ugyanaz az ures jobb fel. */
.note p, .note li { max-width: none; }

/* A CTA-sav szovege: SZINES dobozon belul az ures hely paddingnak latszik,
   nem "torott hasabnak" - itt tehat a sorhossz-korlat maradhat. Nelkule
   2560px-en 122 karakteres sorok lettek. */
.cta-strip h2, .cta-strip p { max-width: var(--measure); }

/* A "mit tartalmaz" tipusu rovid felsorolasok ket hasabban jobban allnak,
   mint egy hosszu, keskeny oszlopban. */
@media (min-width: 46em) {
  .checks--ket { columns: 2; column-gap: var(--s7); }
  .checks--ket li { break-inside: avoid; }
}