/* =========================================================
   Ipacs Éva – lakberendezés
   ---------------------------------------------------------
   Arculat Éva saját enteriőrjeiből: meszelt (krétafestett)
   falfelületek, széles tónusos falsávok, festett tábla-gombok.
   Tipográfia: Bricolage Grotesque (címek) + Karla (szöveg).
   Minden szín a :root blokkban, egy helyen módosítható.
   ========================================================= */

/* =========================================================
   SZÍNRENDSZER – szerepek, nem hangulatok
   ---------------------------------------------------------
   Minden szín EGY dolgot csinál. Ha új elem kerül az oldalra,
   nem színt kell választani hozzá, hanem szerepet – a szín
   abból következik. (Enélkül eddig szekciónként újra és újra
   végig kellett próbálni négy-öt színt ugyanarra az elemre.)

     FAL       háttérfelület. --fal-mustar / --fal-rozsa /
               --fal-zsalya / --bg (krém) / --petrol-deep.
               Szekciónként egy, kötött sorrendben.

     LAP       minden kártya, doboz, űrlaplap: --bg (krém).
               Tiszta fehér csak ott, ahol a tartalom kívánja.

     TINTA     --ink a szöveg, --ink-soft a másodlagos.
               Színes falon MINDIG --ink: a halvány szürke ott
               2,3–2,9:1 kontrasztú lenne.

     AKCIÓ     jelentése van, ezért nem cserélhető:
                 --carmine   = tanácsadás, kapcsolat
                 --petrol    = workshop
               Így a látogató a felirat elolvasása ELŐTT tudja,
               hová visz a gomb.

     JELÖLÉS   csak díszít, sosem hordoz információt:
                 --ochre     csík, festék-árnyék, apró jel
                 --ochre-vilagos ugyanaz sötét kék háttéren
                 --olive     a minden harmadik kártya csíkja

   Két szabály, ami ebből következik:
   1. Beégetett színkód NEM kerül a fájlba – ha új árnyalat kell,
      előbb kap nevet itt fent.
   2. Egy oldalon egy pirosnak, egy kéknek, egy okkernek van
      helye. Ha kettő kellene, az azt jelenti, hogy a szerepeket
      nem gondoltuk végig.
   ========================================================= */

:root {
  /* ---- Éva palettája, a saját enteriőrjeiből mintázva ----
     Minden szín az Instagram-fotóiról származik: a mustársárga fotel,
     a bordó-sárga csíkos fal, a petróleum íróasztal, a zöld konyha. */
  --ochre: #e3a72f;        /* mustársárga – a fotel, a lámpa, a falak */
  /* Világosabb okker: sötét petrol háttéren a sima --ochre csak
     4,05:1 kontrasztú, ez 5,18. Felső sáv, szekciósáv, lábléc. */
  --ochre-vilagos: #f0c25c;
  --carmine: #a32d3a;      /* bordó – a csíkos fal, a könyvespolc */
  --carmine-deep: #8a2531;
  /* A hero gombjainak festék-árnyéka: két fokkal mélyebb bordó.
     A gombtól 1,82:1-gyel, a mustársárga faltól 6,19:1-gyel válik el
     (a korábbi petrol árnyék a gombtól csak 1,13:1 volt). */
  --carmine-arnyek: #5f1922;
  --petrol: #24697a;       /* petróleumkék – az íróasztal, a szekrények */
  --petrol-deep: #1b5261;
  --olive: #55703f;        /* olajzöld – a konyhaszekrény, a komód */

  /* A fő kiemelőszín: a bordó. Gombok, linkek, hangsúlyok. */
  --accent: var(--carmine);
  --accent-dark: var(--carmine-deep);
  --accent-soft: #f6e3d8;

  /* Papír és tinta – meleg, nem hideg fehér */
  --parchment: #f6eedf;    /* alap háttér – meszelt fal, nem steril fehér */
  --parchment-deep: #efe3cd;
  --ink: #2b2724;          /* meleg, majdnem fekete – nem szürke */
  --ink-soft: #6a6058;
  --heading: #2b2724;
  --line: #e2d6bf;
  --bg: var(--parchment);
  --bg-alt: var(--parchment-deep);

  /* A gomb festék-árnyékának színe. Falanként felülírjuk, hogy soha
     ne olvadjon bele a háttérbe (pl. okker árnyék mustár falon). */
  --btn-shadow: var(--ochre);

  /* ---- FALSZÍNEK ----
     A lap háttérfelületei. Eddig kézzel voltak beírva, több helyen
     ugyanaz az érték – így egy helyen módosíthatók. */
  --fal-mustar: #e8b444;      /* a nyitólap teteje */
  --fal-mustar-2: #e3a459;
  --fal-rozsa: #dd9179;       /* megjelenések oldal */
  --fal-rozsa-mely: #d38a70;  /* a nyitólapi átmenet vége */
  --fal-zsalya: #9aad82;      /* ipacsévahatás oldal, csomagok sáv */

  --radius: 4px;
  --shadow: 0 3px 16px rgba(43, 39, 36, 0.10);
  --shadow-lg: 0 14px 40px rgba(43, 39, 36, 0.18);
  --maxw: 1180px;

  /* ---- A FAL FELÜLETE ----
     Tiszta, sima színátmenet. A foltosodás kikerült; egyetlen dolog
     maradt: egy alig észrevehető színszóró réteg. Erre azért van
     szükség, mert egy ilyen hosszú átmenetben a 8 bites színlépcsők
     látható vízszintes sávokat rajzolnának. */
  /* Színszóró (dither): a hosszú színátmenet 8 bites lépcsői 225 pixelenként
     látható vízszintes sávokat adnának. Ez a finom, félig áttetsző zaj
     megbontja a lépcsőket – a sávok eltűnnek, a fal festettebb lesz tőle. */
  --wash-dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23d)' opacity='0.05'/%3E%3C/svg%3E");


  /* Meszelt csíkos fal – széles, tónusos sávok, mint Éva nappalijában.
     Nem színes szalag: ugyanannak a falszínnek a sötétebb árnyalata. */
  --stripe-wall: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.052) 0 54px,
    rgba(0, 0, 0, 0) 54px 108px
  );
}

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

/* A szekciósáv linkjeire kattintva a lap odagördül, nem odaugrik –
   így látszik, merre mozdult a tartalom. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* A height:auto elengedhetetlen a max-width mellé: a képcímkéken ott
   van a width/height attribútum (ez akadályozza meg az elrendezés
   ugrálását töltés közben), de enélkül a magasság fixen maradna,
   miközben a szélesség zsugorodik – vagyis a képek megnyúlnának.
   Ahol a CSS külön magasságot ad (ikonok, logók, galéria), az
   erősebb, tehát azokat nem érinti. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: "Bricolage Grotesque", Georgia, serif;
  font-weight: 500;
  color: var(--heading);
  letter-spacing: 0;
  margin: 0 0 0.5em;
  line-height: 1.18;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }

/* ---------- Gombok ---------- */
/* A gomb egy festett fatábla: tömör szín + eltolt színes "árnyék",
   ami hoverre mélyül. Nem lebegő anyagárnyék – nyomdai, kézműves. */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 14px 26px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--btn-shadow);
  transition: background 0.18s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.btn:hover {
  background: var(--accent-dark);
  text-decoration: none;
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--btn-shadow);
}
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--btn-shadow); }
.btn:disabled {
  background: #cdc4b4; color: var(--bg); cursor: not-allowed;
  transform: none; box-shadow: 4px 4px 0 #ded3c0;
}
.btn--ghost {
  background: transparent;
  color: var(--accent-dark);
  border: 2px solid var(--accent);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--accent);
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--btn-shadow);
}
.btn--block { display: block; width: 100%; text-align: center; }
.btn--sm { padding: 9px 16px; font-size: 0.86rem; box-shadow: 3px 3px 0 var(--btn-shadow); }
.btn--sm:hover { box-shadow: 5px 5px 0 var(--btn-shadow); }

/* Billentyűs fókusz – akadálymentesség, végig látható */
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 2px;
}

/* Aki csökkentett mozgást kért, annak nincs elmozdulás */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html, .szekcio-nav .wrap { scroll-behavior: auto; }
  .btn:hover, .logo:hover, .nav a.nav-cta:hover { transform: none; }
  /* A lapok és a galériaképek is mozdulatlanok maradnak – csak az
     árnyék mélyül, hogy a kurzor alatti elem így is jelezze magát. */
  .package:hover, .ws-offer:hover, .pull__db:hover { transform: none; }
  .ba-grid > *:hover { transform: none; }
}

/* ---------- Felső sáv ----------
   A lap tetején a festett csík fut végig: ez az első, amit a látogató lát,
   és ugyanaz a motívum, mint Éva falain. */
.topbar {
  background: var(--petrol-deep);
  font-size: 0.82rem;
  color: #dfe7e6;
  border-top: 5px solid var(--ochre);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 42px;
  flex-wrap: wrap;
}
.topbar .socials { display: flex; gap: 14px; }
/* Egy árnyalattal világosabb okker, mint a márkaszín: a sötét petrol
   sávon a sima --ochre csak 4,05:1 kontrasztú, ez viszont 5,2:1.
   Csak itt tér el – a token maga változatlan, hogy máshol semmi ne
   mozduljon el. */
.topbar .socials a { color: var(--ochre-vilagos); font-size: 0.95rem; }
.topbar .socials a:hover { color: #fff; }
.topbar .sep { color: #52818c; }
/* A telefonszám mostantól hívható link. A sáv saját szövegszínét
   viseli, nem a linkszínt: a sötét petrol sávon az kilógna. */
.topbar__tel { color: inherit; text-decoration: none; }
.topbar__tel:hover { color: #fff; }

/* ---- A felső sáv keskeny képernyőn ----
   A három tartalom (közösségi linkek, cím, telefon) egy sorhoz 689 px
   képernyőt kívánna – megmérve: 641 px tartalom + 2×24 px margó. Egy
   375 px-es telefonon ezért HÁROM sorba tört, és 215 px-t foglalt a lap
   tetejéből: abból, amit a látogató legelőször lát Éva oldalából.

   Keskeny képernyőn ezért csak a telefonszám marad – mobilon ez a
   legtöbbet érő elem, mert egy koppintással hívható. A cím és a
   közösségi linkek a láblécbe kerültek, mind az öt oldalon. */
@media (max-width: 760px) {
  .topbar .socials,
  .topbar .sep,
  .topbar__cim { display: none; }
  .topbar .wrap { justify-content: center; min-height: 44px; }
  .topbar__tel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;   /* ujjal is kényelmesen eltalálható */
    font-weight: 600;
  }
}

/* A közösségi linkek új helye a láblécben. Korábban CSAK a felső sávban
   szerepeltek, ezért nem lehetett őket ott egyszerűen elrejteni. */
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

/* ---------- Fejléc / navigáció ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--parchment);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(43, 39, 36, 0.06);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
}
/* A logó egy festett tábla – mint egy krétafestett bútordarab */
.logo {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--carmine);
  border: 0;
  padding: 10px 16px;
  line-height: 1.1;
  text-align: center;
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--ochre);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.logo:hover {
  text-decoration: none;
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ochre);
}
.logo span { display: block; font-size: 0.6rem; letter-spacing: 0.22em; color: #f3d9a8; font-weight: 400; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 10px 13px;
  border-radius: var(--radius);
}
/* Aláhúzás ecsetvonásként – hoverre "festődik" ki */
.nav a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 3px;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav a:hover { color: var(--carmine); text-decoration: none; }
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-active { color: var(--carmine); font-weight: 700; }
.nav a.is-active::after { transform: scaleX(1); }
.nav a.nav-cta {
  background: var(--petrol);
  color: #fff;
  font-weight: 600;
  box-shadow: 3px 3px 0 var(--ochre);
  margin-left: 10px;
}
.nav a.nav-cta::after { display: none; }
.nav a.nav-cta:hover {
  background: var(--petrol-deep);
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ochre);
}

/* A hamburger menübe másolt szekciólinkek (main.js). Alapból rejtve:
   desktopon a szekciósáv látja el ezt a szerepet, ott fölöslegesek. */
.nav__csoport, .nav__szekcio { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 1.5rem;
  color: var(--carmine);
  cursor: pointer;
  /* A mobil oldal legfontosabb gombja korábban 31×33 px volt – az
     ajánlott minimum 44×44. Padding helyett min-méret + középre
     igazítás, így a jel a helyén marad, csak az érintőfelület nő. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* ---------- Szekciók: "séta a festett szobákon át" ----------
   Éva otthonában egyetlen fal sem fehér. A szekciók ezért saját
   falszínt kapnak – a látogató úgy görget, mintha szobáról szobára
   menne. A fotók fehér "kereten" ülnek, mint képek a falon. */
section { padding: 78px 0; }

/* Minden szekció meszelt falat kap: szemcse + felhősödés a színen.
   A soft-light keverés miatt a textúra követi az alatta lévő színt,
   így sötét és világos falon is természetes marad. */
section { position: relative; }

/* ---- A FAL ----
   Az egész oldal EGYETLEN festett falfelület. Korábban szekciónként adtunk
   gradienst, de a szekciók magassága nagyon eltér (a galéria a lap 26%-a,
   egy átmeneti sáv 1%-a), így a színváltás sebessége ugrált – és a szem
   pont ezt a sebességváltást látja határvonalnak, akkor is, ha a színek
   pontosan illeszkednek.

   Ezért a fal most a dokumentum teljes magasságán fut végig, egyetlen lassú
   átmenetben: meleg mustártól a megfakult zsályáig. A szekciók átlátszóak,
   így nincs mit összeilleszteni – nincs határ, amit meg lehetne látni. */
body { position: relative; }
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Csak a finom színszóró marad: ez teszi láthatatlanná a hosszú
     színátmenet 8 bites lépcsőit. Nagy léptékű foltosodás nincs. */
  background-image:
    var(--wash-dither),
    /* A színátmenet a lap tetejétől a "Egyéni lakberendezési tanácsadás"
       szekcióig tart – az kb. a lap harmadánál kezdődik. Ezért 30%-ra
       ér a végső rózsaszínhez, és onnantól tartja is: így akkor is
       teli színnel találkozik a következő sáv, ha a lap hosszabb lesz.
       (30% alatt amúgy is eltakarják a saját hátterű szekciók.) */
    linear-gradient(180deg,
      var(--fal-mustar) 0%,
      var(--fal-mustar-2) 10%,
      var(--fal-rozsa) 21%,
      var(--fal-rozsa-mely) 30%,
      var(--fal-rozsa-mely) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 200px 200px, 100% 100%;
  background-blend-mode: normal, normal;
}

/* Rövid oldalon (pl. workshop-időpontok) az egész színút néhány száz
   pixelbe zsúfolódna, ami rosszul néz ki. Ott ezért egyszínű a fal. */
body.fal-petrol::before,
body.fal-rozsa::before,
body.fal-zsalya::before,
body.fal-krem::before {
  background-image: var(--wash-dither);
  background-repeat: repeat;
  background-size: 200px 200px;
}
body.fal-petrol::before   { background-color: var(--petrol); } /* workshop oldal – ugyanaz a kék, mint a "Workshop időpontok" gombon */
body.fal-rozsa::before    { background-color: var(--fal-rozsa); }  /* megjelenések – rózsa */
body.fal-zsalya::before   { background-color: var(--fal-zsalya); }  /* ipacsévahatás – zsálya */
body.fal-krem::before     { background-color: var(--bg); }

/* ---- WORKSHOP-GOMB ----
   Minden workshopra vivő gomb ugyanazt viseli: petróleumkék lap, fehér
   felirat, okker festék-árnyék – mint a fejlécben a "Workshop
   időpontok". Így a kék az egész oldalon ugyanazt jelenti.

   Tömör lap, nem keret nélküli: a zsálya falon a kék KERET felirata
   csak 3,54:1 lenne, a fehér felirat a kék lapon viszont 6,22. */
.btn--ws { background: var(--petrol); color: #fff; }
.btn--ws:hover { background: var(--petrol-deep); color: #fff; }

/* ---- SÖTÉT KÉK FALON A SZÖVEG ----
   A workshop-oldal fala petróleumkék, ezért a rajta ülő szöveg a
   gombról ismerős fehéres árnyalatot kapja. FONTOS: csak azok az
   elemek, amelyek tényleg a falon ülnek – a kártyák és a jelentkezési
   ablak fehérek, azok belsejében marad a sötét tinta. */
body.fal-petrol .page-head h1,
body.fal-petrol .cta-band h2 { color: #fff; }
body.fal-petrol .page-head p,
body.fal-petrol .cta-band p,
body.fal-petrol .results-bar { color: #ece4d6; }

/* A második kártya (az online workshop) felső csíkja petrol volt –
   a kék falon ez elveszne, ezért itt okkerre vált. */
body.fal-petrol .ws-card:nth-child(3n+2) { border-top-color: var(--ochre); }

/* ---- HORGONYOK ----
   A fejléc és a szekciósáv odaragad a lap tetejére, ezért egy
   menüpontra kattintva a szekció címe alácsúszna. Ez a tartalék hely
   megállítja a görgetést feljebb, így a cím a sáv alatt jelenik meg.
   A két magasságot a main.js méri ki és írja be, mert a fejléc
   magassága a képernyő szélességével változik. Az aloldalakon nincs
   szekciósáv, ott a hozzá tartozó érték 0. */
section[id], div[id] {
  /* Pontosan a ragadós sáv aljáig görgetünk, egy pixel ráhagyással.
     Korábban volt itt +16px levegő, de mivel a szomszédos szekciók
     más-más falszínűek, abban a résben az ELŐZŐ szekció színe villant
     be a sáv alatt. A ráhagyás azért kell, hogy a fejléc magasságának
     törtpixeles ingadozásából se maradjon hajszálcsík. */
  scroll-margin-top: calc(var(--fejlec-mag, 84px) + var(--szekcionav-mag, 0px) - 1px);
}

/* ---------- SZEKCIÓSÁV (nyitólap) ----------
   A nyitólap hosszú, és a fejlécben már csak az aloldalak linkjei
   vannak. Ez a sáv a lapon belüli szekciókhoz visz, végig a fejléc
   alatt marad, és kiemeli, épp melyik szekciónál jár a látogató –
   így görgetés közben sem lehet elveszni. Keskeny képernyőn a sáv
   maga csúsztatható oldalra. */
.szekcio-nav {
  position: sticky;
  top: var(--fejlec-mag, 84px);
  z-index: 30;
  background: var(--petrol-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.szekcio-nav .wrap {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;          /* a sáv csúsztatható, de görgetősáv nélkül */
  scroll-behavior: smooth;
}
.szekcio-nav .wrap::-webkit-scrollbar { display: none; }
.szekcio-nav a {
  flex: none;
  color: #dfe7e6;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.88rem;
  white-space: nowrap;
  padding: 14px 14px 11px;
  border-bottom: 3px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.szekcio-nav a:hover { color: #fff; text-decoration: none; }
.szekcio-nav a.is-active { color: var(--ochre-vilagos); border-bottom-color: var(--ochre-vilagos); }

/* A szekciók nem festenek – a fal látszik át rajtuk */
section, .cta-band, .page-head { background: transparent; }

/* ---- SZÍNSÁVOK ----
   A nyitólap három hangulatra oszlik. Fent a meleg színátmenet fut a
   csomagokig; onnan a tanácsadás és a workshopok zsálya falon ülnek;
   Éva bemutatkozásától lefelé pedig krém, mert ott a leghosszabbak a
   szövegek, és azon a legjobb olvasni. A meszelt textúrát mindegyik
   megkapja, hogy egy falnak látsszon, ne három színes csíknak. */
.sav-zsalya,
.sav-krem {
  background-image: var(--wash-dither);
  background-repeat: repeat;
  background-size: 200px 200px;
}
.sav-zsalya { background-color: var(--fal-zsalya); }
.sav-krem   { background-color: var(--bg); }

/* ---- FÜLKE ----
   Egyetlen mély, sötét felület az oldalon: a galéria. Nem szekcióhatár,
   hanem egy mélyre festett fülke, aminek a széle elmosódva olvad a falba –
   így sehol nincs éles vágás. Itt "költjük el" a merészséget. */
/* A fülke: tömör, határolt sötét felület a galériának. */
.alcove {
  position: relative;
  padding-top: 88px;
  padding-bottom: 88px;
}
.alcove::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Tömör petróleum, tiszta felső és alsó éllel. Korábban maszkkal
     olvadt a falba, de a kék és a piros közötti átmenet nem kellett. */
  background-color: var(--petrol);
  background-image: var(--wash-dither);
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* Sötét felületen világos szöveg */
.on-dark { color: #f4efe6; --btn-shadow: var(--ochre); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .section-lead, .on-dark .muted, .on-dark p, .on-dark li { color: #ece4d6; }
.on-dark .quote { color: #f4efe6; }
.on-dark a { color: var(--ochre); }
/* A gomb kivétel: a fenti szabály az okkert ráhúzta a bordó gombra is,
   így a galériában a gombfelirat okker volt bordón (3,3:1). A gomb
   felirata mindig fehér marad. */
.on-dark a.btn { color: #fff; }
.on-dark .section-title::after { background: var(--ochre); }
.on-dark .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.on-dark .btn--ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.on-dark .home-ws__list li { border-bottom-color: rgba(255, 255, 255, 0.22); }
.on-dark details summary { color: var(--ochre); border-bottom-color: rgba(255, 255, 255, 0.22); }

/* A gomb festék-árnyéka soha ne olvadjon a falba */
.hero { --btn-shadow: var(--carmine-arnyek); }
/* A gomb festék-árnyéka itt bordó volt – vagyis pontosan ugyanaz, mint
   maga a gomb, így nem látszott árnyéknak. Okkerre váltva mindenhol
   elválik a gombtól, ahogy a lap többi részén is. */
#amiben-segitek, #csomagok, #workshop-otthon { --btn-shadow: var(--ochre); }

/* Fülkében a fehér kártyák erősebb árnyékkal válnak el */
.on-dark .package, .on-dark .ws-card { box-shadow: var(--shadow-lg); }

/* Szekciócím: alatta rövid festett csík – a visszatérő motívum */
.section-title { text-align: center; margin-bottom: 10px; }
.on-dark .section-title::after { background: var(--ochre); }
.section-title::after {
  content: "";
  display: block;
  width: 84px;
  height: 7px;
  margin: 18px auto 0;
  background: var(--ochre);
  border-radius: 40% 60% 55% 45% / 60% 50% 60% 40%;
  transform: rotate(-0.7deg);
}

/* A meleg (mustár–rózsa) falakon a csík bordó, a zsálya sávon pedig
   petróleumkék – ugyanaz a kék, ami a "Workshop időpontok" gombon és a
   workshop-oldal falán is szerepel. Az okker csík ezeken a falakon
   1,04–1,27:1 kontrasztú lenne, vagyis eltűnne. A sötét fülkében és a
   fehér sajtó-szekcióban marad az alap okker, ott az válik el jól. */
#munkaim .section-title::after,
#velemenyek .section-title::after { background: var(--carmine); }

/* A zsálya sávban a csík krém – ugyanaz a szín, ami az "Amiben segítek"
   és a "Rólam" szekció fala. Így a lap alsó fele egyetlen színpárt
   használ: zöld fal, krém jelölés. */
#csomagok .section-title::after,
#workshop-otthon .section-title::after { background: var(--bg); }

/* A Workshopjaim gombjai ugyanazt a kék + okker párost viselik, mint a
   fejlécben a "Workshop időpontok" gomb – így egy pillantásra látszik,
   hogy mindkettő ugyanoda, a workshop-oldalra visz. Az okker árnyékot
   a szekcióra beállított --btn-shadow adja. */
#workshop-otthon .btn { background: var(--petrol); }
#workshop-otthon .btn:hover { background: var(--petrol-deep); }

/* Az "Érdekelnek a workshopok!" gomb szintén a workshop-oldalra visz,
   ezért a kék családba tartozik – korábban bordóra váltott a kurzor
   alatt. Nemcsak a kitöltése, a kerete és a felirata is kék, különben
   bordó keret villanna kékre. */
#sajto .btn--ghost {
  color: var(--petrol-deep);
  border-color: var(--petrol);
}
#sajto .btn--ghost:hover {
  background: var(--petrol);
  color: #fff;
  box-shadow: 4px 4px 0 var(--ochre);
}


/* A színes falakon ülő kisebb szövegek TELJES tintaszínt kapnak.
   A halvány szürke (--ink-soft) ezeken 2,26–2,93:1 kontrasztú volt,
   vagyis nehezen olvasható. Köztes szürkével sem lehetett megoldani:
   a rózsaszín falakon még a #453e37 is csak 3,87–4,03 lett volna.
   Teljes tintával 5,45–7,07 mindenhol. Fehér kártyán belül marad a
   halvány szürke, ott bőven olvasható. */
.section-lead { text-align: center; max-width: 760px; margin: 20px auto 44px; color: var(--ink); font-size: 1.06em; }

/* Teljes szélességű festett csík – szekcióhatárként */
/* A szekciókat a falszínek választják el – külön elválasztó vonal nem kell. */
.stripe-rule { display: none; }

/* Csíkos fal: széles, tónusos sávok – mint Éva nappalijában.
   Ugyanaz a falszín sötétebb árnyalatban, nem külön színes szalag. */
/* A csíkos fal kikerült: kemény felső/alsó élt adott a folyamatos falon. */

/* ---------- Hero ---------- */
.hero { padding-top: 48px; }
/* A hero-kép bekeretezve, mint egy festmény a falon – enyhén megdöntve,
   hogy kézzel felrakott érzete legyen, ne katalógus-tökéletes. */
.hero__img {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  padding: 10px;
  box-shadow: var(--shadow-lg);
  /* A nyitókép egyenesen áll. A ferdeség a galéria és a workshop-lapok
     motívuma marad – a lap legelső, legnagyobb képénél viszont inkább
     elcsúszásnak látszott, mint gesztusnak. */
}
.hero__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.hero h1 { text-align: center; margin-top: 52px; max-width: 16ch; margin-inline: auto; }
/* A "színt" szó mögött VALÓDI ECSETNYOM. Nem kép, hanem kódból rajzolt
   SVG – ezért éles marad minden képernyőn, és nem kell hozzá letöltött
   fájl. Három rétegből áll össze:

   1. Alap: hullámos szélű sáv, a lap saját bordó márkaszínével
      (--carmine, #a32d3a) – egyszínű, nem átmenetes.
   2. Sörteszálak: sűrű vízszintes csíkminta sötét és világos vonalakkal
      – ez adja a szálkás, húzott hatást.
   3. Kiszaladó sörtenyomok: a fő test két végén különálló, eltérő
      hosszú és vastag csíkok. Ezek teszik egyenetlenné az oldalakat –
      enélkül a két vég túl szabályosan zárult.
   4. Rojtozás: egy elmozdító szűrő (feTurbulence + feDisplacementMap)
      erős, kétféle léptékű zajjal. Ez töri meg a sima kontúrt: a
      szélek szálasan kirojtosodnak, a csíkok hullámzanak.

   A "none" arányőrzés miatt a vonás a szó hosszához nyúlik. A sáv
   szándékosan magasabb a szövegnél, hogy a betűk a rojtos szélek után
   se csússzanak le a festékről a falra – ott a fehér betű 1,9-re esne. */
.hero h1 em {
  font-style: normal;
  white-space: nowrap;
  display: inline-block;
  /* Krém, nem tiszta fehér – ugyanaz a szín, mint a lapoké és a "Rólam"
     szekció fala. A bordó festéken 5,87:1, tehát bőven olvasható. */
  color: var(--bg);
  padding: 0.14em 0.38em 0.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='none'%3E %3Cdefs%3E %3Cpattern id='s' width='14' height='9' patternUnits='userSpaceOnUse'%3E %3Crect y='0' width='14' height='1.1' fill='%23000' opacity='.20'/%3E %3Crect y='3.2' width='14' height='.6' fill='%23000' opacity='.11'/%3E %3Crect y='5.4' width='14' height='1.0' fill='%23fff' opacity='.07'/%3E %3Crect y='7.6' width='14' height='.7' fill='%23000' opacity='.15'/%3E %3C/pattern%3E %3Cfilter id='r' x='-18%' y='-30%' width='136%' height='160%'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.4' numOctaves='4' seed='11' result='n'/%3E %3CfeDisplacementMap in='SourceGraphic' in2='n' scale='14' xChannelSelector='R' yChannelSelector='G'/%3E %3C/filter%3E %3C/defs%3E %3Cg filter='url(%23r)'%3E %3Cpath d='M16 20C72 8 150 5 214 13C248 17 268 22 284 15L286 96C268 104 248 100 214 96C150 88 72 100 16 89Z' fill='%23a32d3a'/%3E %3Cg fill='%23a32d3a'%3E %3Crect x='3' y='28' width='20' height='3.4'/%3E%3Crect x='7' y='43' width='14' height='2.2'/%3E %3Crect x='4' y='60' width='17' height='2.8'/%3E%3Crect x='9' y='75' width='11' height='1.9'/%3E %3Crect x='280' y='25' width='17' height='2.6'/%3E%3Crect x='277' y='41' width='21' height='3.6'/%3E %3Crect x='282' y='57' width='15' height='2.1'/%3E%3Crect x='278' y='72' width='19' height='3'/%3E %3Crect x='284' y='86' width='13' height='2.3'/%3E %3C/g%3E %3Cpath d='M16 20C72 8 150 5 214 13C248 17 268 22 284 15L286 96C268 104 248 100 214 96C150 88 72 100 16 89Z' fill='url(%23s)'/%3E %3C/g%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: rotate(-1deg);
}
.hero h2 {
  text-align: center;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--carmine);
  font-weight: 500;
}
.hero__sub { text-align: center; max-width: 660px; margin: 24px auto 0; color: var(--ink); font-size: 1.06em; }

/* ---------- Két oszlopos ajánlat (körikonok) ---------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-top: 56px;
  text-align: center;
}
.offer__icon {
  width: 140px;
  height: 140px;
  margin: 0 auto 22px;
  border: 3px solid var(--carmine);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  color: var(--carmine);
  overflow: hidden;
  background: #fff;
  /* Bordó árnyék, a karika saját gyűrűjének a színe. Korábban okker
     volt, ami a lap tetején a mustársárga falon gyakorlatilag eltűnt –
     a második ikon olajzöld árnyéka viszont látszott, ezért tűnt úgy,
     mintha csak az egyiknek lenne árnyéka. */
  box-shadow: 5px 5px 0 var(--carmine);
}
.offer__icon img { width: 70px; height: 70px; object-fit: contain; }
.offer__price { color: var(--ink); margin-bottom: 22px; font-size: 1.06em; }
/* A második ajánlat másik falszínt kap – így páros, nem ismétlés */
/* A második karika árnyéka is a saját gyűrűjének színe – ahogy az
   elsőnél a bordó. Korábban olajzöld volt, ami sehol máshol nem
   szerepel ezen a részen. */
.offer:nth-child(2) .offer__icon { border-color: var(--petrol); box-shadow: 5px 5px 0 var(--petrol); }

/* ---------- Előtte / utána galéria ---------- */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
/* Önálló előtte/utána képek – fehér passzpartuval, mint bekeretezett kép.
   Váltakozó apró döntés: kézzel felrakott, nem rácsra igazított hatás. */
.ba-img,
.ba-ph,
.ba-kep {
  width: 100%;
  height: auto;
  background: #fff;
  padding: 8px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ---- ELŐTTE / UTÁNA CÍMKÉK ----
   A fotókba bele van égetve egy régi "Előtte" / "Utána" tábla a felső
   két sarokban. Kimértem mind a hat képen: SABLON, mindegyiken pontosan
   ugyanaz az arány – a kép szélességének 22,8%-a, magasságának 16,1%-a.
   Ezt a két címke takarja el – ugyanaz a félig áttetsző fehér sáv,
   mint a csomagok képein, csak sarokba ülve.

   A méret ezért nem a szöveghez igazodik, hanem a takarandó táblához:
   24% x 17,5%. Ez a doboz saját mérete; mivel a passzpartu is beleszámít
   a viszonyítási alapba, a képen ténylegesen ~24,7% x ~18,3% lesz –
   vagyis kb. két százalékpont ráhagyás a tábla fölött. Szűkebbre nem
   érdemes venni, mert a régi tábla széle kilátszana.

   A homályosítás a lényeg: 0,82-es fehérrel a régi felirat halványan
   még átütne, az elmosás viszont olvashatatlan pacává keni, miközben
   megmarad az áttetsző, üveges hatás. */
/* Az "Amiben segítek" képe keret nélkül áll: a krém falon a fehér
   passzpartu külön rátett lapnak látszott. Az árnyék és a lekerekítés
   marad, így továbbra is fénykép, csak nincs kerete. */
#amiben-segitek .ba-img { background: none; padding: 0; }

.ba-kep { position: relative; display: block; margin: 0; }
.ba-kep img { display: block; width: 100%; height: auto; }

.ba-kep__cimke {
  position: absolute;
  top: 8px;                      /* a fehér passzpartu vastagsága */
  width: 24%;
  min-height: 17.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 3px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(9px) saturate(1.15);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(0.62rem, 1.1vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
/* A belső sarok lekerekítése 8px – a korábbi 12 a szűkebb címkénél már
   pont a tábla sarkából harapott volna ki egy darabot. */
.ba-kep__cimke--elotte { left: 8px;  border-radius: 2px 0 8px 0; }
.ba-kep__cimke--utana  { right: 8px; border-radius: 0 2px 0 8px; }

/* Ha a böngésző nem tud hátteret homályosítani, tömörebb fehérrel
   takarunk – ott a régi felirat átütése a nagyobb baj. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ba-kep__cimke { background: rgba(255, 255, 255, 0.97); }
}
/* ---- FALIÚJSÁG-HATÁS ----
   A képek nem egyenesen állnak, mint kézzel feltűzött fényképek.
   Korábban ez ±0,4° volt, szigorúan váltakozva – az viszont inkább
   elcsúszásnak látszott, mint szándéknak. Két dolgon múlik, hogy
   direktnek érződjön:

   1. Nagyobb szög (0,7–1,8°), mert a fél fok alatti döntést a szem
      hibának olvassa, nem gesztusnak.
   2. VÁLTOZÓ szögek, nem szabályos váltakozás. Ötös ciklusban futnak,
      így sem a 6 képes előtte/utána rácsban, sem a 8 képes galériában
      nem áll össze felismerhető minta. A pici függőleges eltolás is
      ezt erősíti: nem egy vonalban lógnak.

   A kurzor alatt a kép kiegyenesedik – ettől a döntés még inkább
   szándékosnak hat, mert láthatóan „meg lehet igazítani". */
.ba-grid > *:nth-child(5n+1) { transform: rotate(-1.5deg) translateY(2px); }
.ba-grid > *:nth-child(5n+2) { transform: rotate(1.1deg) translateY(-3px); }
.ba-grid > *:nth-child(5n+3) { transform: rotate(-0.7deg) translateY(-1px); }
.ba-grid > *:nth-child(5n+4) { transform: rotate(1.8deg) translateY(3px); }
.ba-grid > *:nth-child(5n+5) { transform: rotate(-1.2deg) translateY(1px); }
.ba-grid > *:hover { transform: rotate(0deg) scale(1.015); box-shadow: var(--shadow-lg); }

/* Az előtte/utána rácsban NEM kell a ferdeség: ott a képek maguk is
   kettéosztott, szerkesztett montázsok, azokat a döntés csak zavarossá
   teszi. Egyenesen állnak, de a keretet és az árnyékot megtartják. */
#munkaim .ba-grid > * { transform: none; }
#munkaim .ba-grid > *:hover { transform: scale(1.015); }

/* ---- GALÉRIA ----
   Több levegő a képek közé, és EGYFORMA magasság. A nyolc fotóból hét
   álló (0,75-ös arány), egy viszont fekvő (1,28) – emiatt az utolsó
   sorban az egyik kép 445, a mellette lévő 738 pixel magas volt, ami
   csonkának látszott. Egységes 3:4-es csempével a rács alja kiegyenlítve.
   A fekvő képnél a kivágás középpontját kicsit jobbra toljuk, hogy az
   íróasztal és a képfal maradjon a képen. */
#otthon-galeria .ba-grid { gap: 40px; }
#otthon-galeria .ba-img {
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
}
#otthon-galeria .ba-img[src*="otthonom-7.jpeg"] { object-position: 57% center; }

/* ---------- Instagram-hivatkozás a galéria fölött ----------
   Sötét fülkén ül, ezért nem sima link, hanem halvány üvegtábla:
   kerek profilkép + Instagram-jel + a felhasználónév. */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.on-dark .ig-link { color: #fff; }
.ig-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.03);
  text-decoration: none;
}

/* A profilkép egy egész alakos fotóból van kivágva, ezért nem elég az
   `object-fit: cover` – az a teljes szélességet mutatná, és Éva feje
   pár pixeles lenne a körben. A képet ezért nagyítva, abszolút
   pozicionálva tesszük be, hogy az arca töltse ki a kört; a körvonal
   levágja a többit. A számok a portre.jpeg-hez (550x686) tartoznak.
   Ha egyszer valódi, négyzetes profilkép kerül ide, ez a két szabály
   egyetlen `object-fit: cover; object-position: center`-re cserélhető. */
.ig-link__kep {
  flex: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
/* A max-width azért kell, mert a globális `img { max-width: 100% }`
   különben visszazsugorítaná a képet a 44 px-es körre, és odalenne
   a nagyítás. */
.ig-link__kep img {
  position: absolute;
  max-width: none;
  width: 85.3px;
  height: 106.4px;
  left: -9.3px;
  top: -0.9px;
}

.ig-link__jel { flex: none; width: 19px; height: 19px; color: var(--ochre); }

@media (prefers-reduced-motion: reduce) { .ig-link:hover { transform: none; } }

/* ---------- Ugyanez a mozdulat a szöveges lapokon ----------
   A galéria fotóinál a kurzor alatt a kép 0,2 mp alatt kiegyenesedik,
   egy hajszálnyit megnő, és mélyül az árnyéka. Ugyanezt kapják a
   csomagok, a workshop-ajánlatok és a nyitólapi idézetek is.

   Egy dolgot NEM kapnak meg: a nyugalmi ferdeséget. A fotóknál az
   a kézzel felrakott kép hatását adja, egy szövegblokknál viszont
   elgépelésnek látszana. Így a mozdulat és az időzítés azonos, csak
   egyenesből indul.

   A z-index azért kell, mert a megnövő lap egyébként a szomszédja
   alá kerülne, és az árnyéka félbevágódna. */
.package,
.ws-offer,
.pull__db {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.package:hover,
.ws-offer:hover,
.pull__db:hover {
  transform: scale(1.015);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ba figure { margin: 0; position: relative; aspect-ratio: 4 / 5; }
.ba figure img { width: 100%; height: 100%; object-fit: cover; }
.ba figcaption {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.86);
  padding: 5px 16px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #5b5b5b;
}
.ba figure:last-child figcaption { left: auto; right: 14px; }

/* ---------- Idézetek / problémák ---------- */
.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.quote {
  font-style: italic;
  color: var(--ink);
  margin-bottom: 26px;
  padding-left: 18px;
  border-left: 4px solid var(--ochre);
}
.quote:nth-child(even) { border-left: 0; border-right: 4px solid var(--petrol); padding-left: 0; padding-right: 18px; }
.quote:nth-child(even) { text-align: right; }

/* ---------- Csomagok ---------- */
.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
/* A csomagok "kartonlapok" – felül festett csík jelöli a szintjüket */
.packages { gap: 26px; }
/* A lapok háttere krém, nem tiszta fehér: a zsálya falon a rideg
   fehér nagyon elütött. Ugyanaz a szín, mint a "Rólam" szekció fala. */
.package {
  padding: 0 26px 28px;
  border-right: 0;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border-top: 8px solid var(--ochre);
  display: flex;
  flex-direction: column;
}
.package:nth-child(2) { border-top-color: var(--carmine); }
.package:nth-child(3) { border-top-color: var(--petrol); }
.package:last-child { border-right: 0; }
.package .btn { margin-top: auto; }
.package__img { margin-inline: -26px; position: relative; }

/* A csomag neve a kép közepén, félig áttetsző fehér sávon. A név csak
   itt szerepel – a kép alatt korábban még egyszer ki volt írva.
   Címsor maradt (h3), hogy a képernyőolvasónak is megmaradjon a
   kártya szerkezete, csak a megjelenése lett sávfelirat. */
.package__img h3 {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  margin: 0;
  background: rgba(255, 255, 255, 0.88);
  text-align: center;
  padding: 12px 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink);
}

.package ul { padding-left: 20px; margin: 0 0 22px; }
.package li { margin-bottom: 6px; }
/* A kártyacímek a lap saját címsorszínét viselik. Korábban hideg
   szürke (#4a4a4a) volt rajtuk, ami a végig meleg tónusú palettából
   kilógott. */
.package h4 { text-transform: none; font-weight: 600; font-size: 1rem; color: var(--heading); margin-bottom: 6px; }
.package__price {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.35rem;
  color: var(--heading);
  text-align: center;
  margin: 26px 0;
}
details summary {
  color: var(--accent-dark);
  cursor: pointer;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  list-style: revert;
}
details p { font-style: italic; font-size: 0.92rem; color: var(--ink-soft); }

/* Két gomb egymás mellett, középre */
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ---------- Workshopjaim (nyitólap) ----------
   Két ajánlat egymás mellett: „nálam” és „online”. Ugyanaz a
   kartonlap-nyelv, mint a csomagoknál – fehér lap, festett felső
   csík, árnyék –, hogy a két szekció egy családba tartozzon. */
.ws-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  /* A két lap egyforma magas: a rácssor mindkettőt teljes magasságúra
     nyújtja. Az egyenetlenséget nem a szöveg kitöltése simítja el,
     hanem az ár és a gomb, amit a .ws-offer .package__price
     margin-top: auto értéke a lap aljára tol – így a két lap alja egy
     vonalban van, ahogy a csomagoknál is. */
}
.ws-offer {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 8px solid var(--ochre);
  padding: 0 26px 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* A második (online) lap másik kiemelőszínt kap – így egy pillantásra
   látszik, hogy két különböző dologról van szó. */
.ws-offer:nth-child(2) { border-top-color: var(--petrol); }

.ws-offer__img { margin-inline: -26px; margin-bottom: 20px; }
.ws-offer__img img,
.ws-offer__img .ph { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.ws-offer h3 { text-transform: none; font-size: 1.3rem; margin: 0 0 10px; color: var(--heading); }
.ws-offer > p { margin: 0 0 18px; color: var(--ink-soft); }

/* A tények listája: pipák helyett halk elválasztó vonalak – ugyanaz a
   nyugodt ritmus, mint a régi „Mire számíthatsz?” listán. */
.ws-offer__facts { list-style: none; padding: 0; margin: 0 0 6px; }
.ws-offer__facts li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.ws-offer__facts li:last-child { border-bottom: 0; }
.ws-offer__facts b { color: var(--heading); }

/* A hosszú leírás alapból zárva – nem nyomja agyon a két lapot. */
.ws-offer details { margin-top: 6px; }
.ws-offer details summary { font-size: 0.98rem; }
.ws-offer details p { font-style: normal; font-size: 0.95rem; color: var(--ink-soft); }
.ws-offer .package__price { margin-top: auto; }

@media (max-width: 860px) {
  .ws-pair { grid-template-columns: 1fr; }
}

/* ---- VÉLEMÉNYEK ----
   Minden vélemény ugyanolyan önálló fehér kártya. Korábban a párosak
   keret nélkül, közvetlenül a falra voltak írva – ettől viszont
   egybefolytak a fallal és egymással. Külön lapokon mindegyik
   történet magában áll, és tisztán látszik, hol ér véget az egyik.
   A ritmust a fotó oldalváltása és a felső csík színe adja. */
.vel {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;              /* fotó és szöveg közé */
  align-items: center;
  margin-bottom: 30px;    /* két vélemény közé */
  background: var(--bg);  /* krém, mint az oldal többi lapja */
  border-radius: var(--radius);
  border-top: 8px solid var(--carmine);
  box-shadow: var(--shadow);
  padding: 34px;
}
.vel:last-child { margin-bottom: 0; }
.vel__szoveg { min-width: 0; }   /* hosszú szó se feszítse szét a rácsot */

/* Három szín körbe-körbe – így nyolc kártya sem lesz egyhangú */
.vel:nth-of-type(3n+2) { border-top-color: var(--petrol); }
.vel:nth-of-type(3n+3) { border-top-color: var(--olive); }

/* A fotó oldala vált – így a szem sosem ugyanoda esik */
.vel:nth-of-type(even) { grid-template-columns: 1fr 200px; }
.vel:nth-of-type(even) .vel__kep { order: 2; }

.vel__kep img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  /* A kerek fotó passzpartuja is krém – fehér gyűrű elütne a lapon. */
  background: var(--bg);
  padding: 6px;
  box-shadow: var(--shadow);
}
.vel__idezet {
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--ink);
  margin: 0 0 14px;
}
.vel__idezet em { font-style: normal; font-weight: 700; color: var(--carmine); }
.vel__nev {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--carmine);
  margin: 0;
}
.vel__nev::before { content: "— "; }

/* A névadó vélemény: ugyanaz a fehér kártya, csak nagyobb és
   erősebb árnyékkal – ő adta a nevet az egész oldalnak. */
.vel--kiemelt {
  border-top-color: var(--ochre) !important;
  box-shadow: var(--shadow-lg);
  grid-template-columns: 230px 1fr;
  /* A margót szándékosan NEM írjuk felül: korábban 12px volt, ezért az
     első két vélemény közti rés szűkebb volt a többinél. A .vel alap
     30px-e mindenhol egyforma távolságot ad. */
}
.vel--kiemelt .vel__kep img { width: 230px; height: 230px; }
.vel--kiemelt .vel__idezet { font-size: 1.15rem; }

/* Telefonon egymás alá kerül a fotó és a szöveg. Itt a legfontosabb,
   hogy a kártyák között valódi hézag maradjon, különben egyetlen
   végtelen szövegoszlopnak látszik az egész oldal. */
@media (max-width: 760px) {
  .vel,
  .vel:nth-of-type(even),
  .vel--kiemelt {
    grid-template-columns: 1fr;
    gap: 22px;              /* fotó és szöveg közé */
    margin-bottom: 30px;    /* két kártya közé */
    justify-items: center;
    text-align: center;
    padding: 28px 22px;
  }
  .vel:nth-of-type(even) .vel__kep { order: 0; }
  .vel__kep img,
  .vel--kiemelt .vel__kep img { width: 150px; height: 150px; }
  .vel__idezet { text-align: left; }
}

/* ---------- Kiemelt idézetek a nyitólapon ---------- */
.pull {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 38px;
}
/* Krém, nem tiszta fehér – ugyanaz a szín, mint a csomag- és
   workshop-lapoké, illetve a "Rólam" szekció fala. */
.pull__db {
  background: var(--bg);
  border-radius: var(--radius);
  border-top: 6px solid var(--carmine);
  box-shadow: var(--shadow);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pull__db:nth-child(2) { border-top-color: var(--ochre); }
.pull__db:nth-child(3) { border-top-color: var(--petrol); }
.pull__db p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--ink); }
.pull__ki { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.pull__ki img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.pull__ki span {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--carmine);
  line-height: 1.25;
}
@media (max-width: 900px) { .pull { grid-template-columns: 1fr; } }

/* A logófájlok fehér hátterét átszíneztük krémre (assets/img/logo-*.png),
   ezért ez a szekció is krém – a logók így beleolvadnak, nem "kivágott"
   négyzetekként ülnek a falon. Kivétel a Vidéki Élet: annak zöld tábla a
   márkajele fehér betűkkel, azt meghagytuk. */
#sajto {
  position: relative;
  background: var(--bg);
}

/* ---------- Megjelenések aloldal ----------
   Minden fórum külön fehér lapot kap. Korábban mind a hét egyetlen
   nagy lapon sorakozott, és a kiadó neve alig különbözött a cikkek
   címétől – így nem látszott, hol kezdődik a Duna Televízió és hol
   a HEOL. A külön lapok és a fejlécben ülő logó egy pillantás alatt
   elválasztják őket.

   A linkek azért maradnak fehéren, mert a bordó a rózsaszín falon
   csak 3,5:1 kontrasztú lenne – krémen viszont 6,7:1. */
.press {
  background: var(--bg);
  border-radius: var(--radius);
  border-top: 8px solid var(--carmine);
  box-shadow: var(--shadow);
  padding: 0 30px 22px;
  margin-bottom: 26px;
  overflow: hidden;
}
.press:last-child { margin-bottom: 0; }

/* Három szín körbe-körbe, mint a véleményeknél */
.press:nth-of-type(3n+2) { border-top-color: var(--petrol); }
.press:nth-of-type(3n+3) { border-top-color: var(--olive); }

/* FEJLÉC: a lap tetején a logó és a kiadó neve. A háttere ugyanaz a
   fehér, mint a kártyáé – a logók fehér alapú PNG-k, egy színezett
   sávon dobozként ülnének rajta. Így viszont beleolvadnak a lapba,
   és a fejlécet az alatta futó vonal választja el a cikklistától. */
.press__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-inline: -30px;
  padding: 18px 30px;
  /* Krém, mint a logók új háttere – lásd a #sajto szekciónál. */
  background: var(--bg);
  border-bottom: 2px solid var(--line);
  margin-bottom: 6px;
}
/* LOGÓK EGYENSÚLYBA HOZÁSA
   A logófájlokba különböző méretű ÁTLÁTSZÓ KERET van beégetve: a
   Lakáskultúránál a felirat a kép magasságának mindössze 13%-a, a
   Dunánál viszont 91%. Ha egyszerűen ugyanabba a dobozba tesszük
   mindet, a Duna kitölti, a Lakáskultúra pedig ötpixelnyi csíkká
   zsugorodik. (A fájlok levágása lenne a tiszta megoldás, de ahhoz
   képszerkesztő kell – ezért itt CSS-ből tesszük helyre.)

   A doboz 116x38 px: ebbe kerül bele minden logó VALÓDI felirata.
   A képet abszolút pozicionáljuk, és pixelre kiszámolt méretet és
   eltolást kap, hogy a felirat pont a doboz bal szélén, függőlegesen
   középen, 38 px magasan üljön. A doboz levágja a kilógó üres keretet.
   A számok forrása: a fájlokból kimért tinta-határok. Ha új logó jön,
   ugyanígy kell hozzá egy sor.

   A választó SZÁNDÉKOSAN "tartalmazza" ([src*=) és nem "végződik rá"
   ([src$=): a képhivatkozásra kerülhet ?v=… gyorsítótár-törő, ami a
   végződéses illesztést elrontaná, és a logók natúr méretben ugranának
   szét. */
.press__logo {
  flex: none;
  position: relative;
  width: 116px;
  height: 38px;
  overflow: hidden;
}
.press__logo img { position: absolute; max-width: none; }

.press__logo img[src*="logo-duna.png"]              { width:  83.7px; height:  41.8px; left:  -1.7px; top:  -1.9px; }
.press__logo img[src*="logo-lakaskultura.png"]      { width: 135.4px; height: 135.4px; left:  -9.9px; top: -48.7px; }
.press__logo img[src*="logo-videki-elet.png"]       { width: 104.1px; height:  38.0px; left:     0px; top:     0px; }
.press__logo img[src*="logo-annie-sloan.png"]       { width: 138.1px; height:  74.0px; left: -15.6px; top: -15.9px; }
.press__logo img[src*="logo-hellobaby.png"]         { width:  95.4px; height:  95.4px; left:     0px; top: -30.2px; }
.press__logo img[src*="logo-otthonkommando-png.png"]{ width: 104.7px; height:  47.6px; left:  -3.1px; top:     0px; }
.press__logo img[src*="logo-heol.png"]              { width: 139.1px; height:  36.2px; left: -11.4px; top:  -1.2px; }
.press__name {
  font-size: 1.15rem;
  color: var(--heading);
  margin: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
/* Hány cikk van alatta – jobbra kilógatva, halkan */
.press__db {
  margin-left: auto;
  flex: none;
  font-family: "Karla", sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.press__list { list-style: none; padding: 0; margin: 0; }
.press__list li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.press__list li:last-child { border-bottom: 0; }
.press__list a { color: var(--carmine-deep); display: inline-block; font-weight: 500; }
.press__list a:hover { color: var(--carmine); text-decoration: underline; }
.press__list a span { color: var(--ink-soft); font-size: 0.9rem; }

/* Telefonon a fejléc tördel: a név a logó alá csúszik, ha nem fér ki.
   A logó mérete marad – a fenti eltolások pixelben vannak megadva,
   egy kisebb doboz nem kicsinyítené, hanem levágná a feliratot. */
@media (max-width: 560px) {
  .press { padding: 0 20px 18px; }
  .press__head {
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-inline: -20px;
    padding: 16px 20px;
  }
  .press__db { margin-left: 0; width: 100%; }
}

/* Sajtó / logó rács */
.logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 30px;
  align-items: center;
  margin: 8px 0 6px;
}
.logo-cell { height: 130px; }
a.logo-cell { display: block; transition: transform 0.18s ease, opacity 0.18s ease; }
a.logo-cell:hover { transform: translateY(-3px); opacity: 0.85; }
/* A Lakáskultúra és a HelloBaby logójában sok a beégetett üres hely,
   ezért ugyanabban a cellában kisebbnek látszanak a többinél. Korábban
   ezt a kettőt nagyítottuk fel (scale 1.35) – csakhogy így kilógtak a
   cellájukból, és a szélső oszlopban az egész oldalt oldalra tolták.

   Ezért fordítva csináljuk: ez a kettő tölti ki a cellát, a többit
   kicsinyítjük ugyanennyivel (1 / 1,35 = 0,74). Az arányuk egymáshoz
   képest változatlan, viszont semmi nem lóg túl a saját celláján. */
.logo-cell img { width: 100%; height: 100%; object-fit: contain; transform: scale(0.74); }
.logo-cell img.logo-big { transform: none; }
.logo-cell .ph { height: 100%; }
@media (max-width: 760px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Rólam ---------- */
.about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 54px; align-items: center; }
.about img { aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow); }
.about { align-items: start; }
.about h4 {
  text-transform: none;
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--heading);
  margin: 24px 0 8px;
}
.about-list { margin: 0 0 4px; padding-left: 20px; }
.about-list li { margin-bottom: 7px; }

/* ---------- CTA sáv ---------- */
.cta-band { text-align: center; }

/* =========================================================
   WORKSHOP OLDAL
   ========================================================= */
.page-head {
  padding: 62px 0 52px;
  text-align: center;
  border-bottom: 0;
}
.page-head h1 { color: var(--heading); }
/* Ugyanaz az elv, mint a nyitólapon: az aloldalak bevezetője is
   színes falon ül (zsálya, rózsa), ott a halvány szürke csak 2,5:1
   lenne. A kék falú workshop-oldal ezt felülírja világos szövegre. */
.page-head p { max-width: 720px; margin: 0 auto; color: var(--ink); font-size: 1.06em; }

/* ---------- Kapcsolati űrlap ----------
   Korábban ez a törölt workshop-szűrősáv stílusát viselte: fehér panel
   erős árnyékkal, ami külön ráragasztott dobozként ült a falon. Most
   nincs panel – a mezők közvetlenül a krém falon állnak, és a fehér
   beviteli mezők adják a szerkezetet. Így a szekció a lap része lesz,
   nem egy rátett kártya. */
.kapcsolat-urlap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 30px;
}
.kapcsolat-urlap .btn { margin-top: 6px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 170px; flex: 1; }
.field label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* A korábbi világosszürke a krém falon már csak 3:1 kontrasztú volt.
     A tinta halvány változata olvashatóan sötét, de nem harsog. */
  color: var(--ink-soft);
}
.field select,
.field input,
.field textarea {
  font-family: inherit;
  /* PONTOSAN 16 px, nem kevesebb. Az iOS Safari minden 16 px alatti
     mezőre RÁNAGYÍT fókuszáláskor, és utána nem nagyít vissza – a
     jelentkező kitöltés közben egy elcsúszott, széles oldalon marad.
     Ez volt a helyzet a korábbi 0.95rem (15,2 px) értékkel. */
  font-size: 1rem;
  color: var(--ink);
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.field select:focus,
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 126, 120, 0.18); /* teal, illeszkedik az --accent színhez */
}
/* A hibajelzés a lap saját mély bordóját használja. Korábban egy
   MÁSIK piros volt (#c0392b) – két, alig eltérő piros egy oldalon
   nem jelez semmit, csak véletlennek látszik. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--carmine-deep); }
.field .error { color: var(--carmine-deep); font-size: 0.8rem; min-height: 1em; }

.results-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 4px 26px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* A kártyák elrendezése: EGY SORBAN LEGFELJEBB HÁROM, és ha kevesebb
   időpont van, akkor középre igazítva – nem balra tapadva.

   Miért nem grid? A `repeat(auto-fill, …)` mindig kiosztja mind a
   három oszlopot, akkor is, ha csak két kártya van; a harmadik oszlop
   üresen marad, a két kártya pedig balra ragad. A flexbox ezzel
   szemben csak annyi helyet foglal, amennyi kártya van, így a
   `justify-content: center` valóban középre tudja tenni őket.

   A kártya szélessége szándékosan ugyanaz marad, mint a háromoszlopos
   elrendezésben – két kártya nem hízik szét fél-fél oldalnyira,
   csak középre kerül. Ezt adja a `calc((100% - 2×gap) / 3)`.        */
.ws-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}
.ws-grid > * {
  /* nem nyúlik (0 = nincs grow), de zsugorodhat; alapszélesség = 1/3 */
  flex: 0 1 calc((100% - 2 * 26px) / 3);
  /* A min() azért kell, hogy egy 320 px-es telefonon a kártya ne
     ragaszkodjon a 320 px-es alsó határhoz – ott a lap margói miatt
     már nem férne el, és oldalra csúszna az oldal. */
  min-width: min(320px, 100%);
}
.ws-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border-top: 7px solid var(--carmine);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ws-card:nth-child(3n+2) { border-top-color: var(--petrol); }
.ws-card:nth-child(3n+3) { border-top-color: var(--olive); }
.ws-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.ws-card--full { opacity: 0.72; }

/* Betöltésjelző kártya-vázak – amíg a Google Táblázat adata megérkezik */
.ws-card--loading { border-top-color: var(--line); pointer-events: none; }
.ws-card--loading .ws-card__media { aspect-ratio: 16/10; background: #eee7d8; }
.skel {
  display: block;
  height: 13px;
  border-radius: 3px;
  background: #ece3d2;
  animation: skel 1.3s ease-in-out infinite;
}
.skel--sm { width: 40%; }
.skel--md { width: 70%; }
.skel--lg { width: 90%; height: 20px; }
@keyframes skel { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.ws-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); }
.ws-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ws-card__date {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--ochre);
  padding: 9px 13px;
  text-align: center;
  line-height: 1.1;
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 rgba(43, 39, 36, 0.25);
  transform: rotate(-2deg);
}
.ws-card__date b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.55rem;
  color: var(--ink);
  font-weight: 700;
}
.ws-card__date span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Sötétebb barna: az okker táblán a korábbi árnyalat csak 3,43:1
     kontrasztú volt, ez 4,83. Ugyanaz a szín, csak mélyebb. */
  color: #503e0e;
}
.ws-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ws-card h3 { margin: 0; text-transform: none; font-size: 1.25rem; color: var(--heading); }
.ws-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.88rem; color: var(--ink-soft); }
.ws-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ws-card__meta .i { flex: none; color: var(--accent-dark); }
.ws-card__desc { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.ws-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ws-card__price { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15rem; color: var(--heading); }

.badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
/* A címkék feliratai egy fokkal mélyebbek: így mind a négy átlépi a
   4,5:1 olvashatósági határt (előtte 3,85–4,57 között szórtak). */
.badge--free { background: #e7f0e3; color: #467138; }
.badge--few { background: #fdeede; color: #9d5725; }
.badge--full { background: #eee; color: #686868; }
.badge--online { background: #e6eef3; color: #40708c; }

.empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--ink-soft);
  background: var(--bg-alt);
}

/* ---------- Jelentkezés (modal) ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(40, 40, 40, 0.55);
  overflow-y: auto;
}
.modal__box {
  background: #fff;
  width: min(640px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.modal__head {
  padding: 26px 30px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.modal__head h2 { margin: 0 0 6px; font-size: 1.5rem; }
.modal__head p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #999;
  cursor: pointer;
}
.modal__close:hover { color: var(--ink); }
.modal form { padding: 26px 30px 30px; display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* A kötelező adatkezelési pipa. A szöveg is a címkén belül van, tehát
   a teljes sorra lehet koppintani – de maga a négyzet 13 px volt, ami
   ujjal célozva kevés. 20 px-re nagyítva, a sor pedig kap függőleges
   térközt, hogy az érintőfelület elérje a 44 px-es ajánlást. */
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 6px 0;
  cursor: pointer;
}
.check input {
  margin-top: 2px;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: var(--accent);
  cursor: pointer;
}
/* A .check egy <label>, és a .field-en belül ül, ezért örökölte a
   mezőcímkék stílusát: csupa nagybetű, ritkítás, 12 px. Ez egy
   háromsoros, jogi tartalmú mondaton a lehető legrosszabb – ezért
   itt visszaváltunk folyó szövegre. (Nagyobb fajsúly a .field label
   szabálynál, hogy felül tudja írni.) */
.field .check {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.summary-box {
  background: var(--accent-soft);
  padding: 16px 18px;
  font-size: 0.92rem;
  display: grid;
  gap: 4px;
}
.summary-box b { color: #6a4a30; }

.success { padding: 46px 30px; text-align: center; }
.success__mark {
  width: 74px; height: 74px; margin: 0 auto 18px;
  border-radius: 50%;
  background: #e7f0e3;
  color: #4b7a3c;
  display: grid; place-items: center;
  font-size: 2rem;
}

/* ---------- Lábléc ---------- */
/* A lábléc ugyanazt a mély petrolt kapja, mint a felső sáv és a
   szekciósáv – a korábbi sötétzöld (#33402b) az egész oldalon sehol
   máshol nem szerepelt, vagyis egy árva szín volt. Így a lap ugyanazzal
   a kékkel nyit és zár. */
/* =========================================================
   JOGI SZÖVEG (adatkezelési tájékoztató)
   ---------------------------------------------------------
   Hosszú, folyamatos olvasásra szánt oldal, ezért szűkebb
   sorhossz és nagyobb sorköz, mint a marketingszövegnél.
   ========================================================= */
.jogi { max-width: 780px; }
.jogi h2 {
  font-size: 1.3rem;
  margin: 42px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.jogi h3 { font-size: 1.05rem; margin: 26px 0 10px; }
.jogi p, .jogi li { line-height: 1.7; }
.jogi ul { padding-left: 22px; margin: 0 0 18px; }
.jogi li { margin-bottom: 10px; }
.jogi code {
  background: rgba(43, 39, 36, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
}
.jogi-datum { color: var(--ink-soft); font-size: 0.92rem; }
.jogi-halvany { color: var(--ink-soft); font-size: 0.9em; }

/* A táblázat keskeny képernyőn vízszintesen görgethető a saját
   dobozában – az oldal maga sosem csúszhat oldalra. */
.jogi-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 0.95rem;
}
.jogi-tabla th,
.jogi-tabla td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.jogi-tabla thead th { background: rgba(43, 39, 36, 0.05); }
.jogi-tabla tbody th { width: 32%; font-weight: 600; }

/* A még kitöltendő helyek. Szándékosan harsány: ne lehessen véletlenül
   élesíteni úgy, hogy benne marad. */
.kitoltendo {
  background: #ffe89a;
  color: #6b4e00;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.jogi-figyelem {
  background: #fff3cd;
  border: 2px solid #e0a800;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 26px;
  color: #6b4e00;
  line-height: 1.6;
}

@media (max-width: 560px) {
  /* ---- Kulcs–érték táblák (nincs fejlécsoruk) ----
     Egymás alá tördelve: 375 px-en a 32%-os fejlécoszlopban minden szó
     külön sorba törne. A `:not()` fontos: a fejléces táblákra ez a
     tördelés NEM jó, mert ott a thead három hasáb maradna, a tartalom
     pedig egy oszlopba folyna – ezeket lásd alább. */
  .jogi-tabla:not(.jogi-tabla--lista) tbody th,
  .jogi-tabla:not(.jogi-tabla--lista) tbody td { display: block; width: auto; }
  .jogi-tabla:not(.jogi-tabla--lista) tbody th { border-bottom: 0; background: rgba(43, 39, 36, 0.05); }
  .jogi-tabla:not(.jogi-tabla--lista) tbody td { border-top: 0; }

  /* ---- Fejléces táblák: soronként egy kártya ----
     A fejlécsort elrejtjük, és a cellák elé a saját oszlopnevüket írjuk
     ki a data-cimke attribútumból – enélkül nem lehetne tudni, melyik
     érték melyik oszlophoz tartozott. */
  .jogi-tabla--lista thead { display: none; }
  .jogi-tabla--lista tbody tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 14px;
  }
  .jogi-tabla--lista tbody td {
    display: block;
    border: 0;
    border-bottom: 1px solid var(--line);
  }
  .jogi-tabla--lista tbody tr td:last-child { border-bottom: 0; }
  .jogi-tabla--lista tbody td::before {
    content: attr(data-cimke);
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 3px;
  }
}

.site-footer {
  background: var(--petrol-deep);
  color: #cec5b8;
  padding: 56px 0 26px;
  font-size: 0.92rem;
  border-top: 5px solid var(--ochre);
}
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
/* A világosabb okker: a sima --ochre ezen a kéken csak 4,05:1 lenne,
   ez 5,18 – ugyanaz az árnyalat, amit a felső sáv linkjei használnak. */
.site-footer a { color: var(--ochre-vilagos); }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 18px;
  /* Áttetsző fehér vonal: a korábbi #555 a kéken már alig látszott. */
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  text-align: center;
  /* A meleg szürke egy fokkal világosabban: a kék háttéren 4,69:1. */
  color: #c5beb3;
  font-size: 0.84rem;
}

/* ---------- Kép helyőrzők ---------- */
.ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #efe7de 0%, #dfe3d6 100%);
  /* A helyőrző saját halvány színátmenetén is olvasható: 4,77–6,22
     (a korábbi #9a9384 még fehéren is csak 3,05 volt). */
  color: #676053;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px;
}

/* ---------- Reszponzív ---------- */
/* A hamburger menü csak 980 px alatt jelenik meg, de a nyolc menüpont
   már ennél kicsivel szélesebb képernyőn sem fér ki egy sorba – emiatt
   a fejléc kilógott az oldalról. Ebben a keskeny sávban ezért
   összébb húzzuk a menüpontokat. */
@media (min-width: 981px) and (max-width: 1100px) {
  .nav a { padding: 10px 7px; font-size: 0.86rem; }
}

@media (max-width: 980px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  /* inline-flex, hogy a fenti középre igazítás érvényes legyen */
  .nav-toggle { display: inline-flex; }

  /* ---- A szekciósáv mobilon nem jelenik meg ----
     Nyolc menüpont 757 px szélesen egy 375 px-es kijelzőn: a fele
     kilógott, láthatatlanul. A menüpontok helyette a hamburger
     menübe kerülnek (lásd main.js), ahol mind egyszerre látszik.
     Ezzel 52 px szabadul fel a ragadós fejlécből is: a lap teteje
     a képernyő 17%-a helyett 10%-át foglalja. */
  .szekcio-nav { display: none; }

  /* A menübe másolt szekciólinkek – csak itt, mobilon látszanak. */
  .nav__csoport, .nav__szekcio { display: block; }
  .nav__csoport {
    margin-top: 8px;
    padding: 12px 12px 4px;
    border-top: 1px solid var(--line);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  /* A lapok és a szekciók vizuálisan is elváljanak: a szekciólink
     beljebb kezdődik, mint az oldalak. Két osztály kell a
     kiválasztóba, különben a .nav a szabály erősebb, és a behúzás
     nem érvényesül. */
  .nav .nav__szekcio { padding-left: 26px; }

  /* Tizenkét menüpont egy alacsony telefonon már nem férne ki – ilyenkor
     a menü magában görgethető. A pontos max-height-ot a main.js méri
     nyitáskor (a menü teteje a görgetés állásától függ), itt csak a
     görgethetőséget engedélyezzük, plusz a lendületes görgetést iOS-en. */
  .nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .site-header .wrap { position: relative; }
  /* Egymás alá kerülnek, de LAPOK MARADNAK – ugyanúgy, ahogy a
     Workshopjaim szekció .ws-offer kártyái.

     Korábban itt egy felülírás állt, ami nullázta a belső térközt
     (`padding: 0 0 34px`) és elválasztó vonallá alakította a lapot.
     Ez egy régebbi tervváltozat maradéka volt, amikor a csomagok még
     vonallal elválasztott oszlopok voltak. A hatása mobilon az lett,
     hogy a szöveg közvetlenül a lap 24 px-es margóján kezdődött, háttér
     és keret nélkül – nem volt levegő a szöveg és a képernyő széle
     között. A .package alapstílusa (26 px belső térköz, krém háttér,
     lekerekítés, felső színcsík) pontosan a .ws-offer párja, ezért itt
     már semmit nem kell felülírni. */
  .packages { grid-template-columns: 1fr; }

  /* A csomagkártyán telefonon a "Mikor válaszd?" cím közvetlenül a kép
     alá kerül (a fölötte lévő szöveget a main.js a "Bővebben" fülbe
     mozgatja). A címnek nincs saját felső térköze, ezért 0 px-re
     tapadt a képhez – korábban a bevezető bekezdés adta a levegőt.

     A szomszédsági kiválasztó (kép + h4) pontosan csak ezt az esetet
     találja el: asztali nézetben a kép után bekezdés áll, ott tehát
     nem érvényesül. 20 px, ugyanannyi, mint a workshop-kártyák
     képének alsó térköze – így egységes a ritmus. */
  .package__img + h4 { margin-top: 20px; }
  .about, .quotes, .footer-grid { grid-template-columns: 1fr; gap: 30px; }

  /* ---- Lábléc: ujjal is eltalálható linkek ----
     A láblécben a linkek egymás alatt, <br>-rel elválasztva állnak, és
     csak 24 px magasak voltak – az ajánlott minimum 44. Kicsi a szöveg,
     szorosan egymás alatt: ujjal könnyű mellényúlni, és a szomszédos
     linkre koppintani.

     inline-block + függőleges térköz: így a link doboza magasabb lesz,
     de a sorok nem törnek szét (a <br> közvetlenül a link után áll,
     ezért nem keletkezik üres sor). 22 px szöveg + 2×11 px = 44 px. */
  .site-footer p a,
  .footer-socials a {
    display: inline-block;
    padding: 11px 0;
  }
  /* A címsorok alatti térköz csökken, hogy a lábléc a nagyobb
     érintőfelületektől se nyúljon meg fölöslegesen. */
  .site-footer h4 { margin-bottom: 4px; }
  .footer-socials { gap: 20px; margin-top: 0; }
  .ba-grid, .offer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  section { padding: 52px 0; }
  .form-row { grid-template-columns: 1fr; }
  .quote:nth-child(even) { text-align: left; }
}