@charset "utf-8";

/* =========================================================
   Kovács Erika – Gyermekagykontroll
   Arculat: a meglévő korall „E” jel + a Hétszínvilág hét színe
   ========================================================= */

/* ---------- 1. Tokenek ---------- */

:root {
  /* márkaszínek */
  --coral: #ee6a5f;
  --coral-700: #c4443a;
  --coral-600: #d9483c;
  --coral-100: #fbdcd8;
  --coral-050: #fdeeec;

  --sun: #f2a63c;
  --sun-700: #b06d12;
  --sun-100: #fbe5c4;
  --sun-050: #fef4e6;

  --leaf: #2e8f6e;
  --leaf-700: #1f6a51;
  --leaf-100: #c9e6db;
  --leaf-050: #e9f5f0;

  --sky: #3b7ea1;
  --sky-700: #2a6180;
  --sky-050: #e8f1f6;

  --plum: #7b5ea7;
  --plum-700: #5f458a;
  --plum-050: #f0ebf7;

  /* Hétszínvilág */
  --sz1: #ee6a5f;
  --sz2: #f2a63c;
  --sz3: #e3c344;
  --sz4: #5fa86b;
  --sz5: #2e8f6e;
  --sz6: #3b7ea1;
  --sz7: #7b5ea7;

  /* semlegesek */
  --ink: #1c2a26;
  --ink-2: #4c625b;
  --ink-3: #7b8e87;
  --cream: #fffaf4;
  --cream-2: #fdf3e8;
  --card: #ffffff;
  --line: #efe2d5;
  --line-2: #f7ede2;

  /* felület */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  --arnyek-1: 0 1px 2px rgb(28 42 38 / 0.05), 0 2px 8px rgb(28 42 38 / 0.04);
  --arnyek-2: 0 2px 4px rgb(28 42 38 / 0.05), 0 10px 28px rgb(28 42 38 / 0.07);
  --arnyek-3: 0 4px 10px rgb(28 42 38 / 0.06), 0 22px 48px rgb(28 42 38 / 0.1);

  /* ritmus */
  --w: 1180px;
  --w-szuk: 760px;
  --gap: clamp(1.25rem, 3vw, 2rem);
  --szekcio: clamp(3.5rem, 8vw, 7rem);

  /* tipográfia */
  --f-cim: "Lora", ui-serif, Georgia, "Times New Roman", serif;
  --f-szoveg: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --t-lg: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  --t-xl: clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
  --t-2xl: clamp(1.6rem, 1.4rem + 0.95vw, 2.15rem);
  --t-3xl: clamp(2rem, 1.65rem + 1.6vw, 3rem);
  --t-4xl: clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem);

  accent-color: var(--coral);
  color-scheme: light;
}

/* ---------- 2. Alap ---------- */

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

/* A saját display-értékeink (grid, flex) felülírnák a böngésző [hidden] szabályát,
   ezért a rejtést itt tesszük egyértelművé – erre épül a szűrő. */
[hidden] { display: none !important; }

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-szoveg);
  font-size: var(--t-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-cim);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--coral-700); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--coral-600); }

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

strong, b { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

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

::selection { background: var(--sun-100); color: var(--ink); }

/* ---------- 3. Segédosztályok ---------- */

.tarolo {
  width: min(100% - 2.5rem, var(--w));
  margin-inline: auto;
}
@media (max-width: 30rem) { .tarolo { width: calc(100% - 2rem); } }

.szuk { max-width: var(--w-szuk); }
.kozep { margin-inline: auto; text-align: center; }
.rejtve { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.szekcio { padding-block: var(--szekcio); }
.szekcio--halvany { background: var(--cream-2); }
.szekcio--feher { background: var(--card); }

.fej { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.fej.kozep { margin-inline: auto; }
.fej p { color: var(--ink-2); font-size: var(--t-lg); }

.cimke {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--coral-700);
  margin-bottom: 0.9rem;
}
.cimke::before {
  content: "";
  width: 1.6rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sz1), var(--sz2), var(--sz4));
}

.vezeto { font-size: var(--t-lg); color: var(--ink-2); }

