/* =====================================================================
   Kemence Akadémia — alap stílus (sötét, "parázs" paletta, v1 alapján)
   ===================================================================== */
:root{
  --korom:#16100B; --korom-2:#1E150E; --brick:#271B12; --brick-2:#2F2016;
  --line:#3C2A1C; --parazs:#E4571B; --lang:#F59E1B; --lang-2:#FBBF3C;
  --izzas:#FCE9C4; --text:#F1E4D2; --hamu:#B49E86; --hamu-2:#8B7660;
  --maxw:1880px;
}
*{box-sizing:border-box}
/* Az egész oldal alaphangolása: 100%-on a korábbi ~90%-os nézet arányai.
   MOBILON (700px alatt) NINCS zoom — ott a natív méret a jó (különben apró a szöveg). */
@media (min-width:700px){ html{zoom:.9} }
body{margin:0; background:var(--korom); color:var(--text);
  font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60vw 50vh at 82% -8%, rgba(228,87,27,.18), transparent 60%)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1}
h1{font-family:"Fraunces",Georgia,serif; font-weight:900; line-height:1.03; letter-spacing:-.015em; margin:0}
a{color:inherit; text-decoration:none}

/* header */
.site-header{border-bottom:1px solid var(--line); background:rgba(22,16,11,.7); backdrop-filter:blur(8px)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces"; font-weight:900; font-size:19px}
/* eyebrow (kis felirat) + státusz-szöveg — a régi „intro/header" maradékok törölve */
.eyebrow{font-family:"Space Mono",monospace; font-size:12.5px; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--lang)}
.status{color:var(--hamu); font-family:"Space Mono",monospace; font-size:14px}

/* grid + cards */
/* Kitölti a sort; a 340px-es minimum miatt a max szélességű tartalomban (1880px) legfeljebb 5 fér egy sorba. */
.courses-grid{display:grid; grid-template-columns:repeat(auto-fit,340px); justify-content:center; gap:16px;
  padding-bottom:70px}
.card{position:relative; background:var(--brick); border:1px solid var(--line); border-radius:14px;
  padding:18px; display:flex; flex-direction:column; overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .35s}
.card::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--parazs),var(--lang-2)); transform:scaleX(0); transform-origin:left; transition:transform .35s}
.card:hover{transform:translateY(-4px); border-color:#5a3a22; background:var(--brick-2);
  box-shadow:0 22px 46px -22px rgba(228,87,27,.55)}
.card:hover::before{transform:scaleX(1)}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px}
.card h3{font-family:"Fraunces"; font-weight:900; font-size:25px; letter-spacing:-.02em; margin:0}
.card p.desc{color:var(--hamu); font-size:17px; margin:0 0 10px}
.reszlet-btn{align-self:flex-start; background:none; border:0; cursor:pointer; padding:0; margin:0 0 16px;
  font-family:"Space Mono",monospace; font-size:15px; color:var(--lang); text-decoration:underline dotted}
.reszlet-btn:hover{color:var(--izzas)}

/* A kártya művelet-sora: „Részletek" balra, „Link másolása" jobbra. Minden
   kártyán ugyanott van, akkor is, ha a „Részletek" elmarad (nincs leírás). */
.kartya-muveletek{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin:0 0 16px}
.kartya-muveletek .reszlet-btn{margin:0}
.megoszt-btn{margin-left:auto; background:none; border:0; cursor:pointer; padding:0;
  font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.02em;
  color:var(--hamu-2); transition:color .2s}
.megoszt-btn:hover{color:var(--lang)}
.megoszt-btn.masolva{color:var(--lang-2)}

/* Megosztott link (?program=…): a szűrt nézet sávja a programlista fölött */
#programSzurt{display:flex; align-items:center; justify-content:space-between;
  gap:10px 20px; flex-wrap:wrap; margin:0 auto 20px; max-width:720px;
  background:var(--korom-2); border:1px solid var(--line); border-radius:14px; padding:14px 20px}
#programSzurt[hidden]{display:none}
#programSzurt p{margin:0; color:var(--hamu); font-size:16px}
.szurt-vissza{font-family:"Space Mono",monospace; font-size:14px; color:var(--lang);
  text-decoration:underline dotted; white-space:nowrap}
.szurt-vissza:hover{color:var(--izzas)}
/* Linkelt program-nézet: a body „program-nezet" osztályt kap (app.js). Csak a
   fejléc, a Programok szakasz és a lábléc marad; a kártya mérete a megszokott. */
body.program-nezet .hero,
body.program-nezet .welcome-band,
body.program-nezet #elmeny,
body.program-nezet #rolunk,
body.program-nezet #egyedi-programok,
body.program-nezet #webshop{display:none}

.reszlet-szoveg{color:var(--hamu); font-size:18px; line-height:1.65}
.reszlet-szoveg p{margin:0 0 12px}
.reszlet-szoveg ul,.reszlet-szoveg ol{margin:0 0 12px 22px}
.reszlet-szoveg li{margin:4px 0}
.reszlet-szoveg strong,.reszlet-szoveg b{color:var(--izzas)}
.card-kep{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:10px; margin-bottom:12px; display:block; border:1px solid var(--line)}
.meta{font-family:"Space Mono",monospace; font-size:15.5px; color:var(--hamu); margin-bottom:6px}
.meta b{color:var(--izzas)}
.seats{font-family:"Space Mono",monospace; font-size:15.5px; margin-bottom:14px}
.seats.free{color:var(--lang)} .seats.full{color:#E4726B}

/* ár + akció */
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto;
  padding-top:16px; border-top:1px solid var(--line)}
