/* ==========================================================================
   ORWAK – aloldalak közös váza
   style.css UTÁN töltendő be, csak az aloldalakon.

   Minden aloldal ugyanarra a vázra épül, ezért az itt lévő komponensek
   nem tartoznak egyetlen oldalhoz sem:

     .phero      oldal-hero: teljes szélességű fotósáv + sötét szövegpanel
     .psec       aloldal-szekció (a .section aloldali párja)
     .split      kép + szöveg sor, két irányban
     .prose      hosszú magyar folyószöveg
     .lede       narancs vonallal jelölt bevezető

   A fájl végén saját prefers-reduced-motion padló van: mivel ez a stíluslap a
   style.css UTÁN tölt be, a style.css végi padló nem érné el az itt deklarált
   átmeneteket.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Oldal-hero

   A Figma 1440-es artboardon: fotósáv 0→571, a sötét panel 327-től 428 magas
   és 924 széles, a hero teljes magassága tehát 755. A panel szélessége NEM
   924px fixen: 924 = oldalmargó (83) + 841, és a 841-es rész a tartalomoszlophoz
   tartozik. Ezért --gut + 841px, így 1920-on és 2560-on is ugyanott végződik a
   tartalomhoz képest, nem szakad el tőle.

   A szövegblokk a panelban FÜGGŐLEGESEN KÖZÉPEN ül. A tervben oldalanként más
   a felirat `top` értéke (a szöveg hossza miatt), de a blokk közepe mindig a
   panel közepe — egyetlen középre zárás minden oldalt visszaad.
   -------------------------------------------------------------------------- */
.phero {
  --phero-h:          755px;
  --phero-photo-h:    571px;
  --phero-panel-top:  327px;
  --phero-panel-h:    428px;
  --phero-panel-w:    841px;   /* a tartalomoszlopba nyúló rész, + --gut */

  position: relative;
  /* MIN-magasság, nem magasság. A terv 755px-e csak a terv szövegére és
     betűméretére igaz; ha a tartalom bármiért magasabb (böngésző-nagyítás,
     hosszabb bevezető, más tördelés), a rögzített doboz nem tud nőni, és a
     panel tartalma kilóg — az ügyfél pont ezt fényképezte le. A panel a
     felső padding után folyik, nem abszolút: így a szekció vele együtt nő. */
  min-height: var(--phero-h);
  padding-top: var(--phero-panel-top);
  background: var(--bg);
}

.phero__img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--phero-photo-h);
  overflow: hidden;
  background: #6d6d6d;
}
/* A Figma fill-crop értékei (a kép nagyítva és eltolva ül a keretben) oldalanként
   a saját stíluslapból jönnek --crop-h / --crop-t formában. Százalék, tehát
   reszponzív marad — fix px-ben megadva mobilon átfestene mindent. */
.phero__img img {
  position: absolute;
  left: 0;
  top: var(--crop-t, 0);
  width: 100%;
  height: var(--crop-h, 100%);
  max-width: none;
  object-fit: cover;
}

.phero__panel {
  position: relative;          /* folyó: a .phero padding-top-ja adja a 327-et */
  z-index: 1;                  /* a fotó fölött */
  width: calc(var(--gut) + var(--phero-panel-w));
  max-width: 100%;
  min-height: var(--phero-panel-h);   /* 428 a terv szerint — de nőhet */
  background: var(--dark);

  display: flex;
  flex-direction: column;
  justify-content: center;   /* a tervben a blokk a panel közepén ül */
  align-items: flex-start;
  /* A tervben a cím TETEJÉTŐL a bevezető TETEJÉIG pontosan 70px van — mind az öt
     mért aloldalon ugyanennyi —, és a cím doboza 41.82 magas. 70 − 41.82 = 28.18. */
  gap: 28px;
  /* BAL oldalt --gut (a tartalomoszlophoz igazít), JOBB oldalt FIX 40px.
     A --gut-ban lévő `100%` a .phero-ra (a teljes ablakra) oldódik fel, a panel
     szélessége viszont csak EGY gutterrel nő (--gut + 841): ha jobbra is --gut
     jön, a gutter kétszer vonódik le, és a szövegoszlop az ablakkal együtt
     FOGY, nem nő — 1920-on 518px, 2560-on 198px maradt a 841-ből. A cím három
     sorra tört, a bevezető keskeny csíkba — „fele szélességben van használva".
     Ugyanezt a hibát a termekeink.css és a balazogepek.css már külön-külön
     elhárította a saját heróján; itt a közös forrás javítva. */
  padding: 28px 40px 28px var(--gut);
}