/* szivárványvonal – a Hétszínvilág motívum */
.szivarvany {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--sz1) 0 14.28%, var(--sz2) 0 28.56%, var(--sz3) 0 42.84%,
    var(--sz4) 0 57.12%, var(--sz5) 0 71.4%, var(--sz6) 0 85.68%, var(--sz7) 0);
}

/* ---------- 4. Gombok ---------- */

.gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.82em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 700;
  font-size: var(--t-sm);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease,
    border-color 0.16s ease, color 0.16s ease;
}
.gomb:hover { transform: translateY(-2px); }
.gomb:active { transform: translateY(0); }
.gomb svg { width: 1.15em; height: 1.15em; flex: none; }

.gomb--fo {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 2px 0 var(--coral-700), var(--arnyek-1);
}
.gomb--fo:hover { background: var(--coral-600); color: #fff; box-shadow: 0 4px 0 var(--coral-700), var(--arnyek-2); }

.gomb--kereg {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--arnyek-1);
}
.gomb--kereg:hover { border-color: var(--coral); color: var(--coral-700); }

.gomb--halk {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
}
.gomb--halk:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }

.gomb--vilagos {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  border-color: rgb(255 255 255 / 0.55);
  backdrop-filter: blur(6px);
}
.gomb--vilagos:hover { background: #fff; color: var(--coral-700); border-color: #fff; }

.gomb--nagy { padding: 1em 1.9em; font-size: var(--t-base); }
.gomb--teljes { width: 100%; }

.gomblink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--coral-700);
}
.gomblink::after { content: "→"; transition: transform 0.16s ease; }
.gomblink:hover::after { transform: translateX(3px); }

/* ---------- 5. Fejléc ---------- */

.ugras {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--card);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  box-shadow: var(--arnyek-2);
  font-weight: 700;
  transition: top 0.18s ease;
}
.ugras:focus { top: 1rem; }

.fejlec {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.fejlec[data-gorgetve="igen"] {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgb(28 42 38 / 0.05);
}

.fejlec__belso {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  flex: none;
}
.logo__jel { width: 2.5rem; height: 2.5rem; flex: none; }
.logo__nev { display: grid; line-height: 1.1; }
.logo__nev b {
  font-family: var(--f-cim);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.logo__nev span { font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.045em; text-transform: uppercase; font-weight: 600; }

.menu { display: flex; align-items: center; gap: 0.15rem; }
.menu a {
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--ink-2);
  font-weight: 600;
  font-size: var(--t-sm);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.menu a:hover { background: var(--coral-050); color: var(--coral-700); }
.menu a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--sun) 16%, transparent); }

.fejlec__akcio { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.tel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-pill);
}
.tel-link:hover { background: var(--coral-050); color: var(--coral-700); }
.tel-link svg { width: 1.1rem; height: 1.1rem; }

.hamburger {
  display: none;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
}
.hamburger svg { width: 1.4rem; height: 1.4rem; }
.hamburger .ikon-x { display: none; }
.hamburger[aria-expanded="true"] .ikon-x { display: block; }
.hamburger[aria-expanded="true"] .ikon-menu { display: none; }

/* A mobilmenü gombjait a JS mozgatja a menü végére (#menu-extra), így nem kell
   duplikált markup és abszolút pozicionálás. */
.menu__extra { display: none; }

@media (max-width: 68rem) {
  .menu { display: none; }
  .fejlec__belso > .fejlec__akcio { display: none; }
  .hamburger { display: inline-flex; }

  .fejlec[data-nyitva="igen"] .menu {
    display: flex;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.75rem 1.25rem 1.35rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--arnyek-2);
    max-height: calc(100dvh - 4.75rem);
    overflow-y: auto;
  }
  .fejlec[data-nyitva="igen"] .menu a { padding: 0.8rem 1rem; font-size: var(--t-base); }

  .menu__extra {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
  }
  .menu__extra .fejlec__akcio { display: grid; gap: 0.6rem; }
  .menu__extra .tel-link,
  .menu__extra .gomb { display: inline-flex; justify-content: center; }
}

/* ---------- 6. Hero ---------- */

.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }

.hero::before {
  content: "";
  position: absolute;
  inset: -30% 45% 30% -25%;
  background: radial-gradient(closest-side, var(--sun-050), transparent 70%);
  pointer-events: none;
}

.hero__racs {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
@media (max-width: 62rem) { .hero__racs { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 0.35em; }
.hero h1 em {
  font-style: normal;
  color: var(--coral-700);
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: -0.02em;
  height: 0.16em;
  border-radius: 0.1em;
  background: linear-gradient(90deg, var(--sz2), var(--sz3), var(--sz4));
  opacity: 0.55;
  z-index: -1;
}

.hero__leiras { font-size: var(--t-lg); color: var(--ink-2); max-width: 34rem; }

.hero__gombok { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.hero__kep {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--arnyek-3);
  aspect-ratio: 4 / 3.2;
  rotate: 1.2deg;
}
.hero__kep img { width: 100%; height: 100%; object-fit: cover; }
.hero__kep::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--sz1) 0 14.28%, var(--sz2) 0 28.56%, var(--sz3) 0 42.84%,
    var(--sz4) 0 57.12%, var(--sz5) 0 71.4%, var(--sz6) 0 85.68%, var(--sz7) 0);
}

.hero__jelvny {
  position: absolute;
  right: -0.5rem;
  bottom: -1.25rem;
  z-index: 2;
  display: grid;
  gap: 0.1rem;
  padding: 0.9rem 1.2rem;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--arnyek-3);
  rotate: -2deg;
  text-align: center;
}
.hero__jelvny b { font-family: var(--f-cim); font-size: 1.6rem; color: var(--coral-700); line-height: 1; }
.hero__jelvny span { font-size: var(--t-xs); color: var(--ink-2); font-weight: 600; }
@media (max-width: 62rem) { .hero__jelvny { right: 1rem; } }

/* bizalmi sáv */
.bizalom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.bizalom div { display: grid; gap: 0.1rem; }
.bizalom b {
  font-family: var(--f-cim);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1;
  color: var(--ink);
}
.bizalom span { font-size: var(--t-sm); color: var(--ink-2); }

/* ---------- 7. Kártyák, rácsok ---------- */

