/* ============================================================
   Fejlesztőház aloldal – a fejlesztési területek színes rács-kártyái
   (az élő szeglethaz.hu/fejlesztohaz oldal mozaik-blokkjainak mása:
   tömör színű kártyák, átlátszó számjelvénnyel). Elrendezés: 1 sorban
   4 egyenlő szélességű kártya.
   Hero, gombok, kapcsolat-sáv: lásd css/style.css.
   ============================================================ */

/* ============================================================
   HERO – az élő szeglethaz.hu/fejlesztohaz fullwidth headerének mása:
   ugyanaz a fotó-háttér, fölötte az élő oldal "felhő" elválasztója, majd
   egy fehérbe olvadó átmenet (17% → 99%), hogy a sötét szöveg olvasható
   maradjon. Tartalom: apró barna szemöldök-sor, nagy cím, leírás, két pill gomb.
   Az alap elrendezést (pozíció, középre zárás, konténer) a .page-hero adja.
   ============================================================ */
.fh-hero {
  padding: clamp(112px, 11vw, 148px) 0 clamp(4px, 0.6vw, 8px);
  background: var(--white) url("../assets/images/kapcsolat-bg.jpg") center top / cover no-repeat;
  /* Nincs overflow: hidden – a szűk alsó padding miatt a gombok színes árnyéka
     túlnyúlik a hero dobozán, és a vágás félbevágta volna. A ::before/::after
     réteg inset: 0, a háttér "cover", így nincs más, amit vágni kellene. */
}

/* Felhő-réteg a fotó fölött (az élő oldal Divi "clouds" elválasztójának SVG-je,
   fehér 30%-os kitöltéssel – ugyanaz a lágy ívsor, mint az élő fejlécen). */
.fh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid slice' width='100%25' height='86px' viewBox='0 0 1280 86' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgba(255,255,255,0.3)'%3E%3Cpath d='M833.9 27.5c-5.8 3.2-11 7.3-15.5 12.2-7.1-6.9-17.5-8.8-26.6-5-30.6-39.2-87.3-46.1-126.5-15.5-1.4 1.1-2.8 2.2-4.1 3.4C674.4 33.4 684 48 688.8 64.3c4.7.6 9.3 1.8 13.6 3.8 7.8-24.7 34.2-38.3 58.9-30.5 14.4 4.6 25.6 15.7 30.3 30 14.2 1.2 27.7 6.9 38.5 16.2C840.6 49.6 876 29.5 910.8 38c-20.4-20.3-51.8-24.6-76.9-10.5zM384 43.9c-9 5-16.7 11.9-22.7 20.3 15.4-7.8 33.3-8.7 49.4-2.6 3.7-10.1 9.9-19.1 18.1-26-15.4-2.3-31.2.6-44.8 8.3zm560.2 13.6c2 2.2 3.9 4.5 5.7 6.9 5.6-2.6 11.6-4 17.8-4.1-7.6-2.4-15.6-3.3-23.5-2.8zM178.7 7c29-4.2 57.3 10.8 70.3 37 8.9-8.3 20.7-12.8 32.9-12.5C256.4 1.8 214.7-8.1 178.7 7zm146.5 56.3c1.5 4.5 2.4 9.2 2.5 14 .4.2.8.4 1.2.7 3.3 1.9 6.3 4.2 8.9 6.9 5.8-8.7 13.7-15.7 22.9-20.5-11.1-5.2-23.9-5.6-35.5-1.1zM33.5 54.9c21.6-14.4 50.7-8.5 65 13 .1.2.2.3.3.5 7.3-1.2 14.8-.6 21.8 1.6.6-10.3 3.5-20.4 8.6-29.4.3-.6.7-1.2 1.1-1.8-32.1-17.2-71.9-10.6-96.8 16.1zm1228.9 2.7c2.3 2.9 4.4 5.9 6.2 9.1 3.8-.5 7.6-.8 11.4-.8V48.3c-6.4 1.8-12.4 5-17.6 9.3zM1127.3 11c1.9.9 3.7 1.8 5.6 2.8 14.2 7.9 25.8 19.7 33.5 34 13.9-11.4 31.7-16.9 49.6-15.3-20.5-27.7-57.8-36.8-88.7-21.5z' fill-opacity='.5' /%3E%3Cpath d='M0 0v66c6.8 0 13.5.9 20.1 2.6 3.5-5.4 8.1-10.1 13.4-13.6 24.9-26.8 64.7-33.4 96.8-16 10.5-17.4 28.2-29.1 48.3-32 36.1-15.1 77.7-5.2 103.2 24.5 19.7.4 37.1 13.1 43.4 31.8 11.5-4.5 24.4-4.2 35.6 1.1l.4-.2c15.4-21.4 41.5-32.4 67.6-28.6 25-21 62.1-18.8 84.4 5.1 6.7-6.6 16.7-8.4 25.4-4.8 29.2-37.4 83.3-44.1 120.7-14.8l1.8 1.5c37.3-32.9 94.3-29.3 127.2 8 1.2 1.3 2.3 2.7 3.4 4.1 9.1-3.8 19.5-1.9 26.6 5 24.3-26 65-27.3 91-3.1.5.5 1 .9 1.5 1.4 12.8 3.1 24.4 9.9 33.4 19.5 7.9-.5 15.9.4 23.5 2.8 7-.1 13.9 1.5 20.1 4.7 3.9-11.6 15.5-18.9 27.7-17.5.2-.3.3-.6.5-.9 22.1-39.2 70.7-54.7 111.4-35.6 30.8-15.3 68.2-6.2 88.6 21.5 18.3 1.7 35 10.8 46.5 25.1 5.2-4.3 11.1-7.4 17.6-9.3V0H0z' /%3E%3C/g%3E%3C/svg%3E") center top / cover no-repeat;
}

