/*
 * base.css — közös design-alap (tokenek + chrome + megosztott komponensek).
 *
 * Forrás: /home/traderco/design/*.html inline <style> blokkjai, deduplikálva.
 * A 6 oldal közös CSS-e ~70%-ban azonos volt; ahol eltért, a TÖBBSÉGI érték
 * került ide, az oldal-specifikus felülírás a pages/<slug>.css-ben van,
 * forrás-kommenttel. Oldal-specifikus (1 sablonon használt) komponens NEM
 * kerülhet ide — az a pages/ bundle dolga.
 */

/* ==== Fontok (self-host, GDPR + sebesség; OFL licencek a fonts/ mappában) ==== */
/* latin-ext (ő, ű!) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/sora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/sora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== Design tokenek (index.html:11) ==== */
:root {
  --blue: #3a3fd6;
  --blue-deep: #2b2f9e;
  --teal: #13b39a;
  --green: #17c79a;
  --grad: linear-gradient(112deg, #3a3fd6 0%, #2f68c8 48%, #13b39a 100%);

  /* Kontraszt-párok a fentiekhez (design audit 2026-08-21, P0-1/P0-2).
     A --teal a MÁRKASZÍN: logó, dekoratív ikonok, gradiens, és a sötétkék
     láblécen ülő elemek (ott 6,29:1 - jó). Kis szöveghez világos háttéren
     viszont csak 2,64:1, ezért oda a --teal-ink való.
     FONTOS: a --teal-ink-et NE használd sötét háttéren, ott csak 3,38:1. */
  --teal-ink: #0d7f6d;            /* 4,91:1 fehéren · 4,51:1 a --bg-alt-on */
  /* Ugyanaz a gradiens, de a türkiz vége a sötétebb árnyalattal: a fehér
     szöveg így a gradiens teljes hosszán 4,5:1 fölött marad. A --grad
     végén a fehér csak 2,64:1, ami a jobb harmadban megbukik. */
  --grad-ink: linear-gradient(112deg, #3a3fd6 0%, #2f68c8 48%, #0d7f6d 100%);

  --ink: #1c1f38;
  --ink-2: #3a3f57;
  --muted: #626783;
  --line: #e7e9f1;
  --bg: #ffffff;
  --bg-alt: #f4f5f9;
  --navy: #191c37;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 10px rgba(28,31,56,.06);
  --shadow-md: 0 14px 40px rgba(28,31,56,.10);
  --shadow-lg: 0 30px 70px rgba(28,31,56,.16);

  --edge: clamp(20px, 5vw, 64px);
  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* ---- Térköz-skála (design audit 2026-08-21, P0-4) ----
     8px-alapú lépcső. SZEKCIÓ- és BLOKK-szintű térközökre való (24px fölött).
     Komponensen BELÜL (ikonrés, badge-padding, chip) maradnak a finom értékek -
     azokat 8-ra kerekíteni látható elhízás lenne, mérhető haszon nélkül. */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* Szekció-ritmus: EGYETLEN forrás. Korábban két, egymással nem szinkronizált
     ritmus élt egymás mellett (60/100 és 56/88-92). */
  --section-y: clamp(48px, 6.5vw, 96px);
  /* Keskenyebb savok (gradiens CTA-savok, telefonos CTA): egy lepcsovel lejjebb. */
  --section-y-sm: clamp(40px, 4.5vw, 64px);

  /* Címsor-sortáv: EGY képlet, ami a mérettel egyutt szukul (design audit P1).
     Az em-resz a sajat betumerettel no, a rem-resz allando, ezert a
     clamp()-elt cimsoroknal is helyes gorbe jon ki:
       19px -> 1,41 · 26px -> 1,27 · 34px -> 1,18 · 42px -> 1,13
     (az audit celgorbeje: 1,40 / 1,30 / 1,20 / 1,10)
     Korabban MINDEN cimsor 1,14-et kapott, merettol fuggetlenul. */
  --lh-head: calc(0.9em + 0.6rem);

  /* Olvasási sáv. A hosszú szöveghez ajánlott 60-75ch. */
  /* Olvasasi sav. FIGYELEM: a `ch` egyseg a "0" szamjegy szelessege, ami a
     DM Sans-ban 17px-en 11,69px - a magyar szoveg atlagos karakterszelessege
     viszont csak 8,13px. A ketto aranya 1,44. Az "ajanlott 60-75 karakter/sor"
     tipografiai szabaly TENYLEGES karakterekre vonatkozik, nem ch-egysegre:
       55ch = 643px = ~75 tenyleges karakter/sor  <- ez a plafon
     Az audit ezt a kettot osszevetette, ezert irt "48-51ch, tul szuk"-et;
     bongeszoben megszamolva a sorok 70-79 karakteresek, vagyis a felso
     hataron vannak. A cikket ezert NEM szelesiteni kell, hanem megfogni. */
  /* A szoveg-oszlop PX-ben, nem ch-ban. A `ch` egyseg az elem SAJAT betujenek
     "0" szelessege, ezert ugyanaz a deklaralt ertek komponensenkent mas pixelt ad:
     a .mtext (17px DM Sans) es a .closer (20px Sora) egyarant 68ch volt, megis
     794px es 1020px lett beloluk. Ez okozta, hogy a workshop-oldalakon tiz
     kulonbozo tartalomszelesseg valtakozott fuggolegesen.
       --measure   640px  szoveg es cimblokkok  (~79 karakter/sor 17px-en)
       --col-wide  920px  listak, adatracsok, kartyak
       (a harmadik szelesseg a .wrap teljes belmerete, ~1052px) */
  --measure: 640px;
  --col-wide: 920px;
}

/* ==== Reset + tipográfia (index.html:36) ==== */
* { box-sizing: border-box; }
/* A form-kontrollok NEM öröklik a font-family-t a böngésző saját stíluslapjából,
   ezért Windowson Arialra esnek (design audit: TYPE_TOO_MANY_FAMILIES, 37 találat).
   Az érintettek ikon-gombok (.burger, .qarrow, .qdots) és a komment-űrlap mezői.
   SZÁNDÉKOSAN csak a családot örököltetjük: a `font: inherit` shorthand a
   line-height-ot is átvinné (1,65), amitől a gombok magassága megugrana. */
button, input, select, textarea, optgroup { font-family: inherit; }
input, select, textarea { font-size: inherit; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* MOBIL-FIX: vízszintes kilógás elleni biztonsági háló (az okokat is javítjuk, ez védőháló) */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
/* A h5/h6 eddig KIMARADT ebbol a szabalybol, ezert DM Sans-szal es 1,65-tel
   renderelodtek. A sablonokban jelenleg nincs h5/h6, de a the_content()
   barmikor hozhat, ezert bekerulnek. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 600; line-height: var(--lh-head); letter-spacing: -0.02em; margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
img, svg { display: block; }
/* MOBIL-FIX: height:auto KELL a width/height attribútumos képekhez, különben
   szűkülő viewportnál torzulnak (a magasság-attribútum fixen maradna) */
img { max-width: 100%; height: auto; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--edge); }

/* WP: sticky header alá ne csússzanak az anchor-célok */
[id] { scroll-margin-top: 90px; }

/* ==== Accent helperek (index.html:53) ==== */
.grad-text { background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Eyebrow (mini-címsor): pulzáló pont + „kúszó vonal" — design: eyebrow-otletek.html.
   Világos háttéren teal szöveg + zöld accent; sötéten (.light) világos-teal + világosabb accent.
   A pont/vonal az ::before/::after — a markup nem változik. */
.eyebrow {
  --eb-accent: var(--green);          /* pont + kúszó vonal színe */
  --eb-ring: rgba(23,199,154,.5);     /* pulzáló gyűrű induló színe */
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 22px;
  font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-ink);
}
.eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--eb-accent); box-shadow: 0 0 0 0 var(--eb-ring); animation: tt-eb-pulse 2.4s ease-out infinite; }
.eyebrow::after { content: ""; flex: none; width: 40px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--eb-accent), transparent); }
.eyebrow.center { justify-content: center; }
.eyebrow.light { color: #b9f4e4; --eb-accent: #8ff3d8; --eb-ring: rgba(143,243,216,.45); } /* sötét háttér */
@keyframes tt-eb-pulse {
  0%   { box-shadow: 0 0 0 0 var(--eb-ring); }
  70%  { box-shadow: 0 0 0 9px rgba(23,199,154,0); }
  100% { box-shadow: 0 0 0 9px rgba(23,199,154,0); }
}
@media (prefers-reduced-motion: reduce) { .eyebrow::before { animation: none; } }
/* nagyon keskeny telefonon a dekoratív kúszó vonal elrejtve, hogy a hosszú eyebrow egy sorban maradjon */
@media (max-width: 420px) { .eyebrow::after { display: none; } }

/* ==== Gombok (index.html:60) ==== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.2;
  /* A sortáv 1.0 volt: ≤600px-en a .btn tördelhető (lásd lentebb), és ott az
     ékezetes magyar szöveg (ő, ű) sorai összeértek. A padding 14 -> 13px,
     így az egysoros gomb magassága ugyanaz marad: 13 + 15*1,2 + 13 = 44px. */
  padding: 13px 24px; min-block-size: 44px; border-radius: 10px; border: 0; background: transparent; transition: .18s ease; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad-ink); color: #fff; box-shadow: 0 10px 24px rgba(47,80,180,.26); }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(47,80,180,.34); color: #fff; }
