/* ==========================================================================
   ORWAK – Bálázógépek
   Figma: node 678:1296 (1440 × 5238)
   style.css → pages.css → ez a fájl

   A Figma-koordináták a 1440-es artboardról jönnek. Vízszintesen SEMMI nem
   mérődik az oldalszéltől: minden a .container tartalomoszlopához igazodik,
   vagy --gut-ból származik. Ahol a tervben behúzás van (a terméknégyzet 108,
   az előnysáv 102, a kapcsolat 108/109 px-re kezdődik a tartalomoszlop bal
   szélétől), ott min(px, %) a behúzás, hogy szűkebb nézetben arányosan
   fogyjon el, ne lökje ki a rácsot.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero

   A terv hero-geometriája eltér a márkaszervizétől: a sáv 850 magas, a fotó
   571-ig tart, a sötét panel 327-től indul és a hero aljáig ér (a Figmában
   589 magas, de a hero frame 850-nél elvágja — ezért 523 a kódban).

   A hero mögötti háttér itt --bg-alt: a tervben a fotó alatti, panelen kívüli
   jobb sáv is #efeeee, egybefüggően a következő szekcióval.
   -------------------------------------------------------------------------- */
.bg-hero {
  --phero-h:          850px;
  --phero-photo-h:    571px;
  --phero-panel-top:  327px;
  --phero-panel-h:    523px;
  --phero-panel-w:    841px;
  background: var(--bg-alt);
}

/* A panel tartalma NEM függőlegesen középen ül (mint a márkaszervizen):
   a lead 425-nél kezdődik, a gomb 607-nél, alul pedig a kivágott óriáscím. */
.bg-hero .phero__panel {
  justify-content: flex-start;
  gap: 32px;
  padding-top: 98px;
  padding-bottom: 0;
  overflow: hidden;          /* az óriáscímet a panel alja vágja el — így a terv */
}
.bg-hero .phero__panel .btn { margin-top: 0; }

/* KÖZÖS HIBA, itt csak a saját heróra orvosolva (lásd a záró jelentést).
   A pages.css `.phero__panel`-je `padding: 28px var(--gut)`-tal áll, a
   SZÉLESSÉGE viszont szintén gut-ból nő: `calc(var(--gut) + 841px)`. A gutter
   így kétszer kerül levonásra, és a panel belső doboza a viewport-tal együtt
   FOGY, nem nő:

     1440 → 924 − 83 − 83   = 758  (rendben)
     1920 → 1164 − 323 − 323 = 518  (a 509-es lead épp befér)
     2560 → 1484 − 643 − 643 = 198  (a lead 6 sor helyett 18-ra tört, a
                                     BÁLÁZÓGÉPEK vízjelet pedig lenyomta a
                                     panel overflow:hidden éle alá)

   A panel jobb szélén nincs szükség gutterre: a szöveg mértékét a max-width
   adja (509), nem a panel jobb éle. 24px-es belső ráhagyással 1440-en és
   1920-on egyetlen sortörés sem mozdul (758 → 817, illetve 518 → 817), 2560-on
   viszont a hero visszaáll a tervbeli hat sorra.
   900px alatt a panel folyó elrendezésben, teljes szélességen áll — ott a
   szimmetrikus gutter a helyes, ezért a felülírás onnantól nem érvényes. */
@media (min-width: 901px) {
  .bg-hero .phero__panel { padding-right: 24px; }
}
/* A Figma szövegdobozának pontos szélessége (678:1308 → 509). Korábban 516 volt,
   hogy a Figtree-vel is hat sor legyen; Effrával a 509 is hat sort ad (mérve:
   150px magas blokk), tehát a ráhagyás visszavonva. */
.bg-hero .phero__lead { max-width: 509px; }

/* Az oldal h1-e. A tervben 108px-es, 40%-os fehér vízjel a panel alján,
   a betűk talpvonala pontosan a panel alsó éle. */