/* A .page-hero alsó elhalványulása itt a teljes magasságot fedi, ahogy az élőn:
   a kép alja fehérbe megy át, a felhők és a fotó ott elhalványulnak.
   A fehér már 90%-nál teljes, nem 99%-nál: a rövid heró miatt korábban maradt
   egy halvány fotó-sáv a doboz aljáig, ami éles vízszintes vonalként vágta el a
   képet a fehér szekciótól. Így a fotó teljesen feloldódik, mielőtt a szekció
   kezdődne – az átmenet észrevétlen. */
.fh-hero::after {
  height: 100%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 12%,
    rgba(255, 255, 255, 0.55) 52%,
    rgba(255, 255, 255, 0.88) 76%,
    var(--white) 90%);
}

.fh-hero-eyebrow {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #6f5d44;
  margin-bottom: 4px;
}
.fh-hero-title {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 12px;
}
.fh-hero-lead {
  /* Az élőn egy sorban fut ki a leírás széles képernyőn – ezért a bő max-width.
     A méret egy hangyányit nagyobb a törzsszövegnél: itt most egysoros mottó áll,
     ami a nagy hero-cím alatt túl halknak hatott. */
  max-width: 980px;
  margin: 0 auto 26px;
  color: var(--ink);
  line-height: 2;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
}
.fh-hero-lead strong { font-weight: 700; }

/* A két pill lejjebb ül a címtől, hogy a hero-fotó felső harmada levegőt kapjon.
   A z-index a rákövetkező (fölécsúszó) szekció fölé emeli a gombokat, így az
   árnyékukat a #nehezsegek fehér háttere sem takarja ki. */
.fh-hero .page-hero-actions {
  margin-top: clamp(18px, 2.4vw, 34px);
  position: relative;
  z-index: 3;
}

/* ---------- Az oldal gombpalettája ----------
   A hero pilljei és a terápia kereső lépésgombjai két színt viselnek: mély
   türkiz és korall (ugyanaz a --teal és #ff7355, ami a fejlesztési területek
   kártyáin fut) – az alap szürke CTA (#dbdbdb) helyett. A kártyák saját
   „Tovább” pilljei szándékosan maradnak sötét fátylasok, lásd .fh-area-btn.
   A türkizt ink-kel mélyítjük, hogy a fehér felirat AA-kontrasztban maradjon.
   A .fh-page a body osztálya, ezért a többi oldal gombjait ez nem érinti. */