.price{font-family:"Fraunces"; font-weight:900; font-size:28px}
.price .old{font-family:"Hanken Grotesk"; font-weight:500; font-size:14px; color:var(--hamu-2);
  text-decoration:line-through; margin-right:8px}
.price .sale{color:var(--lang-2)}
.btn{font-family:"Hanken Grotesk"; font-weight:700; font-size:14.5px; cursor:pointer;
  padding:11px 18px; border-radius:999px; border:1px solid transparent;
  color:#231206; background:linear-gradient(180deg,var(--lang-2),var(--parazs))}
.btn:disabled{opacity:.4; cursor:not-allowed; filter:grayscale(.3)}

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

/* Egyedi programok — rács: akár 5 kártya/sor (a Workshopjaink csempék mintája),
   a fix képablakot + kitöltést a .card-kep adja (aspect-ratio + object-fit:cover). */
.ep-grid{display:grid; grid-template-columns:repeat(auto-fit, 340px); justify-content:center; gap:16px; padding-bottom:70px}
@media(max-width:900px){ .ep-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .ep-grid{grid-template-columns:1fr} }

/* Egyedi programok — ajánlatkérő CTA a kártya alján */
.ep-card .ep-cta{margin-top:auto; width:100%; text-align:center; font-size:16.5px; padding:13px 18px}

/* előadó + „…Ft-tól" + időpont-csempék a programkártyán */
.card .eloado{font-family:"Space Mono",monospace; font-size:14px; color:var(--hamu); margin:0 0 10px}
.card .eloado b{color:var(--izzas)}
.ar-tol{font-family:"Fraunces"; font-weight:900; font-size:23px; margin:2px 0 12px}
.ar-tol small{font-family:"Space Mono",monospace; font-weight:400; font-size:12.5px; color:var(--hamu-2); letter-spacing:.04em}
.idopont-cimke{font-family:"Space Mono",monospace; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hamu-2); margin:0 0 10px}
.idopont-lista{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:auto}
.idopont-btn{display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left; cursor:pointer;
  font:inherit; color:var(--text); background:var(--korom-2); border:1px solid var(--line); border-radius:12px; padding:10px 11px;
  transition:border-color .2s, transform .2s, background .2s, box-shadow .3s}
.idopont-btn:hover:not(:disabled){border-color:var(--parazs); transform:translateY(-2px); background:var(--brick-2);
  box-shadow:0 14px 28px -18px rgba(228,87,27,.6)}