.racs { display: grid; gap: var(--gap); }
.racs--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.racs--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.racs--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.kartya {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  box-shadow: var(--arnyek-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kartya--lebeg:hover { transform: translateY(-4px); box-shadow: var(--arnyek-2); border-color: var(--coral-100); }

/* előny-kártyák */
.elony { display: grid; gap: 0.85rem; }
.elony__ikon {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--sun-050);
  color: var(--sun-700);
}
.elony__ikon svg { width: 1.5rem; height: 1.5rem; }
.elony:nth-child(7n + 1) .elony__ikon { background: var(--coral-050); color: var(--coral-700); }
.elony:nth-child(7n + 2) .elony__ikon { background: var(--sun-050); color: var(--sun-700); }
.elony:nth-child(7n + 3) .elony__ikon { background: var(--leaf-050); color: var(--leaf-700); }
.elony:nth-child(7n + 4) .elony__ikon { background: var(--sky-050); color: var(--sky-700); }
.elony:nth-child(7n + 5) .elony__ikon { background: var(--plum-050); color: var(--plum-700); }
.elony:nth-child(7n + 6) .elony__ikon { background: var(--coral-050); color: var(--coral-700); }
.elony:nth-child(7n) .elony__ikon { background: var(--leaf-050); color: var(--leaf-700); }
.elony h3 { font-size: var(--t-lg); margin: 0; }
.elony p { color: var(--ink-2); font-size: var(--t-sm); margin: 0; }

/* ---------- 8. Program-kártyák ---------- */

.program {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.program__szalag { height: 6px; background: var(--coral); }
.program[data-szin="leaf"] .program__szalag { background: var(--leaf); }
.program[data-szin="sun"] .program__szalag { background: var(--sun); }
.program[data-szin="sky"] .program__szalag { background: var(--sky); }
.program[data-szin="plum"] .program__szalag { background: var(--plum); }

.program__belso { display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(1.35rem, 2.5vw, 1.85rem); flex: 1; }
.program__kor {
  align-self: flex-start;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--coral-050);
  color: var(--coral-700);
}
.program[data-szin="leaf"] .program__kor { background: var(--leaf-050); color: var(--leaf-700); }
.program[data-szin="sun"] .program__kor { background: var(--sun-050); color: var(--sun-700); }
.program[data-szin="sky"] .program__kor { background: var(--sky-050); color: var(--sky-700); }
.program[data-szin="plum"] .program__kor { background: var(--plum-050); color: var(--plum-700); }

.program h3 { margin: 0; }
.program__motto { font-family: var(--f-cim); font-size: var(--t-base); color: var(--ink-2); font-style: italic; margin: 0; }
.program__leiras { color: var(--ink-2); font-size: var(--t-sm); margin: 0; }

.program__tenyek {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px dashed var(--line);
  list-style: none;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.program__tenyek li { display: flex; gap: 0.5rem; align-items: baseline; }
.program__tenyek svg { width: 1rem; height: 1rem; flex: none; color: var(--ink-3); translate: 0 2px; }

.program__lab { margin-top: auto; padding-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between; }
.program__ar { display: grid; line-height: 1.15; }
.program__ar b { font-family: var(--f-cim); font-size: 1.4rem; }
.program__ar span { font-size: var(--t-xs); color: var(--ink-3); }

/* ---------- 9. Időpontok ---------- */

.szuro {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-end;
  padding: 1.1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--arnyek-1);
  margin-bottom: 2rem;
}
.szuro__mezo { display: grid; gap: 0.4rem; }
.szuro__mezo > span { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.szuro__gombok { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--cream);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--coral); color: var(--coral-700); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.szuro__urites { margin-left: auto; align-self: center; }

.alkalom-lista { display: grid; gap: 0.9rem; list-style: none; margin: 0; padding: 0; }

.alkalom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem clamp(1.1rem, 2.5vw, 1.6rem);
  box-shadow: var(--arnyek-1);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.alkalom:hover { border-color: var(--coral-100); box-shadow: var(--arnyek-2); transform: translateY(-2px); }

.alkalom__datum {
  display: grid;
  place-items: center;
  gap: 0.05rem;
  width: 5rem;
  padding: 0.7rem 0.4rem;
  border-radius: var(--r);
  background: var(--coral-050);
  color: var(--coral-700);
  text-align: center;
  flex: none;
}
.alkalom[data-szin="leaf"] .alkalom__datum { background: var(--leaf-050); color: var(--leaf-700); }
.alkalom[data-szin="sun"] .alkalom__datum { background: var(--sun-050); color: var(--sun-700); }
.alkalom[data-szin="sky"] .alkalom__datum { background: var(--sky-050); color: var(--sky-700); }
.alkalom[data-szin="plum"] .alkalom__datum { background: var(--plum-050); color: var(--plum-700); }
.alkalom__datum b { font-family: var(--f-cim); font-size: 1.75rem; line-height: 1; }
.alkalom__datum span { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.alkalom__datum small { font-size: 0.7rem; color: var(--ink-3); }

.alkalom__fo { display: grid; gap: 0.3rem; min-width: 0; }
.alkalom__fo :is(h2, h3, h4) { margin: 0; font-size: var(--t-lg); }
.alkalom__hely { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; font-size: var(--t-sm); color: var(--ink-2); }
.alkalom__hely span { display: inline-flex; gap: 0.35rem; align-items: center; }
.alkalom__hely svg { width: 0.95rem; height: 0.95rem; color: var(--ink-3); flex: none; }
.alkalom__terkep { display: inline-flex; gap: 0.35rem; align-items: center; color: inherit; text-decoration: none; }
.alkalom__terkep > span { display: inline; text-decoration: underline dotted var(--ink-3); text-underline-offset: 0.2em; }
.alkalom__terkep:hover, .alkalom__terkep:focus-visible { color: var(--coral-700); }
.alkalom__terkep:hover > span, .alkalom__terkep:focus-visible > span { text-decoration-style: solid; text-decoration-color: currentColor; }
.alkalom__terkep:hover svg { color: currentColor; }
.alkalom__megj { font-size: var(--t-sm); color: var(--sun-700); font-weight: 600; margin: 0; }
.alkalom__kor { color: var(--ink-3); font-weight: 500; }
.alkalom__szervezo { color: var(--ink-3); font-weight: 500; }

.alkalom__betelt {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--sun-050);
  color: var(--sun-700);
  font-family: var(--f-szoveg);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}
.alkalom[data-betelt] .alkalom__datum { opacity: 0.6; }

.alkalom__akcio { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; flex: none; }
.alkalom__akcio .gomb { font-size: var(--t-xs); padding: 0.65em 1.2em; }

@media (max-width: 46rem) {
  .alkalom { grid-template-columns: auto minmax(0, 1fr); }
  .alkalom__akcio { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .alkalom__akcio .gomb { flex: 1 1 8rem; }
}

.ures-allapot {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  color: var(--ink-2);
}
.ures-allapot h3 { margin: 0; }

/* ---------- 10. Vélemények ---------- */

.velemeny-racs {
  columns: 3 19rem;
  column-gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.velemeny-racs > li { break-inside: avoid; margin-bottom: var(--gap); }

.velemeny {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem 1.35rem;
  box-shadow: var(--arnyek-1);
}
.velemeny::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 0;
  height: 4px;
  border-radius: 0 0 3px 3px;
  background: var(--sz1);
}
/* A számozás a listaelemeken fut, mert a .velemeny mindig egyedüli gyerek. */
.velemeny-racs > li:nth-child(7n + 2) .velemeny::before { background: var(--sz2); }
.velemeny-racs > li:nth-child(7n + 3) .velemeny::before { background: var(--sz4); }
.velemeny-racs > li:nth-child(7n + 4) .velemeny::before { background: var(--sz5); }
.velemeny-racs > li:nth-child(7n + 5) .velemeny::before { background: var(--sz6); }
.velemeny-racs > li:nth-child(7n + 6) .velemeny::before { background: var(--sz7); }
.velemeny-racs > li:nth-child(7n) .velemeny::before { background: var(--sz3); }

.velemeny__cimke {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}
.velemeny blockquote { margin: 0 0 1rem; font-size: var(--t-base); color: var(--ink); }
.velemeny blockquote p::before { content: "„"; }
.velemeny blockquote p::after { content: "”"; }
.velemeny figcaption { font-size: var(--t-sm); color: var(--ink-2); }
.velemeny figcaption b { display: block; color: var(--ink); }

/* ---------- 11. Erika-blokk ---------- */

.bemutat {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (max-width: 60rem) { .bemutat { grid-template-columns: 1fr; } }

.bemutat__kep { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--arnyek-3); aspect-ratio: 4 / 4.4; }
.bemutat__kep img { width: 100%; height: 100%; object-fit: cover; }

.alairas {
  font-family: var(--f-cim);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--coral-700);
  margin-top: 1.5rem;
}
.alairas span { display: block; font-family: var(--f-szoveg); font-style: normal; font-size: var(--t-sm); color: var(--ink-3); font-weight: 600; }

.erdem-lista { display: grid; gap: 0.6rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.erdem-lista li { display: flex; gap: 0.7rem; align-items: baseline; font-size: var(--t-sm); color: var(--ink-2); }
.erdem-lista svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--leaf); translate: 0 2px; }

