/* ==========================================================================
   ORWAK – Akciók
   Figma: node 678:2020 (1440 × 3058)
   style.css → pages.css → ez a fájl

   A hero a pages.css kész .phero vázára épül; itt csak az van, ami ezé az
   egy oldalé: az akciós felütés (10% KEDVEZMÉNY), a narancs ORWAK 3110 sáv
   és a kapcsolat blokk.
   ========================================================================== */

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

   A tervben a bevezető 734px széles (a .phero__lead alap 626px). Ezen a
   szélességen fut ki pont 5 sorra, és így lesz a szövegtömb 195px magas,
   amit a panel függőlegesen középre tesz — a Figma szerinti 444-es felső
   élhez ez a legközelebbi érték a közös vázon.
   -------------------------------------------------------------------------- */
.phero--akciok .phero__lead { max-width: 734px; }

/* --------------------------------------------------------------------------
   2. Akciós felütés — „10% KEDVEZMÉNY" + a határidős ajánlat

   Figma: a blokk 81-től 1246-ig tart (1165 széles). A bal hasáb 648, a jobb
   517 széles, hézag nélkül. Fix oszlopszélesség a .container-en BELÜL: a
   tartalomoszlop 1274px széles marad 1440 fölött is, tehát ez a rács 1920-on
   és 2560-on ugyanígy áll — nem az oldalszéltől mérünk.

   A két hasáb függőlegesen KÖZÉPEN találkozik: a Figmában a bekezdés közepe
   (833+105) és a kiemelt felirat dobozának közepe (778+160) is 938-nál van.
   -------------------------------------------------------------------------- */
.offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 648px) minmax(0, 517px);
  align-items: center;
}

/* A felirat 100px-es sormagassága nem dísz: ez tolja a szövegtömb közepét a
   bekezdés közepére. A -2px betűköz 50px-en arányaiban apró (-4%), a magyar
   digráfokat nem zárja össze — a 20px alatti tiltás nem ide vonatkozik. */
.offer__badge {
  font-size: 50px;
  line-height: 100px;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--orange);
}

.offer__lead {
  font-size: 30px;
  line-height: 42px;
  font-weight: 300;
  color: var(--text);
}

/* A tervben (678:2030) a bekezdés NEM tölti ki a 517px-es hasábot: a
   „…továbbra is" után kézi sortörés van, a „Kis kedvenc" előtt pedig
   bekezdéstörés. Mérve, Effrával: az 1. sor 372px, a leghosszabb 452 — a
   natúr tördelés 436px-nél még beszívná a „10%"-ot, tehát a törések nélkül
   más helyeken szakadna a szöveg, mint a terven. 1200 alatt a hasáb és a
   betűméret is más, ott a kézi törés már csak csonka sorokat csinálna. */
.offer__br { display: inline; }

/* --------------------------------------------------------------------------
   3. ORWAK 3110 ajánlat

   A tervben három dolog történik egyszerre:
     - a narancs sáv balról teljes szélességű, jobbra csonkolt
       (a tervben -3 → 1354, azaz 1440-en calc(100% - --gut)), 397 magas;
     - a kivágott gépfotó 645×528 — 131px-cel LELÓG a sávból;
     - a gomb a sáv ALATT, a fotó aljától 49px-re ül.

   Ezért két, egymásra fektetett réteg (egy rácscella, mindkét gyerek
   `grid-area: 1/1`):
     A) a fotó rétege — magassága a fotó arányából jön,
     B) a sáv + gomb rétege — a sáv magasságát a SAJÁT szövege adja
        (39 felül + szöveg + 82 alul = 397 a tervbeli sortöréseknél).
   A blokk magassága a kettő közül a nagyobb, tehát a gomb akkor sem
   csúszik rá a sávra, ha szűkebb hasábon a magyar szöveg egy-két sorral
   megnő és a fotó közben zsugorodik. Fix magasságú sávval a 1200–1300px
   közötti sávban pont ez történt.

   A rács a .container-ben ül, tehát a fotó a tartalomoszlop bal élénél
   kezdődik (83) a tervbeli 60 helyett: a nyers 60-as artboard-pixel csak
   1440-en jelentene ugyanennyit. Ez a sáv-tartalom egységes +23px-es
   eltolása, a függőleges rend változatlan.
   -------------------------------------------------------------------------- */
.promo__stage {
  display: grid;
  grid-template-columns: 100%;
  align-items: start;
}
.promo__stage > * { grid-area: 1 / 1; }