.phero__title {
  font-size: 50px;
  /* A terv sormagassága 41.82px (0.836), a magyar padló viszont 1.12 — enélkül
     az Ő és Ű kettős ékezete TÖBBSOROS címnél a fölötte lévő sorba érne.
     Mindkettő teljesül: a SORDOBOZ marad 56px (a tördelés biztonságos), de a
     fölös vezetést negatív margóval kivesszük az elrendezésből, így a cím a
     környezetében 41.82px-et foglal — pontosan annyit, mint a tervben.
     (56 − 41.82) / 2 = 7.09 fent és lent.

     Enélkül a cím doboza 14px-cel magasabb, és mivel a blokk függőlegesen
     középre zárt, a bevezető és a gomb 4-6px-cel lejjebb csúszik MINDEN
     aloldalon — ezt jelezte az ügyfél hét külön megjegyzésben. */
  line-height: 1.12;
  margin-block: -7.09px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .2px;
  max-width: 734px;
}
.phero__lead {
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  /* A terv 70%-os fehéret kér. NEM `opacity`-vel: az `opacity` az egész elemre
     hat, és a belépő animáció végállapota felülírná. Alfás színnel ugyanaz az
     eredmény (#2c2c2c fölött 7.7:1), viszont animációtól független. */
  color: rgba(255,255,255,.7);
  max-width: 626px;
}
/* a gomb rését is a panel gap-je adja, külön margó nem kell */

/* --------------------------------------------------------------------------
   2. Aloldal-szekciók
   -------------------------------------------------------------------------- */
/* A terv szekcióközei egyenletesek: a márkaszerviz oldalon végig 78px választja
   el a blokkokat. Ezért a .psec CSAK felül tart távolságot — így két egymás
   utáni szekció köze 78 marad, nem 156. Az utolsó kap alul is. */
.psec { padding-top: var(--psec-gap, 78px); }
main > .psec:last-child { padding-bottom: var(--psec-gap, 78px); }
.psec--tight { --psec-gap: 48px; }
.psec--flush-top { padding-top: 0; }
.psec--alt { background: var(--bg-alt); padding-bottom: var(--psec-gap, 78px); }

.psec__title {
  font-size: 50px;
  line-height: 1.12;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
}
.psec__title + .psec__lead { margin-top: 22px; }
.psec__lead {
  font-size: 18px;
  line-height: 25px;
  font-weight: 300;
  color: var(--text);
  max-width: 950px;
}

/* Narancs függőleges vonallal jelölt bevezető — a terv végig ezzel emeli ki a
   nyitó bekezdéseket (footer, statisztikák, „Kérésre 24 órán belül…"). */
.lede {
  position: relative;
  padding-left: 17px;
}
.lede::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--lede-line, var(--rule));
}
.lede__title {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .2px;
}
.lede__title + * { margin-top: var(--lede-gap, 30px); }

/* --------------------------------------------------------------------------
   3. Kép + szöveg sor
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 625px) minmax(0, 625px);
  justify-content: space-between;
  align-items: center;
  gap: 26px;
}
.split--media-first > .split__media { order: -1; }
.split--end { align-items: end; }
.split--start { align-items: start; }
.split__media {
  overflow: hidden;
  background: #ddd;
  aspect-ratio: 625 / 408;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body > * + * { margin-top: 22px; }

/* --------------------------------------------------------------------------
   4. Folyószöveg
   -------------------------------------------------------------------------- */
/* Az aloldal-frame-ek törzsszövege a Figmában végig 18/24, nem 18/25 — nyolc
   soron ez már fél sor csúszás, ezért több oldal külön-külön felülírta.
   Változóban: az alap 24, a főoldal ritmusához .prose--airy kell. */