/* ---------- 12. Menetrend / lépések ---------- */

.lepesek { display: grid; gap: 1.25rem; counter-reset: l; list-style: none; margin: 0; padding: 0; }
.lepesek li {
  counter-increment: l;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.lepesek li::before {
  content: counter(l);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--coral-100);
  color: var(--coral-700);
  font-family: var(--f-cim);
  font-weight: 700;
  font-size: 1.1rem;
}
.lepesek h3 { font-size: var(--t-lg); margin: 0 0 0.25rem; }
.lepesek p { color: var(--ink-2); font-size: var(--t-sm); margin: 0; }

.pipa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pipa-lista li { display: flex; gap: 0.65rem; align-items: baseline; }
.pipa-lista svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--leaf); translate: 0 2px; }

/* ---------- 13. GYIK ---------- */

.gyik { display: grid; gap: 0.75rem; max-width: 52rem; }
.gyik details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gyik details[open] { border-color: var(--coral-100); box-shadow: var(--arnyek-1); }
.gyik summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  cursor: pointer;
  font-family: var(--f-cim);
  font-weight: 600;
  font-size: var(--t-lg);
  list-style: none;
}
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  border-right: 2.5px solid var(--coral);
  border-bottom: 2.5px solid var(--coral);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 0.2s ease, translate 0.2s ease;
}
.gyik details[open] summary::after { rotate: -135deg; translate: 0 3px; }
.gyik summary:hover { color: var(--coral-700); }
.gyik .gyik__valasz { padding: 0 1.3rem 1.3rem; color: var(--ink-2); }

