/* =========================================================
   Czelleng Réka — család- és párterápia, life coaching
   style.css
   ---------------------------------------------------------
   1. Tokens        5. Header / nav / nyelvválasztó
   2. Alapok        6. Szekciók és komponensek
   3. Tipográfia    7. Lábléc
   4. Layout        8. Mozgás és akadálymentesség
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --paper: #F8F4EF;
  --paper-2: #F2EAE1;
  --paper-3: #EDE3D9;
  --ink: #282320;
  --ink-2: #5F564E;
  --ink-3: #8A7F76;
  /* A hosszabb, kiemelt bekezdések színe. Korábban három, egymástól alig
     eltérő árnyalat volt rá beégetve (#3B3229, #3F362E, #33291F). */
  --ink-deep: #3B3229;
  --line: rgba(40, 35, 32, .13);
  --line-2: rgba(40, 35, 32, .07);

  /* A logó színátmenete adja a családokat: sárga -> barack -> rózsaszín,
     mellettük a lila mint negyedik hang. Minden dekoratív szín innen jön;
     a :root blokkon kívül NE legyen beégetett színkód. */

  /* sárga */
  --sun: #F7C61F;
  --sun-soft: #F8D66B;

  /* barack */
  --peach: #F6B583;
  --peach-soft: #F2C79E;

  /* rózsaszín */
  --magenta: #E263B4;
  --rose: #F09BC4;
  --rose-soft: #E7AEBF;

  /* lila */
  --lilac: #B49CD6;

  /* A fotókra hulló finom színfátyol (.figure .shot::after): ugyanez a három
     szín, alacsony átlátszatlansággal. Azért külön változó, hogy ne maradjon
     beégetett rgba a szabályok között. */
  --fatyol-sarga: rgba(247, 198, 31, .16);
  --fatyol-rozsa: rgba(240, 155, 196, .17);
  --fatyol-lila: rgba(180, 156, 214, .18);

  --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--1: clamp(.80rem, .78rem + .10vw, .86rem);
  --step-0: clamp(1.02rem, .99rem + .16vw, 1.12rem);
  --step-1: clamp(1.16rem, 1.10rem + .30vw, 1.34rem);
  --step-2: clamp(1.45rem, 1.30rem + .70vw, 1.85rem);
  --step-3: clamp(1.80rem, 1.55rem + 1.20vw, 2.55rem);
  --step-4: clamp(2.35rem, 1.85rem + 2.40vw, 4.05rem);

  --wrap: 1140px;
  --prose: 66ch;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(64px, 8vw, 116px);
  --radius: 3px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 170ms;
  --t-mid: 240ms;
}

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

/* A diszito elemek szandekosan tullognak a sajat dobozukon: a kepkeret
   fenyudvara (.figure::before) 11 szazalekkal, a kontur (.ring) 6-tal, a
   sarokviragok 9-cel. Mobilon a kepkeret majdnem teljes szelessegu, ezert
   ezek a keperyon kivulre kerultek, es az oldal jobbra-balra huzhatova valt,
   mellette feher savval.

   A body overflow-x: hidden onmagaban nem oldotta meg: ha a html overflow-ja
   visible, a body erteke a nezetablakra szall at, maga a body pedig nem vag.
   A megoldas az overflow-x: clip mindketton. A clip azert kell a hidden
   helyett, mert nem hoz letre gorgetesi kontenert, igy a ragados (sticky)
   fejlec tovabbra is a nezetablak tetejehez tapad — hidden-nel elcsuszna.
   A hidden sor tartalekként marad a clip-et nem ismero regi bongeszoknek.

   A diszitesek megmaradnak, csak a kepernyo szelenel elvagodnak. */

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

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

a {
  color: inherit
}

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

/* egész oldalra fekvő, finom szemcse */
.grain {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .30;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode: multiply;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-decoration: none;
}

.skip:focus {
  left: 16px;
  top: 16px
}

/* ---------- 3. Tipográfia ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--ink);
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--step-4);
  line-height: 1.05
}

h2 {
  font-size: var(--step-3);
  line-height: 1.14
}

h3 {
  font-size: var(--step-1);
  line-height: 1.32;
  letter-spacing: 0
}

h4 {
  font-size: var(--step-0);
  line-height: 1.4;
  font-family: var(--ff-body);
  font-weight: 600
}

em.soft {
  font-style: italic;
  font-weight: 300
}

p {
  margin: 0 0 1.15em;
  overflow-wrap: break-word
}

p:last-child {
  margin-bottom: 0
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0 0 18px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sun), var(--magenta));
  opacity: .9
}

.eyebrow.center {
  justify-content: center
}

.lead {
  font-family: var(--ff-display);
  font-size: var(--step-2);
  line-height: 1.44;
  color: var(--ink-deep);
  font-weight: 300;
  max-width: 30ch;
}

.lead--wide {
  max-width: 44ch
}

.intro {
  font-size: var(--step-1);
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 60ch
}

.muted {
  color: var(--ink-2)
}

.small {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-3)
}

/* kiemelt gondolat */
.pull {
  position: relative;
  font-family: var(--ff-display);
  font-size: var(--step-2);
  line-height: 1.46;
  color: var(--ink-deep);
  padding: 2px 0 2px 26px;
  margin: 36px 0;
  max-width: 44ch;
}