.prose {
  font-size: 18px;
  line-height: var(--prose-lh, 24px);
  /* Regular, NEM Light. Az aloldalak Figma-szövegcsomópontjai `Effra:Regular`-t
     írnak; a 300 addig volt ártalmatlan, amíg a Typekit-kitben nem is volt Light
     vágat, és a kérés a Regularra esett vissza. Amint a Light megjött, a
     törzsszöveg elvékonyodott. Öt .prose-t használó oldalból három egymástól
     függetlenül felülírta 400-ra a saját lapján — ez az alapértelmezés hibája
     volt, nem oldalanként eldöntendő kérdés. */
  font-weight: 400;
  color: var(--text);
  max-width: 900px;
}
.prose > * + * { margin-top: var(--prose-gap, 22px); }
.prose--airy { --prose-lh: 25px; }
.prose--tight { --prose-gap: 0px; }
.prose h2 {
  font-size: 30px;
  line-height: 1.12;
  font-weight: 500;
  color: var(--text);
  margin-top: 46px;
}
.prose h3 {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--text);
  margin-top: 34px;
}
.prose ul { list-style: disc; padding-left: 27px; }
.prose li + li { margin-top: 6px; }
.prose strong { font-weight: 700; }
.prose a { color: var(--orange); }

/* --------------------------------------------------------------------------
   5. Reszponzív

   A hero 900px alatt NEM abszolút pozicionált doboz többé. Három egymásra
   rétegzett réteg fix magasságban nem tud változó hosszúságú magyar szöveget
   megtartani: levágná a gomb alját vagy a címsor utolsó sorát. Ezért alatta
   folyó elrendezés: fotó fölül, panel alatta, mindkettő a tartalmához nő.
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .phero { --phero-panel-w: 700px; }
  .split { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 1200px) {
  .phero { --phero-h: 690px; --phero-photo-h: 520px; --phero-panel-top: 300px; --phero-panel-h: 390px; }
  .phero__title { font-size: 40px; }
  .psec__title { font-size: 40px; }
}

@media (max-width: 992px) {
  .psec { --psec-gap: 56px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split--media-first > .split__media { order: 0; }
  .prose h2 { font-size: 26px; margin-top: 36px; }
}

@media (max-width: 900px) {
  .phero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 76px;         /* a fix fejléc helye */
  }
  .phero__img {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  /* a kivágás visszaáll: a tervbeli nagyítás csak az 571px-es sávban van értelmezve */
  .phero__img img { --crop-h: 100%; --crop-t: 0; height: 100%; position: relative; }
  .phero__panel {
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 36px var(--gut);   /* teljes szélességen a gutter szimmetrikus */
    gap: 20px;
  }
  /* Folyó elrendezésben a sordoboz-trimmelés csak összenyomná a blokkot. */
  .phero__title { margin-block: 0; }
}

@media (max-width: 768px) {
  .phero__title { font-size: 30px; }
  .psec__title { font-size: 30px; }
  .psec { --psec-gap: 44px; }
  .prose, .psec__lead, .phero__lead { font-size: 17px; }
  /* magyar összetett szavak 380px alatt: a hosszú címsor kilóg az oszlopból,
     a lap lang="hu", tehát a böngésző rendesen el tudja választani */
  .phero__title, .psec__title { overflow-wrap: break-word; hyphens: auto; }
}

/* --------------------------------------------------------------------------
   Mozgáscsökkentés — ez a lap a style.css UTÁN tölt be, ezért a padlót itt is
   ki kell tenni, különben az itteni átmenetek átcsúsznának rajta.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   404 — nincs a tervben, mert nem tervezői kérdés: a Cloudflare Pages ismeretlen
   útvonalra 200-zal szolgálná ki az index.html-t, ha nincs 404.html. Az oldal a
   saját chrome-jából épül, kitalált tartalom nélkül.
   -------------------------------------------------------------------------- */
.e404 { min-height: calc(100vh - 76px - 422px); display: flex; align-items: center; }
.e404 .psec__lead { margin-top: 22px; }
.e404__links { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }