/* ================================================
   Bognár Bálint festő-mázoló – Főstílus
   Mobil-első, keretrendszer nélküli CSS
   ================================================ */

/* ------------------------------------------------
   1. DESIGN TOKENEK (CSS custom properties)
   ------------------------------------------------ */
:root {
  /* Fejléc magasság – a hamburger-lista top és a scroll-margin-top erre hivatkozhat */
  --fejlec-magassag: 60px;

  /* Színek */
  --szin-elsodleges:      #2d6a4f;   /* mélyzöld – bizalom, természet */
  --szin-elsodleges-sot:  #1a3a2e;   /* sötétebb árnyalat (lábléc, linkek hover-színe) */
  --szin-cta-hover:       #265a43;   /* TN-11: a 3 egységesített CTA-gomb (fejléc/hero/Bemutatkozás)
                                        hover/fókusz/aktív háttere – visszafogottabb sötétedés
                                        a --szin-elsodleges-sot-hoz képest, fehér felirattal még
                                        mindig WCAG AA (≥4,5:1) fölött (ld. .btn--nav komment) */
  --szin-akcent:          #52b788;   /* világoszöld – CTA, kiemelések */
  --szin-akcent-hover:    #40916c;   /* akcent hover */
  --szin-szoveg:          #1a1a1a;   /* fő szövegszín */
  --szin-szoveg-halvany:  #4a4a4a;   /* másodlagos szöveg */
  --szin-feher:           #ffffff;
  --szin-hatter:          #f8f9f5;   /* enyhén zöldes fehér */
  --szin-placeholder-bg:  #d8e4dc;   /* helyőrző szekciók háttere */

  /* Tipográfia */
  /* J-5: Rendszerfont-stack – ha később web font kerül ide, kell font-display: swap */
  --betu-alap:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --betu-meret:   1rem;       /* 16px */
  --sor-magassag: 1.6;

  /* Elrendezés */
  --tarolo-max:   1200px;
  --tarolo-pad:   1rem;       /* mobil */
  --resz-pad:     3rem 0;     /* szekciók belső margója */

  /* Árnyékok */
  --arnyek-gomb:  0 4px 14px rgba(45, 106, 79, 0.35);
  --arnyek-gomb-hover: 0 6px 20px rgba(45, 106, 79, 0.5);

  /* Animáció */
  --atm-gyors:    0.2s ease;
  --atm-kozepes:  0.35s ease;

  /* K-1: scroll-behavior eltávolítva a :root-ból (érvénytelen custom property volt);
     a smooth scroll az alábbi html szabályban él. */
}

/* ------------------------------------------------
   2. RESET ÉS ALAP STÍLUSOK
   ------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;  /* K-1: CSS-alapú smooth scroll – CTA gombnak; egyetlen helyen */
}

body {
  font-family: var(--betu-alap);
  font-size: var(--betu-meret);
  line-height: var(--sor-magassag);
  color: var(--szin-szoveg);
  background-color: var(--szin-hatter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fókusz jelzés akadálymentességhez */
:focus-visible {
  outline: 3px solid var(--szin-akcent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* K-3: tabindex="-1"-es célszekciók nem kapnak látható fókuszkeretet egérkattintásnál;
   :focus-visible biztosítja, hogy csak billentyűs navigációnál jelenjen meg. */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

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

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------
   3. SEGÉDOSZTÁLYOK
   ------------------------------------------------ */

/* Tároló (container) */
.container {
  width: 100%;
  max-width: var(--tarolo-max);
  margin-inline: auto;
  padding-inline: var(--tarolo-pad);
}

/* K-2: Horgány-céloknál a fixed fejléc ne takarja a görgetési célt.
   A fejléc valós magassága ~60px (padding 0.75rem × 2 + logó 36px).
   10px extra lélegzetvételi teret biztosít a szekciócím felett. */
section[id] {
  scroll-margin-top: calc(var(--fejlec-magassag) + 10px);
}

/* J-4: Skip-link – képernyőolvasókhoz és billentyűs navigációhoz (WCAG 2.4.1).
   Alapból vizuálisan rejtve, fókuszba kerülve előbukkan. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background-color: var(--szin-elsodleges);
  color: var(--szin-feher);
  padding: 0.75em 1.25em;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--szin-akcent);
  outline-offset: 3px;
}

/* ------------------------------------------------
   4. GOMBOK
   ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.75em;
  border: 2px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--atm-gyors),
              border-color var(--atm-gyors),
              box-shadow var(--atm-gyors),
              transform var(--atm-gyors);
  white-space: nowrap;
}

/* Elsődleges CTA gomb */
.btn--primary {
  /* Akadálymentesség (WCAG AA): a világos akcentzöld gomb (#52b788) jól kiemelkedik
     a sötét hero háttéren (gomb/háttér határ ~4,1:1), a sötét felirat pedig olvasható
     a gombon (felirat/gomb ~7,0:1, hover állapotban ~4,55:1). Fehér feliratnál ez
     csak 2,45:1 lett volna, ezért a felirat sötét. */
  background-color: var(--szin-akcent);
  color: var(--szin-szoveg);
  border-color: var(--szin-akcent);
  box-shadow: var(--arnyek-gomb);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--szin-akcent-hover);
  border-color: var(--szin-akcent-hover);
  box-shadow: var(--arnyek-gomb-hover);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--arnyek-gomb);
}

/* Navigációs gomb (fejlécben)
   TN-11: CTA-egységesítés – a 3 fő CTA-gomb (fejléc/hero/Bemutatkozás)
   azonos színkezelést kap: var(--szin-elsodleges) #2d6a4f háttér, fehér
   felirat. WCAG AA kontraszt fehér felirattal (normál szöveg küszöb,
   ≥4,5:1 – a gomb betűmérete/vastagsága nem éri el a "large text"
   határt): #2d6a4f/#ffffff ≈ 6,39:1 ✓; hover/fókusz var(--szin-cta-hover)
   #265a43/#ffffff ≈ 8,00:1 ✓ (finomítva: visszafogottabb sötétedés, mint
   a korábbi --szin-elsodleges-sot #1a3a2e/#ffffff ≈ 12,44:1). */
.btn--nav {
  background-color: var(--szin-elsodleges);
  color: var(--szin-feher);
  border-color: var(--szin-elsodleges);
  padding: 0.55em 1.2em;
  font-size: 0.9rem;
}

.btn--nav:hover,
.btn--nav:focus-visible {
  background-color: var(--szin-cta-hover);
  border-color: var(--szin-cta-hover);
}

/* ------------------------------------------------
   5. FEJLÉC
   ------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(26, 58, 46, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(82, 183, 136, 0.2);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logó */
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--szin-feher);
}

.logo__icon {
  flex-shrink: 0;
}

.logo__text {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Fejléc görgetett állapot (JS adja hozzá a .site-header--scrolled osztályt) */
.site-header--scrolled {
  background-color: rgba(26, 58, 46, 0.98);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------
   5b. NAVIGÁCIÓ (TN-3) – mobil-első hamburger menü
   ------------------------------------------------ */

/* A <nav> elrendezési kerete a fejlécen belül */
.fonavigacio {
  display: flex;
  align-items: center;
}

/* ---- Hamburger gomb (csak mobilon látható) ---- */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;   /* 44px – WCAG 2.5.5 érintési célterület */
  height: 2.75rem;
  padding: 0.25rem;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--atm-gyors), background-color var(--atm-gyors);
  /* Fókuszgyűrű a globális :focus-visible-től jön */
}