.idopont-btn:disabled{opacity:.45; cursor:not-allowed}
.i-datum{font-family:"Space Mono",monospace; font-size:13px; font-weight:700; color:var(--izzas)}
.i-ar{font-family:"Fraunces"; font-weight:900; font-size:17px}
.i-ar .old{font-family:"Hanken Grotesk"; font-weight:500; font-size:12px; color:var(--hamu-2); text-decoration:line-through; margin-right:6px}
.i-ar .sale{color:var(--lang-2)}
.i-hely{font-family:"Space Mono",monospace; font-size:12.5px}
.i-hely.free{color:var(--lang)} .i-hely.full{color:#E4726B}
/* Állapot-sáv a kártya TETEJÉN (pl. „Hamarosan") — teljes szélességben, a kép
   fölött. Így nem szorítja össze a címet: a hosszú cím kaphatja a teljes sort. */
.allapot-sav{font-family:"Space Mono",monospace; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; text-align:center;
  color:var(--lang-2); background:rgba(245,158,11,.13);
  border-bottom:1px solid rgba(245,158,11,.45);
  margin:-18px -18px 14px; padding:9px 12px}
/* átmeneti foglalás-szünet jelzése a kártyán */
.szunet-sav{font-family:"Space Mono",monospace; font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:var(--lang-2); background:rgba(245,158,11,.12); border:1px solid var(--lang);
  border-radius:10px; padding:9px 12px; margin-top:8px; text-align:center}
@media(max-width:560px){ .idopont-lista{grid-template-columns:1fr} }

/* =========================== Foglalási ablak =========================== */
.modal{position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 20px; background:rgba(10,7,4,.72); backdrop-filter:blur(4px); overflow:auto}
.modal[hidden]{display:none}
.modal-card.szeles{max-width:820px}
.modal-card{position:relative; width:100%; max-width:460px; background:var(--korom-2);
  border:1px solid var(--line); border-radius:20px; padding:30px 28px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.modal-close{position:absolute; top:14px; right:16px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--brick); color:var(--hamu); font-size:20px; cursor:pointer; line-height:1}
.modal-close:hover{color:var(--izzas); border-color:var(--parazs)}
.m-title{font-family:"Fraunces"; font-weight:900; font-size:26px; margin:8px 0 4px}
.m-meta{font-family:"Space Mono",monospace; font-size:12.5px; color:var(--hamu); margin:0 0 16px}
.m-meta b{color:var(--izzas)}
.csoportos-note{font-family:"Space Mono",monospace; font-size:12.5px; color:var(--lang-2);
  background:rgba(245,158,11,.1); border:1px solid var(--lang); border-radius:8px; padding:8px 11px; margin:0 0 16px}
/* ---- Előadóink: névsor a Rólunk szakaszban + bemutatkozó ablak ---- */
.eloadoink{margin-top:22px}
/* A felirat a „Rólunk" szakaszcím stílusát követi (Fraunces, narancs),
   csak kisebb méretben — alcím, nem versenyez a szakasz címével. */
.eloadoink-cim{font-family:"Fraunces",serif; font-weight:900; letter-spacing:-.01em;
  font-size:clamp(22px,2.4vw,28px); line-height:1.1; color:var(--lang); margin:0 0 10px}
.eloadoink-nevek{margin:0; line-height:2; color:var(--hamu)}
.eloado-nev-gomb{font-family:"Hanken Grotesk"; font-size:16px; font-weight:700; color:var(--lang-2);
  background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px; text-decoration-color:rgba(251,191,60,.45)}
.eloado-nev-gomb:hover{color:var(--izzas); text-decoration-color:var(--lang)}
.eloado-nev-sima{font-weight:700; color:var(--hamu)}
.card .eloado .eloado-nev-gomb{font-size:15px}

/* A bemutatkozó ablak szélesebb, és a fénykép nagy, portré-arányú */
#eloadoModal .modal-card{max-width:680px}
/* A fénykép FÖLÜL, KÖZÉPEN; alatta a név, majd a bemutatkozás teljes szélességben.
   Ez bármilyen képaránynál és bármilyen hosszú szövegnél jól néz ki, és
   megegyezik a telefonos elrendezéssel. */
.eloado-fej{display:block; text-align:center; margin-bottom:14px}
/* EGYSÉGES FÉNYKÉP-KERET. Az admin bármilyen képet feltölthet: a kép a keretbe
   illeszkedik (object-fit:contain), tehát sosem vágódik le, a túl kicsi kép pedig
   felnagyítódik. Így minden előadó ugyanakkora, rendezett képet kap. */
.eloado-kep{display:block; margin:0 auto 14px;
  width:min(260px,100%); height:320px; object-fit:contain; object-position:center;
  border-radius:16px}
/* Fénykép nélküli előadónál a kép el van rejtve. A `display:block` erősebb a
   böngésző [hidden] szabályánál, ezért itt külön ki kell kapcsolni. */
.eloado-kep[hidden]{display:none}
/* Fénykép helyett monogram: kisebb, mint a képkeret, így az ablak is
   alacsonyabb marad — de nem hat befejezetlennek. */
.eloado-mono{display:grid; place-items:center; margin:0 auto 14px;
  width:110px; height:110px; border-radius:50%;
  background:linear-gradient(180deg, var(--brick-2), var(--brick));
  border:1px solid var(--line);
  font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:38px;
  letter-spacing:.02em; color:var(--lang-2)}
.eloado-mono[hidden]{display:none}
.eloado-fej .eyebrow{text-align:center; margin:0 0 6px}
.eloado-fej .m-title{text-align:center; margin:0}
.eloado-bemutatkozas{color:var(--hamu); font-size:16px; line-height:1.65}
.eloado-bemutatkozas p{margin:0 0 10px}
.eloado-bemutatkozas .halvany{color:var(--hamu-2); font-style:italic}
@media(max-width:560px){
  /* Keskeny kijelzőn alacsonyabb képkeret, hogy ne tolja le a szöveget. */
  .eloado-kep{height:280px}
}

.infobar{font-size:13.5px; color:var(--izzas); background:rgba(228,87,27,.1);
  border:1px solid var(--parazs); border-radius:10px; padding:12px 14px; margin-bottom:18px; line-height:1.45}

#foglalasForm,#ajanlatForm{display:flex; flex-direction:column; gap:12px}
#foglalasForm label,#ajanlatForm label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--hamu); font-weight:600}
#foglalasForm .opt,#ajanlatForm .opt{color:var(--hamu-2); font-weight:400}
#foglalasForm input,#foglalasForm textarea,#ajanlatForm input,#ajanlatForm textarea{font-family:inherit; font-size:15px; color:var(--text);
  background:var(--brick); border:1px solid var(--line); border-radius:10px; padding:11px 13px; color-scheme:dark}