/* A fotó a sáv FÖLÖTT fest, de a rétege az egész sort lefedi — a
   pointer-events nélkül elnyelné a gombra adott kattintást. */
.promo__media-layer { z-index: 1; pointer-events: none; }

.promo__grid {
  display: grid;
  grid-template-columns: minmax(0, 645px) minmax(0, 540px);
  column-gap: 26px;
}

/* A fotó adja a rétege magasságát (528px 1440-en), ezért kell az
   arányrögzítés. A PNG kivágott, átlátszó hátterű — `contain`, hogy a
   gépek széle sehol ne csorbuljon; a natív 801×656 arány gyakorlatilag
   azonos a dobozéval, tehát nincs üres sáv. */
.promo__media { aspect-ratio: 645 / 528; }
.promo__media img { width: 100%; height: 100%; object-fit: contain; }

/* A sáv a szövegblokk körüli DOBOZ magasságát veszi fel (39 felül + szöveg +
   82 alul = 397 a tervbeli sortöréseknél), a narancs kitöltés pedig külön,
   abszolút réteg benne — így ér el balra a lap széléig és jobbra a
   --gut-ig, anélkül hogy a .container-t egy szűkebb dobozba kellene tenni.

   Ez utóbbi nem kozmetika: a --gut képlete `calc((100% - 1274px) / 2)`, és a
   százalék mindig az AKTUÁLIS szülő szélességére oldódik fel. Egy 1357px-es
   sávba tett .container 41.5px-es oldalpaddingot kapna 83 helyett, és az
   egész szövegoszlop 41px-cel arrébb csúszna. Ezért marad a .promo__copy
   teljes szélességű. */
.promo__copy {
  position: relative;
  padding-block: 39px 82px;
}
.promo__copy > .container { position: relative; }   /* a narancs réteg fölé */

.promo__band {
  position: absolute;
  inset: 0 var(--gut) 0 0;
  background: var(--orange);
}

/* A fehér vonal a címtől a bekezdés aljáig tart (Figma: 276px). */
.promo__rule {
  border-left: 2px solid #fff;
  padding-left: 14px;
}

.promo__title {
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  color: #fff;
  letter-spacing: .2px;
}

/* A tervben a három bekezdés EGY tömb: nincs köztük térköz, csak sortörés,
   így jön ki a 10 sor × 24px = 240px. */
.promo__body {
  margin-top: 6px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  letter-spacing: .2px;
}
.promo__body p + p { margin-top: 0; }

/* A terv szövegfutama (678:2038) öt darabból áll; az utolsó három EGY
   mondatfüzér, kézi sortörésekkel. Enélkül a blokk 9 sorra fut (216px), a
   tervben 10 (240px) — és ezen múlik a narancs sáv 397-es magassága meg a
   gomb 1554-es felső éle. 1200 alatt a blokk egymás alá bomlik, ott a kézi
   törés kikapcsol. */
.promo__br { display: inline; }

.promo__cta-row { padding-top: 36px; }   /* Figma: sáv alja 1518 → gomb teteje 1554 */

.promo__cta {
  min-width: 193px;
  justify-content: center;
  padding: 0 31px;
}

/* --------------------------------------------------------------------------
   4. Kapcsolat

   A blokk a tartalomoszlopon belül, mindkét oldalon ~107px-cel beljebb:
   1274 − 2×107 ≈ 1058 = --page-narrow, ezért .container--narrow.
   A belső rács a tervbeli 623 / 25 / 410 osztás.

   Térköz: a fotó alja 1649, a címsor 1719 — 70px, nem a szokásos 78. Az
   alsó térköz viszont 78 (footer 2636), ezért a kettő külön van megadva.
   -------------------------------------------------------------------------- */
/* A pages.css `main > .psec:last-child` szabálya (0,2,1) erősebb egy sima
   osztálynál, ezért a felső/alsó térköz azonos fajsúlyú szelektorral megy —
   ez a stíluslap a pages.css UTÁN tölt be, tehát ez nyer. */
main > .psec.acontact {
  padding-top: 70px;
  padding-bottom: 78px;
}

.acontact__title {
  /* Figma: 50px betű, 61px sormagasság, két sor = 122px. */
  line-height: 1.22;
}

.acontact__info,
.acontact__main {
  display: grid;
  grid-template-columns: minmax(0, 623fr) minmax(0, 410fr);
  column-gap: 25px;
}

