/* ==========================================================================
   ORWAK – Ingyenes konzultáció és próba
   Figma: node 678:1656 (1440 × 2482)
   style.css → pages.css → ez a fájl

   A lap két saját blokkot tesz a közös vázhoz:
     .trial     a háromlépcsős „Így működik” kártyarács
     .kf-form   a kapcsolatfelvételi űrlap geometriai finomhangolása
   Minden más (.phero, .psec, .container, .contact-form, .field, .check, .btn)
   a közös stíluslapokból jön.
   ========================================================================== */

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

   A geometria (755 / 571 / 327 / 428 / 924) pontosan a pages.css alapértéke,
   ezért csak a bevezető tér el: a tervben a szövegdoboz 744px széles
   (a márkaszervizen 626), és négy sorban fut ki. A panel belmérete 1440-en
   924 − 2×83 = 758, tehát a 744 elfér benne — de csak betűköz nélkül, lásd lent.
   Mérve 1440-en: a blokk 451→631, közepe 541, a Figma panelközepe szintén 541;
   a bevezető 100px magas (4 × 25) és 743px széles, a terv 100/744-e.
   -------------------------------------------------------------------------- */
/* A 70%-os fehér (rgba) már a közös pages.css-ben van — itt csak a szélesség
   és a betűköz marad, ami tényleg ezé az oldalé.

   A bevezető a tervben NEM folyó szöveg: a 678:1661 node négy külön bekezdés,
   `whitespace-nowrap`-pel; a terv 744px-es doboza a leghosszabb sor mérete.
   A törések ezért a markupban vannak — így a betűkészlet cseréje nem írja át
   a tördelést.

   BETŰKÖZ 0, és ez nem szabadság: a Figma node-on (678:1661) NINCS tracking,
   szemben a fölötte lévő címsorral (678:1660), amin `tracking-[0.2px]` van.
   A törzsre a style.css globális .2px-e öröklődne, ami ezen a 89 karakteres
   soron +17.8px — mérve Effra Mediummal a leghosszabb sor 761.5px .2px-szel és
   743.7px nélküle. A panel belmérete 1440-en 924 − 2×83 = 758, tehát a .2px-es
   változat FIZIKAILAG nem fér be: ötödik-hatodik sorba tördelt (mérve: 150px
   magas blokk a tervbeli 100 helyett). A 743.7 ≈ a Figma 744-es doboza.

   max-width nincs: a panel belmérete a plafon, így 1400 alatt is magától
   szűkül, nem egy 1440-re szabott fix szám tartja. */
.phero__lead { max-width: none; letter-spacing: 0; }
/* A markupban MINDEN <br> előtt szóköz áll, és ez nem elgépelés: ahol a törést
   `display:none` viszi el (itt 1200 alatt, a kártyaszövegeknél 992 alatt, a
   szekciócímnél 768 alatt), ott a szóköz nélkül a két szó összeragadna
   („a többmint 60+”, „tudnaksegíteni”). Sortörésnél a sorvégi szóköz amúgy is
   levágódik, ezért 1440-en semmit nem mozdít — mérve a négy sor 732.6 / 743.5 /
   710.1 / 186.8px szóközzel és anélkül is. NE szedd ki. */
@media (max-width: 1200px) { .phero__lead br { display: none; } }

/* --------------------------------------------------------------------------
   2. „Így működik az ingyenes próba” — háromlépcsős kártyarács

   Figma (1440-es artboard):
     szekciócím        x 83  y 833          → .container + .psec padding-top 78
     1. kártya         x 191 y 921  517×294
     2. kártya         x 732 y 921  516×294   (oszlopköz 24)
     3. kártya         x 191 y 1240 1057×210  (sorköz 25, teljes szélesség)

   A 191-es bal szél 1440-en pont a --gut-narrow, a 1057 pedig a --page-narrow,
   ezért a rács a .container--narrow-ba kerül és nem fix px-ből pozicionál.

   A kártyán belül (a kártya bal-felső sarkához mérve):
     fej (szám+cím)  x +38  y +48   (a 3. kártyán y +40)
     cím             x +84  (a számtól 46px-re: 28px széles számoszlop + 18 köz)
     szövegtörzs     x +43  y +118  (a 3. kártyán y +110)
   -------------------------------------------------------------------------- */
.trial {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 25px;
}

/* A jobb oldali 5px nem elírás: a tervben a törzsszöveg oszlopa 474px széles
   (a 3. kártyán 1014) és a kártya jobb széléig fut — 38 (bal) + 5 + 474 = 517,
   a kártya pontos szélessége. A tényleges szélességet a .trial__text
   max-width-je tartja; ez a padding csak nem szorítja meg. Szimmetrikus 38-cal
   441px maradna, amibe a 2. kártya leghosszabb sora Effrával (mérve 426px) már
   beleférne — de a terv doboza a kártya jobb széléig ér, ezért marad az 5. */
.trial__card {
  background: var(--bg-alt);
  padding: 48px 5px 40px 38px;
  min-height: 294px;
}
.trial__card--wide {
  grid-column: 1 / -1;
  min-height: 210px;
  padding-top: 40px;
}