.fh-page {
  --btn-teal: color-mix(in srgb, var(--teal) 72%, var(--ink));
  --btn-teal-hover: color-mix(in srgb, var(--teal) 90%, var(--ink));
  --btn-coral: #ff7355;
  --btn-coral-hover: color-mix(in srgb, #ff7355 86%, var(--white));
}

/* Korall CTA az egész lapon: hero „Tanácsot kérek” + a terápia kereső
   lépésgombjai (Tovább / Eredmények). */
.fh-page .btn-primary {
  background: var(--btn-coral);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(255, 115, 85, 0.28);
}
.fh-page .btn-primary:hover {
  background: var(--btn-coral-hover);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(255, 115, 85, 0.38);
}

/* A heróban erősebb a színes derengés – ott a fotó fölött ez tartja meg a
   pillek plasztikáját. */
.fh-hero .page-hero-actions .btn { border-color: transparent; }
.fh-hero .btn-primary { box-shadow: 0 8px 20px rgba(255, 115, 85, 0.35); }
.fh-hero .btn-primary:hover { box-shadow: 0 12px 26px rgba(255, 115, 85, 0.45); }

.fh-hero .btn-ghost-dark {
  background: var(--btn-teal);
  color: var(--white);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--teal) 40%, transparent);
}
.fh-hero .btn-ghost-dark:hover {
  background: var(--btn-teal-hover);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--teal) 52%, transparent);
}

@media (max-width: 600px) {
  .fh-hero { padding-top: clamp(112px, 26vw, 150px); }
  .fh-hero-eyebrow { font-size: 13px; letter-spacing: 3px; }
  .fh-hero-lead { line-height: 1.9; }
}

#nehezsegek,
#fejlesztes {
  background: #fff url("../assets/images/shapes-bg.png") center top / contain no-repeat;
}

/* A hero alja és az első szekció címe között korábban ~370px üres fehér maradt.
   Nem a paddingtól: a style.css #nehezsegek szabálya 100vh-s, flexben függőlegesen
   középre zárt szekciót csinál belőle, így a cím a képernyő közepére esett. Itt a
   szekció a saját tartalmához igazodik, és pár pixellel a hero fehérbe futó aljába
   csúszik, hogy a cím közvetlenül a gombok alatt üljön.
   A -14px-es behúzást 20px-szel lazítottuk, hogy a gombok alatt több levegő
   maradjon a cím előtt. */
#nehezsegek {
  min-height: 0;
  align-items: flex-start;
  padding-top: clamp(30px, calc(1.4vw + 20px), 40px);
  margin-top: 6px;
}

/* A lista alja és a "Fejlesztési területeink" cím között a két szekció
   padding-ja összeadódott (≈112–176px). Itt mindkettő nullázva, és a második
   szekció negatív margóval bele is csúszik a fölötte lévőbe – mindkét háttér
   fehér, így a határ nem látszik, a cím közvetlenül a lista alá kerül. */
#nehezsegek { padding-bottom: 0; }
#fejlesztes {
  padding-top: 50px;
  margin-top: 0;
}

/* Az oldal szekciócímei 15%-kal kisebbek az alapértelmezett .section-title-nál. */
#nehezsegek .section-title,
#fejlesztes .section-title,
#terapia-kereso .section-title {
  font-size: clamp(1.53rem, 3.4vw, 2.21rem);
}

.fh-areas {
  display: grid;
  gap: 14px;
}
.fh-areas-row {
  display: grid;
  gap: 14px;
}
.fh-areas-row--top { grid-template-columns: repeat(4, 1fr); }
.fh-area-card {
  background: var(--area-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 2vw, 22px) clamp(16px, 1.8vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fh-area-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fh-area-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  color: var(--white);
}
.fh-area-badge svg { width: 22px; height: 22px; }
.fh-area-title {
  color: var(--white);
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 10px;
}
.fh-area-sublabel {
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 6px;
}
.fh-area-list { list-style: none; margin-bottom: 12px; width: 100%; text-align: left; }
.fh-area-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}
.fh-area-list svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: rgba(10, 5, 5, 0.68); }
.fh-area-list span { color: rgba(10, 5, 5, 0.85); font-size: 15px; line-height: 1.4; }
.fh-area-btn {
  margin-top: auto;
  background: rgba(10, 5, 5, 0.4);
  color: var(--white);
  border-color: transparent;
}
.fh-area-btn:hover { background: var(--ink); }

@media (max-width: 900px) {
  .fh-areas-row--top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fh-areas-row--top { grid-template-columns: 1fr; }
}

/* ---------- KAPCSOLAT / IDŐPONT ---------- */
/* A háttér PONTOSAN a lábléc rámpájának kezdőszíne (--fade-in, lentebb):
   ha a kettő akár egy árnyalatnyit is eltér, a határon éles vízszintes
   vonal jelenik meg. Ha ezt átszínezed, a lábléc rámpa első stopját is
   írd át ugyanarra. */
.fh-idopont {
  /* Felül a fölötte lévő fehér szekcióból olvad be, alul PONTOSAN #e0d6d1-en
     áll meg – az utolsó stop után a gradiens végig ezt a színt tartja, és ez
     a lábléc rámpájának kezdőszíne is. Az alsó stopot csak a lábléc rámpával
     együtt írd át.
     A lépcsők S-görbét rajzolnak (lassú indulás → gyors közép → lassú
     kifutás), mint a lábléc rámpája: ahol a színváltás üteme ugrik, ott a
     szem vízszintes vonalat lát (Mach-sáv). */
  background: linear-gradient(to bottom,
    #ffffff 0px,
    color-mix(in srgb, #e0d6d1 4%,  #ffffff) 14px,
    color-mix(in srgb, #e0d6d1 15%, #ffffff) 30px,
    color-mix(in srgb, #e0d6d1 32%, #ffffff) 48px,
    color-mix(in srgb, #e0d6d1 52%, #ffffff) 68px,
    color-mix(in srgb, #e0d6d1 68%, #ffffff) 86px,
    color-mix(in srgb, #e0d6d1 82%, #ffffff) 110px,
    color-mix(in srgb, #e0d6d1 92%, #ffffff) 145px,
    color-mix(in srgb, #e0d6d1 98%, #ffffff) 185px,
    #e0d6d1 220px);
  padding: clamp(48px, 7vw, 90px) 0;
  scroll-margin-top: var(--header-h);
}
.fh-idopont-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.fh-cta {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(36px, 5vw, 64px) clamp(26px, 4vw, 60px);
}
.fh-cta h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 14px; color: var(--sand); font-weight: 700; }
.fh-cta p { color: var(--muted); line-height: 1.8; margin-bottom: 26px; }
.fh-cta .btn-primary { background: #FF6B4A; color: var(--white); border-color: #FF6B4A; }
.fh-cta .btn-primary:hover { background: #E55A39; }

/* Contact strip in idopont section displays as stacked column */
.fh-idopont-inner .contact-strip {
  grid-template-columns: 1fr;
  gap: 16px;
}
.fh-idopont-inner .contact-strip__body h4 { color: var(--sand) !important; }
.fh-idopont-inner .contact-strip__body p { color: var(--muted); }
.fh-idopont-inner .contact-strip__item--cim .contact-strip__icon { background: #FF6B4A; color: var(--white); border: none; }
.fh-idopont-inner .contact-strip__item--tel .contact-strip__icon { background: #7ca067; color: var(--white); border: none; }
.fh-idopont-inner .contact-strip__item--email .contact-strip__icon { background: #3b9d9d; color: var(--white); border: none; }

/* ---------- Terápia kereső: tünet-javaslatok (az "Írja le néhány szóban" mezőkben) ---------- */
.tk-symptom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tk-symptom-chips:empty { display: none; }
.tk-symptom-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 7px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--green-dark);
  background: var(--green-dark);
  color: var(--white);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.tk-symptom-chip:hover { background: var(--ink); border-color: var(--ink); }
.tk-symptom-chip .tk-symptom-chip-x { flex: none; font-size: 0.95rem; line-height: 1; opacity: 0.85; }

.tk-symptom-suggestions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tk-symptom-suggestion {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px dashed var(--hairline);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.tk-symptom-suggestion:hover { border-color: var(--green); border-style: solid; background: rgba(124, 160, 103, 0.08); }
.tk-symptom-suggestion-empty { color: var(--muted); font-size: 0.88rem; padding: 4px; }

/* ---------- Terápia kereső ---------- */
.tk-tool {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 44px);
  max-width: 980px;
  margin: 0 auto;
}

.tk-age-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.tk-age-row label { font-weight: 600; }
.tk-age-row input {
  width: 110px;
  font: inherit;
  padding: 10px 14px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tk-age-row input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(59,157,157,0.18);
}

.tk-group {
  border: none;
  padding: 0;
  margin: 0 0 26px;
}
.tk-group:last-of-type { margin-bottom: 8px; }
.tk-group legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Baloo Bhai 2", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--green-dark);
  margin-bottom: 14px;
  padding: 0;
}
.tk-group legend svg { flex: none; width: 22px; height: 22px; }
.tk-group-question { font-weight: 600; margin-bottom: 12px; }
.tk-group-hint { font-weight: 500; color: var(--muted); font-size: 0.85rem; }

.tk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tk-chip { position: relative; display: inline-flex; cursor: pointer; }
.tk-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.tk-chip span {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--hairline);
  background: var(--white);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.tk-chip:hover span { border-color: var(--green); }
.tk-chip input:checked + span {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(95, 128, 80, 0.3);
}
.tk-chip input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.tk-chip input:disabled + span { opacity: 0.4; cursor: not-allowed; }

.tk-main-chips .tk-chip span { display: inline-flex; align-items: center; gap: 8px; }
.tk-main-chips .tk-chip span svg { flex: none; width: 18px; height: 18px; }

.tk-freetext {
  display: block;
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.tk-freetext textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  font: inherit;
  font-weight: 400;
  padding: 10px 14px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  resize: vertical;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tk-freetext textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(59,157,157,0.18);
}

.tk-actions { text-align: center; margin-top: 8px; }

/* ---------- Terápia kereső: lépésenkénti varázsló ---------- */
.tk-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.tk-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.tk-progress-step + .tk-progress-step::before {
  content: "";
  width: clamp(24px, 6vw, 56px);
  height: 2px;
  background: var(--hairline);
  margin: 0 10px;
}
.tk-progress-step span {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hairline);
  color: var(--white);
  font-family: "Baloo Bhai 2", sans-serif;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tk-progress-step.is-active span,
.tk-progress-step.is-done span { background: var(--green-dark); }
.tk-progress-step.is-active { color: var(--ink); }
.tk-progress-step.is-done { color: var(--green-dark); }

.tk-step { display: none; }
.tk-step.is-active { display: block; animation: tk-step-in .3s var(--ease); }
@keyframes tk-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.tk-step-eyebrow {
  display: block;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.tk-step-title {
  font-family: "Baloo Bhai 2", sans-serif;
  font-size: 1.25rem;
  color: var(--green-dark);
  margin-bottom: 4px;
}
.tk-step-hint { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; }

.tk-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.tk-step-actions-end { justify-content: flex-end; }

.tk-results-wrap {
  max-width: 980px;
  margin: 40px auto 0;
}
.tk-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.tk-results-head h3 { font-size: 1.3rem; }
.tk-count { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }

.tk-placeholder {
  color: var(--muted);
  text-align: center;
  padding: 32px 20px;
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--hairline);
}

.tk-area-group { margin-bottom: 28px; }
.tk-area-group:last-child { margin-bottom: 0; }
.tk-area-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
}
.tk-area-heading::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.tk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.tk-card {
  background: var(--white);
  border: 1.5px solid var(--hairline);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tk-card-head h4 { font-size: 1rem; margin-bottom: 4px; }
.tk-card-age {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.tk-card .btn { align-self: flex-start; margin-top: auto; }

.tk-disclaimer {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 24px;
}

/* ---------- Terápia kereső szekció háttere ----------
   A megosztott .section-alt tónusa (--bg-alt, #c5ab9e) helyett itt világosabb
   homokszín. Felül lágyan átlátszóba fut, hogy a fehér #fejlesztes aljába
   törésvonal nélkül olvadjon; alul viszont tömör marad, mert onnan közvetlenül
   a lábléc sötét rámpája veszi át – fehér sáv nem ékelődik közé.
   Csak erre az oldalra hat, a többi .section-alt marad az eredeti háttéren. */
#terapia-kereso {
  background: linear-gradient(to bottom,
    transparent 0px,
    color-mix(in srgb, #e0d6d1 40%, transparent) 56px,
    color-mix(in srgb, #e0d6d1 80%, transparent) 112px,
    #e0d6d1 160px,
    #e0d6d1 100%);
}
/* A style.css hullám-motívuma tömör, éles alakzat lenne közvetlenül a
   kifakuló felső él fölött – ezért itt ki van kapcsolva (ld. #csaladiasan). */
#terapia-kereso::before { content: none; }

/* A lábléc rámpája alapból fehérből (--bg) indul; ezen az oldalon az utolsó
   szekció homokszíne az előzmény, ezért a keverés alapszíne is az. Így a
   szekció alja → lábléc átmenetben nincs fehér közjáték. A rámpa 220px helyett
   110px-en fut le, hogy a záró sor és a lábléc tartalma közé ne kerüljön
   indokolatlanul nagy üres sáv.

   A lépcsők S-görbét (lassú indulás → gyors közép → lassú kifutás) rajzolnak.
   Ez nem esztétikai finomkodás: ahol a sötétedés üteme ugrik, ott a szem
   vízszintes vonalat lát (Mach-sáv), és pont ez adta a lábléc „keretét” –
   a felső élnél (a fölötte lévő szekció háttere teljesen egyenletes) és a
   padding végénél, ahol a meredek rámpa hirtelen ellaposodott. Az ütem így
   végig folyamatos, sehol nincs törés. A 110px-nél elért ~82% sötétség kell
   ahhoz, hogy az induló lábléctartalom (--sand szöveg) olvasható maradjon. */
.site-footer--fade-in {
  /* 1px átfedés: tört pixeles elrendezésnél (nem egész arányú zoom, HiDPI) a
     szekció és a lábléc közé beszorulhat egy alpixelnyi rés, amin átvillan a
     fehér body-háttér – vékony fehér vonalként. A negatív margó ezt a rést
     zárja le; a rámpa kezdőszíne úgyis azonos a fölötte lévő szekcióéval,
     így az átfedés nem látszik. */
  margin-top: -1px;
  padding-top: 110px;
  background: linear-gradient(to bottom,
    #e0d6d1 0px,
    color-mix(in srgb, #333333 4%,  #e0d6d1) 14px,
    color-mix(in srgb, #333333 15%, #e0d6d1) 30px,
    color-mix(in srgb, #333333 32%, #e0d6d1) 48px,
    color-mix(in srgb, #333333 52%, #e0d6d1) 68px,
    color-mix(in srgb, #333333 68%, #e0d6d1) 86px,
    color-mix(in srgb, #333333 82%, #e0d6d1) 110px,
    color-mix(in srgb, #333333 90%, #e0d6d1) 150px,
    color-mix(in srgb, #333333 96%, #e0d6d1) 210px,
    #333333 100%);
}

/* Az utolsó szekció alsó paddingja is szűkebb – a lábléc rámpája már
   önmagában elegendő levegőt ad a záró sor alatt. */
#terapia-kereso { padding-bottom: clamp(32px, 3.5vw, 48px); }

/* A "Terápia kereső" cím fölötti rés 50px-szel szűkebb a .section alapnál. */
#terapia-kereso { padding-top: clamp(6px, calc(6vw - 50px), 38px); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .fh-idopont-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tk-results-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tk-progress-step span { width: 24px; height: 24px; font-size: 0.85rem; }
  .tk-step-actions { flex-wrap: wrap; }

  /* A lépésjelző egyetlen, nem törhető (white-space: nowrap) sor: a három
     felirat + a két összekötő vonal 360px-en 366px-re hízott, és EZ tolta
     vízszintes görgetésbe az egész oldalt. Keskenyebb összekötő, kisebb
     térközök – a sor így 320px-en is elfér. */
  .tk-progress-step { font-size: 0.78rem; gap: 6px; }
  .tk-progress-step + .tk-progress-step::before {
    width: clamp(10px, 3vw, 20px);
    margin: 0 5px;
  }
}

/* CSAK a legkeskenyebb telefonokon (SE, Fold) hagyjuk el a feliratokat – a
   360/390px-es többség még elfér velük. A lépés neve a lépés fejlécében amúgy
   is ott áll ("1. LÉPÉS – Hány éves a gyermek?"), így a számozott korongok
   önmagukban is egyértelmű haladásjelzőt adnak. Az <ol> aria-hidden, tehát ez
   nem von el információt a képernyőolvasótól sem. */
@media (max-width: 340px) {
  .tk-progress-step {
    font-size: 0;
    gap: 0;
  }
  .tk-progress-step span { font-size: 0.85rem; }
}