.pull::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sun), var(--magenta));
}

.pull--quiet::before {
  background: linear-gradient(180deg, var(--peach), var(--lilac))
}

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

.prose {
  max-width: var(--prose)
}

.section {
  padding-block: var(--section);
  position: relative
}

.section--tight {
  padding-block: calc(var(--section) * .6)
}

.section--tint {
  background: var(--paper-2)
}

.section--top0 {
  padding-top: 0
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line)
}

.rule-grad {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--sun), var(--peach), var(--magenta), var(--lilac), transparent);
  opacity: .85;
}

.stack>*+* {
  margin-top: clamp(14px, 1.6vw, 22px)
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 6vw, 88px);
  align-items: center
}

.duo--top {
  align-items: start
}

.duo--text {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr)
}

@media (max-width:880px) {

  .duo,
  .duo--text {
    grid-template-columns: 1fr;
    gap: clamp(30px, 7vw, 48px)
  }
}

.section-head {
  max-width: 56ch;
  margin-bottom: clamp(34px, 4.5vw, 58px)
}

.section-head h2 {
  margin-bottom: 14px
}

.section-head p {
  color: var(--ink-2);
  margin: 0
}

/* dekoratív, nagyon lassan mozgó háttérfoltok */
.wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  z-index: 0
}

.has-wash {
  position: relative;
  overflow: hidden;
  isolation: isolate
}

.has-wash>.wrap,
.has-wash>.rule,
.has-wash>.rule-grad {
  position: relative;
  z-index: 1
}

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(248, 244, 239, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), backdrop-filter var(--t-mid);
}

.site-header.is-scrolled {
  background: rgba(248, 244, 239, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

.bar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 30px);
  min-height: 76px
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
  min-width: 0
}

.brand .mark {
  width: 38px;
  height: 38px;
  flex: none;
  transition: opacity var(--t-mid) var(--ease)
}



.brand:hover .mark {
  opacity: .88
}

.brand-name {
  font-family: var(--ff-display);
  font-size: 1.14rem;
  line-height: 1.08;
  letter-spacing: .015em;
  white-space: nowrap;
}

.brand-role {
  display: block;
  font-family: var(--ff-body);
  font-size: .63rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  /* A sorkoz alapertelmezesben 1.75 volt: a 10 keppontos betu folott ~7
     keppont ures teret hagyott, ettol tavolodott el a nevtol. */
  line-height: 1.3;
  margin-top: -1px;
  white-space: nowrap
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px)
}

.nav a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 0;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}

.nav a:hover {
  color: var(--ink)
}

.nav a:hover::after {
  transform: scaleX(1)
}

.nav a[aria-current="page"] {
  color: var(--ink)
}

.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  height: 2px;
  background: linear-gradient(90deg, var(--sun), var(--magenta))
}

/* nyelvválasztó */
.langpick {
  position: relative;
  flex: none
}

.langbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px 7px 11px;
  cursor: pointer;
  color: var(--ink-2);
  font: inherit;
  font-size: .72rem;
  letter-spacing: .12em;
  line-height: 1;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.langbtn:hover {
  border-color: var(--ink-3);
  color: var(--ink)
}

.langbtn .globe {
  width: 15px;
  height: 15px;
  flex: none
}

.langbtn .chev {
  width: 8px;
  height: 5px;
  flex: none;
  transition: transform var(--t-mid) var(--ease)
}

.langbtn[aria-expanded="true"] .chev {
  transform: rotate(180deg)
}

.langmenu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 172px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 12px 34px -22px rgba(40, 35, 32, .5);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  /* A visibility: hidden nelkul a ket nyelvi link csukott menuben is
     fokuszalhato maradna: a billentyuzettel navigalo latogato lathatatlan
     elemekre tabolna. A Szolgaltatasok almenuje (.almenu-lista) ugyanigy
     mukodik. A transition vegen szerepel, hogy a zaro animacio lefusson. */
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease),
    visibility var(--t-mid);
}

.langmenu.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto
}

.langmenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: .86rem;
  letter-spacing: .01em;
  border-radius: 3px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.langmenu a:hover {
  background: var(--paper-2);
  color: var(--ink)
}

.langmenu a[aria-current="true"] {
  color: var(--ink);
  font-weight: 500
}

.langmenu .tick {
  width: 12px;
  height: 9px;
  flex: none;
  opacity: 0
}

.langmenu a[aria-current="true"] .tick {
  opacity: 1
}

/* hamburger */
.burger {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  margin-right: -10px;
  cursor: pointer;
  color: var(--ink);
}