/* A szám és a kétsoros cím a tervben egy vonalban ül: a szám doboza 42px,
   a címé 48px, a két középpont 1px-en belül van. */
.trial__head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.trial__num {
  flex: none;
  width: 28px;                 /* fix oszlop, hogy az 1/2/3 alatt a címek egy vonalban maradjanak */
  font-size: 50px;
  line-height: 42px;           /* Figma 41.82 — a magyar 1.12-es padló a szöveges
                                  címsorokra vonatkozik (Ő/Ű ékezet), egy számjegynek
                                  nincs mit levágni, viszont így ül a fej a tervbeli helyén */
  font-weight: 500;
  color: var(--orange-light);
  letter-spacing: .2px;
}
.trial__title {
  font-size: 24px;
  line-height: 24px;           /* Figma 23.94 */
  font-weight: 400;
  color: var(--dark);
  letter-spacing: .2px;
}

.trial__text {
  margin-top: 22px;
  padding-left: 5px;           /* a tervben a törzsszöveg 5px-rel beljebb kezdődik, mint a szám */
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  color: var(--dark);
  max-width: 474px;
}
.trial__text--wide { max-width: 1014px; }

/* A három kártyaszöveg a tervben is kézzel tördelt (678:1666 három, 678:1672 és
   678:1673 két-két bekezdés). A markupbeli törések a Figma bekezdéshatárait
   követik, a bekezdésen belüli tördelést a 474px-es doboz adja — Effrával ez
   sorról sorra a tervbeli szöveget hozza (mérve, 1. kártya: 337/413/412/383px,
   2.: 402/413/426/205px, 3.: 904/832px; a tervbeli sorvégek szó szerint).
   992px alatt egy oszlop lesz és a max-width is lekerül — ott a kézi törés
   értelmét veszti, ezért kikapcsol. */
@media (max-width: 992px) { .trial__text br { display: none; } }

/* --------------------------------------------------------------------------
   3. Kapcsolatfelvétel

   Figma:
     cím             x 79  y 1534, 50px / 61px sormagasság, két sor
     űrlap           x 191 y 1696, 726px széles (2 × 357 + 12 oszlopköz)
     jelölőnégyzet   y 1882
     gomb            x 191 y 1936, 193 × 46, középre zárt felirat

   A .contact-form rácsa (12px oszlopköz, 24px sorköz) pont a tervbeli, ezért
   csak a szélesség, a cím alatti távolság és a két utolsó sor kerül igazításra.
   -------------------------------------------------------------------------- */
.kf__title {
  line-height: 61px;
  /* A tervben ez a cím 84px-re ül a fölötte lévő kártyától, nem a .psec
     alap 78-ára. A 6px-et itt adjuk hozzá, hogy a szekció alsó padlója
     (és vele a footer pozíciója) érintetlen maradjon. */
  margin-top: 6px;
}

.kf-form {
  margin-top: 40px;
  max-width: 726px;
}

/* A tervben a jelölőnégyzet 20px-re van az inputsor aljától, nem 24-re,
   a gomb pedig 38px-re a jelölőnégyzettől. A rács egységes 24px-es sorközét
   ez a két korrekció igazítja a tervhez. */
.kf-form__check   { margin-top: -6px; }
/* 24px rácssorköz + 14 = 38, ennyi a terven a jelölőnégyzet és a gomb köze.
   (A közös .check margónullázása után 10px-ből 14 lett, különben a gomb 4px-kel
   a terv fölé kerül, és vele a footer is.) */
.kf-form__actions { margin-top: 14px; }

/* --------------------------------------------------------------------------
   4. Reszponzív

   1400px alatt a --page 100%-ra vált, tehát a kártyarács a teljes
   tartalomszélességet kapja — a két felső kártya arányosan nő, a geometria
   nem fix px-ből jön, így 1920-on és 2560-on is együtt marad a szöveggel.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .kf__title { line-height: 1.16; margin-top: 0; }
  .trial__card { padding: 40px 32px 34px; min-height: 0; }
  .trial__card--wide { padding-top: 34px; }
}

@media (max-width: 992px) {
  .trial { grid-template-columns: 1fr; row-gap: 20px; }
  .trial__card--wide { min-height: 0; }
  .trial__text, .trial__text--wide { max-width: none; }
}

@media (max-width: 768px) {
  .trial { margin-top: 24px; }
  .trial__card { padding: 28px 22px 26px; }
  .trial__card--wide { padding-top: 28px; }
  .trial__num { font-size: 40px; line-height: 40px; width: 24px; }
  .trial__title { font-size: 21px; line-height: 25px; }
  .trial__head { gap: 14px; }
  .trial__text { font-size: 17px; padding-left: 0; }
  .kf__title br { display: none; }
  .kf-form { margin-top: 28px; }
  .kf-form__check { margin-top: 0; }
  .kf-form__actions { margin-top: 6px; }
  .kf-form__actions .btn { width: 100%; }
}