.acontact__info {
  margin-top: 49px;
  font-style: normal;      /* <address> */
  row-gap: 27px;
  /* Oszlopfolyás: a DOM-sorrend (két cím, majd telefon + e-mail) egy
     oszlopba esve is logikus felsorolás marad, a terv 2×2-es elrendezése
     viszont pontosan kijön belőle. */
  grid-template-rows: auto auto;
  grid-auto-flow: column;
}

.acontact__main {
  margin-top: 51px;
  align-items: start;
}

.acontact__info .contact-info__item a:hover { color: var(--orange); }

/* Térkép */
.acontact__map {
  margin: 0;
  overflow: hidden;
  background: #e8e6e3;
  aspect-ratio: 623 / 494;
}
.acontact__map img { width: 100%; height: 100%; object-fit: cover; }

/* Űrlap — a tervben egyoszlopos, 410px széles, a térképpel azonos 494px
   magas: 4 mező (18+6+48) 26px-es közökkel, jelölőnégyzet, gomb. */
.acontact__form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.acontact__form .field input[type="text"],
.acontact__form .field input[type="email"],
.acontact__form .field input[type="tel"] { width: 100%; }

/* A jelölőnégyzet felirata a tervben EGY sor, 373px széles (678:2054), és a
   rendelkezésre álló hely 410 − 14 (négyzet) − 9 (köz) = 387. A helyettesítő
   Figtree-vel ez nem fért ki, ezért volt itt `letter-spacing: 0` és egy
   checkbox-margó nullázás. Effrával a felirat a tervbeli 0.2px betűközzel is
   372.8px — VISSZAVONVA, a betűköz megint a body-ból jön. A margónullázás a
   style.css `.check input` szabályában amúgy is benne van. */

.acontact__submit {
  align-self: flex-start;
  margin-top: 14px;        /* 26 + 14 = 40px, a terv szerinti köz */
  min-width: 193px;
  justify-content: center;
  padding: 0 31px;
}

/* --------------------------------------------------------------------------
   5. Reszponzív
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  /* A hasábok fix px-es maximuma marad, csak a rendelkezésre álló hely fogy;
     a minmax(0, …) miatt arányosan zsugorodnak, nem csordulnak túl. */
  .promo__grid { column-gap: 22px; }
}

@media (max-width: 1200px) {
  /* A tervbeli kézi sortörések csak az 1440-es rácson igazak. */
  .offer__br,
  .promo__br { display: none; }

  .offer__badge { font-size: 40px; line-height: 1.3; letter-spacing: -1.4px; }
  .offer__lead { font-size: 24px; line-height: 34px; }
  .offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .acontact__info,
  .acontact__main { column-gap: 20px; }

  /* A sáv-blokk egymás alá bomlik: FOTÓ fölül, a lap saját hátterén, alatta
     a narancs sáv a szöveggel. 1200 alatt a 645px-es fotóhasáb már annyira
     összemegy, hogy a fotó a sávnál is alacsonyabb lenne — narancs gép
     narancs sávon pedig elveszik. Ezért itt a fotó kilép a sáv fölül. */
  .promo__stage > * { grid-area: auto; }
  .promo__media-layer { pointer-events: auto; }
  .promo__grid { grid-template-columns: 1fr; column-gap: 0; }
  .promo__grid-gap { display: none; }
  .promo__media { max-width: 645px; }
  .promo__copy {
    margin-top: 28px;
    padding-block: 32px;
  }
  .promo__band { inset: 0; }     /* mobilon a sáv a lap teljes szélességét fedi */
  .promo__cta-row { padding-top: 24px; }
}

@media (max-width: 992px) {
  .offer__grid { grid-template-columns: 1fr; row-gap: 20px; }
  .offer__badge { line-height: 1.2; }

  /* Egy 410px-es űrlaposzlop 992 alatt már nem fér el a térkép mellett
     anélkül, hogy a mezők használhatatlanul keskenyek lennének. */
  .acontact__main {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .acontact__map { max-width: 623px; }
  .acontact__form { max-width: 520px; }

  /* a pages.css itt 56px-re húzza a .psec térközt — a fix értékek is követik */
  main > .psec.acontact { padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 768px) {
  .offer__badge { font-size: 32px; letter-spacing: -1px; }
  .offer__lead { font-size: 20px; line-height: 30px; }

  .promo__title { font-size: 22px; }
  .promo__cta { width: 100%; }

  .acontact__info {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 24px;
    margin-top: 34px;
  }
  .acontact__main { margin-top: 36px; }
  .acontact__submit { width: 100%; }

  main > .psec.acontact { padding-top: 44px; padding-bottom: 44px; }
}