.burger svg {
  display: block
}

.burger .l {
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
  transform-origin: center
}

.burger[aria-expanded="true"] .l1 {
  transform: translateY(6px) rotate(45deg)
}

.burger[aria-expanded="true"] .l2 {
  opacity: 0
}

.burger[aria-expanded="true"] .l3 {
  transform: translateY(-6px) rotate(-45deg)
}

@media (max-width:900px) {
  .burger {
    display: block;
    order: 3
  }

  .langpick {
    order: 2
  }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h, 76px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 4px var(--gutter) 26px;
    transform: translateY(-115%);
    visibility: hidden;
    transition: transform 320ms var(--ease), visibility 320ms;
    max-height: calc(100dvh - var(--header-h, 76px));
    overflow-y: auto;
  }

  .nav.is-open {
    transform: none;
    visibility: visible
  }

  .nav a {
    padding: 16px 0;
    font-size: .9rem;
    border-bottom: 1px solid var(--line-2)
  }

  .nav a::after {
    display: none
  }

  .nav a[aria-current="page"] {
    padding-left: 14px;
    border-left: 2px solid var(--ink)
  }
}

@media (max-width:420px) {
  .bar {
    min-height: 66px;
    gap: 12px
  }

  .brand-name {
    font-size: 1rem
  }

  .brand-role {
    display: none
  }

  .langbtn {
    padding: 6px 10px
  }
}

/* ---------- 6. Komponensek ---------- */

/* gombok */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-decoration: none;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 17px 30px;
  min-height: 52px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
}

.btn:hover {
  background: transparent;
  color: var(--ink)
}

.btn .arw {
  transition: transform var(--t-mid) var(--ease)
}

.btn:hover .arw {
  transform: translateX(3px)
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line)
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--ink)
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px
}

/* Kozvetlenul egymas alatt allo gombsorok (pl. a szolgaltatasoldalakon a
   koterapeutak es a masik szolgaltatas gombja) szorosabban kovessek egymast. */

.btn-row + .btn-row {
  margin-top: 14px
}

@media (max-width:480px) {
  .btn {
    width: 100%;
    padding-inline: 22px
  }

  .btn-row {
    gap: 12px
  }
}

/* szöveges link */
.tlink {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease);
}

.tlink:hover {
  border-color: var(--ink)
}

/* hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate
}

.hero .wash {
  opacity: 1
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(58px, 9vw, 116px);
}

.hero h1 {
  margin-bottom: 22px;
  max-width: 15ch
}

.hero .intro {
  max-width: 46ch;
  color: var(--ink-deep)
}

@media (max-width:880px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: clamp(44px, 9vw, 72px)
  }

  .hero .figure {
    max-width: 262px
  }

  .hero h1 {
    max-width: none
  }
}

/* kép ívelt keretben */
.figure {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto
}

.figure::before {
  content: "";
  position: absolute;
  inset: -8% -11% -5%;
  border-radius: 50%;
  z-index: 0;
  background: radial-gradient(58% 54% at 28% 26%, var(--sun), transparent 68%),
    radial-gradient(58% 58% at 80% 74%, var(--magenta), transparent 70%);
  filter: blur(42px);
  opacity: .82;
}

.figure .ring {
  position: absolute;
  inset: 5% -6% 8% 7%;
  z-index: 1;
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: 999px 999px var(--radius) var(--radius);
}

.figure .shot {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--paper-3);
  border-radius: 999px 999px var(--radius) var(--radius);
  aspect-ratio: 3/4;
}

.figure .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
  transition: transform 600ms var(--ease);
}

.figure:hover .shot img {
  transform: scale(1.015)
}

.figure .shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(168deg, var(--fatyol-sarga), var(--fatyol-rozsa) 55%, var(--fatyol-lila));
}

.figure .tex {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .45;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23p)' opacity='.6'/></svg>");
}

.figure figcaption {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.figure--soft .shot,
.figure--soft .ring {
  border-radius: 200px 22px 200px 22px
}

.figure--soft .shot {
  aspect-ratio: 1/1
}

.figure--soft .ring {
  inset: 7% -7% -7% 7%
}

.figure--soft figcaption {
  font-family: var(--ff-display);
  font-size: 1.02rem;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink-2);
  max-width: 34ch;
  margin-inline: auto;
  line-height: 1.5;
}

/* témalista (Miben tudok segíteni) */
.topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 5vw, 64px)
}

@media (max-width:820px) {
  .topics {
    grid-template-columns: 1fr
  }
}

.topic {
  padding: 26px 0;
  border-top: 1px solid var(--line)
}

.topic h3 {
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 12px
}

/* A temakoroknel a jel a cimsor elso sorahoz igazodik. A kepek alapvonala
   az also eluk, ezert a baseline-igazitas utan egy kicsit meg lejjebb
   toljuk, hogy optikailag a nagybetuk kozepere essen. Tobbsoros cimsornal
   is az elso sor mellett marad, mert a szoveg kulon span-ban tordelodik. */