.btn-primary:active { transform: translateY(0); }
.btn-outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); background: rgba(58,63,214,.04); }
.btn-ghost { background: transparent; color: #fff; padding-inline: 0; }
.btn-ghost.dark { color: var(--blue); }
.btn-ghost:hover { gap: 13px; color: #fff; }
.btn-ghost.dark:hover { color: var(--blue-deep); }
.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { color: var(--blue-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-block { width: 100%; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* MOBIL-FIX: a hosszú magyar CTA-szövegű nowrap-gombok kilógtak a viewportból →
   kis képernyőn tördelhetők és a CTA-sor függőlegesre vált */
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .steps-cta .btn { width: 100%; max-width: 420px; }
}

/* ==== Fejléc + nav (index.html:78; ul/li a wp_nav_menu-höz igazítva) ==== */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .header { top: 46px; } }
.nav { display: flex; align-items: center; gap: 30px; height: 74px; }
.logo { display: inline-flex; align-items: center; flex: none; min-block-size: 44px; }
.logo svg { height: 34px; width: auto; }
/* ==== Nyelvváltó (Polylang) — közvetlenül a logó mellett, minden nézeten ====
   EGYELEMES, zászlós váltó: az AKTUÁLIS nyelv zászlaja látszik, a kattintás a
   másik nyelvre visz. A .nav 30px-es gapjét negatív margóval szűkítjük, hogy a
   váltó a logóhoz TARTOZZON. A 44px-es min-magasság a tap-target szabályt tartja
   (a 74px-es nav-soron belül nem mozdít a layouton). */
.lang-switch { display: inline-flex; align-items: center; gap: 8px; flex: none;
  margin-inline-start: -16px; padding: 0 10px; min-block-size: 44px; border-radius: 10px;
  color: var(--ink-2); transition: .18s ease; }
.lang-switch:hover { color: var(--ink); background: rgba(28,31,56,.06); }
.lang-switch:hover .lang-switch__flag { transform: translateY(-1px); }
/* A zászló fix arányú (3:2), lekerekített, és kap egy hajszálvékony belső keretet,
   hogy a fehér sávos magyar zászló fehér fejlécen is elváljon a háttértől. */
.lang-switch__flag { display: block; inline-size: 24px; block-size: 16px; flex: none;
  border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(28,31,56,.14), var(--shadow-sm);
  transition: .18s ease; }
.lang-switch__flag svg { display: block; inline-size: 100%; block-size: 100%; }
.lang-switch__code { font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) { .lang-switch, .lang-switch__flag { transition: none; } }
/* Nagyon keskeny telefonon a logó + váltó + burger sor szoros: a kód elmarad,
   a zászló önmagában is egyértelmű, és az aria-label végig kimondja a nyelvet. */
@media (max-width: 420px) {
  .lang-switch { margin-inline-start: -20px; padding: 0 8px; }
  .lang-switch__code { display: none; }
}

.nav-links { margin-left: auto; }
.nav-links ul { list-style: none; display: flex; align-items: center; gap: 38px; margin: 0; padding: 0; }
/* A 74px-es nav-sorban a linkek fuggoleges paddingja NEM mozdit a layouton
   (align-items: center), a kattinthato terulet viszont 19px -> 43px. */
.nav-links a { display: inline-block; padding-block: 12px; font-family: var(--font-head); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover,
.nav-links li.current-menu-item > a,
.nav-links li.current-page-ancestor > a,
.nav-links li.current_page_parent > a { color: var(--blue); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.burger { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 9px; margin-inline-end: -5px; }
.burger svg { width: 26px; height: 26px; }
.burger .burger-close { display: none; }
.burger[aria-expanded="true"] .burger-open { display: none; }
.burger[aria-expanded="true"] .burger-close { display: block; }
@media (max-width: 1040px) {
  .nav-links, .nav-cta .btn-primary { display: none; }
  .burger { display: inline-flex; }
  .nav-cta { margin-left: auto; }
}

/* ==== Mobilmenü (ÚJ — a designban nem volt; spec a tervben) ==== */
.mobile-nav { position: fixed; top: 74px; left: 0; right: 0; bottom: 0; z-index: 49;
  background: #fff; overflow-y: auto; padding: 14px var(--edge) 34px; }
body.admin-bar .mobile-nav { top: 106px; }
@media (max-width: 782px) { body.admin-bar .mobile-nav { top: 120px; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { border-bottom: 1px solid var(--line); }
.mobile-nav a:not(.btn) { display: block; padding: 16px 2px; font-family: var(--font-head);
  font-size: 18px; font-weight: 500; color: var(--ink); }
.mobile-nav li.current-menu-item > a { color: var(--blue); }
.mobile-nav .btn { width: 100%; margin-top: 22px; padding: 16px; }
body.nav-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav:not([hidden]) { animation: ttm-fade .22s ease; }
}
@keyframes ttm-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 1041px) { .mobile-nav { display: none; } }

/* ==== Hero-alap (aloldali többségi értékek, szolgaltatasaim.html:66;
       a főoldali nagyobb hero felülírásai a pages/home.css-ben) ==== */
.hero { position: relative; min-height: 480px; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; top: 0; left: 0; right: 0; height: 138%; z-index: 0; will-change: transform; }
.hero-bg picture { display: block; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(30,33,120,.92) 0%, rgba(35,60,150,.8) 42%, rgba(17,150,140,.6) 100%); }
.hero-overlay::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,22,60,.5), transparent 42%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 92px; padding-bottom: 92px; }
.hero h1 { color: #fff; font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; max-width: 22ch; } /* a sortavat a --lh-head gorbe adja */
.hero h1 .hl { color: #8ff3d8; }
.hero .lead { color: rgba(255,255,255,.9); font-size: clamp(17px, 1.6vw, 19px); max-width: 52ch; margin-top: 20px; line-height: 1.6; }
.hero .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
/* Hero-fej: kör-badge + cím — a szolgáltatás-aloldalak közös hero-sémája (etalon: coaching) */
.hero-head { display: flex; align-items: center; gap: clamp(20px, 3vw, 32px); }
.hero-badge { flex: none; width: 96px; height: 96px; border-radius: 50%; border: 2.5px solid #fff; background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: grid; place-items: center; box-shadow: 0 16px 40px rgba(20,22,60,.28); transition: .26s ease; }
.hero-badge svg { width: 44px; height: 44px; color: #fff; stroke: #fff; transition: .26s ease; }
.hero-badge:hover { background: #fff; border-color: #fff; transform: scale(1.06); }
.hero-badge:hover svg { stroke: url(#iconGrad); }
.hero-titles { min-width: 0; } /* MOBIL-FIX: flex-gyerek ne feszítse szét a sort */
.crumbs { font-family: var(--font-head); font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { display: inline-block; padding-block: 8px; margin-block: -8px; color: rgba(255,255,255,.85); }
.crumbs a:hover { color: #fff; }

/* ==== Stat-sáv: a főoldal-specifikus üveghatású (frosted glass) verzió a pages/home.css-ben ==== */

/* ==== Szekció-ritmus (index.html:126; a glow-definíciók oldalankéntiek) ==== */
.section { padding: var(--section-y) 0; position: relative; }
.section:not(.signup) { overflow: hidden; }
.section:not(.signup) > .wrap { position: relative; z-index: 1; }
.section.alt { background: var(--bg-alt); }
.section:not(.signup)::before, .section:not(.signup)::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
.section:not(.signup)::after { display: none; }
/* Sticky gyerek (pl. oldalsó tény-kártya) csak overflow:visible szekcióban ragad —
   a has-sticky kivétel lemond a szekció túllógó dekor-köreiről. */
.section.has-sticky { overflow: visible; }
.section.has-sticky::before, .section.has-sticky::after { display: none; }
.head-center { text-align: center; max-width: 46ch; margin: 0 auto 54px; position: relative; }
.head-center h2 { font-size: clamp(28px, 3.6vw, 42px); }
.head-center .sub { color: var(--muted); font-size: 18px; margin-top: 16px; }

/* ==== Split (index.html:157; a Könyv oldalon is) ==== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split.reverse .split-media { order: -1; }
.split h2 { font-size: clamp(26px, 3.2vw, 38px); max-width: 18ch; }
.split .body { color: var(--ink-2); margin-top: 22px; }
.split .body + .body { margin-top: 18px; }
.split .body strong { color: var(--ink); font-weight: 600; }
.split-media { position: relative; }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.split-media.portrait img { aspect-ratio: 4/5; }
.media-badge { position: absolute; left: 24px; bottom: -26px; background: #fff; border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 14px 18px; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 48px); } /* MOBIL-FIX: ne lógjon túl a képen · bottom: kicsit lejjebb (tulaj-kérés) */
.media-badge .ic { width: 42px; height: 42px; border-radius: 10px; background: var(--grad-ink); color: #fff;
  display: grid; place-items: center; flex: none; }
.media-badge .ic svg { width: 22px; height: 22px; }
/* Szoros cím/leírás sortáv → a blokk vertikálisan középre az ikon-boxhoz (align-items: center) */
.media-badge b { font-family: var(--font-head); font-size: 15px; display: block; color: var(--ink); line-height: 1.25; }
.media-badge span { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .split-media, .split-media { order: -1; }
}

/* ==== Checklist (index.html:179; coaching + könyv is) ==== */
.check-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.checklist li { display: flex; align-items: center; gap: 15px; font-size: 18px; color: var(--ink);
  padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-weight: 500; }
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 27px; height: 27px; color: var(--teal); flex: none; }
/* MOBIL-FIX: többsorosra törő listaelemeknél az ikon a felső sorhoz igazodjon */
@media (max-width: 600px) {
  .checklist li { align-items: flex-start; }
  .checklist svg { margin-top: 2px; }
}
@media (max-width: 820px) { .check-grid { grid-template-columns: 1fr; } }

/* ==== Lépés-kártyák (index.html:192; coaching/konzultáció/könyv is) ==== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.step { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px;
  box-shadow: var(--shadow-sm); transition: .2s ease; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.step .ic { width: 58px; height: 58px; border-radius: 15px; background: var(--grad-ink); color: #fff;
  display: grid; place-items: center; margin-bottom: 22px; box-shadow: 0 8px 20px rgba(47,80,180,.22); }
.step .ic svg { width: 27px; height: 27px; }
.step h3 { font-size: 19px; margin: 0 0 12px; }
.step p { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ==== Csoportos foglalkozás / workshop aloldalak KÖZÖS komponensei ====
   Eredetileg a pages/nyero-hozzaallas.css-ben születtek (v0.19.0); a Trader DNS
   oldal (v0.20.0) óta két sablon használja őket, ezért a base.css a helyük.
   Oldal-specifikus marad: .mtext (a coaching.css-ben MÁS jelentése van!), .triad,
   a szekció-glow-k és a #zaras felülírásai. */

/* Hero: alcím a H1 alatt (workshop-formátum egy sorban) */
.hero-sub { color: rgba(255,255,255,.94); font-family: var(--font-head); font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; margin-top: 14px; max-width: 44ch; }

/* Lágyabb checklist-variáns: hosszú, mondat-hosszúságú tételekhez */
.checklist.soft li { align-items: flex-start; gap: 13px; font-family: var(--font-body); font-weight: 400;
  font-size: 16.5px; line-height: 1.6; color: var(--ink-2); padding: 15px 0; }
.checklist.soft svg { width: 23px; height: 23px; margin-top: 1px; }
/* A .narrow valtozat kozepre zart cimsor ALATT all, ezert a blokknak is kozepen kell
   lennie. Fix szelessegnel a rovid tetelek (pl. "Mit csinalsz, amikor nincs trade?")
   a bal szelhez tapadtak, es az elvalaszto vonalak vegigfutottak az ures jobb oldalon -
   a lista "kilogott" a kozepre zart kompoziciobol.
   A fit-content a legszelesebb tetelhez zsugorodik, majd kozepre all; ha a tetelek
   hosszuak, a max-width ugyanugy megfogja, tehat hosszu listaknal semmi nem valtozik. */
.checklist.narrow { width: fit-content; max-width: var(--col-wide); margin-inline: auto; }

/* Kép + lista blokk (1:1 kép a .check-grid bal oszlopában, jobbra a felsorolás) */
.ask-media { position: relative; margin: 0; }
.ask-media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* max 1:1 arány-szabály */
.ask-close { margin-top: 20px; color: var(--ink); font-family: var(--font-head); font-weight: 500;
  font-size: 17px; line-height: 1.55; }
@media (max-width: 820px) { .ask-media { max-width: 420px; } }

/* Szekciózáró, hangsúlyos mondat (nem gradiens doboz - az a .pull) */
.closer { max-width: var(--measure); margin: clamp(26px, 3vw, 34px) auto 0; color: var(--ink);
  font-family: var(--font-head); font-weight: 500; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; }
.gap-top { margin-top: clamp(40px, 5vw, 64px); }

/* Kiemelt mondat (gradiens kártya ikonnal) */
.pull { max-width: var(--measure); margin: clamp(32px, 4vw, 44px) auto 0; background: var(--grad-ink); color: #fff;
  border-radius: var(--radius-lg); padding: clamp(26px, 3.2vw, 36px); box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 22px; }
.pull-ic { width: 56px; height: 56px; border-radius: 15px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.16); }
.pull-ic svg { width: 28px; height: 28px; color: #fff; }
.pull p { font-family: var(--font-head); font-weight: 500; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; }
@media (max-width: 600px) { .pull { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* Gradiens callout-kártya (főoldal + workshop-oldalak; a home.css csak a p méretét írja felül) */
.callout { background: var(--grad-ink); color: #fff; border-radius: var(--radius-lg); padding: 40px;
  box-shadow: var(--shadow-md); }
.callout .badge svg { width: 46px; height: 46px; color: #fff; margin-bottom: 20px; }
.callout p { font-family: var(--font-head); font-weight: 500; font-size: 17px; line-height: 1.6; }
/* A CTA körvonalas (outline) gomb: hosszú magyar felirat törhet, sosem lóg ki a kártyából */
.callout a { color: #fff; margin-top: 28px; border: 1.5px solid rgba(255,255,255,.65); padding: 13px 22px;
  border-radius: 10px; white-space: normal; text-align: left; max-width: 100%; }
.callout a:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* Tréning/workshop adatok a jelentkezési (gradiens) szekcióban, fehér kártya NÉLKÜL,
   hogy ne legyen dupla fehér doboz az SA-embed kártyája fölött */
.tdetails { list-style: none; margin: clamp(30px, 4vw, 44px) auto clamp(24px, 3vw, 32px); padding: 0;
  max-width: var(--col-wide); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px); }
.tdetails li { display: flex; align-items: center; gap: 14px; padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,.22); }
/* Az alsó elválasztó csak az UTOLSÓ SOR alól tűnik el. A 2 oszlopos rácsban ez az utolsó elem,
   plusz a párja, ha az a bal oszlopban ül (páratlan sorszám). Így a lista PÁROS (6, 4) és
   PÁRATLAN (5, 3) elemszámmal is helyes - páratlannál nem marad árva vonal a fél sor alatt. */
.tdetails li:last-child,
.tdetails li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.tdetails .tic { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.15);
  color: #fff; display: grid; place-items: center; flex: none; }
.tdetails .tic svg { width: 20px; height: 20px; }
.tdetails .k { font-size: 12.5px; color: rgba(255,255,255,.75); }
.tdetails .v { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #fff; }
@media (max-width: 700px) {
  .tdetails { grid-template-columns: 1fr; }
  .tdetails li { border-bottom: 1px solid rgba(255,255,255,.22); } /* 1 oszlop: minden sor alá kell vonal */
  .tdetails li:last-child { border-bottom: 0; }
}

/* „Amit nem ígérek" / „Amit ígérek" (Trader DNS) és „Kinek nem szól / kinek szól"
   (Trader Identity) kártyapár. Eredetileg a pages/trader-dns.css-ben (v0.20.0);
   a második használattal (v0.21.0) ide került. */
.pledge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 32px);
  max-width: var(--col-wide); margin-inline: auto; align-items: start; }
.pcard { border-radius: var(--radius-lg); padding: clamp(26px, 3.2vw, 36px); }
.pcard.no { background: var(--bg-alt); border: 1px solid var(--line); }
.pcard.yes { background: var(--grad-ink); color: #fff; box-shadow: var(--shadow-md); }
.pcard h3 { display: flex; align-items: center; gap: 13px; font-size: 20px; }
.pcard.yes h3 { color: #fff; }
.pcard .pic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.pcard.no .pic { background: #fff; border: 1px solid var(--line); color: var(--muted); }
.pcard.yes .pic { background: rgba(255,255,255,.18); color: #fff; }
.pcard .pic svg { width: 22px; height: 22px; }
.pcard ul { list-style: none; margin: 20px 0 0; padding: 0; }
.pcard li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
  font-size: 16.5px; line-height: 1.55; }
.pcard li svg { width: 21px; height: 21px; flex: none; margin-top: 2px; }
.pcard.no li { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.pcard.no li svg { color: var(--muted); }
.pcard.yes li { color: rgba(255,255,255,.94); border-bottom: 1px solid rgba(255,255,255,.22); }
.pcard.yes li svg { color: #fff; }
.pcard li:last-child { border-bottom: 0; }
@media (max-width: 780px) { .pledge { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

/* Kapcsolat-sor a tény-lista és az űrlap között (a .head-center .sub megfelelője) */
.form-contact { text-align: center; max-width: var(--measure); margin: 0 auto clamp(28px, 3.5vw, 40px);
  color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.6; }
.form-contact a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ==== Signup-sáv (index.html:205; blog-oldalon és formsec-eken is) ====
   A fehér űrlap-kártyát maga az SA-embed adja (tt-sa-skin: .sa-embed = #fff kártya,
   radius+shadow+padding), ezért NINCS külön .signup-card doboz — az embed közvetlenül
   a gradiens szekcióban ül (mint a coaching/konzultáció oldalon). A régi natív
   űrlap-primitívák (.signup-card/.field/.check-row) törölve: az SA-embed váltotta ki őket. */
/* SA-form szekciók (feliratkozás + formsec-ek) KÖZÖS háttere: optimalizált e-mail/laptop
   kép + arculati színű gradiens-maszk. A gradiens ~0,8–0,9 alfán ül a kép fölött, így a
   márkaszín + fehér szöveg dominál, a fotó textúrája finoman átdereng. WebP + JPEG fallback. */
.signup, .formsec, .cta-band {
  color: #fff;
  background-color: var(--blue-deep);
  background-image: linear-gradient(112deg, rgba(58,63,214,.96) 0%, rgba(47,104,200,.90) 48%, rgba(19,179,154,.95) 100%), url(../images/sa-bg.jpg);
  background-image: linear-gradient(112deg, rgba(58,63,214,.96) 0%, rgba(47,104,200,.90) 48%, rgba(19,179,154,.95) 100%), image-set(url(../images/sa-bg.webp) type("image/webp"), url(../images/sa-bg.jpg) type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Mobilon a 800px-es háttér-variáns elég (webp 38KB az 1920-as ~156KB helyett) */
@media (max-width: 820px) {
  .signup, .formsec, .cta-band {
    background-image: linear-gradient(112deg, rgba(58,63,214,.96) 0%, rgba(47,104,200,.90) 48%, rgba(19,179,154,.95) 100%), url(../images/sa-bg-800.jpg);
    background-image: linear-gradient(112deg, rgba(58,63,214,.96) 0%, rgba(47,104,200,.90) 48%, rgba(19,179,154,.95) 100%), image-set(url(../images/sa-bg-800.webp) type("image/webp"), url(../images/sa-bg-800.jpg) type("image/jpeg"));
  }
}
/* CTA-sáv: eyebrow + cím + szöveg + gomb a közös arculati képes-gradiens háttéren */
.cta-band { text-align: center; }
.cta-band .wrap { padding: var(--section-y-sm) var(--edge); }
.cta-band h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); max-width: 24ch; margin: 0 auto; }
.cta-band p { color: rgba(255,255,255,.92); margin: 18px auto 0; max-width: 62ch; }
.cta-band p strong { color: #fff; }
.cta-band .btn { margin-top: 32px; padding: 16px 30px; }
.signup .head-center h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); max-width: 22ch; margin-inline: auto; }
.signup .head-center h2 .hl { color: #8ff3d8; } /* a kiemelt szó ("hírlevelemre") a sötét SA-háttéren */
.signup .head-center .sub { color: rgba(255,255,255,.9); }
/* SA-űrlap belső címsora (.sa-embed kártyán belül, a form fölött — WP-oldalról adjuk).
   Térköz-arány: a cím ALATTI látható rés nagy részét az SA-iframe belső top-paddingje adja
   (~45px, cross-origin → csak SA-adminban csökkenthető teljesen), ezért a cím FÖLÉ is teszünk
   hasonló levegőt (margin-top), a saját alsó margót pedig minimalizáljuk → arányos fönt/lent. */
.sa-embed .sa-title { font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--ink); text-align: center; margin: 18px 0 4px; }
/* A sötét SA-szekciók .sub sorában a tel:/mailto linkek világosak + aláhúzottak (kontraszt) */
.signup .head-center .sub a, .formsec .head-center .sub a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ==== Lightbox (vanilla, main.js): [data-gallery] .glight linkek nyitják ==== */
.glight { display: block; cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(10, 12, 34, .93); display: grid; place-items: center; padding: 4vh 4vw; }
.lb img { max-width: min(1100px, 90vw); max-height: 84vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lb button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--grad-ink); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); transition: .2s ease; }
.lb button:hover { transform: scale(1.06); }
.lb button svg { width: 22px; height: 22px; }
.lb .lb-close { top: 20px; right: 20px; }
.lb .lb-prev { left: 20px; top: 50%; margin-top: -24px; }
.lb .lb-prev svg { transform: rotate(180deg); }
.lb .lb-next { right: 20px; top: 50%; margin-top: -24px; }
body.lb-open { overflow: hidden; }

/* ==== Blog-kártyák (index.html:220; blog-lista + kapcsolódó cikkek is) ==== */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: .2s ease; }
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.post > a img, .post > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post .cover-ph { display: block; width: 100%; aspect-ratio: 16/10;
  background: linear-gradient(112deg, rgba(58,63,214,.14) 0%, rgba(47,104,200,.10) 48%, rgba(19,179,154,.14) 100%); }
.post-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post h3 { font-size: 20px; line-height: 1.3; }
.post h3 a { display: inline-block; padding-block: 4px; margin-block: -4px; color: var(--ink); }
.post h3 a:hover { color: var(--blue); }
.post .meta { display: flex; gap: 14px; font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--teal-ink); margin: 12px 0 14px; }
/* Ikon + szöveg (szó/perc) egy sorban, vertikálisan középre (a főoldali teaser + single related is ezt kapja) */
.post .meta span { display: inline-flex; align-items: center; gap: 6px; }
.post .meta svg { width: 14px; height: 14px; }
.post p { color: var(--muted); font-size: 15px; line-height: 1.55; margin-bottom: 22px; flex: 1; }
.post .btn { align-self: flex-start; }
@media (max-width: 880px) { .blog-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

/* ==== Telefonos CTA (index.html:234; alt-variáns: coaching.html:205) ==== */
.phone-cta { background: var(--grad-ink); text-align: center; padding: var(--section-y-sm) 0; }
.phone-cta .btn { padding: 16px 30px; }
.phone-cta.alt { background: var(--bg-alt); } /* a paddingot a .phone-cta adja */

/* ==== Formsec — SA-űrlap szekció (coaching.html:185; konzultáció+könyv is) ====
   Háttér (kép + arculati gradiens) a fenti közös .signup,.formsec szabályból. */
.formsec { position: relative; overflow: hidden; }
.formsec::before { content: ""; position: absolute; width: 480px; height: 480px; right: -160px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); }
.formsec .head-center h2 { color: #fff; }
.formsec .head-center .sub { color: rgba(255,255,255,.9); }
.formsec > .wrap { position: relative; z-index: 1; }

/* SalesAutopilot embed-konténer (a belső űrlap az iframe-ben él — kívülről nem stílusozható) */
.sa-embed .mmform { margin-inline: auto; }

/* ==== Általános oldal-próza (page.php stub-skin — nincs saját bundle) ==== */
/* A jogi/altalanos oldalak prozaja 820px volt, ami 98 (!) karakter/sor -
   ez volt a kor legnagyobb olvashatosagi hibaja. Ugyanaz a plafon, mint a cikke. */
.page-prose { max-inline-size: var(--measure); margin: 0 auto; }
.page-prose > * + * { margin-top: 20px; }
.page-prose h2 { font-size: clamp(22px, 2.6vw, 29px); margin-top: 44px; }
.page-prose h3 { font-size: 20px; margin-top: 32px; }
.page-prose p { color: var(--ink-2); }
.page-prose ul, .page-prose ol { padding-left: 24px; color: var(--ink-2); display: grid; gap: 10px; }
.post .cover-ph { display: block; }
/* A kártya-chipes borító + kategória-chip (blog/related/főoldali teaser — minden nézeten egységes) */
.post .cover { position: relative; display: block; }
.post .cat { position: absolute; left: 14px; top: 14px; z-index: 2; font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(28,31,56,.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: 100px; }

/* ==== Lábléc (index.html:237; foot-menu = wp_nav_menu ul) ==== */
.footer { background: var(--navy); color: rgba(255,255,255,.72); }
.footer .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.5fr); gap: 40px clamp(32px, 5vw, 72px); padding: 64px var(--edge) 44px; }
.footer .logo svg { height: 38px; filter: brightness(0) invert(1); }
.foot-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; font-size: 15px;
  overflow-wrap: anywhere; } /* MOBIL-FIX: hosszú e-mail cím ne lógjon ki */
.foot-list li { display: flex; align-items: flex-start; gap: 12px; }
.foot-list svg { margin-top: 3px; }
.foot-list svg { width: 19px; height: 19px; color: var(--teal); flex: none; }
.foot-list a { display: inline-block; padding-block: 8px; margin-block: -8px; color: rgba(255,255,255,.72); }
.foot-list a:hover { color: #fff; }
.foot-h { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
.foot-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 15px; }
.foot-menu a { display: block; padding-block: 8px; color: rgba(255,255,255,.72); }
.foot-menu a:hover { color: #fff; }
.risk { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.5); }
.foot-bar { border-top: 1px solid rgba(255,255,255,.1); }
.foot-bar .wrap { display: block; padding: 22px var(--edge); text-align: center; font-size: 13.5px; color: rgba(255,255,255,.55); }
/* Jogi sor a láblécben: adatvédelem, ÁSZF, süti-tájékoztató, sütibeállítások.
   A „Sütibeállítások" gomb (Complianz-kapaszkodó) szándékosan ugyanúgy néz ki,
   mint a linkek - a látogatónak egy sor, nem link + gomb keveréke. */
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  list-style: none; margin: 0 0 10px; padding: 0; }
.foot-legal a,
.foot-legal__btn { color: rgba(255,255,255,.72); text-decoration: none; font-size: 13.5px;
  font-family: inherit; line-height: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; border-bottom: 1px solid transparent; }
.foot-legal a:hover, .foot-legal a:focus-visible,
.foot-legal__btn:hover, .foot-legal__btn:focus-visible { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.foot-copy { margin: 0; }
@media (max-width: 860px) { .footer .wrap { grid-template-columns: 1fr; } }

/* ==== Állapot-oldalak (404.php, üres keresés) + megosztott kereső ====
   A meglévő komponensekre épülnek (.section, .head-center, .eyebrow, .closer);
   csak a kereső-sor és a továbbvezető kártyák kapnak saját szabályt.
   A .site-search és a .nav-cards SZÁNDÉKOSAN önálló komponens: a 404, a
   keresés és az archívum-sablon is ugyanezt használja. */
.state-page .head-center { margin-bottom: var(--sp-4); }
.site-search { display: flex; align-items: center; gap: var(--sp-1); position: relative;
  max-inline-size: var(--measure); margin: 0 auto var(--sp-5); }
.site-search__ic { position: absolute; left: 16px; top: 0; block-size: 52px;
  display: grid; place-items: center; color: var(--muted); pointer-events: none; }
/* A `top: 0` + fix magasság SZÁNDÉKOS: a sáv mobilon tördel (a gomb új sorba kerül),
   és a függőleges közép ilyenkor a TÖRDELT konténerre esne — az ikon leúszna a mező
   alá, a gomb mellé. Így viszont mindig a beviteli mezőhöz igazodik. */
.site-search__ic svg { width: 19px; height: 19px; }
.site-search input[type="search"] { flex: 1; min-inline-size: 0; min-block-size: 52px;
  padding: 0 16px 0 46px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.site-search input[type="search"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-color: transparent; }
.site-search .btn { flex: none; min-block-size: 52px; }

.nav-cards { list-style: none; margin: 0 auto; padding: 0; max-inline-size: var(--col-wide);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.nav-cards a { display: flex; align-items: center; gap: 15px; min-block-size: 44px;
  padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); color: var(--ink); transition: .18s ease; }
.nav-cards a:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--ink); }
.nav-cards .ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-ink); color: #fff; }
.nav-cards .ic svg { width: 20px; height: 20px; }
.nav-cards__txt { display: grid; gap: 2px; min-inline-size: 0; }
.nav-cards__txt b { font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.nav-cards__txt span { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.nav-cards .arw { margin-left: auto; flex: none; color: var(--blue); transition: .18s ease; }
.nav-cards .arw svg { width: 18px; height: 18px; }
.nav-cards a:hover .arw { transform: translateX(3px); }
.state-page .closer { text-align: center; color: var(--muted); }

/* Találati lista (search.php) — ugyanaz a kártya, plusz részlet és típus-címke. */
.nav-cards li { display: flex; }   /* a kártya kitölti a rácssort, így egy sorban egyforma magasak */
.nav-cards li > a { flex: 1; }
.nav-cards--results { max-inline-size: var(--col-wide); }
.nav-cards--results a { align-items: flex-start; }
.nav-cards--results .ic { margin-block-start: 2px; }
.nav-cards--results .arw { align-self: center; }
.nav-cards__txt mark { background: #fdf3c9; color: inherit; padding: 0 2px; border-radius: 3px; }
.nav-cards__kind { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal-ink); }
.search-note { max-inline-size: var(--col-wide); margin: 0 auto var(--sp-3); text-align: center;
  color: var(--muted); }
.archive-back { text-align: center; margin-block-start: var(--sp-4); }
@media (max-width: 700px) {
  .nav-cards { grid-template-columns: minmax(0, 1fr); }
  .site-search { flex-wrap: wrap; }
  .site-search input[type="search"] { flex-basis: 100%; }
  .site-search .btn { width: 100%; }
}