/* ==========================================================================
   ORWAK – Termékeink
   Figma: node 727:809 (1440 × 6666)
   style.css → pages.css → ez a fájl

   A lap három saját komponenst hoz:
     .phero--products   a hero, amiben a sötét panel ALATT végigfut egy
                        108px-es árnyékfelirat, és a fotó a panelre lóg rá
     .pbest             a „Termékek" szűrhető kártyasáv (a főoldali .prod-ot
                        használja újra, csak a szűrőpillek és a nyilak mások)
     .pcat              termékkategória-sor: 625-ös kép + szövegoszlop,
                        kettőnél narancs sávval a kép mögött
   ========================================================================== */

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

   A tervben a felső 1440×571-es sáv NEM fotó: egy rgba(0,0,0,.2) fátyol ül a
   lap háttere fölött, alatta üresen (Figma 727:818). Ugyanezt adja vissza a
   #c2c2c2 – a fotó a tervből hiányzik, nem a kódból.

   A panel 467-től 895-ig tart, tehát 60px-szel mélyebben kezdődik, mint a
   márkaszerviz oldalon; a szöveg pedig nem középen ül, hanem fölül, mert a
   panel alsó harmadát az árnyékfelirat foglalja.
   -------------------------------------------------------------------------- */
.phero--products {
  --phero-h:          895px;
  --phero-photo-h:    571px;
  --phero-panel-top:  467px;
  --phero-panel-h:    428px;

  /* A jobb oldali fotó RÁLÓG a panelra, tehát a panel szövegének el kell
     fogynia a fotó bal széle előtt. A fotó bal széle
     100% − --gut − min(624px, 46%), a szövegoszlop a --gut-tól indul, marad:

         100vw − 2×--gut − min(624px, 46vw) − 32px  (a 32 a levegő)

     1440-en és fölötte ez 618px, tehát a tervbeli 501-es leadet és az 500 körüli
     címet nem szűkíti – csak a 901–1120 közötti sávban, ahol a fotó és a
     szövegoszlop egymásra fut. Mérve: enélkül 901px-en 110px-nyi lead szöveget
     takart el a fotó, 993px-en 61px-nyit. */
  --phero-text-max: calc(100vw - 2 * var(--gut) - min(624px, 46vw) - 32px);
}

.phero--products .phero__img { background: #c2c2c2; }

.phero--products .phero__panel {
  justify-content: flex-start;
  /* A tervben a cím betűteste 559-nél kezdődik (mért érték a Figma renderből);
     a .phero__title 1.12-es magyar sormagassága 4px-szel feljebb tolná. */
  padding-top: 82px;
  /* A pages.css a panel MINDKÉT oldalára --gut-ot tesz. A --gut-ban lévő `100%`
     viszont a panel tartalmazó blokkjára (a teljes .phero-ra) oldódik fel, nem a
     tartalomoszlopra: 2560-on 643px, tehát a 1484px széles panelből 198px belső
     oszlop marad, és a szöveg kilóg a 428px-es panelből. A bal oldali --gut a
     helyes (a tartalomoszlophoz igazít), a jobb oldalinak viszont állandónak kell
     lennie. Közös hiba a pages.css-ben, itt csak erre az oldalra hárítom el. */
  padding-right: 40px;
  overflow: hidden;             /* a tervben az árnyékfelirat a panel alján elvágódik */
}

.phero--products .phero__title { max-width: min(626px, var(--phero-text-max)); }

/* A Figma node (727:1199) NEM ír betűközt — a testvér címen ott a
   `tracking-[0.2px]`, a leaden nincs —, a style.css törzse viszont .2px-et
   örökít ide. Hogy az „üres tracking = 0" olvasat helyes, azt az árnyékfelirat
   bizonyítja: .2px-szel 642px, 0-val 640, és a Figma pont 640-et mér.

   Amit ez NEM ad vissza: a tervbeli sortörést. A get_design_context szerint a
   lead négy sora négy külön bekezdés `whitespace-pre`-vel, azaz a tervező
   KÉZZEL tördelte — ezt CSS-ből nem lehet reprodukálni, `<br>`-rel meg nem is
   szabad (Lorem ipsum helyőrző, lásd a jelentést). Mért sorszélességek 0-val:
   470.1 / 496.9 / 469.2 / 379.1 px az 501-es dobozban; így a 3. és 4. sor
   szóra pontosan egyezik a tervvel, az 1–2. sor egy-egy rövid szóval hosszabb.
   .2px-szel egyik sem egyezett, a magasság mindkét esetben 4×25 = 100px. */
.phero--products .phero__lead  {
  max-width: min(501px, var(--phero-text-max));   /* Figma 727:1199 szövegdoboz */
  letter-spacing: 0;
}

/* A jobb oldali fotó a panelre lóg rá (Figma z-sorrend: a kép a panel után jön),
   és jobbról a tartalomoszlophoz igazodik – nem az ablak széléhez. */
.phero__aside {
  position: absolute;
  right: var(--gut);
  top: 505px;
  z-index: 2;
  width: 624px;
  max-width: calc(100% - var(--gut) * 2);
  height: 351px;
  object-fit: cover;
}

/* Árnyékfelirat: 108px, a panel aljára lógatva. A tervben a betűtest alja
   20px-szel a panel alá nyúlik, és ott vágódik el – ezt adja a negatív alsó
   margó (a panel padding-bottomja 28, tehát 28 + 20 = 48).

   NEM abszolút pozíciójú: a --gut belsejében lévő `100%` a tartalmazó blokk
   szélességére oldódik fel, ami egy abszolút gyerek esetén már a PANEL, nem az
   ablak – 1440-en 24px-et adna 83 helyett. A panel saját padding-inline-ja
   viszont az ablakhoz mér, ezért a felirat sima flex-elem, amit egy auto
   felső margó nyom a panel aljára. */
.phero__ghost {
  margin: auto 0 -48px;
  font-size: 108px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  /* A Figma node (727:822) nem ír betűközt, a style.css törzse viszont .2px-et
     örökít. Tíz betűn ez +2px: .2px-szel 642, 0-val 640 — a Figma 640-et mér. */
  letter-spacing: 0;
  color: rgba(255, 255, 255, .4);
  white-space: nowrap;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. „Termékek" – szűrhető kártyasáv

   A kártyák, a sáv és a nyilak a főoldal .prod / .products komponensei.
   Csak a szűrőpillek geometriája más (a tervben fix 167×43, kétsoros
   felirattal is), és a nyilak sötétek, nem fehérek.
   -------------------------------------------------------------------------- */
.pbest .filters {
  margin-top: 25px;
  gap: 17px;
}
.pbest .filters .pill {
  width: 167px;
  min-width: 0;
  height: 43px;
  padding: 0 8px;
  text-align: center;
  white-space: normal;          /* „Félautomata bálázógépek" a tervben is két sor */
  line-height: 18px;
}
.pbest .filters .pill--ghost { border-color: #818181; }

.pbest .products { margin-top: 32px; padding-bottom: 0; }

/* A kivágott termékfotók illesztése.

   A style.css `.prod__media--photo img` szabálya a TELJES 900×675-ös vásznat
   illeszti be `contain`-nel a 195×214-es dobozba. A gép viszont csak a vászon
   közepén, egy keskeny sávban van – mérve (alfa-határolódoboz):

       3075  x 335–564 (229)   y 47–627 (580)
       3110  x 322–577 (255)   y 47–627 (580)
       3115  x 322–578 (256)   y 47–627 (580)
       3120  x 300–599 (299)   y 47–627 (580)

   A `contain` szélességre illeszt (900/675 = 1.333 szélesebb, mint a doboz
   175/194 = 0.902), így a kép 175×131 lesz, a gép pedig ezen belül 44×113 px –
   a 195×214-es kártya területének 11%-a. A tervben (727:1289) a fotó kitölti a
   keretet. Ezért a képet a MAGASSÁGÁRA méretezem: a hasznos sáv (580/675) épp a
   doboz 194px-es belmagasságát adja ki, a kép 301×226 lesz, a gép 100×194 –
   a legszélesebb (3120) is 95px-nyi tartalékkal fér a 195-ös dobozba.

   Ez a képek jelenlegi vágásához igazodik. A tartós megoldás a PNG-k
   levágása az alfa-határolódobozukra, de az `assets/img/prod/` közös asset. */
.pbest .prod__media--photo img {
  inset: auto;
  left: 50%;
  top: 50%;
  width: auto;
  /* Nem fix px: a kártya 768 alatt 170×186-ra szűkül (style.css), és egy
     kőbe vésett 226px ott 8px-szel levágná a gép tetejét-alját. A 100% a
     .prod__media magassága, a −20px a levegő, a 675/580 pedig a vászon és a
     hasznos sáv aránya. 214-es dobozon 225.78px, 186-oson 193.2px. */
  height: calc((100% - 20px) * 675 / 580);
  padding: 0;
  transform: translate(-50%, -50%);
}
.pbest .prod:hover .prod__media--photo img { transform: translate(-50%, -50%) scale(1.05); }

/* A sáv oldalmargója a .products__viewport paddingja (style.css). Korábban itt a
   sínre volt áthelyezve, mert a Carousel a paddinggal együtt mérte a látható
   szélességet – a js/main.js Carousel.viewport() azóta a szülő TARTALOMdobozával
   számol, tehát a kerülőút fölösleges. Mért lépésszám mindkét változatban 1.

   A tervbeli sötét léptetők a közös .nav-arrows--dark osztályból jönnek (a
   markup viseli), az inaktív oldal 50%-át pedig a main.js .is-muted osztálya
   adja – így a bal nyíl az első lépés után visszakapja a teljes fedettséget. */

/* --------------------------------------------------------------------------
   3. „Tovább" pill

   192×38, középre zárt felirattal és jobb szélre kötött chevronnal. A
   .pill--white / .pill--orange a főoldalon széthúzott (space-between) és
   körös nyilat használ – ez a változat a tervnek megfelelően más.
   Ha több aloldalon is felbukkan, közös komponensbe való.
   -------------------------------------------------------------------------- */
.pmore {
  position: relative;
  width: 192px;
  min-width: 0;
  justify-content: center;
  /* Szimmetrikus, mert a tervben a felirat a PILL közepén ül, nem a chevron
     előtti maradékon: a 192-es pillben a „Tovább" 70–121 között van (Figma
     727:1381/1426/1449…), a közepe 95.5 – a pill közepe 96. A korábbi
     0 34px 0 20px 89-re húzta a feliratot, 7px-szel balra. A chevron abszolút,
     tehát nem tolja el; a felirat jobb széle 121, a chevron bal széle 162,
     41px a hézag. */
  padding: 0 20px;
  /* A terv minden „Tovább" felirata Effra Regular (a get_design_context
     `font-['Effra:Regular']`-t ad rájuk). A style.css törzse 300-at örökít, és
     mióta a Typekit-kitben VAN valódi Light vágat, a 300 mérhetően vékonyabb
     és 2,2%-kal keskenyebb, mint a 400 – korábban, Light hiányában, a böngésző
     ugyanazt a Regulart rajzolta, ezért nem látszott. */
  font-weight: 400;
}
.pmore .pill__chev { position: absolute; right: 20px; }

.pmore--orange {
  background: var(--orange);
  color: #fff;
  box-shadow: var(--shadow-pill);
}
.pmore--orange:hover { background: #c9441f; }
.pill--white.pmore:hover { color: var(--orange); }

/* --------------------------------------------------------------------------
   4. Termékkategória-sorok

   Mindegyik sor a pages.css .split rácsán ül (625 + 625, space-between), de
   a két oszlop NEM egymáshoz képest középre igazodik: a tervben a kép és a
   szövegblokk saját függőleges eltolást kap. Ezért align-items: start és
   soronkénti --media-top / --body-top.

   Két sor mögött narancs sáv fut, ami jobbra a tartalomoszlop széléig ér
   (calc(100% - var(--gut))), a kép pedig kilóg belőle.
   -------------------------------------------------------------------------- */
.pcat__inner { position: relative; }

.pcat__band {
  position: absolute;
  left: 0;
  right: var(--gut);
  top: var(--band-top, 0);
  bottom: var(--band-bottom, 0);
  background: var(--orange);
}

.pcat .container { position: relative; }

.pcat .split { align-items: start; }

/* A pages.css .split-je 26px hézagot tart, és 625+625+26 = 1276 nem fér el az
   1274-es tartalomoszlopban: a rács mindkét oszlopot 624-re húzza össze, amitől
   a 625/408-as arányú képek 407 magasak lesznek. Soronként 1px, hét soron át
   viszont már 7. A tervben a hézag pontosan 24 (a kép 707-nél végződik, a
   szövegoszlop 732-nél kezdődik = 1274 − 1250), ezért itt 24-re állítom.
   Csak az 1400 fölötti rácson: lejjebb a pages.css 1fr/1fr + 32px hézaga a
   szándékolt viselkedés, azt nem szabad felülírni. */
@media (min-width: 1401px) {
  .pcat .split { gap: 24px; }
}
.pcat .split__media {
  margin-top: var(--media-top, 0);
  background: #d9d9d9;
}
.pcat .split__body { margin-top: var(--body-top, 0); }

/* Narancs függőleges vonal: a tervben soronként más a magassága, és nem a
   teljes szövegblokkot kíséri – ezért nem a pages.css .lede-je. */
.pcat__text {
  position: relative;
  padding-left: 17px;
  max-width: calc(var(--body-w, 613px) + 17px);
}
.pcat__text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--rule-h, 131px);
  background: var(--rule-color, var(--rule));   /* mért: #ff5e15 a Figma renderben */
}

.pcat__title {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--cat-fg, var(--text));
}
.pcat__body {
  margin-top: 17px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: .2px;
  color: var(--cat-fg, var(--text));
}
/* A tervben a gomb bal széle a függőleges vonallal esik egybe (Figma x=732 ill.
   x=82), nem a 17px-szel behúzott szöveggel – ezért a behúzás visszavonása. */
.pcat__text .pill { margin-top: var(--btn-gap, 25px); margin-left: -17px; }

/* --- soronkénti geometria (Figma 1440-es koordináták) --------------------- */

/* Bálázógépek – narancs sáv 1898→2244, a kép 104px-szel fölé lóg */
.pcat--balazogepek {
  --media-top: 0;
  --body-top: 144px;
  --btn-gap: 17px;          /* Figma: szövegtörzs alja 2147, gomb teteje 2164 */
  --rule-h: 124px;
  --rule-color: #fff;
  --cat-fg: #fff;
  --body-w: 500px;
}
.pcat--balazogepek .pcat__inner { padding-bottom: 38px; }
.pcat--balazogepek .pcat__band { --band-top: 104px; }
.pcat--balazogepek .split__media { aspect-ratio: 625 / 412; }

/* ORWAK POWER – kép jobbra, a tervben szürke helyőrző */
.pcat--power {
  --body-top: 68px;
  --rule-h: 131px;
  --body-w: 613px;
}

/* Félautomata bálázók – kép balra, a tervben szürke helyőrző */
.pcat--felautomata {
  --body-top: 68px;
  --rule-h: 131px;
  --body-w: 608px;
}

/* Automata bálázók – narancs sáv 3294→3700, a kép 91px-szel lelóg róla */
.pcat--automata {
  --media-top: 85px;
  --body-top: 40px;
  --btn-gap: 30px;          /* Figma: szövegtörzs alja 3591, gomb teteje 3621 */
  --rule-h: 124px;
  --rule-color: #fff;
  --cat-fg: #fff;
  --body-w: 500px;
}
.pcat--automata .pcat__band { --band-bottom: 91px; }
.pcat--automata .split__media { aspect-ratio: 625 / 412; background: #c4c4c4; }

.pcat--hulladekpresek { --body-top: 56px; --rule-h: 137px; --body-w: 613px; }
.pcat--brikettalo     { --body-top: 68px; --rule-h: 155px; --body-w: 608px; }
.pcat--kiegeszito     { --body-top: 80px; --rule-h: 131px; --body-w: 613px; }

/* --------------------------------------------------------------------------
   5. CTA sáv

   A .cta-band a főoldal komponense, ott 95px felső margóval. Itt a .psec
   adja a 78px-es szekcióközt, tehát a saját margót le kell nullázni.
   -------------------------------------------------------------------------- */
.pcta .cta-band { margin-top: 0; }

/* A közös .cta-band__inner 83px-re teszi a gombot a narancs sáv jobb szélétől;
   ezen az oldalon a terv 110px-et mér (Figma: sáv 1032-ig, gomb 730–922).
   Csak az 1400 fölötti rácson – lejjebb a style.css saját töréspontjai
   (48px / 32px / --gut) érvényesek, azokat nem szabad felülírni. */
@media (min-width: 1401px) {
  .pcta .cta-band__inner { padding-right: calc(100% - var(--band-w) + 112px); }
}

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

   A tervben ez a blokk nem a 1274-es tartalomoszlopban ül, hanem pontosan a
   szűkebb, 1058-as sávban (191 → 1249) – ezért .container--narrow, nem
   kézzel mért behúzás. A címsor viszont a széles oszlopban marad.
   -------------------------------------------------------------------------- */
.pcontact__title { line-height: 61px; }

.pcontact__info {
  margin-top: 49px;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 627fr) minmax(0, 407fr);   /* 627+24+407=1058 → a 2. oszlop 842-nél */
  grid-template-rows: auto auto;
  row-gap: 27px;
  column-gap: 24px;
}

.pcontact__grid {
  margin-top: 51px;
  display: grid;
  grid-template-columns: minmax(0, 623fr) minmax(0, 410fr);
  gap: 25px;
  align-items: start;
}

.pcontact__map {
  aspect-ratio: 623 / 494;
  background: #e6e6e6;
}
.pcontact__map img { width: 100%; height: 100%; object-fit: cover; }

.pcontact__form { display: grid; row-gap: 27px; }
.pcontact__form .field { gap: 5px; }
.pcontact__form .field.check { gap: 9px; }
/* A jelölőnégyzet felirata a tervben egy sor. Effrával a globális .2px-es
   betűközzel is elfér: mért szövegszélesség 372.6px (a Figma 373-at ír), a
   rendelkezésre álló hely 387.7px. A helyettesítő Figtree idején ide egy
   `letter-spacing: 0` kellett – Effrával visszavonva. */
.pcontact__submit { margin-top: 13px; }   /* a gomb szélességét a közös .btn--wide adja (193px) */

/* --------------------------------------------------------------------------
   7. Reszponzív

   A soronkénti függőleges eltolások csak az 1440-es rácson jelentenek valamit:
   amint a .split egy oszlopra vált, a kép és a szöveg egymás alá kerül, és az
   eltolás csak lyukat ütne közéjük.
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .phero__aside { width: min(624px, 46%); }
  .pcat { --body-w: 100%; }
  .pcat--balazogepek, .pcat--automata { --body-w: 100%; }
  .pcat__text { max-width: none; }
}

@media (max-width: 1200px) {
  .phero--products { --phero-h: 830px; --phero-photo-h: 520px; --phero-panel-top: 430px; --phero-panel-h: 400px; }
  .phero--products .phero__panel { padding-top: 64px; }
  .phero__aside { top: 460px; height: 300px; }
  .phero__ghost { font-size: 84px; margin-bottom: -44px; }
  .pcontact__title { line-height: 1.14; }
}

@media (max-width: 992px) {
  .pcat .split__media,
  .pcat .split__body { margin-top: 0; }
  .pcat--balazogepek .pcat__inner { padding-bottom: 0; }
  .pcat__band { --band-top: 0 !important; --band-bottom: 0 !important; right: 0; }
  .pcat--balazogepek .pcat__inner,
  .pcat--automata .pcat__inner { padding: 32px 0; }
  .pcat--balazogepek .split__media,
  .pcat--automata .split__media { aspect-ratio: 625 / 408; }

  .pbest .filters .pill { width: auto; padding: 0 16px; }

  .pcontact__info { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; }
  .pcontact__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .pcontact__form { max-width: 520px; }
}

@media (max-width: 900px) {
  /* A hero itt folyó elrendezésre vált (pages.css) – az árnyékfelirat és a
     rálógó fotó abszolút pozíciója innentől értelmetlen.

     A .phero__aside itt teljes szélességű, és a rajta lévő közös `media-in`
     belépő animáció scale(1.07)-ről indul: az első 1,1 másodpercben 7%-kal
     szélesebb az ablaknál, és felvillan egy vízszintes görgetősáv (mérve:
     +27px 768-on, +13px 375-ön). A hero itt folyó, magassága a tartalomhoz
     nő, tehát a levágás semmit nem takar el. */
  .phero--products { overflow: hidden; }
  /* Folyó elrendezésben a fotó már nem lóg rá a panelra, a fenti korlát viszont
     itt negatívba fordulna (375px-en 130px-et adna) – ezért fel kell oldani. */
  .phero--products .phero__title,
  .phero--products .phero__lead { max-width: none; }
  .phero--products .phero__panel { padding-top: 36px; }
  .phero__aside {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 624 / 351;
  }
  .phero__ghost {
    margin: 24px 0 0;
    font-size: 12vw;
    line-height: 1.05;
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .pcat__title { font-size: 22px; }
  .pcat__body { font-size: 17px; }
  .pbest .filters { gap: 12px; }
  .pcontact__title { font-size: 30px; }
}