/* ---------- 14. CTA sáv ---------- */

.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2a4a40, #1c2a26 60%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 5vw, 3.75rem);
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 60%;
  background: radial-gradient(closest-side, rgb(238 106 95 / 0.35), transparent 70%);
}
.cta > * { position: relative; }
.cta h2 { color: #fff; margin: 0; }
.cta p { color: rgb(255 255 255 / 0.78); max-width: 40rem; }
.cta__gombok { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.5rem; }
.cta__szalag { position: absolute; inset: 0 0 auto; height: 6px; }

/* ---------- 15. Űrlap ---------- */

.urlap { display: grid; gap: 1.15rem; }
.urlap__par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.15rem; }

.mezo { display: grid; gap: 0.4rem; }
.mezo > label { font-weight: 700; font-size: var(--t-sm); }
.mezo > label .kotelezo { color: var(--coral-700); }
.mezo small { font-size: var(--t-xs); color: var(--ink-3); }

.mezo input,
.mezo select,
.mezo textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mezo textarea { min-height: 8rem; resize: vertical; }
.mezo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8e87' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.1rem; padding-right: 2.6rem; }
.mezo input:hover, .mezo select:hover, .mezo textarea:hover { border-color: var(--ink-3); }
.mezo input:focus, .mezo select:focus, .mezo textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 4px var(--coral-050);
}
.mezo input[aria-invalid="true"], .mezo textarea[aria-invalid="true"], .mezo select[aria-invalid="true"] { border-color: var(--coral-600); }
.mezo__hiba { font-size: var(--t-xs); font-weight: 600; color: var(--coral-700); }
.mezo__hiba:empty { display: none; }

.jelolo { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.jelolo input { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; flex: none; }

.mez-csapda { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.urlap__uzenet { padding: 1rem 1.2rem; border-radius: var(--r); font-size: var(--t-sm); font-weight: 600; display: none; }
.urlap__uzenet[data-allapot="siker"] { display: block; background: var(--leaf-050); color: var(--leaf-700); border: 1px solid var(--leaf-100); }
.urlap__uzenet[data-allapot="hiba"] { display: block; background: var(--coral-050); color: var(--coral-700); border: 1px solid var(--coral-100); }

.kapcsolat-racs { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 60rem) { .kapcsolat-racs { grid-template-columns: 1fr; } }

.kapcs-doboz { display: grid; gap: 1.25rem; }
.kapcs-tetel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.kapcs-tetel__ikon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 12px; background: var(--coral-050); color: var(--coral-700); }
.kapcs-tetel__ikon svg { width: 1.25rem; height: 1.25rem; }
.kapcs-tetel b { display: block; font-size: var(--t-sm); }
.kapcs-tetel a { font-size: var(--t-lg); font-weight: 700; text-decoration: none; font-family: var(--f-cim); }
.kapcs-tetel span { font-size: var(--t-sm); color: var(--ink-2); }

/* ---------- 16. Hírek ---------- */

.cikk-lista { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); list-style: none; margin: 0; padding: 0; }

