/* ==========================================================================
   ORWAK – Rólunk
   Figma: node 678:2677 (1440 × 5997)
   style.css → pages.css → ez a fájl

   A szekciók függőleges rendje a tervben (1440-es artboard, y a frame tetejétől):
     hero              0    – 755
     küldetés          833  – 1001
     miért az ORWAK    1079 – 1531
     számok nyelvén    1606 – 2101
     előnyök           2179 – 2559
     konzultáció sáv   2637 – 2821
     kiknek            2899 – 3471
     csapat            3549 – 4084
     referenciák       4162 – 4580
     kapcsolat         4658 – 5497
     footer            5575 – 5997
   A szekcióközök végig 78px, egyetlen kivétellel: a „számok nyelvén" sáv 75px-re
   ül a fölötte lévő blokk aljától. A .psec CSAK felül tart távolságot, ezért a
   közök nem adódnak össze.
   ========================================================================== */

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

   Geometria egy az egyben a pages.css alapértéke (fotó 571, panel 327-től 428).
   Egyetlen eltérés: a bevezető itt 734px széles, nem 626.
   -------------------------------------------------------------------------- */
.phero__lead { max-width: 734px; }

/* --------------------------------------------------------------------------
   2. Küldetés

   A terv 30/42-es Light szövege = a főoldal .lead-xl-je, a tartalom teljes
   szélességében (1274px @1440).
   -------------------------------------------------------------------------- */
.rl-mission .lead-xl { max-width: var(--page); }

/* --------------------------------------------------------------------------
   3. Közös elemek: narancs vonalas blokk, folyószöveg, kép-helyőrző

   A tervben a szövegek sormagassága 24px (nem a pages.css 25-e), a bekezdések
   közt pedig egy üres sor, azaz szintén 24px.

   A tervbeli szövegdobozok MAGASABBAK, mint amennyit a szöveg természetes
   tördeléssel elfoglal, mert a Figma-szövegekben kézi sortörések maradtak a
   WEIMA-sablonból (jól látszik: „…Kizárólagos / forgalmazóként…”, ahol egy
   egybetűs szó is elfért volna még az előző sorban). Éles Effrával mérve:

     blokk        természetes   terv     különbség
     miért        404           452      −48   (15 sor 17 helyett)
     számok       236           251      −15   ( 5 sor  6 helyett)
     előnyök      356           380      −24   (12 sor 13 helyett)
     kiknek       500           572      −72   (19 sor 22 helyett)

   Ezért a magasság-padló NEM a .lede-n ül (ott a narancs vonalat is nyújtaná,
   és 48–72px-es üres vonalvég lógna a szöveg alá), hanem a rácson: a sor
   magassága marad a tervbeli, a vonal viszont a saját szövegét fogja közre.
   -------------------------------------------------------------------------- */
.rl-lede::before { top: 0; bottom: 0; }
.rl-lede .lede__title + * { margin-top: 20px; }
/* A tervben két sorban áll, „…az ORWAK / garantál a…” töréssel. Effrával az
   első sor 333.7px (a Figma-szövegdoboz 333), a „garantál”-lal együtt 429.1 —
   a korábbi 430-as korlát tehát épp beengedte a rossz helyre. */
.rl-lede__title--wrap { max-width: 340px; }

.rl-prose {
  line-height: 24px;
  max-width: 608px;
}
.rl-prose > * + * { margin-top: 24px; }
.rl-prose a { text-decoration: underline; }
.rl-prose a:hover { text-decoration: none; }

/* Felsorolás jelölő nélkül: a tervben sortörésekkel elválasztott sorok, nem
   pontozott lista. Szemantikailag lista marad, vizuálisan folyó sorok. */
.rl-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  max-width: 608px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  color: var(--text);
}

/* Kép-helyőrző: a Figma-frame-en ezek a dobozok üres kitöltők (#c4c4c4 /
   #d9d9d9), nincs mögöttük fotó. Nem találtunk ki képet a helyükre. */
.rl-ph { background: #c4c4c4; }
.rl-ph--625x408 { aspect-ratio: 625 / 408; }
.rl-ph--626x412 { aspect-ratio: 626 / 412; }
.rl-ph--623x380 { aspect-ratio: 623 / 380; }

.rl-split--top { align-items: start; }

/* --------------------------------------------------------------------------
   4. Miért az ORWAK a legnépszerűbb?   (Figma 1079–1531)

   A sor 452 magas, a kép ezen belül függőlegesen középen ül (a tervben 1100-tól
   408 magasan), a szöveg viszont a sor tetején kezdődik — ezért kap a szövegoldal
   külön align-self-et a rács középre igazítása helyett.
   -------------------------------------------------------------------------- */
.rl-why .rl-split { min-height: 452px; }
.rl-why .split__body { align-self: start; }

/* --------------------------------------------------------------------------
   5. ORWAK a számok nyelvén   (Figma 1606–2101)

   Narancs sáv 149px-től 346px magasan, jobbra csonkolva (a tervben 1357px =
   1440 − oldalmargó), fölötte kilógó képpel. A sáv szélessége ezért
   gutter-alapú, nem 1357px fixen — különben 1920-on és 2560-on elszakadna a
   tartalomtól.
   -------------------------------------------------------------------------- */
.rl-numbers { --psec-gap: 75px; }

.rl-numbers__stage { position: relative; }
.rl-numbers__bg {
  position: absolute;
  left: 0;
  top: 149px;
  height: 346px;
  width: calc(100% - var(--gut));
  background: var(--orange);
}
.rl-numbers__inner { position: relative; }

.rl-numbers__grid {
  display: grid;
  grid-template-columns: minmax(0, 626px) minmax(0, 624px);
  justify-content: space-between;
  column-gap: 25px;
  align-items: start;
  min-height: 495px;
}
.rl-numbers__text { padding-top: 193px; }

.rl-lede--light .lede__title,
.rl-lede--light .rl-prose { color: #fff; }
.rl-lede--light::before { background: #fff; }
/* A szekció magasságát a rács min-height-ja (495) tartja, nem a .lede — így a
   fehér vonal a saját szövegét fogja közre. */
.rl-numbers .rl-prose { max-width: 607px; }

/* --------------------------------------------------------------------------
   6. Előnyök   (Figma 2179–2559)
   -------------------------------------------------------------------------- */
.rl-benefits .rl-split { min-height: 380px; }

/* --------------------------------------------------------------------------
   7. Konzultáció sáv + jubileumi jelvény   (Figma 2637–2821)

   A narancs sáv a képernyő bal szélétől indul és a tartalomoszlop bal szélétől
   számított 951px-nél ér véget (1440-en: 83 + 951 = 1034, pont a terv szerint).
   A style.css .cta-band-je 83px fix belső margóval és 1440-hez kötött
   szélességgel dolgozik — itt mindkettőt gutter-alapúra cseréljük, hogy 1920-on
   és 2560-on is a tartalommal együtt mozogjon.
   -------------------------------------------------------------------------- */
.rl-cta__stage {
  position: relative;
  min-height: 184px;
  padding-top: 52px;
}
.rl-cta__band {
  margin-top: 0;
  width: min(100%, calc(var(--gut) + 951px));
}
.rl-cta__band .cta-band__inner { padding-inline: var(--gut); }
.rl-cta__band .cta-band__text { line-height: 24px; }

.rl-cta__badge {
  position: absolute;
  top: 0;
  right: var(--gut);
  width: 191px;
  height: 184px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   8. Kiknek tudunk megoldást nyújtani?   (Figma 2899–3471)
   -------------------------------------------------------------------------- */
.rl-who .rl-split { min-height: 572px; }
.rl-who .rl-ph { background: #d9d9d9; }

/* --------------------------------------------------------------------------
   9. Az ORWAK csapat   (Figma 3549–4084)

   Három oszlop, 120px-es sorosztás (75px fotó + 45px köz). A tervben a tizedik
   ember egyedül áll a negyedik sorban — a DOM-sorrend ezért sorfolytonos,
   hogy a rács oszlopai a terv szerinti embereket adják vissza.
   -------------------------------------------------------------------------- */
.team {
  /* A cím sorboxa 56 (50/1.12), a tervben az első portré a szekció tetejétől
     98px-re kezdődik → 98 − 56 = 42. */
  margin-top: 42px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 45px;
}
.team__item {
  display: flex;
  align-items: center;
  gap: 25px;
}
.team__photo {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  flex: none;
}
.team__name {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--text);
}
.team__role {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text);
}
.team__mail {
  display: inline-block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--orange);
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.team__mail:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   10. Referenciák   (Figma 4162–4580)

   A főoldal .refs komponense. Csak a szekcióköz és a belső ritmus tér el:
   a tervben a logósáv a szekció tetejétől 160px-re kezdődik.
   -------------------------------------------------------------------------- */
.rl-refs { margin-top: 78px; }
.rl-refs .refs__viewport { margin-top: 33px; }
.rl-refs .nav-arrows { margin-top: 53px; }

/* --------------------------------------------------------------------------
   11. Kapcsolat   (Figma 4658–5497)

   A cím a tartalomoszlop bal szélén ül, alatta viszont egy szűkebb, 1058px-es
   blokk: bal oszlop 623 (elérhetőségek + térkép), jobb oszlop 410 (űrlap).
   Ez pont a --page-narrow, ezért .container--narrow tartja a helyén.
   -------------------------------------------------------------------------- */
/* A style.css .contact__title-ja 400-as vágatot ír elő. A terv Mediumot használ:
   az „Érdekel az ingyenes próba? Kérdésed van?” 50px-en Effra 500-zal 928.1px
   (a Figma-szövegdoboz 928, a renderelt festékszélesség 922 = 928.1 − oldalsó
   csapágyak), 400-zal 908.2 lenne. KÖZÖS FÁJL HIBÁJA, itt csak felülírva. */
.rl-contact__title { line-height: 61px; font-weight: 500; }

.rl-contact__grid {
  margin-top: 49px;
  display: grid;
  grid-template-columns: minmax(0, 623px) minmax(0, 410px);
  justify-content: space-between;
  column-gap: 26px;
  row-gap: 52px;
  align-items: start;
}
.rl-contact__info { gap: 26px; padding-top: 0; }

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

.rl-form {
  grid-template-columns: 1fr;
  row-gap: 27px;
}
.rl-form .field label { line-height: 17px; }
/* A jelölőnégyzet feliratán korábban `letter-spacing: 0` állt, hogy a Figtree
   szélesebb metrikáival is egy sorban maradjon. Éles Effrával megmérve a lap
   betűközével (0.2px) is egy sor, 362px széles a 410-es hasábban — a kivétel
   feleslegessé vált, kivéve. */
.rl-form__submit { margin-top: 9px; }
.rl-form__btn {
  min-width: 193px;
  justify-content: center;
  padding-inline: 26px;
}

/* --------------------------------------------------------------------------
   12. Reszponzív
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .rl-mission .lead-xl { max-width: none; }
  .rl-numbers__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

@media (max-width: 1200px) {
  .rl-contact__title { line-height: 1.1; }
  .rl-numbers__text { padding-top: 120px; }
  .rl-numbers__grid { min-height: 0; }
  .rl-numbers__bg { top: 110px; height: calc(100% - 110px); }

  .rl-cta__band { width: calc(100% - 232px); }
  .rl-cta__badge { width: 168px; height: auto; }

  .rl-contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
}

@media (max-width: 992px) {
  /* Minden magasság-padló elengedhető: a szöveg a szűkebb oszlopban úgyis
     magasabb, a min-height csak a tervbeli y-koordináták tartására kellett. */
  .rl-why .rl-split,
  .rl-benefits .rl-split,
  .rl-who .rl-split { min-height: 0; }

  /* A narancs sáv a teljes blokkot fedi: a szöveg a kép alá kerül, fehér
     szöveg világos háttéren olvashatatlan lenne. */
  .rl-numbers__stage { padding-bottom: 40px; }
  .rl-numbers__bg { top: 0; height: 100%; width: calc(100% - var(--gut)); }
  .rl-numbers__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .rl-numbers__text { padding-top: 0; }
  .rl-numbers .rl-prose { max-width: none; }
  .rl-numbers__inner { padding-block: 32px; }

  .team { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .rl-contact__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .rl-refs .refs__viewport { margin-top: 28px; }
  .rl-refs .nav-arrows { margin-top: 36px; }
}

@media (max-width: 768px) {
  .rl-numbers__bg { width: 100%; }
  .rl-lede__title--wrap { max-width: none; }
  .rl-prose, .rl-list { max-width: none; }

  .rl-cta__stage {
    min-height: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .rl-cta__band { width: 100%; }
  .rl-cta__badge { position: static; width: 150px; }

  .team { grid-template-columns: 1fr; row-gap: 28px; }
  .rl-contact__title { line-height: 1.15; }
}

@media (max-width: 520px) {
  .team__item { gap: 18px; }
  .team__mail { font-size: 16px; }
}