/* ==========================================================================
   ORWAK – Bálázógép bérlés, finanszírozás
   Figma: node 678:1724 (1440 × 4678)
   style.css → pages.css → ez a fájl

   Az oldal váza a közös .phero / .psec / .split / .lede / .prose. Itt csak az
   van, ami tényleg ezé az oldalé:
     .rband      narancs, jobbra csonkolt sáv (kép balra, fehér szöveg jobbra)
     .rent-stats a 4 statisztika EGY sorban (a főoldalon 2×2-ben áll)
     .rent-contact / .rent-form  térkép balra, űrlap jobbra
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipográfiai igazítás a tervhez

   A 18/24-es sorköz azóta a közös .prose alapja (--prose-lh: 24px), ezért itt
   már nem kell felülírni. Ami ezen az oldalon tényleg más:
     · a bekezdésköz a tervben 24px (a közös alap 22),
     · a .lede címsor és a törzsszöveg köze 18px (a közös alap 30).
   Mindkettő a közös változóin keresztül, hogy ne kelljen specificitással
   versenyezni a pages.css-szel.
   -------------------------------------------------------------------------- */
.rent .prose { --prose-gap: 24px; }
.rent .lede  { --lede-gap: 18px; }

/* A törzsszöveg ezen az oldalon Effra REGULAR, nem Light. A pages.css közös
   .prose-a 300-at ír elő; a terv mindkét folyószöveg-blokkja kifejezetten
   `Effra:Regular` (Figma 678:1736 és 678:1743). Amíg a Typekit kitben nem volt
   Light vágat, a 300 úgyis Regularként rajzolódott, tehát nem látszott a
   különbség — most, hogy a Light megjött, a bekezdések láthatóan vékonyabbak
   lennének a tervnél. Mérve: a váltás EGYETLEN sortörést sem mozdít el
   (8 / 6 / 5 sor előtte és utána is), tehát tisztán tipográfiai javítás.
   Ha a többi aloldal terve is Regulart ír, a pages.css alapjának kell 400. */
.rent .prose { font-weight: 400; }

/* A terv ezt a címsort KÉZZEL töri két sorba („…bálázógép” / „már napi 990…”),
   a Figma szövegdoboza ezért csak 397 széles (678:1734). A .lede oszlopa 608 —
   ott a böngésző „…bálázógép már napi 990” után törne, ami nem a terv képe.
   Effrával mérve: az 1. sor 388, +„már” már 435, a 2. sor 379 — a 400px-es
   korlát tehát mindkét irányban 12+px tartalékkal adja vissza a tervbeli
   sortörést. Nem betűcsere-kompenzáció: a 397 magából a tervből jön. */
.rent .lede__title--brk { max-width: 400px; }

/* --------------------------------------------------------------------------
   1. Kép + szöveg sorok

   A tervben a gomb a szövegoszlop alján ül, és a kép a teljes oszloppárra
   nézve középen — ezt a közös .split align-items:center már megadja.
   A gomb feletti rés a tervben szekciónként más (51 / 36 px).
   -------------------------------------------------------------------------- */
.split__cta { margin-top: 51px; }
.split__cta--tight { margin-top: 36px; }

/* --------------------------------------------------------------------------
   2. Narancs sáv

   A sáv jobbra csonkolt: a terv 1440-es artboardján 1357 széles, azaz pontosan
   „teljes szélesség mínusz oldalmargó". Fix px-ben megadva 1920-on és 2560-on
   elszakadna a tartalomtól, ezért calc(100% - var(--gut)).

   A sáv magassága fix (a terv 435 / 549), a kép pedig szándékosan túllóg rajta
   (az első sávnál 86px-szel). 900px alatt a fix magasság nem tartaná meg a
   magyar szöveget, ezért ott a háttér a teljes blokkot fedi — lásd lentebb.
   -------------------------------------------------------------------------- */
.rband { position: relative; }

.rband__bg {
  position: absolute;
  left: 0;
  top: var(--psec-gap, 78px);   /* a szekció felső rése fölött nem kezdődik */
  width: calc(100% - var(--gut));
  height: var(--rband-h);
  background: var(--orange);
}

.rband__inner {
  position: relative;
  display: grid;
  /* A terv oszlopai 626 / 624 — arányban tartva, nem fix px-ben, hogy 1400
     alatt (ahol a tartalomszélesség 100%-ra vált) ne ugorjon meg a kép. */
  grid-template-columns: minmax(0, 626fr) minmax(0, 624fr);
  gap: 24px;
  align-items: start;
  padding-top: var(--rband-text-top);
}

/* A kép a szövegnél lejjebb kezdődik (terv: 109 ill. 137 a sáv tetejétől). */
.rband__media {
  margin-top: var(--rband-media-offset);
  aspect-ratio: 626 / 412;
  background: #ddd;
}
.rband__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fehér függőleges vonal a szöveg mellett. A tervben nem a teljes blokkot
   kíséri végig, csak 164px-en — ezért nem a közös .lede-t használjuk. */
.rband__body {
  position: relative;
  padding-left: 17px;
}
.rband__body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 164px;
  background: #fff;
}