#foglalasForm input:focus,#foglalasForm textarea:focus,#ajanlatForm input:focus,#ajanlatForm textarea:focus{outline:none; border-color:var(--parazs)}
#foglalasForm input.bad,#foglalasForm textarea.bad,#ajanlatForm input.bad,#ajanlatForm textarea.bad{border-color:#E4726B}
.form-err{color:#E4726B; font-size:13.5px; margin:2px 0 0}
#foglalasForm .btn,#ajanlatForm .btn{margin-top:6px; justify-content:center; width:100%; padding:13px}
.privacy{font-size:12px; color:var(--hamu-2); margin:10px 0 0; text-align:center}
.privacy a{color:var(--lang)}

.m-success{text-align:center; padding:14px 0}
.m-success .tick{width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:linear-gradient(180deg,var(--lang-2),var(--parazs)); color:#231206;
  font-size:30px; display:flex; align-items:center; justify-content:center}
.m-success h3{font-family:"Fraunces"; font-weight:900; font-size:24px; margin:0 0 8px}
.m-success p{color:var(--hamu); font-size:15px; margin:0 0 18px}
.m-success .soft{color:var(--hamu-2); font-size:13px}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
.btn.ghost:hover{border-color:var(--parazs); color:var(--izzas)}

/* =====================================================================
   FŐOLDAL — hero, szekciók, workshop-csempék, rólunk, lábléc
   ===================================================================== */
html{scroll-behavior:smooth; overflow-x:hidden}
a.btn{display:inline-block; text-decoration:none}

/* fejléc-navigáció */
.topnav{display:flex; align-items:center; gap:22px; font-size:14.5px}
.topnav a{color:var(--hamu); font-weight:600}
.topnav a:hover{color:var(--izzas)}

/* hero — középre zárt banner a kép arányában (teljes kép, vágás nélkül, elmosott szélek) */
/* A 16:5 arány MINIMUM, nem fix méret: ha a szöveg magasabb, a doboz megnő,
   nem levágja a tetejét. A szöveg a normál folyamban van, alulra simítva. */
.hero{position:relative; overflow:hidden; display:flex; align-items:flex-end;
  width:100%; max-width:1920px; margin:14px auto 0; min-height:min(31.25vw, 600px);
  background:transparent}
/* a kép széleit lágyan a lap hátterébe fadeljük (nincs éles keret) */
.hero-slideshow{position:absolute; inset:0; z-index:0; overflow:hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.5) 100px, #000 210px, #000 calc(100% - 210px), rgba(0,0,0,.5) calc(100% - 100px), transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 46px, #000 96px, #000 calc(100% - 96px), rgba(0,0,0,.5) calc(100% - 46px), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.5) 100px, #000 210px, #000 calc(100% - 210px), rgba(0,0,0,.5) calc(100% - 100px), transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 46px, #000 96px, #000 calc(100% - 96px), rgba(0,0,0,.5) calc(100% - 46px), transparent 100%);
  mask-composite:intersect}
.hero-slideshow img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; will-change:opacity,transform; animation:heroFade 18s infinite}
.hero-slideshow img:nth-child(1){animation-delay:0s}
.hero-slideshow img:nth-child(2){animation-delay:6s}
.hero-slideshow img:nth-child(3){animation-delay:12s}
@keyframes heroFade{
  0%{opacity:0; transform:scale(1.05)}
  3%{opacity:1}
  30%{opacity:1; transform:scale(1)}
  35%{opacity:0}
  100%{opacity:0}
}
.hero-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(22,16,11,.94) 0%, rgba(22,16,11,.55) 24%, rgba(22,16,11,0) 48%),
    linear-gradient(90deg, rgba(22,16,11,.6) 0%, rgba(22,16,11,.1) 50%, transparent 70%)}
.hero-text{position:relative; width:100%; z-index:2; padding:24px 24px 42px}
.hero h1{font-size:clamp(30px,4.4vw,54px); margin:12px 0 14px; max-width:18ch; text-shadow:0 2px 22px rgba(0,0,0,.6)}
.hero-lead{color:var(--izzas); font-size:clamp(15px,1.8vw,19px); max-width:56ch; margin:0 0 22px; text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
/* nagy, félig áttetsző logó-vízjel a hero jobb oldalán, a háttérbe olvadva */
.hero-logo{position:absolute; z-index:1; right:clamp(2px,0.6vw,10px); bottom:clamp(2px,0.6vw,10px);
  width:clamp(170px,25vw,340px); height:auto; opacity:.3; pointer-events:none;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.5))}
/* ≤1100px: a wide banner túl alacsony lenne az overlayhez → a szöveg a kép ALÁ kerül,
   hogy tableten és fekvő telefonon is olvasható maradjon (nem a fényképre írva). */
@media(max-width:1100px){
  .hero{display:block; min-height:0; max-height:none}
  .hero-slideshow{position:relative; aspect-ratio:2048 / 794}
  .hero-veil{display:none}
  .hero-text{position:static; padding-top:30px; padding-bottom:34px}
  .hero h1{text-shadow:none}
  .hero-lead{color:var(--hamu); text-shadow:none}
  .hero-logo{width:112px; right:12px; top:12px; bottom:auto; transform:none; opacity:.85}
}
@media(prefers-reduced-motion:reduce){
  .hero-slideshow img{animation:none}
  .hero-slideshow img:nth-child(1){opacity:1}
}

/* welcome-sáv (csalogató intro a hero alatt) */
.welcome-band{border-bottom:1px solid var(--line); background:var(--korom-2)}
.welcome-band .wrap{padding:42px 24px}
.welcome-lead{font-family:"Fraunces",Georgia,serif; font-weight:400;
  font-size:clamp(19px,2.3vw,27px); line-height:1.45; color:var(--izzas); max-width:55ch; margin:0}
.welcome-lead strong{font-style:normal; font-weight:900; color:var(--lang-2)}

/* szekció-keret */
.section{padding:58px 0}
.section + .section{border-top:1px solid var(--line)}
.section-head{max-width:640px; margin:0 0 30px}
.section-head h2{font-family:"Fraunces"; font-weight:900; font-size:clamp(30px,4vw,44px);
  letter-spacing:-.02em; margin:10px 0 8px; line-height:1.08}
.section-sub{color:var(--hamu); margin:0; font-size:19px}
.section-sub a{color:var(--lang)}

/* „Milyen egy nap nálunk?" — élmény */
.elmeny-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.elm-item{background:var(--brick); border:1px solid var(--line); border-radius:16px; padding:22px 24px}
.elm-num{font-family:"Space Mono",monospace; font-size:13px; font-weight:700; color:var(--lang); letter-spacing:.12em}
.elm-item h4{font-family:"Fraunces"; font-weight:900; font-size:25px; letter-spacing:-.01em; margin:8px 0 8px}
.elm-item p{color:var(--hamu); font-size:18px; margin:0}
@media(max-width:640px){ .elmeny-grid{grid-template-columns:1fr} }