.nav__hamburger:hover,
.nav__hamburger:focus-visible {
  border-color: var(--szin-akcent);
  background-color: rgba(82, 183, 136, 0.12);
}

/* A három csík */
.hamburger__csik {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--szin-feher);
  border-radius: 2px;
  transition: transform var(--atm-gyors), opacity var(--atm-gyors);
  transform-origin: center;
}

/* Nyitott állapot: X animáció */
.nav__hamburger[aria-expanded="true"] .hamburger__csik:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .hamburger__csik:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger[aria-expanded="true"] .hamburger__csik:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Menülinkek listája ---- */

/* Mobil: a lista alapból rejtett, a fejléc alatt jelenik meg */
.nav__lista {
  /* Pozíció: a fejléc alá nyílik, teljes széles */
  position: fixed;
  top: var(--fejlec-magassag);
  left: 0;
  right: 0;
  z-index: 99;

  display: flex;
  flex-direction: column;
  gap: 0;

  background-color: rgba(26, 58, 46, 0.98);
  border-bottom: 1px solid rgba(82, 183, 136, 0.3);
  padding: 0.75rem 1rem;

  /* Becsukott állapot: rejtett (height + opacity animáció) */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity var(--atm-gyors),
    transform var(--atm-gyors),
    visibility var(--atm-gyors);
}

/* Nyitott állapot */
.nav__lista--nyitva {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mobilon a CTA gomb a lista utolsó eleme */
.nav__lista li:last-child {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- Nav linkek ---- */
.nav__link {
  display: block;
  padding: 0.7rem 0.5rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--atm-gyors), border-color var(--atm-gyors);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--szin-akcent);
  border-bottom-color: var(--szin-akcent);
}

/* ---- Desktop (≥ 1024 px): hamburger el, vízszintes menü ----
   TN-11: a törésponot 768px-ről 1024px-re emelve – a hosszabb branding-név
   ("Bognár Bálint festő-mázoló") és az egységesített, hosszabb CTA-felirat
   ("Kapcsolatfelvétel - ajánlatkérés") miatt 768–~945px között a fejléc-név
   több sorba tört volna; 1024px-től van elég hely egy sorban mindenre. */
@media (min-width: 1024px) {
  .nav__hamburger {
    display: none;  /* hamburger rejtve desktopon */
  }

  .nav__lista {
    /* Normál dokumentumfolyamban, vízszintesen */
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: none;
    padding: 0;
    transition: none;
  }

  /* CTA gomb elválasztója desktopon nem kell */
  .nav__lista li:last-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-left: 0.75rem; /* kis levegő a CTA gomb előtt */
  }

  /* Nav linkek desktopon – kompaktabb */
  .nav__link {
    padding: 0.45rem 0.75rem;
    font-size: 0.95rem;
    border-bottom: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
  }

  .nav__link:hover,
  .nav__link:focus-visible {
    color: var(--szin-feher);
    background-color: rgba(82, 183, 136, 0.15);
    border-bottom: none;
  }
}

/* ---- Csökkentett mozgás: hamburger animáció leállítva ---- */
@media (prefers-reduced-motion: reduce) {
  .hamburger__csik,
  .nav__lista {
    transition: none;
  }
}

/* ------------------------------------------------
   6. HERO SZEKCIÓ – MOBIL-ELSŐ
   ------------------------------------------------ */
.hero {
  position: relative;
  width: 100%;
  /* Mobil: legalább 80vh (elfogadási kritérium #1).
     F-6: svh fallback – mobilon az URL-sáv miatt a vh kevesebb lehet;
     régi böngészőknek a vh marad, modern böngészők az svh-t használják. */
  min-height: 80vh;
  min-height: 80svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Fejléc magasságának kompenzálása */
  padding-top: var(--fejlec-magassag);
}

/* --- HÁTTÉRKÉP RÉTEG ---
   KÉPCSERE ÚTMUTATÓ:
   A valódi hero háttérkép már be van töltve (images/hero.jpg).
   Ha a képet le kell cserélni, csak az alábbi background-image url()-t kell
   módosítani – a többi beállítás (cover, center) érintetlenül maradhat.
   Javasolt képparaméterek: max. 200 KB, 1920 px széles, progresszív JPEG.
   F-3: A hero__bg dekoratív háttérkép (CSS background-image), ezért
        aria-hidden="true" a markup-ban – az akadálymentesség így biztosított.
        Ha valódi tartalmi fotó kerül ide <img> elemként, alt szöveg szükséges.
   ----------------------------------------------------------------------- */
.hero__bg {
  position: absolute;
  inset: 0;                  /* top:0, right:0, bottom:0, left:0 */
  z-index: 0;

  /* VALÓDI HERO HÁTTÉRKÉP – optimalizált JPEG (1920×1281 px, ~200 KB)
     Csere esetén csak ezt az egy sort kell módosítani: */
  background-image: url('../images/hero.jpg');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* Enyhe zoom-in animáció betöltéskor */
  animation: heroZoom 8s ease-out forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* --- SÖTÉTÍTŐ OVERLAY ---
   A fotó felső felén (ahol nincs szöveg) jelentősen átlátszóbb overlay,
   hogy a kép tisztábban látszódjon. A szöveg mögötti területen (alul) elegendő
   sötétség marad, kiegészítve a .hero__text lokális scrimjével.

   Overlay értékek:
     - Felső  (0.32): fejléc mögötti rész, nincs tartalom – fotó jól látszódik
       NE módosítsd, a felső fotó itteni érték miatt marad éles!
     - Közép  (0.55): átmeneti zóna
     - Alsó   (0.72): szövegterület – alap sötétítés a scrimmel kombinálva

   OVERLAY SZÍN (finom melegítés): RGB(24,18,8) – meleg, enyhén barna sötét tónus.
   A korábbi RGB(8,28,21) hűvös feketészöld helyett, a narancs/barack hátterű képhez igazítva.
   A változás diszkrét; a luminancia szinte azonos a korábbival.

   WCAG AA kontrasztszámítás (legrosszabb eset: fehér képpont a szöveg mögött):
     Overlay szín RGB(24,18,8) linearizált luminanciája (L_overlay): 0.009245
     lin_r = ((24/255+0.055)/1.055)^2.4 = 0.01274
     lin_g = ((18/255+0.055)/1.055)^2.4 = 0.00874
     lin_b = ((8/255+0.055)/1.055)^2.4  = 0.00396
     L = 0.2126×0.01274 + 0.7152×0.00874 + 0.0722×0.00396 = 0.009245
     (korábbi L_overlay=0.008901 – különbség: +0.000344, gyakorlatilag azonos)

     (a) Főcím teteje – overlay alpha≈0.55, scrim tető alpha=0.45:
         L_ov = 0.009245×0.55 + 1.0×0.45 = 0.455085
         L_végső = 0.009245×0.45 + 0.455085×0.55 = 0.254457
         CR = 1.05 / (0.254457+0.05) = 1.05 / 0.304457 = 3.45:1 ✓ (nagy szöveg ≥ 3:1)

     (b) Alcím alja – overlay alpha=0.72, scrim alj alpha=0.52, alcím #ffffff:
         L_ov = 0.009245×0.72 + 1.0×0.28 = 0.286656
         L_végső = 0.009245×0.52 + 0.286656×0.48 = 0.142402
         CR = 1.05 / (0.142402+0.05) = 1.05 / 0.192402 = 5.46:1 ✓ (normál szöveg ≥ 4.5:1)

   A text-shadow tovább erősíti az olvashatóságot (vizuálisan, nem WCAG-számításban).
   ----------------------------------------------------------------------- */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(24, 18, 8, 0.32)  0%,
    rgba(24, 18, 8, 0.55) 55%,
    rgba(24, 18, 8, 0.72) 100%
  );
}