.bg-hero__ghost {
  order: 1;                  /* a forrásban elöl (h1), a panelban alul */
  margin: auto 0 -15px;      /* margin-top:auto tolja a panel aljára */
  font-size: 108px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  /* 678:1309: fehér, a kitöltés 57%-os, a rétegé 70% → eredőben 0.4. */
  color: rgba(255, 255, 255, .4);
  /* a tervben 0% a betűköz, nem a globális .2px (mérve: 742 vs 744 px) */
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* A gépek kivágott PNG-je. Jobbra a tartalomoszlop széléhez horgonyozva
   (a tervben 7px-re annak jobb szélétől), nem az ablak széléhez. */
.bg-hero__machines {
  position: absolute;
  top: 195px;
  right: calc(var(--gut) + 7px);
  width: min(707px, 50%);
  height: auto;
  max-width: none;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   2. Gomb

   A tervben minden gomb 193px széles, a felirat a pillben középen, a nyíl
   jobbról 17px-re rögzítve — ezért a nyíl kikerül a szövegfolyamból.
   -------------------------------------------------------------------------- */
.bg-btn {
  position: relative;
  width: 193px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.bg-btn .btn__arrow {
  position: absolute;
  right: 17px;
  top: 50%;
  margin-top: -9px;
}

/* --------------------------------------------------------------------------
   3. Főbb jellemzők (bevezető, két hasáb)

   A szekció háttere a hero alatt folytatódik: a tervben egy 569→1516-ig tartó
   #efeeee téglalap fut a fotó és a panel mögött.
   -------------------------------------------------------------------------- */
.bg-intro {
  --psec-gap: 76px;
  background: var(--bg-alt);
  /* A tervben a #efeeee sáv a pipás lista alatt 47px-cel ér véget (a lista alja
     1469, a sáv alja 1516). A 23px-es érték a hiányzó Effra Light 300 miatt volt
     itt: a Regularral a pipás lista egy sorral hosszabbra tört. Az Effra Light
     megjött, a lista most pontosan 168 magas (= a Figma 678:1301), tehát a
     kompenzáció VISSZAVONVA — 47px a tervbeli érték. */
  padding-bottom: 47px;
}

.bg-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 841fr) minmax(0, 409fr);
  column-gap: 24px;
  align-items: start;
}

/* A törzsszöveg a közös .prose (18/24/300, --prose-lh alapérték) — a bekezdésköz
   viszont a tervben 11px, nem 22, ezért --prose-gap. A korábbi 764/845 ráhagyás a
   Figtree-hez készült, Effrával nem kell.

   A bevezető mértéke a Figma szövegdobozából jön (678:1300 → 760): két sor, ahogy
   a tervben.

   A törzsszöveg dobozát NEM a Figma 839-es szélessége adja. A tervben ez a
   bekezdés KÉZZEL van tördelve (678:1302 hat darab `\n`-t tartalmaz), ezért ül
   nyolc sorban — a leghosszabb tervbeli sora viszont Effra Light 300/18/0.2-vel
   mérve csak 743px. A 839-es dobozban ugyanez a szöveg folyó tördeléssel hét
   sorra megy (mérve: 168 helyett 192), és ezzel a szekció alja, majd az egész lap
   24px-cel a terv fölé csúszik. 777px-en a szöveg magától nyolc sor, a rag pedig
   a tervbeli 743-hoz simul. A nyolcsoros ablak mérve 739–815px, tehát a 777
   mindkét irányban 38px tartalékkal áll — nem hajszálon múlik.
   (A tervbeli `hulladék-\nkezelésből` kézi elválasztás volt, nem kötőjeles szó:
   a HTML-ben `hulladékkezelésből` áll.) */
.bg-intro__copy { --prose-gap: 11px; }
.bg-intro__lead { max-width: 760px; }
.bg-intro__body { max-width: 777px; }

/* A Figma szövegdoboz 31px magas (678:1299), nem 24 — a 24-es sormagasság a
   címsor alapvonalát 8px-cel a terv fölé vitte, ráadásul 1.0-s sormagasság
   magyar szövegen az Ő/Ű kettős ékezetét vágja. 31/24 = 1.29, a következő blokk
   ezért 24 helyett 17px-re jön (31 + 17 = 48, ugyanaz a végpont). */
.bg-intro__h {
  margin-top: 76px;
  font-size: 24px;
  line-height: 31px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .2px;
}

.bg-checks {
  margin-top: 17px;
  list-style: none;
  max-width: 841px;
}
/* Az Effra Light 300 megérkezésével a lista pontosan a tervbeli hét sor
   (mérve: 48+24+24+48+24 = 168 = a Figma 678:1301 magassága). A korábbi,
   Regularral mért nyolcadik sor és a miatta beépített kompenzáció megszűnt. */
.bg-checks li {
  position: relative;
  padding-left: 20px;   /* a tervben a ✓ 83-nál, a szöveg 103-nál kezdődik */
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  color: var(--text);
}
/* Az Effrában nincs U+2713, ezért a pipa a rendszer tartalék betűjéből jön, és
   ott hajszálvékony. A tervben vastag, tömör pipa látszik (a Figma szintén
   tartalék glifából rajzolja) — 700-as vastagsággal áll vissza ez a súly. */
.bg-checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--orange);
}

/* Ugyanaz, mint a .bg-intro__h-nál: a Figma doboz 31 magas (678:1298). */
.bg-aside__h {
  font-size: 24px;
  line-height: 31px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
}