.topic h3 .jel {
  width: 1.25em;
  height: 1.25em;
  transform: translateY(.14em)
}

.topic p {
  margin: 0;
  color: var(--ink-2);
  font-size: .97rem;
  line-height: 1.66
}

.topic:hover h3 .jel {
  opacity: 1
}

/* koterápia lépések */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0
}

.steps li {
  padding: 20px 0;
  border-top: 1px solid var(--line)
}

.steps li:last-child {
  border-bottom: 1px solid var(--line)
}

.steps h3 {
  font-family: var(--ff-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 4px
}

.steps p {
  margin: 0;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.64
}

/* halk információs panel */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 36px);
}

.panel--tint {
  background: var(--paper-2)
}

.panel {
  position: relative;
  overflow: hidden
}

.panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 74px;
  height: 2px;
  background: linear-gradient(90deg, var(--sun), var(--magenta));
  opacity: .8;
}

.panel h3 {
  margin-bottom: 10px
}

.panel p:last-child {
  margin-bottom: 0
}

.panel ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.panel li {
  padding: 10px 0;
  border-top: 1px solid var(--line-2);
  font-size: .95rem;
  color: var(--ink-2)
}

.panel li:first-child {
  border-top: 0;
  padding-top: 0
}

/* venn / koterápia ábra */
.venn {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  display: block
}


@media (max-width:880px) {
}

/* idővonal */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line)
}

.timeline li {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(10px, 3vw, 40px);
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.timeline .when {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 6px;
}

.timeline .what b {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 3px
}

.timeline .what span {
  display: block;
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.6
}

@media (max-width:720px) {
  .timeline li {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 20px 0
  }

  .timeline .when {
    order: -1;
    padding-top: 0
  }
}

/* árkártyák */
.fees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px)
}

@media (max-width:900px) {
  .fees {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.fee {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

/* Hover: alig erezheto emelkedes, finom arnyek, es a szinfolt kicsit
   erosebb. A mozgast a lap aljan levo prefers-reduced-motion blokk
   kikapcsolja azoknak, akik kevesebb mozgast kernek. */

.fee:hover {
  border-color: var(--ink-3);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -22px rgba(40, 35, 32, .45)
}

.fee::before {
  content: "";
  position: absolute;
  right: -58px;
  top: -58px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  filter: blur(42px);
  opacity: .54;
  z-index: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.fee:hover::before {
  opacity: .72
}

/* A tonus a kartya tipusabol jon, nem a sorrendjebol: a coaching sargas,
   az angol coaching barackos, a parterapia rozsaszines, a csaladterapia
   lilas. Korabban nth-child alapjan ment, ezert a negyedik kartyatol
   kezdve el is maradt a szinfolt. */

.fee--sarga::before {
  background: var(--sun)
}

.fee--barack::before {
  background: var(--peach)
}

.fee--rozsa::before {
  background: var(--magenta)
}

.fee--lila::before {
  background: var(--lilac)
}

.fee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, var(--sun), var(--peach), var(--magenta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}

.fee:hover::after {
  transform: scaleX(1)
}

.fee>* {
  position: relative;
  z-index: 1
}

/* Az idotartam halvanyabb es kisebb, hogy ne versenyezzen a nevvel. */

.fee .dur {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--quiet, var(--ink-3));
  opacity: .8
}

/* Az idotartam es a jelzes egy sorban, a kartya aljan. */

.fee-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 4px
}

.fee h3 {
  max-width: 18ch;
  font-size: var(--step-2);
  line-height: 1.22
}

/* Az ar kozvetlenul a nev ala kerul. Korabban margin-top: auto tolta a
   kartya aljara, ettol volt sok ures ter az also feleben. */

.fee .price {
  font-family: var(--ff-display);
  font-size: clamp(2.1rem, 3.4vw, 2.6rem);
  line-height: 1;
  margin: 2px 0 0
}

.fee .price small {
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--ink-2)
}

/* Konnyebb, elegansabb cimke: halvanyabb keret, kisebb betukoz, tobb
   belso hely. */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2, var(--line));
  border-radius: 999px;
  padding: 7px 15px;
}

/* Az oldal egyseges felsorolasjele: a teljes arculati jel kicsiben —
   szinatmenetes kor, benne fekete vonalas viraggal (assets/img/favicon.png).

   A merete em-ben van, tehat a mellette allo szoveggel egyutt no-csokken;
   a 15 keppontos also korlat azt akadalyozza meg, hogy a legkisebb
   cimkeknel olvashatatlanul apro legyen.

   Szandekosan nincs rajta opacity, filter vagy mix-blend-mode: a kor es a
   fekete vonal teljes eroben latszik. */

.jel {
  width: 1.2em;
  height: 1.2em;
  min-width: 15px;
  min-height: 15px;
  flex: none;
  display: block;
}

/* kapcsolat */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line)
}

.contact-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line)
}

.contact-list .lbl {
  display: block;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.contact-list a,
.contact-list strong {
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  font-weight: 400;
  line-height: 1.3;
}

.contact-list a {
  display: inline-block;
  text-decoration: none;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t-fast) var(--ease);
}

.contact-list a:hover {
  border-color: var(--ink)
}






/* gradiens sáv — a referenciaképek szemcsés színfelülete */
.band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper-3);
  min-height: clamp(150px, 22vw, 290px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 5vw, 56px) var(--gutter);
}

/* A Rolam oldal szoveg nelkuli savja: ugyanaz a szin, gradiens es szemcse,
   csak nagyjabol felakkora magassagban. A szinfoltok (.blob) merete a sav
   szelessegehez igazodik, ezert valtozatlanok maradnak — a sav csak szukebb
   savot mutat beloluk. A keret behuzasa fuggolegesen szinten szukebb, hogy
   az alacsonyabb savban is aranyos maradjon. */

.band--keskeny {
  min-height: clamp(78px, 11vw, 140px);
  padding-block: clamp(16px, 2.4vw, 28px)
}

.band .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  z-index: 0
}

.band .b1 {
  width: 52%;
  padding-bottom: 52%;
  left: -8%;
  top: -26%;
  background: var(--sun);
  opacity: .35
}

.band .b2 {
  width: 48%;
  padding-bottom: 48%;
  right: 2%;
  top: -18%;
  background: var(--magenta);
  opacity: .28
}

.band .b3 {
  width: 44%;
  padding-bottom: 44%;
  left: 32%;
  bottom: -32%;
  background: var(--peach);
  opacity: .25
}

.band .b4 {
  width: 38%;
  padding-bottom: 38%;
  right: -6%;
  bottom: -24%;
  background: var(--lilac);
  opacity: .22
}

.band .tex {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .20;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='190'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='190' height='190' filter='url(%23b)' opacity='.62'/></svg>");
}

.band .frame {
  position: absolute;
  inset: clamp(12px, 1.6vw, 22px);
  border: 1px solid rgba(40, 35, 32, .16);
  z-index: 2;
  pointer-events: none
}

/* Az alacsonyabb savban a keret fuggoleges behuzasa is szukebb. Ez a
   szabaly szandekosan a .band .frame utan all: azonos sulyuak, ezert a
   kesobbi nyer. */

.band--keskeny .frame {
  inset: clamp(8px, 1.1vw, 15px) clamp(12px, 1.6vw, 22px)
}

.band .band-text {
  position: relative;
  z-index: 3;
  max-width: 34ch;
  text-align: center;
  font-family: var(--ff-display);
  font-size: var(--step-2);
  line-height: 1.42;
  color: var(--ink-deep);
  font-weight: 300;
}

.band .band-text em {
  font-style: italic
}

/* sarokdísz — vékony ív */
.corner {
  position: absolute;
  width: clamp(80px, 10vw, 150px);
  height: clamp(80px, 10vw, 150px);
  pointer-events: none;
  z-index: 0;
  opacity: .5
}

.corner--tr {
  right: var(--gutter);
  top: 38px
}

.corner--bl {
  left: var(--gutter);
  bottom: 38px
}

@media (max-width:820px) {
  .corner {
    display: none
  }
}

/* záró felhívás */
.cta {
  text-align: center
}

.cta h2 {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: 18px
}

.cta p {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--ink-2)
}

.cta .btn-row {
  justify-content: center
}

/* oldalfejléc (aloldalak) */
.pagehead {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate
}

.pagehead .inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(52px, 7vw, 96px)
}

.pagehead h1 {
  max-width: 16ch;
  margin-bottom: 18px
}

.pagehead .intro {
  max-width: 56ch
}

/* ---------- 7. Lábléc ---------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: clamp(44px, 5vw, 66px) 40px;
  font-size: .92rem
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--sun), var(--peach), var(--magenta), var(--lilac));
  opacity: .55;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(26px, 4vw, 56px)
}

@media (max-width:820px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:520px) {
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 30px
  }
}

.foot-grid h2 {
  font-size: .7rem;
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px
}

.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px
}

.foot-col a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease)
}

.foot-col a:hover {
  color: var(--ink)
}

.foot-name {
  font-family: var(--ff-display);
  font-size: 1.18rem;
  display: block;
  margin-bottom: 4px
}

.foot-fine {
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--ink-3);
  line-height: 1.6;
}

.foot-fine p {
  margin: 0;
  max-width: 74ch
}

/* ---------- 8. Mozgás és akadálymentesség ---------- */
.rv {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease)
}

.rv.is-in {
  opacity: 1;
  transform: none
}

.rv-2 {
  transition-delay: 70ms
}

.rv-3 {
  transition-delay: 140ms
}

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0)
  }

  50% {
    transform: translate3d(6px, -7px, 0)
  }

  100% {
    transform: translate3d(0, 0, 0)
  }
}