/* --- TARTALOM ---  */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;    /* Mobilon egyoszlopos (elfogadási kritérium #5) */
  align-items: flex-start;
  gap: 2rem;
  padding-block: 3rem;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 680px;

  /* Lokális scrim a szöveg mögött: alulról felfelé erősödő, de tetején sem tűnő
     sötét gradiens – biztosítja, hogy a főcím első sora is elegendő védelmet kapjon.
     Részletes WCAG-számítás a .hero__overlay kommentjében:
       (a) főcím teteje: CR = 3.45:1 ✓ (nagy szöveg ≥ 3:1)
       (b) alcím alja:   CR = 5.46:1 ✓ (normál szöveg ≥ 4.5:1) */
  position: relative;
}

/* Lokális scrim a .hero__text mögött – pseudo-elemmel, hogy a flex-layout ne sérüljön.
   Alulról felfelé erősödő, de tetején sem tűnő sötét gradiens:
     - Alján  (0%):   alpha=0.52  → alcím mögött CR=5.46:1 ✓ (normál szöveg ≥ 4.5:1)
     - Közepén(55%):  alpha=0.30  → átmeneti zóna
     - Tetején(100%): alpha=0.45  → főcím 1. sora mögött CR=3.45:1 ✓ (nagy szöveg ≥ 3:1)
   NE futtasd 0.00-ra fölül! A főcím teteje is védelmet igényel.
   A ::before fölfelé 1.25rem-mel nyúlik a szövegblokkon túlra, hogy a főcím
   első sora biztosan a scrim hatásán belül legyen.
   Részletes WCAG-számítás a .hero__overlay kommentjében. */
.hero__text::before {
  content: "";
  position: absolute;
  inset: -1.25rem -1rem -0.75rem;  /* extra tér fölül: főcím 1. sorát lefedi */
  z-index: -1;
  border-radius: 10px;
  /* Meleg tónus igazítva a .hero__overlay-hez (RGB(24,18,8)):
     Részletes WCAG-számítás a .hero__overlay kommentjében:
       (a) főcím teteje: CR = 3.45:1 ✓ (nagy szöveg ≥ 3:1)
       (b) alcím alja:   CR = 5.46:1 ✓ (normál szöveg ≥ 4.5:1) */
  background: linear-gradient(
    to top,
    rgba(24, 18, 8, 0.52)  0%,
    rgba(24, 18, 8, 0.30) 55%,
    rgba(24, 18, 8, 0.45) 100%
  );
  pointer-events: none;
}

/* Főcím */
.hero__title {
  font-size: clamp(1.85rem, 5vw + 0.5rem, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--szin-feher);
  letter-spacing: -0.02em;

  /* Szövegárnyék az olvashatóság erősítéséhez */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);

  /* Betűk megjelenési animációja */
  animation: fadeInUp 0.8s ease-out both;
}

/* Alcím (max. 2 mondat – elfogadási kritérium #2)
   Szín: teljes fehér (#ffffff, opacity 1.0) – az rgba(255,255,255,0.9) 0.9 opacitása
   a legvédettebb ponton is csak 4.22:1-et adott (< 4.5:1 WCAG AA normál szöveg küszöb).
   Teljes fehérrel és a megerősített scrimmel: CR=5.46:1 ✓ */
.hero__subtitle {
  font-size: clamp(1rem, 2vw + 0.3rem, 1.25rem);
  line-height: 1.65;
  color: #ffffff;
  max-width: 560px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  animation: fadeInUp 0.8s 0.15s ease-out both;
}

/* CTA gomb
   TN-11: CTA-egységesítés – felülírja a .btn--primary alap (világoszöld
   #52b788) hátterét/feliratszínét, hogy a 3 fő CTA-gomb (fejléc/hero/
   Bemutatkozás) azonos, WCAG AA-nak megfelelő megjelenést kapjon.
   Kontraszt: ld. .btn--nav fenti kommentje. A .kapcsolat-cta-gomb
   (Gmail-gomb) NEM kap ilyen felülírást, az marad .btn--primary
   (világoszöld, sötét felirat) – nem tartozik a 3 egységesített gomb közé. */
.hero__cta {
  margin-top: 0.5rem;
  padding: 1em 2.2em;
  font-size: 1.05rem;
  animation: fadeInUp 0.8s 0.3s ease-out both;

  background-color: var(--szin-elsodleges);
  color: var(--szin-feher);
  border-color: var(--szin-elsodleges);
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background-color: var(--szin-cta-hover);
  border-color: var(--szin-cta-hover);
}

/* Bizalmi jelek
   PO-DÖNTÉS: tiszta, hűvös pala-kék-szürke panel (a korábbi meleg barna túl
   sötét és "koszos" hatású volt). Panel: rgba(34,46,60, 0.36) – a kék fotelhez
   és a zöld pipa-chipekhez is illeszkedő, áttetsző, légies frosted tónus.

   WCAG AA kontraszt a fehér badge-szövegre (worst-case: fehér képpont, L=1.0),
   panel L_panel≈0.029, alpha_p=0.36:
     - Alsó zóna (overlay alpha≈0.72): L_ov=0.286656
       L_végső = 0.029×0.36 + 0.286656×0.64 = 0.193900 → CR = 4.30:1
     - Közép zóna (overlay alpha≈0.55): L_ov=0.455085
       L_végső = 0.029×0.36 + 0.455085×0.64 = 0.301694 → CR = 2.99:1
       (nagy szöveg ≥3:1 közelében; normál szöveg 4.5:1 alatt a LEGROSSZABB, fehér képpont esetén)
     - Felső, legvilágosabb sáv (overlay alpha≈0.40): CR ≈ 2.35:1 worst-case fehér ellen.
   MEGJEGYZÉS: a worst-case fehér képpont elméleti; a tényleges kép a badge-blokk
   mögött sötétebb, így a valós kontraszt jobb. A nehéz olvashatóságot a #fff szöveg
   + megerősített text-shadow is segíti. A szigorú worst-case AA-hoz a panelt
   sötétíteni kellene – ez tudatos, PO által kért vizuális kompromisszum,
   böngészős ellenőrzés ajánlott a tényleges kép ellen.
   ----------------------------------------------------------------------- */
.hero__badges {
  display: flex;
  flex-direction: column;    /* Mobilon egymás alatt */
  gap: 0.75rem;
  /* Tiszta, hűvös pala-kék-szürke, légies panel (PO-kérés) – a kék fotel
     tónusát idézi. Kontraszt: ld. fenti komment. */
  background-color: rgba(34, 46, 60, 0.36);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: fadeInUp 0.8s 0.45s ease-out both;
}

.badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Teljes fehér (#ffffff) – az rgba(255,255,255,0.9) 0.9 opacitás worst-case-ben
     a 4.5:1 alá eshet; teljes fehérrel a sötét panel (ld. .hero__badges) garantálja
     a ≥ 4.5:1 kontrasztot minden méreten. */
  color: #ffffff;
  font-size: 0.95rem;
  /* Text-shadow vizuális ráerősítés (nem WCAG-számításban) – a világosabb
     panelen sötét haló segíti az olvashatóságot. */
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

.badge__icon {
  flex-shrink: 0;
}

/* --- GÖRGETÉSI NYÍL --- */
.hero__scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.8;
  transition: opacity var(--atm-gyors), transform var(--atm-gyors);
  animation: bounce 2s 1.5s ease-in-out infinite;
}