.cikk-kartya { display: flex; flex-direction: column; gap: 0.65rem; height: 100%; }
.cikk-kartya time { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.cikk-kartya :is(h2, h3) { margin: 0; font-size: var(--t-xl); }
.cikk-kartya :is(h2, h3) a { color: inherit; text-decoration: none; }
.cikk-kartya :is(h2, h3) a:hover { color: var(--coral-700); }
.cikk-kartya p { color: var(--ink-2); font-size: var(--t-sm); margin: 0; }
.cikk-kartya .gomblink { margin-top: auto; padding-top: 0.5rem; }

.proza { max-width: var(--w-szuk); font-size: var(--t-lg); }
.proza h2 { margin-top: 2em; font-size: var(--t-2xl); }
.proza h3 { margin-top: 1.75em; }
.proza ul, .proza ol { padding-left: 1.35em; display: grid; gap: 0.4rem; margin-bottom: 1.2em; }
.proza li::marker { color: var(--coral); }
.proza blockquote {
  margin: 1.75em 0;
  padding: 0.35em 0 0.35em 1.35em;
  border-left: 4px solid var(--sun);
  font-family: var(--f-cim);
  font-style: italic;
  color: var(--ink-2);
}
.proza img { border-radius: var(--r); margin: 1.75em 0; }

.oldalfej { padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.5rem); }
.oldalfej h1 { max-width: 20ch; }
.oldalfej p { max-width: 46rem; font-size: var(--t-lg); color: var(--ink-2); }

.morzsa { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--t-sm); color: var(--ink-3); margin-bottom: 1rem; list-style: none; padding: 0; }
.morzsa a { color: var(--ink-2); text-decoration: none; }
.morzsa a:hover { color: var(--coral-700); text-decoration: underline; }
.morzsa li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }

/* ---------- 17. Táblázat (árak) ---------- */

.tabla-doboz { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
table.arak { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 34rem; }
table.arak th, table.arak td { padding: 0.9rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line-2); }
table.arak th { font-weight: 700; color: var(--ink); background: var(--cream-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; }
table.arak tr:last-child td { border-bottom: 0; }
table.arak td b { font-family: var(--f-cim); font-size: var(--t-lg); }
table.arak th.arak__program { background: none; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }

/* ---------- 18. Lábléc ---------- */

.lablec { background: var(--ink); color: rgb(255 255 255 / 0.72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: clamp(3rem, 7vw, 6rem); }
.lablec a { color: rgb(255 255 255 / 0.86); text-decoration: none; }
.lablec a:hover { color: #fff; text-decoration: underline; }
.lablec__racs { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
.lablec h4, .lablec .lablec__cim { color: #fff; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--f-szoveg); font-weight: 700; margin-bottom: 1rem; }
.lablec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: var(--t-sm); }
.lablec .logo { color: #fff; }
.lablec .logo__nev span { color: rgb(255 255 255 / 0.55); }
.lablec__leiras { font-size: var(--t-sm); max-width: 26rem; margin-top: 1rem; }
.lablec__also {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--t-xs);
}

/* ---------- 19. Finom mozgás ---------- */

@media (prefers-reduced-motion: no-preference) {
  .beuszik { opacity: 0; translate: 0 18px; transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .beuszik.lathato { opacity: 1; translate: 0 0; }
}

/* ---------- 20. Nyomtatás ---------- */

@media print {
  .fejlec, .lablec, .cta, .hero__kep, .szuro { display: none !important; }
  body { background: #fff; }
  .kartya, .alkalom { box-shadow: none; border-color: #ccc; }
}

/* ---------- 21. PHP-változat kiegészítései ---------- */

/* A szerkeszthető, formázott szövegek első bekezdése bevezetőként */
.bemutat__szoveg > p:first-child,
.proza--vezeto > p:first-child { font-size: var(--t-lg); color: var(--ink-2); }
.bemutat__szoveg p { margin-bottom: 1.05em; }

.kartya__cim { font-size: var(--t-xl); margin: 0; }
.kis-cim {
  font-family: var(--f-szoveg);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 0;
}

/* Videók és képek a cikkekben */
.proza iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); margin: 1.75em 0; }
.proza picture { display: block; margin: 1.75em 0; }
.proza picture img { margin: 0; }
.proza table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: 1.5em 0; }
.proza th, .proza td { border: 1px solid var(--line); padding: 0.5rem 0.75rem; text-align: left; }

/* Lapozó a hírek alatt */
.lapozo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.lapozo__allapot { font-weight: 700; color: var(--ink-3); font-size: var(--t-sm); }