.bg-facts {
  margin-top: 17px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 23px;
}
/* Az ikonok a tervben mind ugyanarra a függőleges tengelyre (a blokk bal
   szélétől 32,5px) vannak igazítva, a szöveg 109-nél kezdődik. */
.bg-fact {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  column-gap: 44px;
  align-items: center;
}
.bg-fact img { justify-self: center; }
.bg-fact p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
}
.bg-fact p span { font-weight: 400; }

/* --------------------------------------------------------------------------
   4. Termékrács

   A style.css .prod kártyája, keskenyebb dobozzal: a tervben 191px széles a
   kártya (a főoldalon 225), a képkeret 161×216 (a főoldalon 195×214).

   A tervben a képkeret egy 20%-os fekete fátyollal sötétített, kivágott
   jelenetfotó. A kártyákra azóta az ügyfél saját, alfa-csatornás termékfotói
   kerültek (.prod__media--photo, világos alap + contain), ezért a fill-crop
   transzform és a fátyol KIKERÜLT: mindkettő felülírta volna a közös
   komponenst — a crop 208%-ra nagyította és levágta volna a kivágott gépet,
   a fátyol pedig szürkére fogta volna a világos alapot.
   -------------------------------------------------------------------------- */
.bg-prods { --psec-gap: 74px; }

.bg-grid {
  margin-top: 29px;
  margin-left: min(108px, 8.5%);
  max-width: 842px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 26px;
}
.bg-grid .prod { flex: none; }
/* A képkeret magassága az arányból jön, tehát a kártyaszélesség hajtja. A
   négyoszlopos rács ezért végig marad, és csak akkor fogy oszlopra, amikor a
   keret a tervbeli 161×216 alá esne — kétoszlopos tabletnézetben egy kártya
   324×435-re hízna, ami a terv 2,7-szerese. Töréspontok lent. */
.bg-grid .prod__media {
  margin-top: 16px;
  width: auto;
  height: auto;
  aspect-ratio: 161 / 216;
}

/* --------------------------------------------------------------------------
   5. Előnysáv

   Teljes szélességű #efeeee sáv. A távolságot margóval, nem paddinggal tartja,
   hogy a háttér tényleg csak a sávot fesse — a szekció doboza így pontosan ott
   kezdődik, ahol a tervben (3506).
   -------------------------------------------------------------------------- */
.bg-benefits {
  margin-top: 78px;
  background: var(--bg-alt);
  padding: 40px 0 39px;
}
.bg-benefits__title {
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
}

.bg-benefits__grid {
  margin-top: 28px;
  margin-left: min(102px, 8%);
  max-width: 1055px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 27px;
}
.bg-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Az öt ikon 76 és 95px között váltakozik; a tervben a középvonaluk közös,
   ezért fix magasságú dobozban, függőlegesen középre igazítva ülnek. */