.hero__scroll-hint:hover,
.hero__scroll-hint:focus-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(3px);
  animation: none;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* Belépési animáció */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------
   7. HERO – TÁBLAGÉP (≥ 768 px)
   ------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    --tarolo-pad: 2rem;
  }

  .hero {
    min-height: 90vh;          /* Nagyobb képernyőn még impozánsabb */
    min-height: 90svh;         /* F-6: svh fallback mobilon/táblagépen */
  }

  .hero__content {
    flex-direction: row;       /* Kétoszlopos elrendezés táblagépen */
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }

  .hero__text {
    flex: 1 1 55%;
  }

  .hero__badges {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    /* Az alap hűvös pala-kék panel (rgba(34,46,60,0.36)) megmarad – a blur
       frosted-glass hatást ad. A korábbi rgba(255,255,255,0.08) fehér réteg
       elhagyva: a tónust a hűvös sötét panel adja, nem a fehér bevonat. */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 1.5rem;
    gap: 1.1rem;
  }

  .badge {
    font-size: 1rem;
  }
}

/* ------------------------------------------------
   8. HERO – DESKTOP (≥ 1024 px)
   ------------------------------------------------ */
@media (min-width: 1024px) {
  :root {
    --tarolo-pad: 2.5rem;
  }

  .hero {
    min-height: 100vh;         /* Teljes képernyő desktopon */
    min-height: 100svh;        /* F-6: svh fallback */
  }

  .hero__content {
    gap: 5rem;
  }

  .hero__text {
    flex: 1 1 60%;
  }

  .hero__badges {
    padding: 2rem;
    gap: 1.25rem;
  }

  .badge {
    font-size: 1.05rem;
  }
}

/* ------------------------------------------------
   9. SZOLGÁLTATÁSOK SZEKCIÓ (TN-3)
   ------------------------------------------------ */

/* Szekció alap – váltakozó háttér a galériával */
.szolgaltatasok-szekcio {
  padding: var(--resz-pad);
  background-color: var(--szin-feher);
}

/* Kártyák rácsba – mobil-első: 1 oszlop */
.szolgaltatasok-racs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Táblagép: 2 oszlop (≥ 600 px) */
@media (min-width: 600px) {
  .szolgaltatasok-racs {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}

/* Desktop: 3 oszlop (≥ 1024 px) */
@media (min-width: 1024px) {
  .szolgaltatasok-racs {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Alap kártya */
.szolgaltatas-kartya {
  display: flex;
  flex-direction: column;
  background-color: var(--szin-hatter);
  border: 1px solid rgba(45, 106, 79, 0.12);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: box-shadow var(--atm-kozepes), transform var(--atm-kozepes);
}

.szolgaltatas-kartya:hover {
  box-shadow: 0 8px 28px rgba(45, 106, 79, 0.18);
  transform: translateY(-3px);
}

/* Fotós kiemeltkártya – a fotókeret tetején van */
.kartya-foto-keret {
  width: 100%;
  /* 16:9 arány a fotóhoz (1600×1067 közel 3:2, de 16:10 jól néz ki kártyán) */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}

.kartya-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--atm-kozepes);
}

.szolgaltatas-kartya:hover .kartya-foto {
  transform: scale(1.04);
}

/* Tartalom blokk (ikon + cím + szöveg) */
.kartya-tartalom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  flex: 1;
}

/* Ikon keret */
.kartya-ikon-keret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: rgba(45, 106, 79, 0.1);
  border-radius: 10px;
  color: var(--szin-elsodleges);
  flex-shrink: 0;
}

.kartya-ikon {
  display: block;
}

/* Kártyacím (h3) */
.kartya-cim {
  font-size: clamp(1rem, 2vw + 0.3rem, 1.2rem);
  font-weight: 700;
  color: var(--szin-elsodleges);
  line-height: 1.25;
  margin: 0;
}

/* Kártya leíró szöveg */
.kartya-szoveg {
  font-size: 0.95rem;
  color: var(--szin-szoveg-halvany);
  line-height: 1.65;
  margin: 0;
}

/* Csökkentett mozgás – szolgáltatás kártyák */
@media (prefers-reduced-motion: reduce) {
  .szolgaltatas-kartya,
  .kartya-foto {
    transition: none;
  }

  .szolgaltatas-kartya:hover {
    transform: none;
  }

  .szolgaltatas-kartya:hover .kartya-foto {
    transform: none;
  }
}

/* ------------------------------------------------
   9b. KAPCSOLAT / ÁRAJÁNLATKÉRŐ SZEKCIÓ (TN-7)
   Redesign: elérhetőség-sáv + checklist kártyarács
   ------------------------------------------------ */

/* Szekció alap – váltakozó háttér: fehér (rolunk-szekcio) után zöldes háttér */
.kapcsolat-szekcio {
  padding: var(--resz-pad);
  background-color: var(--szin-hatter);
}

/* ---- Elérhetőség-sáv: fejléc + adatok + gombok ---- */

/* Teljes szélességű, centrált blokk */
.kapcsolat-sav {
  text-align: center;
  margin-bottom: 3rem; /* elválasztja a kártyarácsot */
}

/* Elérhetőségi adatok csoportja – mobilon egymás alatt, desktopon vízszintesen */
.kapcsolat-sav__adatok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1.5rem;
}

@media (min-width: 768px) {
  .kapcsolat-sav__adatok {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap; /* nagyon szűk tableteken is törhet */
  }
}

/* Egy elérhetőségi sor (ikon + adat) */
.kapcsolat-sor {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 44px; /* WCAG 2.5.5 érintési célterület */
}

/* Módosító: centrált sor a sávban */
.kapcsolat-sor--center {
  justify-content: center;
}

/* Ikon konténer */
.kapcsolat-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(45, 106, 79, 0.1);
  border-radius: 8px;
  color: var(--szin-elsodleges);
}

/* Adat szöveg */
.kapcsolat-adat {
  font-size: 1rem;
  color: var(--szin-szoveg);
  line-height: 1.4;
}

/* Kattintható linkek (telefon, e-mail) */
.kapcsolat-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--szin-elsodleges);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--atm-gyors), border-color var(--atm-gyors);
  padding-block: 0.25rem;
  /* A vizuális aláhúzás a szöveg alatt marad; az érintési célterületet egy
     láthatatlan pseudo-elem bővíti ~44px-re (kényelmes tap-target), anélkül
     hogy az aláhúzás eltávolodna a szövegtől. */
  position: relative;
}

.kapcsolat-link::before {
  content: "";
  position: absolute;
  inset: -0.85rem -0.5rem;
}

.kapcsolat-link:hover,
.kapcsolat-link:focus-visible {
  /* Sötétebb zöld hover – hover-állapotban is WCAG AA (#1a3a2e a világos
     háttéren ~13:1), a zöld akcent aláhúzás adja a vizuális visszajelzést. */
  color: var(--szin-elsodleges-sot);
  border-bottom-color: var(--szin-akcent);
}