.wash {
  animation: drift 34s ease-in-out infinite
}

.wash:nth-of-type(2) {
  animation-duration: 46s;
  animation-direction: reverse
}

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

.btn:focus-visible {
  outline-offset: 4px
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .rv {
    opacity: 1;
    transform: none
  }

  .fee:hover {
    transform: none
  }

  .wash {
    animation: none
  }
}

/* --- lenyithato reszlet (Koterapeutak oldal) -------------------------- */

.more {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 14px
}

.more>summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease)
}

.more>summary::-webkit-details-marker {
  display: none
}

.more>summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease)
}

.more[open]>summary::after {
  transform: translateY(1px) rotate(-135deg)
}

.more>summary:hover,
.more>summary:focus-visible {
  color: var(--ink)
}

.more .prose {
  margin-top: 16px
}

/* --- kepkeret-valtozatok ------------------------------------------------ */

/* A .figure alapja valtozatlan: ives teto, lagy fenyudvar (::before),
   vekony eltolt kontur (.ring) es finom szemcse (.tex).
   Az alabbiak ebbol keszult valtozatok. */

/* Csendes keret: fenyudvar nelkul, csak a vekony kontur. A hangulatkepekhez
   es azokhoz a helyekhez, ahol mar van szines hatter a kozelben. */

.figure--csendes::before {
  display: none
}

.figure--csendes .ring {
  inset: 4% -5% 6% 6%;
  border-color: var(--line-2, var(--line))
}

/* Fekvo aranyu keret a szeles hangulatkepekhez. Az ives teto itt
   visszafogottabb, kulonben a szeles kepbol tul sokat vagna le. */

.figure--fekvo .shot {
  aspect-ratio: 4/3;
  border-radius: 140px 140px var(--radius) var(--radius)
}

.figure--fekvo .ring {
  border-radius: 140px 140px var(--radius) var(--radius);
  inset: 6% -5% 7% 6%
}

/* Kisebb keret a szovegbe illesztett hangulatkepekhez. */

.figure--kicsi {
  max-width: 230px;
  margin-inline: 0;
  margin-top: clamp(26px, 3.5vw, 38px)
}

/* --- preselt virag a keret sarkaban ------------------------------------- */

/* A viragok atlatszo hatteru PNG-k (az _input/kepek-elokeszitese.ps1 vagja
   ki oket a viraglapokbol). Korabban a feher hatteret mix-blend-mode:
   multiply-jal tuntettuk el, de a fenyudvaros kereteknel lathatoan megmaradt
   egy feher teglalap, ezert lett belole valodi atlatszosag. */

.figure .virag-disz {
  position: absolute;
  z-index: 4;
  width: 34%;
  pointer-events: none
}

.figure .virag-disz img {
  display: block;
  width: 100%;
  height: auto
}

.virag-disz--bal-lent {
  left: -13%;
  bottom: -2%
}

.virag-disz--bal-fent {
  left: -9%;
  top: -7%;
  width: 28%
}

.virag-disz--jobb-fent {
  right: -9%;
  top: -6%;
  width: 26%
}

.virag-disz--jobb-lent {
  right: -11%;
  bottom: -1%;
  width: 24%
}

/* Mobilon a keret kisebb, a virag aranyaban is huzodjon ossze, hogy ne
   takarja el a kep lenyeget. */

@media (max-width:640px) {

  .figure .virag-disz {
    width: 27%
  }

  .virag-disz--bal-fent,
  .virag-disz--jobb-fent {
    width: 23%
  }

  .virag-disz--jobb-lent {
    width: 21%
  }

  .figure--kicsi {
    max-width: 100%;
    margin-inline: auto
  }
}

/* Kep balra, szoveg jobbra (Rolam - Oktatas es kutatas). A kep oszlopa
   keskenyebb, hogy a szovegnek maradjon a tobb hely. */

.duo--kep-bal {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr)
}

.duo--kep-bal>.figure {
  margin-inline: 0;
  max-width: 330px
}

@media (max-width:880px) {

  .duo--kep-bal {
    grid-template-columns: 1fr
  }

  /* Keskeny ablakban a szoveg jojjon elobb, a kep utana: igy a szakasz
     cime marad a szakasz elejen. */

  .duo--kep-bal>.figure {
    order: 2;
    margin-inline: auto
  }
}

/* --- legordulo menupont (Szolgaltatasok) -------------------------------- */

/* Maga a "Szolgaltatasok" nem hivatkozas, hanem gomb: nincs mogotte oldal,
   a ket szolgaltatas kozul kell valasztani. A megjelenese megegyezik a tobbi
   menupontéval, hogy a sor egyseges maradjon. */

.almenu {
  position: relative;
  display: inline-flex
}

/* A gomb szandekosan ugyanugy nez ki, mint a tobbi menupont: a .nav a
   szabalyai gombra nem vonatkoznak, ezert itt megismeteljuk oket. */