/* rólunk / filozófia */
.rolunk{background:var(--korom-2)}
.about{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch}
.about-text h2{font-family:"Fraunces"; font-weight:900; font-size:clamp(30px,4vw,44px);
  letter-spacing:-.02em; margin:10px 0 14px}
.about-text p{color:var(--hamu); margin:0 0 14px; font-size:18.5px}
.about-text strong{color:var(--izzas); font-weight:600}
.about-card{background:var(--brick); border:1px solid var(--line); border-radius:16px; padding:22px}
.ac-row{display:flex; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.ac-row:first-child{padding-top:0}
.ac-num{font-family:"Fraunces"; font-weight:900; font-size:23px; color:var(--lang-2); min-width:104px}
.ac-label{color:var(--hamu); font-size:16px}
.ac-cta{margin-top:18px; width:100%; text-align:center}
/* rólunk — csapatkép */
.about-cta{margin-top:16px}
.about-photo{display:flex; flex-direction:column; margin:0}
.about-photo img{width:100%; flex:1 1 auto; min-height:400px; object-fit:cover;
  border-radius:16px; display:block;
  filter:sepia(.16) saturate(1.08) contrast(1.06) brightness(.95) hue-rotate(-6deg);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 93%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 93%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite:intersect}
.about-photo figcaption{font-family:inherit; font-size:13.5px; color:var(--hamu-2); margin-top:10px}
.about-photo figcaption a{color:var(--lang-2); text-decoration:underline;
  text-underline-offset:2px; white-space:nowrap}
@media(max-width:760px){ .about{grid-template-columns:1fr; align-items:start} .about-photo img{min-height:240px; max-height:360px} }

/* (A régi Kapcsolat-szekció és a régi lábléc szabályai törölve — az élő lábléc
    lentebb, a „LÁBLÉC" szekcióban van; a kapcsolati infó is ott.) */

/* ===================== Webshop (Kandalló-Futár) ===================== */
.webshop{background:
  radial-gradient(120% 130% at 88% -10%, rgba(228,87,27,.14), transparent 55%),
  radial-gradient(100% 120% at 0% 120%, rgba(245,158,11,.10), transparent 55%),
  var(--korom-2)}
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.shop-item{background:var(--brick); border:1px solid var(--line); border-radius:16px; padding:22px 24px;
  transition:border-color .3s, background .3s, transform .3s}
.shop-item:hover{border-color:#5a3a22; background:var(--brick-2); transform:translateY(-4px)}
.shop-ic{font-size:26px; line-height:1; display:block; margin-bottom:12px}
.shop-item h4{font-family:"Fraunces"; font-weight:900; font-size:22px; letter-spacing:-.01em; margin:0 0 8px}
.shop-item p{color:var(--hamu); font-size:16.5px; line-height:1.5; margin:0}
.shop-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-top:28px}
.shop-hitel{margin:0; font-family:inherit; font-size:15px; color:var(--hamu);
  border-left:2px solid var(--lang); padding-left:14px; max-width:42ch}
.shop-hitel b{color:var(--lang-2); font-family:"Hanken Grotesk"; font-weight:700}
@media(max-width:860px){ .shop-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .shop-grid{grid-template-columns:1fr} }

/* Webshop-fejléc: szöveg balra, rajzolt izzó kemence jobbra */
.webshop .wrap{position:relative}
.webshop .section-head{max-width:680px; text-align:center; margin:0 auto 34px}
.webshop-szoveg{max-width:none}
.webshop-lead{font-size:clamp(17px,1.9vw,21px); line-height:1.6; color:var(--text); margin:0}
.webshop-lead a{color:var(--lang-2); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.webshop .shop-cta .btn{font-size:17px; padding:18px 36px}
.kemence-vizual{position:absolute; top:-20px; right:0; width:min(225px,19%); flex:none}
/* ≤1240px: a középre zárt szöveg már a kemence alá érne → a kemence a szöveg ALÁ, KÖZÉPRE */
@media(max-width:1240px){ .kemence-vizual{position:static; width:min(260px,72%); margin:22px auto 0} }
/* ≥1241px: a kemence a jobb szélen lebeg. A fejléc annyi helyet tart fenn,
   amennyit a kemence alálógása után még igényel — a többit a kártyák előtti
   34px-es rés nyeli el, így nem tátong üres sáv a cím körül. */
@media(min-width:1241px){
  .webshop .section-head{min-height:190px; display:flex; flex-direction:column; justify-content:center}
}
.kemence-vizual svg{width:100%; height:auto; display:block; overflow:visible}

/* test (fehér vakolt kemence, réz nyeregtető, fekete ajtók) */
.kemence-vizual .ka-arnyek{fill:#000; opacity:.4}
.kemence-vizual .ka-lab{stroke:#5a4a3a; stroke-opacity:.5; stroke-width:2}
.kemence-vizual .ka-test{stroke:#5a4a3a; stroke-opacity:.55; stroke-width:2.2}
.kemence-vizual .ka-rez{stroke:#6a3c18; stroke-opacity:.6; stroke-width:2; stroke-linejoin:round}
.kemence-vizual .ka-kem{fill:#191919; stroke:#000; stroke-opacity:.4; stroke-width:1}
.kemence-vizual .ka-kemsapka{fill:#191919}
.kemence-vizual .ka-homero{fill:#d8d2c6; stroke:#2a2a2a; stroke-width:2.5}
.kemence-vizual .ka-ajtokeret{fill:#0c0c0c}
.kemence-vizual .ka-ajto{fill:#1e1e1e; stroke:#000; stroke-opacity:.5; stroke-width:1}
.kemence-vizual .ka-nyilas{fill:#0a0705}
.kemence-vizual .ka-ajtoszarny{fill:#171717; stroke:#000; stroke-opacity:.5; stroke-width:1}
.kemence-vizual .ka-pant{stroke:#000; stroke-width:3; stroke-linecap:round}
.kemence-vizual .ka-fogo{fill:#0a0a0a}
.kemence-vizual .ka-parazsagy{fill:#1a0f08}

/* tűz */
.kemence-vizual .ka-izzas{transform-box:fill-box; transform-origin:center; animation:ka-legzes 3.4s ease-in-out infinite}
.kemence-vizual .ka-glow{transform-box:fill-box; transform-origin:bottom center; opacity:.55; animation:ka-glow 2.6s ease-in-out infinite}
.kemence-vizual .ka-lang{transform-box:fill-box; transform-origin:bottom center; animation:ka-tanc 1.3s ease-in-out infinite}
.kemence-vizual .ka-l2{animation-duration:1.05s; animation-delay:-.45s}
.kemence-vizual .ka-l3{animation-duration:1.5s; animation-delay:-.8s}
.kemence-vizual .ka-l4{animation-duration:.85s; animation-delay:-.25s}
.kemence-vizual .ka-l5{animation-duration:1.15s; animation-delay:-.95s}
.kemence-vizual .ka-m1{animation-duration:.75s}
.kemence-vizual .ka-m2{animation-duration:.6s; animation-delay:-.3s}
.kemence-vizual .ka-parazs circle{fill:var(--lang); animation:ka-parazs 1.8s ease-in-out infinite}
.kemence-vizual .ka-p2{fill:var(--parazs); animation-duration:2.2s; animation-delay:-.6s}
.kemence-vizual .ka-p3{animation-duration:1.5s; animation-delay:-1s}
.kemence-vizual .ka-p4{animation-duration:2s; animation-delay:-.3s}
.kemence-vizual .ka-p5{fill:var(--parazs); animation-duration:1.6s; animation-delay:-1.2s}
.kemence-vizual .ka-fust{fill:var(--hamu); opacity:0; transform-box:fill-box; transform-origin:center; animation:ka-fust 4.6s ease-out infinite}
.kemence-vizual .ka-f2{animation-delay:1.5s}
.kemence-vizual .ka-f3{animation-delay:2.9s}

@keyframes ka-tanc{
  0%{transform:scaleY(1) scaleX(1) translateX(0); opacity:.9}
  25%{transform:scaleY(1.14) scaleX(.93) translateX(-1px); opacity:1}
  50%{transform:scaleY(.97) scaleX(1.05) translateX(1px); opacity:.94}
  75%{transform:scaleY(1.17) scaleX(.9) translateX(-.5px); opacity:1}
  100%{transform:scaleY(1) scaleX(1) translateX(0); opacity:.9}
}
@keyframes ka-glow{0%,100%{opacity:.4; transform:scaleY(1)} 50%{opacity:.7; transform:scaleY(1.12)}}
@keyframes ka-legzes{0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.1)}}
@keyframes ka-parazs{0%,100%{opacity:.4} 50%{opacity:1}}
@keyframes ka-fust{0%{opacity:0; transform:translateY(0) scale(.8)} 25%{opacity:.4} 100%{opacity:0; transform:translateY(-30px) scale(1.7)}}

@media(prefers-reduced-motion:reduce){
  .kemence-vizual .ka-izzas,.kemence-vizual .ka-glow,.kemence-vizual .ka-lang,
  .kemence-vizual .ka-parazs circle,.kemence-vizual .ka-fust{animation:none}
  .kemence-vizual .ka-glow{opacity:.5}
  .kemence-vizual .ka-parazs circle{opacity:.8}
  .kemence-vizual .ka-fust{opacity:.2}
}

/* ===================================================================
   FEJLÉC — minta-elrendezés a weblap sötét stílusában
   (promó-sáv, logó-jelvény + kétsoros márka, nav + gomb jobbra)
   =================================================================== */
.promo{background:#0b0805; color:var(--izzas); font-size:14px; letter-spacing:.01em; border-bottom:1px solid var(--line)}
.promo .wrap{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 24px; text-align:center; max-width:none}
.promo b{color:var(--lang-2); font-weight:700}
.promo a{color:var(--lang); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.promo a:hover{color:var(--izzas)}

.site-header{background:rgba(10,7,4,.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); margin-bottom:16px; position:relative; z-index:40}
/* Parázs-szikra réteg — a tartalom fölött, a fejléc és a modal alatt */
.szikra-reteg{position:fixed; inset:0; pointer-events:none; z-index:3}
/* Scroll-reveal: beúszó elemek */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1 !important; transform:none !important; transition:none} }
/* Izzó parázságy a képernyő alján — a szikrák forrása (feldolgozva, nem fotó) */
.parazs-agy{position:fixed; left:0; right:0; bottom:0; height:24vh; z-index:2; pointer-events:none;
  background:url("../kepek/parazs.jpg") center bottom / cover no-repeat;
  filter:blur(1.5px) saturate(1.35) brightness(1.42) contrast(1.1);
  mix-blend-mode:screen; opacity:.9;
  -webkit-mask-image:linear-gradient(to top, #000 18%, transparent 96%);
  mask-image:linear-gradient(to top, #000 18%, transparent 96%);
  animation:parazs-izzik 4.6s ease-in-out infinite}
@keyframes parazs-izzik{0%,100%{opacity:.62} 40%{opacity:.86} 70%{opacity:.72}}
@media(prefers-reduced-motion:reduce){ .parazs-agy{animation:none} }
/* Finom, enyhe tűz-izzás a képernyő alján — innen csapnak fel a szikrák */
.tuz-izzas{position:fixed; left:0; right:0; bottom:0; height:24vh; z-index:2; pointer-events:none;
  transform-origin:bottom;
  background:linear-gradient(to top, rgba(255,100,30,.04), rgba(228,87,27,.012) 45%, transparent);
  animation:tuz-vibra 4.6s ease-in-out infinite}
/* Nem homogén: ahogy föllobban, egyszerre fényesebb ÉS magasabb — rendszertelenül */
@keyframes tuz-vibra{
  0%  {opacity:.72; transform:scaleY(.94)}
  9%  {opacity:.92; transform:scaleY(1.03)}
  18% {opacity:.80; transform:scaleY(.98)}
  27% {opacity:1;   transform:scaleY(1.12)}
  38% {opacity:.85; transform:scaleY(1.00)}
  50% {opacity:.97; transform:scaleY(1.07)}
  61% {opacity:.77; transform:scaleY(.96)}
  72% {opacity:1;   transform:scaleY(1.13)}
  83% {opacity:.87; transform:scaleY(1.02)}
  93% {opacity:.93; transform:scaleY(.99)}
  100%{opacity:.72; transform:scaleY(.94)}
}
@media(prefers-reduced-motion:reduce){ .tuz-izzas{animation:none} }
.site-header .nav{min-height:98px; height:auto; gap:30px; padding:8px 0;
  justify-content:flex-start; flex-wrap:wrap}
.site-header .brand{gap:13px; margin-right:auto}
.brand-badge{width:66px; height:66px; border-radius:16px; object-fit:cover; border:1px solid var(--line); background:var(--brick); flex:none; display:block}
.brand-txt{display:flex; flex-direction:column; line-height:1.15}
.brand-txt strong{font-family:"Fraunces"; font-weight:900; font-size:33px; color:var(--izzas)}
.brand-txt small{font-family:"Space Mono",monospace; font-weight:400; font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:var(--hamu-2); margin-top:4px}
.site-header .topnav{gap:32px; font-size:18px}
.site-header .topnav a{color:var(--hamu); font-weight:600; padding:8px 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s}
.site-header .topnav a:hover{color:var(--izzas); border-bottom-color:var(--lang)}
.nav-btn{display:inline-flex; align-items:center; color:#231206; background:linear-gradient(180deg,var(--lang-2),var(--parazs));
  border-radius:14px; padding:16px 30px; font-family:"Hanken Grotesk",sans-serif; font-weight:700; font-size:17px; flex:none; transition:filter .2s, transform .2s}
.nav-btn:hover{filter:brightness(1.06); transform:translateY(-1px); color:#231206}
/* Két fejléc-CTA egymás mellett, azonos stílussal */
.nav-btnok{display:flex; align-items:center; gap:12px; flex:none}
/* 901–1300px: a teljes menü + két gomb + márkanév épphogy nem fér ki,
   ezért ebben a sávban szorosabb térköz és egy fokkal kisebb betű. */
@media(min-width:901px) and (max-width:1300px){
  .site-header .nav{gap:14px}
  .site-header .brand{gap:10px}
  .brand-badge{width:52px; height:52px; border-radius:13px}
  .brand-txt strong{font-size:24px}
  .brand-txt small{font-size:10.5px; letter-spacing:.1em; margin-top:2px}
  .site-header .topnav{gap:18px; font-size:15.5px}
  .nav-btn{padding:12px 16px; font-size:14.5px; border-radius:12px}
  .nav-btnok{gap:8px}
}
/* Hamburger gomb — csak mobilon látszik */
.hamburger{display:none; flex:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:var(--brick); border:1px solid var(--line); border-radius:12px; color:var(--izzas);
  font-size:22px; line-height:1; cursor:pointer; transition:border-color .2s}
.hamburger:hover{border-color:var(--parazs)}

/* MOBIL fejléc (≤900px): kis márka + hamburger egy sorban, a két CTA külön sorban,
   a menüpontok a hamburgerrel legördülő panelben. */
@media(max-width:900px){
  .site-header .nav{height:auto; flex-wrap:wrap; gap:10px 12px; padding:10px 0; position:relative}
  .site-header .brand{gap:10px; margin-right:auto}
  .site-header .brand-badge{width:46px; height:46px; border-radius:12px}
  .site-header .brand-txt strong{font-size:19px}
  .site-header .brand-txt small{font-size:11px}
  .hamburger{display:inline-flex}
  .nav-btnok{width:100%; gap:10px}
  .nav-btnok .nav-btn{flex:1; justify-content:center; padding:13px 8px; font-size:14.5px}

  /* menüpontok: alapból rejtve; a hamburger nyitja legördülőként */
  .site-header .topnav{display:none}
  .site-header.nav-open .topnav{display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0; z-index:50;
    background:rgba(10,7,4,.98); border:1px solid var(--line); border-radius:0 0 14px 14px;
    padding:4px 16px; box-shadow:0 22px 44px -20px rgba(0,0,0,.85)}
  .site-header.nav-open .topnav a{display:block; padding:14px 4px; border-bottom:1px solid var(--line); font-size:16px}
  .site-header.nav-open .topnav a:last-child{border-bottom:0}
}

/* ===================================================================
   LÁBLÉC — nagyobb, a szekciók szélességében; térkép külön a jobb szélen
   =================================================================== */
.site-footer{background:#0f0a06; color:var(--hamu); padding:46px 0 26px; border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.9fr; gap:48px; align-items:start}
.foot-brand .brand{display:flex; align-items:center; gap:15px; font-family:inherit; font-weight:400; font-size:inherit}
.foot-brand .brand-badge{width:56px; height:56px; border-radius:15px}
.foot-brand .brand-txt strong{color:var(--izzas); font-size:26px}
.foot-brand .brand-txt small{font-size:13px}
.foot-tag{color:var(--hamu); font-size:17px; line-height:1.7; margin:20px 0 0; max-width:36ch}
.foot-soc{display:flex; gap:12px; margin-top:24px}
.foot-soc a{width:46px; height:46px; border-radius:13px; border:1px solid var(--line); display:grid; place-items:center; color:var(--izzas); font-weight:700; font-size:19px; transition:background .2s, border-color .2s}
.foot-soc a:hover{background:var(--parazs); border-color:var(--parazs); color:#fff}
.foot-col h5{font-family:"Hanken Grotesk",sans-serif; font-size:15.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--izzas); margin:0 0 22px}
.foot-col a,.foot-col p{display:block; color:var(--hamu); font-size:17.5px; margin:0 0 14px; transition:color .2s}
.foot-col a:hover{color:var(--lang)}
.foot-map{width:100%; height:224px; border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.foot-map iframe{width:100%; height:100%; border:0; display:block; filter:invert(.92) hue-rotate(180deg) brightness(.95) contrast(.92)}
.foot-bottom{margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:15px; color:var(--hamu-2);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
.foot-bottom .latogato{color:var(--hamu-2)}
.foot-bottom .latogato b{color:var(--hamu); font-weight:700}
@media(max-width:1100px){ .foot-grid{grid-template-columns:1fr 1fr 1fr; gap:32px} .foot-map{grid-column:1 / -1; height:200px} }
@media(max-width:680px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:440px){ .foot-grid{grid-template-columns:1fr} }

/* ===================================================================
   BLOKK-CÍMEK (szekció-eyebrow-k) — egységes, nagy, középre
   Nem érinti a hero fölötti kis feliratot (.hero-text .eyebrow).
   =================================================================== */
.section-head{text-align:center; margin-left:auto; margin-right:auto}
.section-head .eyebrow,
.about-text .eyebrow{
  display:block; text-align:center; margin:0 auto 16px;
  font-family:"Fraunces", serif; font-weight:900; letter-spacing:-.01em; text-transform:none;
  font-size:clamp(32px,4.6vw,50px); line-height:1.08; color:var(--lang);
}
/* A hosszabb blokkcímek (pl. „Egyedi program lehetőségek:") egy sorban
   maradjanak: a felirat kiléphet a 640px-es fejlécdobozból — középre zárt
   szövegnél ez mindkét oldalra egyformán történik. Keskeny ablakban
   visszaengedjük a tördelést, hogy ne legyen vízszintes görgetés. */
@media(min-width:600px){ .section-head .eyebrow{white-space:nowrap} }

/* Rólunk: kétoszlopos (kép miatt) — a cím + alcím balra */
.about-text .eyebrow{text-align:left; margin-left:0; margin-right:0}
.about-text h2{text-align:left}

/* ===================================================================
   BÚZA-MOTÍVUM — halvány, kézműves búzakalász néhány szekció sarkában
   =================================================================== */
#elmeny, #rolunk, .webshop{position:relative; overflow:hidden}
#elmeny::after, #rolunk::after, .webshop::before{
  content:""; position:absolute; pointer-events:none; z-index:0;
  background:url("../kepek/buza.svg") no-repeat center / contain; opacity:.22}
/* Alapból rejtve: csak ott mutatjuk, ahol a teljes kalász elfér a szekció
   szabad sarkában. Szűk ablakban minden hely foglalt, ott nincs kalász. */
#elmeny::after, #rolunk::after, .webshop::before{display:none}
@media(min-width:1200px){
  #elmeny::after, #rolunk::after, .webshop::before{display:block}
  /* élmény: a középre zárt fejléc jobb oldalán, a kártyák fölött */
  #elmeny::after{top:18px; right:16px; width:145px; height:205px; transform:rotate(18deg)}
  /* rólunk: bal alsó sarok, a szöveg alatti üres sávban */
  #rolunk::after{bottom:14px; left:16px; width:78px; height:112px; transform:rotate(-16deg)}
  /* webshop: bal felső sarok — a jobb oldalon a kemence áll */
  .webshop::before{top:24px; left:18px; width:150px; height:215px; transform:rotate(-12deg); opacity:.18}
}