.rband__title {
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  color: #fff;
  letter-spacing: .2px;
  max-width: 460px;      /* a terv két sorba töri a címet */
}
.rband__title--bold {
  font-weight: 700;
  line-height: 24px;
  max-width: none;
}

.rband__intro {
  margin-top: 11px;      /* terv: a cím alja 96, az első sor 107 */
}
.rband__list {
  margin-top: 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rband__intro,
.rband__list li {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  letter-spacing: .2px;
  max-width: 524px;
}
/* A terv utolsó sorát a Figma is szélesebb dobozba tette (608px, a 524 helyett),
   hogy egy sorban maradjon. Effrával mérve ez a mondat 568px — a közös 524-es
   dobozban két sorba törne, a tervbeli 608-ban egybe marad. Nem a helyettesítő
   betű maradványa: a 608 magából a tervből jön (Figma 678:1853, width=608),
   a renderen mért sorszélesség 564px. */
.rband__list li.rband__li--wide { max-width: 608px; }

/* A terv szövegdoboza itt 606 széles és 432 magas = 18 sordoboz (16 szövegsor +
   2 üres a bekezdésközöknek). A Figma forrásában a 2. és 3. bekezdés KÉZI
   sortöréseket tartalmaz (a get_design_context minden sort külön <p>-ként adja
   vissza), az 1. bekezdés pedig azért 4 soros, mert a Figma Effra-metrikái
   ~2%-kal szélesebbek a böngészőénél (mérve: „A legnépszerűbb ORWAK bálázógép”
   a tervben 397, itt 388). Nálunk 14 sor lesz belőle, azaz a szöveg 48px-szel
   feljebb zárul. Kézi <br>-ekkel visszalehetne állítani, de azok 992px alatt
   ronggyá törnék a bekezdést — a sáv magasságát különben is a kép rögzíti
   (137+412 = 549), tehát a szekció geometriája ettől nem csúszik el. */
.rband__prose {
  margin-top: 17px;
  max-width: 606px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  letter-spacing: .2px;
}
.rband__prose > * + * { margin-top: 24px; }
.rband__prose a { color: #fff; text-decoration: underline; }
.rband__prose a:hover { text-decoration: none; }

/* A közös fókuszgyűrű narancs — a narancs sávon 1:1, azaz láthatatlan.
   Fehérrel 3.93:1, ami a nem szöveges elemekre előírt 3:1 fölött van.
   (A ≤992px-es, sávra kerülő gombra ugyanez kell, lásd lentebb.) */
.rband__prose a:focus-visible { outline-color: #fff; }

/* A gomb a sáv alatt. A tervben NEM a behúzott szöveghez igazodik, hanem a
   fehér elválasztó vonalhoz: a Figma linkje x=733-on kezdődik (mérve a
   renderen is 733), a vonal 732-n, a szöveg 750-en. A .rband__body 17px-es
   behúzását tehát a gombnak vissza kell adnia. Függőlegesen 78px-re a lista
   utolsó sora alatt (terv: 1711 → 1789). */
.rband__cta { margin-top: 78px; margin-left: -17px; }

/* Szekciónkénti geometria a tervből.

   A második sáv fölött nem 78, hanem 117px a rés. A terv Frame 119-e (a fölötte
   lévő „Bálázógép bérlés" blokk) 450px magasnak van deklarálva, de a látható
   tartalma 437-nél véget ér, a képe pedig már 408-nál — a sáv 2446-on kezdődik,
   azaz a kép aljától 120px-re. Ezt a 117px adja vissza; 78-cal a sáv és minden
   utána következő szekció 39px-szel a terv fölé csúszna.

   Effrával újramérve: a szekció doboza 1839+490 = 2329-en zárul, 2329+117 =
   2446, azaz pontosan a terv szerinti sávkezdet. A rés azért marad ekkora,
   mert a terv szövegdobozában kézi sortörések vannak (lásd a jelentést), így
   a bekezdés ott 12, itt 11 sor — a különbség a gomb alatti levegőbe megy. */
.rband--why       { --rband-h: 435px; --rband-text-top: 36px; --rband-media-offset: 73px; }
.rband--compactor { --rband-h: 549px; --rband-text-top: 38px; --rband-media-offset: 99px; }

/* A 117 (és lentebb a kapcsolat 68-a) a terv 1440-es rácsához hangolt érték.
   Töréspont nélkül kiírva felülírná a pages.css mobil ritmusát is (992-en 56,
   768-on 44), és a lap közepén egyedül ez a két blokk kapna 117 / 68 px rést.
   Ezért csak a tervezett szélesség fölött érvényes. */
@media (min-width: 993px) {
  .rband--compactor { --psec-gap: 117px; }
}

/* --------------------------------------------------------------------------
   3. Statisztikák — a tervben egy sorban, négy oszlopban

   A főoldal .stats osztálya 2×2-es; a .stat maga (vonal, ikon, szám, felirat)
   közös, azt használjuk. 1278 / 4 oszlop / 24px rés → 301px oszlop, ez adja
   vissza a terv 326 / 650 / 977 px-es oszlopkezdeteit.
   -------------------------------------------------------------------------- */
.rent-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

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

   A tervben a főoldalitól eltérő elrendezés: fent két hasábban az elérhetőségek,
   alatta balra a térkép (623), jobbra az űrlap (410). Mindkét sor a szűk
   tartalomoszlopban (1058) ül, a címsor viszont a szélesben.
   -------------------------------------------------------------------------- */
/* A statisztikák feliratai magyarul hosszabbak, mint a terv angol vázán: a sáv
   198 magas a terv 188 helyett. A kapcsolat-blokk így 68px-es réssel kerül a
   terv szerinti 3339-es magasságba.

   A --psec-gap viszont a szekció ALSÓ paddingját is viszi (a pages.css az utolsó
   szekciónak alul is ennyit ad), a tervben pedig a footer fölött 78px van —
   ezért az alsó rés külön. Mindkettő csak az 1440-es rácson: mobilon maradjon a
   közös 56 / 44, különben egyedül ez a blokk lógna ki a ritmusból. */
@media (min-width: 993px) {
  .rent-contact { --psec-gap: 68px; }
  main > .psec.rent-contact:last-child { padding-bottom: 78px; }
}

.rent-contact__title {
  line-height: 1.22;     /* terv: 50/61 */
  font-weight: 500;
}

.rent-contact__info,
.rent-contact__grid {
  /* A terv belső blokkja 1058 széles (623 térkép + 26 rés + 410 űrlap).
     Arányos oszlopok + max-width: 1400 alatt, ahol a --page-narrow 100%-ra
     vált, a térkép különben 868px-re nőne a terv 623-a helyett. */
  max-width: 1058px;
  display: grid;
  grid-template-columns: minmax(0, 623fr) minmax(0, 410fr);
  align-items: start;
}

.rent-contact__info {
  font-style: normal;
  margin-top: 49px;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: 27px 26px;
}

.rent-contact__grid {
  margin-top: 51px;
  gap: 26px;
}

.rent-contact__map {
  aspect-ratio: 623 / 494;
  background: var(--bg-alt);
}
.rent-contact__map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Az űrlap egy hasábban fut, mezőnként 27px réssel (terv: 98px-es osztás). */
.rent-form {
  display: flex;
  flex-direction: column;
  gap: 27px;
}
.rent-form .field:not(.check) { gap: 5px; }
.rent-form__submit { align-self: flex-start; margin-top: 13px; }

/* (A hozzájárulás során korábban `letter-spacing: 0` állt, mert a Figtree-vel
   a felirat 389px-re nőtt és két sorba tört. Effrával a lap egészére érvényes
   .2px betűközzel is 373px — pontosan annyi, amennyit a terv ad neki
   (Figma 678:1824, width=373), a 410-es hasábban 388px a hely. A kompenzáció
   kikerült.) */

/* Fókuszjelzés. A közös `.field input:focus { outline: none }` erősebb, mint a
   :where(...):focus-visible padló, és szövegmezőn a narancs keret pótolja —
   jelölőnégyzeten viszont nincs mit átszínezni, így billentyűzettel semmi nem
   látszik. Itt visszakapja. */
.rent-form__check input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Reszponzív
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .rband__title { font-size: 22px; line-height: 28px; }
  .rband__intro { margin-top: 14px; }
  .rband__prose { font-size: 17px; }
  .rent-stats { gap: 20px; }
}

@media (max-width: 992px) {
  /* Két oszlop: a 80px-es számok négyesével már nem férnek el. */
  .rent-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }

  /* A sáv magassága a szöveghez nő, a kép a szöveg fölé kerül. A narancs
     háttér innentől a TELJES blokkot fedi: a fehér szöveg világos oldalháttéren
     olvashatatlan lenne. */
  .rband__bg { height: calc(100% - var(--psec-gap, 78px)); width: 100%; }
  .rband__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 0 36px;
  }
  .rband__media { margin-top: 0; }
  .rband__intro,
  .rband__list li,
  .rband__list li.rband__li--wide,
  .rband__prose { max-width: none; }
  /* A gomb itt már a narancs sávon belülre kerül: narancs a narancson
     olvashatatlan, ezért megfordul (a nyíl currentColor-t használ). A -17px
     visszahúzás is elmarad: itt a fehér vonal végigkíséri a blokkot, a gomb
     alátolódna. */
  .rband__cta { margin-top: 32px; margin-left: 0; background: #fff; color: var(--orange); }
  .rband__cta:hover { background: #f2f0ef; }
  /* narancs gyűrű a narancs sávon nem látszik */
  .rband__cta:focus-visible { outline-color: #fff; }
  .rband__body::before { height: 100%; }

  .split__cta, .split__cta--tight { margin-top: 28px; }

  .rent-contact__info {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 24px;
  }
  .rent-contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .rent-contact__title { line-height: 1.16; }
}

@media (max-width: 768px) {
  .rent-stats { grid-template-columns: 1fr; gap: 36px; }
  .rent-contact__title br { display: none; }
  .rband__title { font-size: 20px; line-height: 26px; max-width: none; }
  .rband__intro, .rband__list li { font-size: 15px; }
  .rband__prose { font-size: 16px; }
}