.almenu-gomb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: .78rem;
  font-weight: inherit;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 8px 0;
  position: relative;
  transition: color var(--t-fast)
}

.almenu-gomb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 16px;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease)
}

.almenu-gomb:hover,
.almenu-gomb[aria-expanded="true"] {
  color: var(--ink)
}

.almenu-gomb:hover::after {
  transform: scaleX(1)
}

/* Ha a ket szolgaltatas valamelyikenek az oldalan vagyunk, a csoport is
   jelolt - ugyanaz a szines alahuzas, mint az aktiv menupontnal. */

.almenu-gomb[data-aktiv="true"] {
  color: var(--ink)
}

.almenu-gomb[data-aktiv="true"]::after {
  transform: scaleX(1);
  height: 2px;
  background: linear-gradient(90deg, var(--sun), var(--magenta))
}

.almenu-gomb .chev {
  width: 9px;
  height: 6px;
  transition: transform var(--t-fast) var(--ease)
}

.almenu-gomb[aria-expanded="true"] .chev {
  transform: rotate(180deg)
}

.almenu-lista {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 15rem;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px rgba(40, 35, 32, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
  z-index: 40
}

.almenu-lista.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0)
}

.almenu-lista a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)
}

.almenu-lista a:hover,
.almenu-lista a:focus-visible {
  background: var(--tint);
  color: var(--ink)
}

.almenu-lista a[aria-current="page"] {
  color: var(--ink)
}

/* Keskeny ablakban a fejlec menuje fuggoleges listava valik: ott az almenu
   nem lebeg, hanem behuzva, mindig nyitva all a ket szolgaltatas. */

@media (max-width:900px) {

  .almenu {
    display: block
  }

  .almenu-gomb {
    pointer-events: none;
    width: 100%;
    padding: 16px 0;
    font-size: .9rem;
    border-bottom: 1px solid var(--line-2)
  }

  .almenu-gomb::after {
    display: none
  }

  .almenu-gomb .chev {
    display: none
  }

  .almenu-lista {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none
  }

  .almenu-lista a {
    padding: 8px 0 8px 18px;
    color: var(--ink-3)
  }
}

/* --- viragcsokor a fooldalon ------------------------------------------- */

/* A "Hol es hogyan erheto el?" szoveg melletti elem: lagyan lekerekitett
   negyzet, benne a meglevo paletta szinatmenete (ugyanaz a sarga-rozsaszin
   paros, mint a kepkeretek fenyudvaranal), rajta a preselt viragcsokor.
   Korabban ket egymasba ero kor allt itt. */

.csokor {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  isolation: isolate
}

.csokor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(64% 58% at 24% 20%, var(--sun), transparent 68%),
    radial-gradient(66% 62% at 80% 82%, var(--magenta), transparent 70%);
  opacity: .55
}

/* Finom szemcse, hogy ne legyen "digitalis" a felulet - ugyanaz a textura,
   mint a kepkereteken. */

.csokor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .4;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23c)' opacity='.6'/></svg>")
}

.csokor img {
  position: relative;
  z-index: 2;
  display: block;
  width: 86%;
  height: auto
}

@media (max-width:880px) {

  .csokor {
    max-width: 360px
  }
}

/* --- hero finomitas ------------------------------------------------------ */

/* Minden szabaly a .hero-ra szukitve: a tobbi oldal cime, bevezetoje es
   kepalairasa valtozatlan marad. A hatterszinek es a portre kerete
   szandekosan nincs erintve. */

/* A focim kisebb es szelesebb sorokat kap, igy kevesebb sorra tordelik. */

.hero h1 {
  font-size: clamp(2rem, 1.42rem + 1.95vw, 3.1rem);
  line-height: 1.1;
  max-width: 21ch;
  margin-bottom: 16px
}

/* Az "Udvozlom!" es a bemutatkozo kozel kerul egymashoz. */

.hero .lead {
  margin-bottom: 6px
}

/* Kompaktabb bemutatkozo: kisebb betu, szorosabb sorkoz. */

.hero .intro {
  font-size: var(--step-0);
  line-height: 1.58;
  max-width: 43ch;
  margin-top: 0
}

/* A ket gomb egy sorban, azonos magassaggal. A stretch miatt a szegelyes
   es a tomor gomb is pontosan ugyanolyan magas lesz. */

.hero .btn-row {
  flex-wrap: nowrap;
  align-items: stretch;
  margin-top: 26px
}

.hero .btn-row .btn {
  white-space: nowrap
}

/* Kisebb kepalairas a portre alatt. */

.hero .figure figcaption {
  margin-top: 13px;
  font-size: .63rem;
  letter-spacing: .15em
}