.bg-benefit__icon {
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-benefit p {
  margin-top: 16px;
  font-size: 18px;
  line-height: 23px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: .2px;
  /* magyar összetett szavak: a „hulladékkezelés" nem fér ki a keskeny hasábba */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --------------------------------------------------------------------------
   6. Kapcsolat

   A tervben térkép + egyhasábos űrlap, fölöttük két elérhetőség-oszlop.
   Az űrlapmezők a style.css .contact-form/.field komponensei, csak a rács
   egyoszlopos és a sorköz 27 (a főoldalon 24).
   -------------------------------------------------------------------------- */
.bg-contact__title {
  font-size: 50px;
  line-height: 61px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
}

/* A tervben a jobb oszlop ikonja 842-nél kezdődik, azaz a bal oszlop OSZTÁSKÖZE
   651px — a 24px-es rés ennek a RÉSZE, nem jön hozzá. Ezért a bal hasáb 627fr:
   627 + 24 (rés) = 651, így a jobb oszlop 1440-en pontosan 842-nél indul, és
   közben marad valódi rés a két hasáb között minden szélességen. */
.bg-contact__top {
  margin-top: 49px;
  padding-left: min(108px, 8.5%);
  display: grid;
  grid-template-columns: minmax(0, 627fr) minmax(0, 515fr);
  column-gap: 24px;
  align-items: start;
}
/* A tervben az ikon és a felirat nem egy 12px-es réssel követi egymást, hanem
   közös 30px-es ikonoszlop tartja a feliratokat egy vonalban — a három ikon
   mérete ugyanis eltér (16×20, 18×18, 20×16). */
.bg-contact .contact-info { gap: 27px; padding-top: 0; }
.bg-contact .contact-info__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.bg-contact .contact-info__item img { margin-top: 2px; }
.bg-contact .contact-info__item a:hover { color: var(--orange); }

.bg-contact__grid {
  margin-top: 51px;
  margin-left: min(109px, 8.6%);
  max-width: 1059px;
  display: grid;
  grid-template-columns: minmax(0, 623fr) minmax(0, 410fr);
  column-gap: 26px;
  align-items: start;
}
.bg-contact__map {
  aspect-ratio: 623 / 494;
  overflow: hidden;
  background: #e8e8e8;
}
.bg-contact__map img { width: 100%; height: 100%; object-fit: cover; }

.bg-contact__form {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 27px;
}
.bg-contact__form .field { gap: 5px; }
/* A terv jelölőnégyzete 13,33px, a rés 8,67. A felirat betűköz-nullázása a
   Figtree miatt kellett — Effrával a felirat a globális .2px-es betűközzel
   372,4px (a tervben 373), a hasábban 389px a hely, tehát elfér: visszavonva. */
.bg-contact__form .check { gap: 8px; }
.bg-contact__form .check input { width: 13px; height: 13px; }
.bg-contact__form .field--submit { margin-top: 13px; }

/* ==========================================================================
   RESZPONZÍV

   A pages.css hero-töréspontjait felül kell írni: ott a .phero változói egy
   755px-es heróra vannak hangolva, ez a lap 850-es.
   ========================================================================== */

@media (max-width: 1400px) {
  .bg-hero { --phero-panel-w: 700px; }
}

@media (max-width: 1200px) {
  .bg-hero {
    --phero-h:          800px;
    --phero-photo-h:    520px;
    --phero-panel-top:  300px;
    --phero-panel-h:    500px;
  }
  .bg-hero .phero__panel { padding-top: 60px; gap: 26px; }
  .bg-hero .phero__lead { max-width: 420px; }
  .bg-hero__ghost { font-size: 84px; margin-bottom: -12px; }
  /* keskenyebb ablakon a gépfotó nem érhet rá a lead szövegre */
  .bg-hero__machines { top: 150px; width: min(707px, 42%); }

  .bg-contact__title { font-size: 40px; line-height: 50px; }
  .bg-intro__h, .bg-aside__h, .bg-benefits__title { font-size: 22px; }
}

@media (max-width: 992px) {
  .bg-intro__grid { grid-template-columns: 1fr; row-gap: 44px; }
  .bg-benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bg-contact__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .bg-contact__form { max-width: 520px; }
}

/* A pages.css 900 alatt folyó elrendezésre váltja a herót: fotó, majd panel.
   A gépfotó ilyenkor nem lóghat rá semmire — a panel alá kerül, középre. */
@media (max-width: 900px) {
  .bg-hero .phero__panel {
    padding-top: 36px;
    padding-bottom: 36px;
    overflow: visible;
    gap: 24px;
  }
  /* Folyó elrendezésben a panel a teljes szélességet elfoglalja, ezért a
     desktop-hero 420px-es szövegmértéke itt már csak üres jobb oldalt hagyna.
     Vissza a pages.css közös olvasási mértékére. */
  .bg-hero .phero__lead { max-width: 626px; }
  .bg-hero__ghost {
    position: static;
    order: -1;
    font-size: 38px;
    line-height: 1.12;
    color: #fff;
    white-space: normal;
  }
  .bg-hero__machines {
    position: relative;
    inset: auto;
    align-self: center;
    width: min(100%, 460px);
    margin: 24px auto 32px;
  }
}

@media (max-width: 768px) {
  .bg-hero__ghost { font-size: 30px; }

  .bg-intro { --psec-gap: 44px; padding-bottom: 36px; }
  .bg-intro__h { margin-top: 44px; }

  .bg-prods { --psec-gap: 44px; }
  .bg-grid {
    margin-left: 0;
    margin-top: 24px;
    gap: 24px 20px;
  }

  .bg-benefits { margin-top: 44px; padding: 32px 0; }
  .bg-benefits__grid {
    margin-left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
  .bg-benefit p { font-size: 16px; line-height: 21px; }

  .bg-contact { --psec-gap: 44px; }
  .bg-contact__title { font-size: 30px; line-height: 1.2; }
  .bg-contact__title br { display: none; }
  .bg-contact__top {
    margin-top: 32px;
    padding-left: 0;
    grid-template-columns: 1fr;
    row-gap: 27px;
  }
  .bg-contact__grid { margin-top: 32px; margin-left: 0; }
  .bg-contact__form { max-width: none; }
}

/* A termékrács oszlopszáma úgy fogy, hogy a képkeret a tervbeli 161×216 közelében
   maradjon: 620-on három oszlop (~180px keret), 430 alatt kettő (~157px). */
@media (max-width: 620px) {
  .bg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Mozgáscsökkentés — ez a lap a style.css és a pages.css UTÁN tölt be.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}