/* Telefon link – nagyobb betűméret a jobb olvashatóságért */
.kapcsolat-link--tel {
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

/* CTA gombok wrapper – centrált, alapértelmezetten egymás mellett,
   nagyon kis képernyőn egymás alá törnek */
.kapcsolat-cta-csoport {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

/* Nagyon kis képernyőn egymás alá */
@media (max-width: 479px) {
  .kapcsolat-cta-csoport {
    flex-direction: column;
    align-items: center;
  }
}

/* CTA gomb a kapcsolat szekcióban (elsődleges, Gmail compose) */
.kapcsolat-cta-gomb {
  /* Minimális érintési célterület (~44px): a .btn padding már biztosítja */
  min-height: 44px;
  /* A btn--primary adja a hátteret / keretszínt */
}

/* ---- Kártyarács: „Mit írjon a levelébe?" ---- */

.kapcsolat-kartya-blokk__cim {
  font-size: clamp(1.1rem, 2vw + 0.3rem, 1.35rem);
  font-weight: 700;
  color: var(--szin-elsodleges);
  text-align: center;
  margin-bottom: 0.5rem;
}

.kapcsolat-kartya-blokk__bevezeto {
  font-size: 0.95rem;
  color: var(--szin-szoveg-halvany);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Szemantikus lista kártyarácsként; mobil: 1 oszlop */
.kapcsolat-kartya-racs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Táblagép: 2 oszlop (≥ 600 px – egyezik a .galeria-racs breakpointjával) */
@media (min-width: 600px) {
  .kapcsolat-kartya-racs {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* Desktop: 3 oszlop (≥ 900 px – egyezik a .galeria-racs breakpointjával) */
@media (min-width: 900px) {
  .kapcsolat-kartya-racs {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Kártya (<li>) */
.kapcsolat-kartya {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.25rem 1.5rem;
  background-color: var(--szin-feher);
  border: 1px solid rgba(45, 106, 79, 0.12);
  border-radius: 12px;
  overflow-wrap: break-word;
  transition: box-shadow var(--atm-kozepes), transform var(--atm-kozepes);
}

.kapcsolat-kartya:hover {
  box-shadow: 0 8px 28px rgba(45, 106, 79, 0.18);
  transform: translateY(-3px);
}

/* Jelvény: kerek keret az ikonnak */
.kapcsolat-kartya__jelveny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(45, 106, 79, 0.1);
  color: var(--szin-elsodleges);
  flex-shrink: 0;
}

/* Kártyacím */
.kapcsolat-kartya__cim {
  font-size: 1rem;
  font-weight: 700;
  color: var(--szin-szoveg);
  line-height: 1.3;
}

/* Kártya leíró szöveg */
.kapcsolat-kartya__szoveg {
  font-size: 0.9rem;
  color: var(--szin-szoveg-halvany);
  line-height: 1.6;
  margin: 0;
}

/* Megjegyzés a lista bővíthetőségéről */
.kapcsolat-kartya-blokk__megjegyzes {
  font-size: 0.88rem;
  color: var(--szin-szoveg-halvany);
  font-style: italic;
  text-align: center;
  margin-top: 1rem;
}

/* Csökkentett mozgás */
@media (prefers-reduced-motion: reduce) {
  .kapcsolat-link {
    transition: none;
  }
  .kapcsolat-kartya {
    transition: none;
  }
  .kapcsolat-kartya:hover {
    transform: none;
  }
}

/* ------------------------------------------------
   10. GALÉRIA / REFERENCIÁK SZEKCIÓ (TN-4)
   ------------------------------------------------ */

/* Szekció alap */
.galeria-szekcio {
  padding: var(--resz-pad);
  background-color: var(--szin-hatter);
}

/* Szekciófejléc (cím + bevezető szöveg) */
.szekcio-fejlec {
  text-align: center;
  margin-bottom: 2.5rem;
}

.szekcio-cim {
  font-size: clamp(1.6rem, 3vw + 0.5rem, 2.4rem);
  font-weight: 800;
  color: var(--szin-elsodleges);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.szekcio-leiras {
  font-size: clamp(0.95rem, 1.5vw + 0.4rem, 1.1rem);
  color: var(--szin-szoveg-halvany);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.65;
}

/* Galéria rács – mobil-első: 1 oszlop */
.galeria-racs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Táblagép: 2 oszlop (≥ 600 px) */
@media (min-width: 600px) {
  .galeria-racs {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* Desktop: 3 oszlop (≥ 900 px) */
@media (min-width: 900px) {
  .galeria-racs {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Galéria elem */
.galeria-elem {
  display: flex;
  /* A <li> és a benne lévő <button> egyforma magas legyenek */
}

/* Galéria gomb – az egész kép kattintható */
.galeria-gomb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--szin-placeholder-bg);

  /* Fókuszgyűrű törlése – a :focus-visible szabályba bízunk */
  outline: none;

  /* Aspect ratio: 3:2 (tájkép) – egységes rácsméretek */
  aspect-ratio: 3 / 2;

  /* Átmenet a hover effekthez */
  transition: box-shadow var(--atm-kozepes), transform var(--atm-kozepes);
}

.galeria-gomb:hover,
.galeria-gomb:focus-visible {
  box-shadow: 0 8px 28px rgba(45, 106, 79, 0.35);
  transform: translateY(-3px);
}

/* Fókuszgyűrű külön kezelve, hogy ne vágódjon le az overflow:hidden miatt */
.galeria-gomb:focus-visible {
  outline: 3px solid var(--szin-akcent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Galéria kép */
.galeria-kep {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--atm-kozepes), opacity var(--atm-kozepes);
}

.galeria-gomb:hover .galeria-kep,
.galeria-gomb:focus-visible .galeria-kep {
  transform: scale(1.04);
  opacity: 0.9;
}

/* Nagyító ikon overlay – hover/fókuszra bukkan elő */
.galeria-nagyito {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 58, 46, 0.5);
  color: var(--szin-feher);
  opacity: 0;
  transition: opacity var(--atm-kozepes);
  pointer-events: none;
}

.galeria-gomb:hover .galeria-nagyito,
.galeria-gomb:focus-visible .galeria-nagyito {
  opacity: 1;
}

/* ------------------------------------------------
   11. LIGHTBOX (TN-4) – külső könyvtár nélkül
   ------------------------------------------------ */

/* Lightbox alap – kezdetben rejtett */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Alapból rejtett: visibility+opacity kombináció – olvasható marad
     a DOM-ban a képernyőolvasónak, de aria-hidden="true" van rajta.
     JS állítja át a .lightbox--nyitva osztállyal és az aria-hidden-t. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--atm-kozepes), visibility var(--atm-kozepes);
}

/* Lightbox nyitott állapot */
.lightbox--nyitva {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Sötét háttér */
.lightbox__hatter {
  position: absolute;
  inset: 0;
  background: rgba(10, 24, 17, 0.92);
  cursor: pointer;
}

/* Tartalom doboz */
.lightbox__tartalom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  padding: 1rem;
}

/* Bezáró gomb */
.lightbox__bezar {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--szin-elsodleges);
  color: var(--szin-feher);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color var(--atm-gyors), transform var(--atm-gyors);
}

.lightbox__bezar:hover,
.lightbox__bezar:focus-visible {
  background-color: var(--szin-akcent);
  transform: scale(1.1);
}

.lightbox__bezar:focus-visible {
  outline: 3px solid var(--szin-akcent);
  outline-offset: 3px;
}

/* Lightbox kép */
.lightbox__kep {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 5rem);
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* Kép felirat */
.lightbox__felirat {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  text-align: center;
}

/* Lapozó gombok (előző / következő) */
.lightbox__lapozo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Minimum 44×44 px érintési célterület (WCAG 2.5.5) */
  width: 3rem;
  height: 3rem;
  padding: 0;

  background: rgba(26, 58, 46, 0.7);
  color: var(--szin-feher);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--atm-gyors), transform var(--atm-gyors);
}

.lightbox__lapozo:hover,
.lightbox__lapozo:focus-visible {
  background-color: var(--szin-akcent);
  transform: translateY(-50%) scale(1.1);
}

.lightbox__lapozo:focus-visible {
  outline: 3px solid var(--szin-akcent);
  outline-offset: 3px;
}

.lightbox__lapozo--elozo {
  left: 0.75rem;
}

.lightbox__lapozo--kovetkezo {
  right: 0.75rem;
}

/* Mobilon (< 600 px) kicsit kompaktabb elhelyezés */
@media (max-width: 599px) {
  .lightbox__lapozo--elozo {
    left: 0.25rem;
  }

  .lightbox__lapozo--kovetkezo {
    right: 0.25rem;
  }
}

/* ------------------------------------------------
   12. CSÖKKENTETT MOZGÁS – galéria és lightbox
   ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .galeria-gomb,
  .galeria-kep,
  .galeria-nagyito,
  .lightbox {
    transition: none;
  }

  .galeria-gomb:hover .galeria-kep,
  .galeria-gomb:focus-visible .galeria-kep {
    transform: none;
  }

  .galeria-gomb:hover,
  .galeria-gomb:focus-visible {
    transform: none;
  }
}

/* ------------------------------------------------
   12b. RÓLUNK SZEKCIÓ (TN-5)
   ------------------------------------------------ */

/* Szekció alap – fehér háttér, megkülönböztethető a galériától */
.rolunk-szekcio {
  padding: var(--resz-pad);
  background-color: var(--szin-feher);
}

/* Kétoszlopos elrendezés konténere –
   mobil-első: egyoszlopos, desktopon kétoszlopos */
.rolunk-tartalom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
}

/* Desktop (≥ 900 px): kétoszlopos, szöveg bal, kép jobb */
@media (min-width: 900px) {
  .rolunk-tartalom {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

/* ---- Bal oszlop: szöveg ---- */
.rolunk-szoveg {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Név – alcím stílusban, de nem h3, hogy a struktúra helyes maradjon */
.rolunk-nev {
  font-size: clamp(1.1rem, 2vw + 0.4rem, 1.35rem);
  font-weight: 700;
  color: var(--szin-elsodleges);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

/* Elválasztó vonal a név alatt */
.rolunk-nev::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background-color: var(--szin-akcent);
  border-radius: 2px;
  margin-top: 0.6rem;
}

/* Bemutatkozó szöveg */
.rolunk-bemutatkozas {
  font-size: clamp(0.95rem, 1.5vw + 0.3rem, 1.05rem);
  color: var(--szin-szoveg-halvany);
  line-height: 1.75;
  margin: 0;
}

/* CTA gomb a szöveg alatt.
   TN-11: ez volt a CTA-egységesítés mintája – a .btn--nav és a .hero__cta
   már ugyanezt a var(--szin-elsodleges)/var(--szin-elsodleges-sot) + fehér
   felirat kombinációt kapta (ld. ott a kontraszt-számítást). */
.btn--rolunk-cta {
  align-self: flex-start;
  background-color: var(--szin-elsodleges);
  color: var(--szin-feher);
  border: 2px solid var(--szin-elsodleges);
  padding: 0.8em 1.8em;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--atm-gyors),
              border-color var(--atm-gyors),
              box-shadow var(--atm-gyors),
              transform var(--atm-gyors);
}

.btn--rolunk-cta:hover,
.btn--rolunk-cta:focus-visible {
  /* WCAG AA: fehér szöveg var(--szin-cta-hover) #265a43 háttéren → 8,00:1
     kontraszt (≥ 4,5:1 ✓). TN-11: finomítva a korábbi --szin-elsodleges-sot
     #1a3a2e-ről (12,44:1 volt) egy visszafogottabb sötétedésre. Korábbi
     --szin-akcent (#52b788) csak 2,47:1-et adott – nem felelt meg. */
  background-color: var(--szin-cta-hover);
  border-color: var(--szin-cta-hover);
  box-shadow: var(--arnyek-gomb);
  transform: translateY(-2px);
}

.btn--rolunk-cta:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---- Jobb oszlop: fotó ---- */
.rolunk-foto-keret {
  border-radius: 12px;
  overflow: hidden;
  /* Minimális szépség: enyhe árnyék */
  box-shadow: 0 8px 32px rgba(45, 106, 79, 0.18);
  /* Mobilon a kép kerül alulra – grid sorrendet megtartjuk
     (szöveg előbb, kép utána a DOM-ban) */
}

.rolunk-foto {
  display: block;
  width: 100%;
  height: auto;
  /* 3:2 arány megőrzése – a width/height attribútumok (900x600) ezt garantálják */
  object-fit: cover;
  object-position: center;
  transition: transform var(--atm-kozepes);
}

.rolunk-foto-keret:hover .rolunk-foto {
  transform: scale(1.03);
}

/* ---- Statisztika blokkok ---- */
.rolunk-statisztikak {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(45, 106, 79, 0.15);
  padding-top: 2.5rem;
}

/* Mobilon (< 480 px): egymás alá kerülnek */
@media (max-width: 479px) {
  .rolunk-statisztikak {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Statisztika elem */
.rolunk-stat {
  display: flex;
  justify-content: center;
}

.rolunk-stat__belso {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  /* Vizuálisan kiemelve: zöldes háttér, lekerekített sarok */
  background-color: var(--szin-hatter);
  border: 1px solid rgba(45, 106, 79, 0.15);
  border-radius: 12px;
  padding: 1.1rem 1rem;
  width: 100%;
  transition: box-shadow var(--atm-kozepes), transform var(--atm-kozepes);
}

.rolunk-stat__belso:hover {
  box-shadow: 0 6px 20px rgba(45, 106, 79, 0.18);
  transform: translateY(-2px);
}

/* Nagy szám */
.rolunk-stat__szam {
  display: block;
  /* A szám szándékosan kisebb a szekciócímnél (.szekcio-cim max 2,4rem),
     hogy ne vonja el róla a figyelmet */
  font-size: clamp(1.5rem, 3vw + 0.3rem, 2rem);
  font-weight: 800;
  color: var(--szin-elsodleges);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Felirat a szám alatt */
.rolunk-stat__felirat {
  display: block;
  font-size: clamp(0.85rem, 1.5vw + 0.3rem, 0.95rem);
  color: var(--szin-szoveg-halvany);
  font-weight: 500;
  line-height: 1.3;
}

/* Csökkentett mozgás – rólunk szekció */
@media (prefers-reduced-motion: reduce) {
  .rolunk-foto,
  .rolunk-stat__belso,
  .btn--rolunk-cta {
    transition: none;
  }

  .rolunk-foto-keret:hover .rolunk-foto {
    transform: none;
  }

  .rolunk-stat__belso:hover {
    transform: none;
    box-shadow: none;
  }

  .btn--rolunk-cta:hover,
  .btn--rolunk-cta:focus-visible {
    transform: none;
  }
}

/* ------------------------------------------------
   12c. VÉLEMÉNYEK CAROUSEL (TN-6)
   A „Referenciáink" szekción belül, a galéria rács alatt jelenik meg.
   ------------------------------------------------ */

/* Blokk: elkülönítő elválasztó a galéria rácsától felül */
.velemenyek-blokk {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(45, 106, 79, 0.18);

  /* Vizuális elkülönítés: enyhén eltérő háttér (4. kritérium).
     A galeria-szekcio maga --szin-hatter (#f8f9f5), ezért itt
     a fehér hátteret alkalmazzuk – design tokenből, nem hardcode-olva. */
  background-color: var(--szin-feher);
  border-radius: 16px;
  padding: 3rem 2rem;
  margin-bottom: 0.5rem;
}

/* Szekciófejléc a véleményeknél – a galeria-szekcio .szekcio-fejlec mintáját örökli,
   extra margin nincs szükség, az örökölt 2.5rem érvényes */

/* ---- Carousel külső keret ---- */
.velemenyek-carousel {
  position: relative;
}

/* ---- Csúszka sáv (overflow: hidden vágja a nem látható kártyákat) ---- */
.velemenyek-csuszka {
  overflow: hidden;
}

/* ---- Vélemények lista: flex sor, JS tolja a translateX-szel ---- */
.velemenyek-lista {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;

  /* JS írja felül a translateX-et; smooth görgetés prefers-reduced-motion nélkül */
  transition: transform var(--atm-kozepes);
  will-change: transform;
}

/* Csökkentett mozgás: carousel átmenet leáll */
@media (prefers-reduced-motion: reduce) {
  .velemenyek-lista {
    transition: none;
  }
}

/* ---- Egy vélemény-elem (li) ----
   Mobil: 1 elem látszik (calc(100% - gap)),
   a kártyák szélessége a JS által beállított --velemenyek-per-oldal
   CSS custom property-ből számolódik.
   Alapértelmezés: mobilon max 2, de a flex-shrink:0 miatt 1 látszik
   a csúszkán egyszerre; JS kezeli a látható darabszámot. */

/* Kártyaszélesség számítása (szinkronban a JS kartyakSzama() függvénnyel):
   - Mobil (< 600 px):    1 kártya látszik → 100%
   - Tablet (600–899 px): 2 kártya látszik → calc(50% - 0.75rem)
   - Asztali (≥ 900 px):  3 kártya látszik → calc(33.333% - 1rem)

   A CSS flex-basis és a JS breakpointok szándékosan egyeznek meg,
   hogy az offsetLeft-alapú eltolásszámítás mindig pontos legyen. */

.velemeny-elem {
  flex: 0 0 100%;   /* Mobil alap: 1 kártya */
  min-width: 0;     /* Flex shrink bug megelőzés */
}

@media (min-width: 600px) {
  .velemeny-elem {
    flex: 0 0 calc(50% - 0.75rem);   /* Tablet: 2 kártya */
  }
}

@media (min-width: 900px) {
  .velemeny-elem {
    flex: 0 0 calc(33.333% - 1rem);  /* Asztali: 3 kártya */
  }
}

/* ---- Vélemény kártya ---- */
.velemeny-kartya {
  background-color: var(--szin-hatter);
  border: 1px solid rgba(45, 106, 79, 0.12);
  border-radius: 12px;
  padding: 1.75rem 1.5rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  /* Enyhe árnyék a kartya kiemeléshez */
  box-shadow: 0 2px 10px rgba(45, 106, 79, 0.07);
  transition: box-shadow var(--atm-kozepes), transform var(--atm-kozepes);
}

.velemeny-kartya:hover {
  box-shadow: 0 6px 22px rgba(45, 106, 79, 0.16);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .velemeny-kartya {
    transition: none;
  }
  .velemeny-kartya:hover {
    transform: none;
    box-shadow: 0 2px 10px rgba(45, 106, 79, 0.07);
  }
}

/* ---- Dekoratív nyitó idézőjel (2. kritérium) ----
   CSS ::before pseudo-elemmel, aria-hidden a markupban nem kell
   (a ::before nem jelenik meg az akadálymentességi fában),
   de vizuálisan nagy, zöld „ " karakterként jelenik meg. */
.velemeny-idezet {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.velemeny-idezet::before {
  content: "\201C";   /* Nyitó, „göndör" idézőjel */
  display: block;
  font-size: 4rem;
  line-height: 1;
  color: var(--szin-akcent);
  opacity: 0.55;
  margin-bottom: 0.25rem;
  font-family: Georgia, "Times New Roman", serif;
  /* aria-hidden nem szükséges ::before-on – a böngészők alapból nem
     közvetítik a CSS-tartalom-karaktereket a képernyőolvasónak,
     kivéve ha az content értékét valódi szövegre állítjuk. */
  pointer-events: none;
  user-select: none;
  /* A spec szerint a ::before aria-hidden nem alkalmazható direkt,
     de a CSS-generált tartalom alapból nem kerül az acc. tree-be. */
}

/* ---- Vélemény szöveg ---- */
.velemeny-szoveg {
  font-size: clamp(0.9rem, 1.5vw + 0.3rem, 1rem);
  color: var(--szin-szoveg-halvany);
  line-height: 1.7;
  margin: 0 0 1.25rem;
  flex: 1;
}

/* ---- Lábléc: név + település ---- */
.velemeny-labalj {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-top: 1px solid rgba(45, 106, 79, 0.12);
  padding-top: 1rem;
  margin-top: auto;
}

.velemeny-nev {
  font-style: normal;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--szin-elsodleges);
}

.velemeny-telepules {
  font-size: 0.85rem;
  color: var(--szin-szoveg-halvany);
  font-weight: 500;
}

/* ---- Navigációs gombok (előző/következő) ---- */
.velemenyek-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.velemenyek-gomb {
  display: flex;
  align-items: center;
  justify-content: center;

  /* Diszkrétebb méret: 2.25rem (36px) – kicsi, de billentyűzettel és
     érintőképernyőn is használható (érintési célterület elegendő).
     Fehér szöveg mélyzöld háttéren: kontraszt 10,65:1 (WCAG AA ✓). */
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;

  background-color: var(--szin-elsodleges);
  color: var(--szin-feher);
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--atm-gyors),
              border-color var(--atm-gyors),
              transform var(--atm-gyors);
}

.velemenyek-gomb:not(:disabled):hover,
.velemenyek-gomb:not(:disabled):focus-visible {
  background-color: var(--szin-akcent);
  border-color: var(--szin-akcent);
  transform: scale(1.1);
}

.velemenyek-gomb:not(:disabled):focus-visible {
  outline: 3px solid var(--szin-akcent);
  outline-offset: 3px;
}

.velemenyek-gomb:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .velemenyek-gomb {
    transition: none;
  }
  .velemenyek-gomb:not(:disabled):hover,
  .velemenyek-gomb:not(:disabled):focus-visible {
    transform: none;
  }
}


/* ------------------------------------------------
   13. LÁBLÉC
   ------------------------------------------------ */
.site-footer {
  background-color: var(--szin-elsodleges-sot);
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.875rem;
}

/* ------------------------------------------------
   14. AKADÁLYMENTESSÉGI SEGÉD
   Képernyőolvasóknak szóló, vizuálisan rejtett szöveg
   ------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------
   15. CSÖKKENTETT MOZGÁS (prefers-reduced-motion)
   F-5: A 0.01ms trükk helyett explicit animation:none és végállapot beállítva,
        hogy ne villanjon meg semmi.
   ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  /* Hero háttér zoom animáció leállítva, végállapot explicit */
  .hero__bg {
    animation: none;
    transform: scale(1);
  }

  /* Szöveges fade-in animációk leállítva, végállapot explicit */
  .hero__title,
  .hero__subtitle,
  .hero__cta,
  .hero__badges {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Görgetési nyíl bounce leállítva, végállapot explicit */
  .hero__scroll-hint {
    animation: none;
    transform: translateX(-50%) translateY(0);
  }
}

/* ------------------------------------------------
   16. GALÉRIA BŐVÍTÉS – ÁLLÓ SOROK + „VOLT–LETT" BLOKK (TN-10)
   ------------------------------------------------ */

/* ---- JS nélküli fallback (a galéria és a „volt–lett" blokk
   tartalma adatvezérelt, JS-ből épül fel – ld. js/referenciak.js) ---- */
.js-fallback-uzenet {
  font-size: 0.95rem;
  color: var(--szin-szoveg-halvany);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.js-fallback-galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}

.js-fallback-kep {
  display: block;
  width: 220px;
  max-width: 45vw;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(45, 106, 79, 0.18);
}

/* ---- Egységes függőleges ritmus a galéria sorok között ----
   Az álló soroknak nincs külön feliratuk (TN-10), ezért a sorok közti
   térközt maga a rács adja. A térköz megegyezik az adott töréspont
   grid `gap` értékével, így a három sor egyetlen, folytonos rácsként
   olvasható – nincs sem lyuk, sem összecsúszás a sorok között. */
.galeria-racs + .galeria-racs {
  margin-top: 1rem;
}

@media (min-width: 600px) {
  .galeria-racs + .galeria-racs {
    margin-top: 1.25rem;
  }
}

@media (min-width: 900px) {
  .galeria-racs + .galeria-racs {
    margin-top: 1.5rem;
  }
}

/* ---- Álló (3:4) galéria rács – NEM vág, a teljes kép látszik ---- */
.galeria-racs--allo {
  /* Mobil és tablet (≥600px is öröklődik alapból 2 oszlopra a bázisból,
     de itt explicit módon adjuk meg, hogy független legyen a fekvő rács
     breakpointjaitól): 2 oszlop */
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .galeria-racs--allo {
    /* Desktopon 4 oszlop (a fekvő rács 900px-en 3 oszlopra vált – az álló
       soroknak saját, 4 oszlopos elrendezése van) */
    grid-template-columns: repeat(4, 1fr);
  }
}

.galeria-racs--allo .galeria-gomb {
  /* 3:4 arány (1200×1600 álló referenciafotók) */
  aspect-ratio: 3 / 4;
}

.galeria-racs--allo .galeria-kep {
  /* "A verzió": a kép NEM vágódik – a teljes álló fotó látszik,
     a keret pontosan a kép arányát követi (aspect-ratio: 3/4 fent),
     így a contain és a cover vizuálisan egyenértékű, de contain
     akkor is biztonságos marad, ha egy kép mégsem pontosan 3:4. */
  object-fit: contain;
}

/* ------------------------------------------------
   16b. „VOLT–LETT" CSÚSZKÁS BLOKK
   ------------------------------------------------ */

/* Blokk – hasonló vizuális elkülönítés, mint a .velemenyek-blokk-nál */
.voltlett-blokk {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(45, 106, 79, 0.18);
  background-color: var(--szin-feher);
  border-radius: 16px;
  padding: 3rem 2rem;
  margin-bottom: 0.5rem;
}

/* Rács – mobil: 1 oszlop; tablettől (≥600px): 2×2 */
.voltlett-racs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-items: center;
}

@media (min-width: 600px) {
  .voltlett-racs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Kártyánként max. ~420px, középre igazítva */
.voltlett-elem {
  width: 100%;
  max-width: 420px;
}

.voltlett-kartya {
  width: 100%;
}

/* Keret: a két réteg (előtte/utána) pozicionálási kontextusa.
   A --voltlett-x custom property (0%–100%) a választóvonal helye a keret
   BAL szélétől mérve – a JS állítja (js/referenciak.js). Alapértéke 0%,
   ami a teljes UTÁNA (kész) nézetet jelenti; a CSS fallback is 0%, ha
   valamiért a JS nem futna le. */
.voltlett-kereten {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(45, 106, 79, 0.18);
  background-color: var(--szin-placeholder-bg);
  cursor: ew-resize;
  touch-action: none;    /* a húzás közben ne görgessen az oldal */
  user-select: none;
  --voltlett-x: 0%;
}

/* Egy réteg = egy kép + a hozzá tartozó felirat. A felirat így a képéhez
   TAPAD: a felső réteget a clip-path a feliratával együtt vágja. */
.voltlett-reteg {
  position: absolute;
  inset: 0;
}

.voltlett-reteg--elotte {
  z-index: 1;
}

/* Az UTÁNA réteg alapból (0%) teljesen fedi az ELŐTTE réteget.
   A clip-path a --voltlett-x érték alapján BALRÓL vágja le, ezért
   balról jobbra húzva a BAL oldalon tárul fel az ELŐTTE réteg – és
   vele a bal felső sarokban lévő „ELŐTTE" felirat. Ugyanez a vágás
   takarja el fokozatosan a jobb felső „UTÁNA" feliratot. */
.voltlett-reteg--utana {
  z-index: 2;
  clip-path: inset(0 0 0 var(--voltlett-x, 0%));
}

/* Mindkét réteg képe azonos kivágású és méretű: pontosan ugyanaz a keret
   (aspect-ratio: 3/4) és object-fit szabja meg mindkettőt. */
.voltlett-kep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* ---- „ELŐTTE" / „UTÁNA" pill-címkék – fix pozíció a saját rétegük
   sarkában; nem animálódnak és nem mozognak külön, kizárólag a rétegek
   vágódása fedi el / tárja fel őket ---- */
.voltlett-cimke {
  position: absolute;
  top: 0.75rem;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--szin-feher);
  /* var(--szin-elsodleges-sot) = #1a3a2e, ~85%-os átlátszóság */
  background-color: rgba(26, 58, 46, 0.85);
  pointer-events: none;
}

.voltlett-cimke--elotte {
  left: 0.75rem;
}

.voltlett-cimke--utana {
  right: 0.75rem;
}

/* ---- Csúszka (fogantyú + húzható sáv) ---- */
.voltlett-csuszka {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--voltlett-x, 0%);
  transform: translateX(-50%);
  z-index: 4;
  width: 2.75rem;             /* 44px – érintési célméret */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: ew-resize;
  touch-action: none;
  outline: none;              /* a fókuszgyűrűt a .voltlett-fogantyu kapja */
}

/* Függőleges elválasztó vonal a csúszka pozíciójában */
.voltlett-csuszka::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background-color: var(--szin-feher);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Kör alakú fogantyú – a lightbox gombjainak interakciós mintáját követi */
.voltlett-fogantyu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;              /* 44px */
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--szin-feher);
  color: var(--szin-elsodleges);
  border: 2px solid var(--szin-akcent);
  box-shadow: var(--arnyek-gomb);
  transition: transform var(--atm-gyors), box-shadow var(--atm-gyors);
}

.voltlett-csuszka:hover .voltlett-fogantyu {
  box-shadow: var(--arnyek-gomb-hover);
  transform: scale(1.08);
}

/* Látható fókuszgyűrű – a sitewide minta szerint (3px, offset 3px),
   a fogantyún jelenik meg (nem a teljes magas sávon), hogy vizuálisan
   a kerek fogantyút kösse körbe. */
.voltlett-csuszka:focus-visible .voltlett-fogantyu {
  outline: 3px solid var(--szin-akcent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .voltlett-fogantyu {
    transition: none;
  }
  .voltlett-csuszka:hover .voltlett-fogantyu {
    transform: none;
  }
}