/* Mobilon a portre ala csuszo dekor virag eltakarta a kepalairast: a
   .virag-disz a teljes .figure aljahoz igazodik, a felirat pedig a figure
   resze, igy pont ra esett. Mobilon ezert a virag a kep also sarkara kerul
   (a felirat savja folotte szabadon marad), kisebb es halvanyabb is lesz.
   A felirat ezen felul a virag fole kerul a retegsorrendben, hogy egy
   ketsoros tordelesnel is olvashato maradjon.
   Asztali nezetben egyik szabaly sem lep eletbe. */

@media (max-width:640px) {

  .hero .figure .virag-disz--bal-lent {
    width: 22%;
    left: -9%;
    bottom: 36px;
    opacity: .85
  }

  .hero .figure figcaption {
    z-index: 5
  }
}

/* Nagyon keskeny ablakban a gombok ujra egymas ala kerulnek - ott a
   .btn { width: 100% } szabaly a 480 keppont alatti mediaban dolgozik. */

@media (max-width:480px) {

  .hero .btn-row {
    flex-wrap: wrap
  }
}

/* Az arkartyak oszlopszama: desktopon harom, tableten ketto (900 keppont
   alatt), keskeny telefonon egy. */

@media (max-width:620px) {

  .fees {
    grid-template-columns: 1fr
  }
}

/* --- az Arak oldal zaro szakasza ---------------------------------------- */

/* Ket oszlop: balra a "Mit tartalmaz a dij?" kartya, jobbra a "Lemondas"
   kartya, alatta az idopontkero gomb. A gomb a szokasosnal kozelebb ul a
   kartyahoz, hogy a ket oszlop magassaga kozel azonos maradjon. */

.btn-row--zaro {
  margin-top: 18px
}

/* --- zaro jel a lablec aljan ------------------------------------------- */

/* Az arculati viragjel vonalas valtozata, halvanyan, kozepre igazitva.
   Dekorativ (ures alt), ezert a kepernyoolvasok atugorjak. */

.foot-jel {
  display: block;
  margin: clamp(26px, 3.5vw, 40px) auto 0;
  width: clamp(34px, 4vw, 44px);
  height: auto;
  opacity: .32
}

/* --- jogi linkek a lablec aljan ---------------------------------------- */

/* Az Adatkezelesi tajekoztato es a Szolgaltatoi adatok a .foot-fine sorba
   kerul, a meglevo apróbetus szoveg melle. A lablec dizajnja valtozatlan:
   a sor mar eddig is flex volt, space-between igazitassal - a lista csak
   harmadik elemkent lep be. */

.foot-jogi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px
}

.foot-jogi a {
  white-space: nowrap
}

/* Keskeny ablakban a harom elem egymas ala kerul, ezert a jogi linkek
   kapnak egy kis levegot. */

@media (max-width:640px) {

  .foot-jogi {
    margin-top: 4px
  }
}

/* --- idezet a Kapcsolat oldal kepe alatt -------------------------------- */

/* Korabban szines, texturas dobozban allt (.quote-card), ami idegenul hatott
   a kep alatt. Most egyszeru szoveg: egy vekony, szinatmenetes vonal
   valasztja el a keptol, alatta a mondat a cim-betutipussal. A kep kerete es
   a hatterszinek valtozatlanok. */

.kep-idezet {
  margin: clamp(24px, 3vw, 34px) 0 0;
  text-align: center
}

.kep-idezet-vonal {
  width: 64px;
  margin: 0 auto clamp(18px, 2vw, 24px);
  opacity: .7
}

.kep-idezet blockquote {
  margin: 0 auto;
  max-width: 34ch;
  font-family: var(--ff-display);
  font-size: var(--step-1);
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-2)
}

/* --- virag-vonalrajz mint diszites ------------------------------------- */

/* Az arculati virag vonalas valtozata, halvanyan. Ket helyen szerepel: a
   zaro kapcsolatfelveteli szakasz tetejen, es a meg ures jogi oldalakon.
   Dekorativ, ezert az SVG-ben aria-hidden all. */

.virag-motivum {
  display: block;
  width: clamp(64px, 7vw, 92px);
  height: auto;
  margin: 0 auto clamp(16px, 2vw, 24px);
  color: var(--ink);
  opacity: .16
}

.cta .virag-motivum {
  position: relative;
  z-index: 1
}

/* A jogi oldalakon a szoveg alatt all, kicsit tobb levegovel. */

.prose .virag-motivum {
  margin-top: clamp(30px, 4vw, 46px)
}

/* --- jelzes a jogi oldalakon ------------------------------------------- */

/* A meglevo panel--tint dobozt hasznalja, hogy illeszkedjen az oldal
   stilusahoz; a bal oldali szines sav teszi feltunove. A doboz role="note",
   igy a kepernyoolvasok is megjegyzeskent olvassak fel. */

.jogi-jelzes {
  max-width: var(--prose);
  border-left: 3px solid var(--magenta)
}

.jogi-jelzes h3 {
  margin-bottom: 10px
}

@media print {

  .site-header,
  .grain,
  .wash,
  .burger,
  .langpick,
  .btn-row {
    display: none !important
  }

  body {
    background: #fff
  }
}