/* ==========================================================================
   ORWAK – Országos márkaszerviz
   Figma: node 678:1887 (1440 × 1980)
   style.css → pages.css → ez a fájl
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero gomb

   A tervben (678:1893) a pill 193 × 46, a felirat 166 széles és középen ül —
   tehát ~13-14px oldalpadding, és NINCS rajta nyíl. A szélességet a közös
   `.btn--wide` (min-width 193, justify-content: center) adja, itt csak a
   `.btn` alap 26/20-as aszimmetrikus paddingját kell visszavenni, különben a
   pill 228px-re hízna.
   -------------------------------------------------------------------------- */
.phero__panel .btn--wide { padding-inline: 14px; }

/* --------------------------------------------------------------------------
   0-24 órás szerviz — a bevezető blokk ritmusa

   A tervben (678:1899) a szövegblokk 188px magas és a 408px-es képsor
   közepén ül: cím 24, alatta 20px, majd 144px folyószöveg. A 144 pontosan
   6 × 24: egy bevezető sor, egy ÜRES sor, négy felsorolás-elem — a Figmában
   ez egyetlen szövegréteg, ezért a listaelemek között nincs többlet-térköz.
   A közös alap (22px blokk-köz + 6px listaelem-köz) 160px-et adna, amitől a
   blokk 214-re nőne és 13px-cel feljebb csúszna a képhez képest.
   -------------------------------------------------------------------------- */
.psec .lede {
  --lede-gap:  20px;
  --prose-gap: 24px;   /* = egy üres 24px-es sor, ahogy a tervben */
}
.psec .lede .prose li + li { margin-top: 0; }

/* A narancs vonal a tervben pontosan a cím tetejétől a lista aljáig ér
   (678:1901: top 110, magasság 188), nem 4-4px-cel beljebb. */
.psec .lede::before { top: 0; bottom: 0; }

/* --------------------------------------------------------------------------
   Hibabejelentés

   A tervben (678:1904) a három elérhetőség nem az oldal széléről indul: az
   ikonok a tartalomoszlop bal szélétől 107 / 432 / 756px-re állnak, tehát
   ~325px-es osztásköz egy 107px-es behúzás után. Ezt egyenlő harmadok adják
   vissza, ha a rács TELJES szélessége 1058px (107 behúzás + 3 × 301 oszlop +
   2 × 24 rés → 107 / 432 / 757). A behúzás %-ban van, hogy szűkebb nézetben
   arányosan fogyjon el, ne lökje ki a harmadik tételt.
   -------------------------------------------------------------------------- */
.report {
  margin-top: 56px;
  padding-left: min(107px, 8.4%);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1058px;
}

.report__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;           /* ikonoszlop 20 + 11 → a felirat 31px-re, mint a tervben */
}

/* Az ikonok a tervben nem egyforma méretűek (telefon 18×18, boríték 20×16,
   fax 20×17). A 20 × 24-es doboz a felirat első sormagassága, az
   `object-fit: none` pedig meghagyja az ikon saját méretét és függőlegesen
   középre teszi — így egyik sem nagyítódik fel, de a három sor egy vonalban
   marad. Balra zárva, ahogy a terv mutatja. */
.report__icon {
  width: 20px;
  height: 24px;
  object-fit: none;
  object-position: left center;
  flex: none;
}
.report__label {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--dark);
}
.report__value {
  display: inline-block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  color: var(--dark);
  text-decoration: underline;
}
/* Hover: a felirat NEM vált narancsra. Mérve a #df5129 a lap #f3f2f2-es
   alapján 3.52:1 — 18px-es, nem félkövér szövegen ez bukja a WCAG AA 4.5:1-et,
   ráadásul az aláhúzás elvétele az egyetlen statikus link-jelzést is elvenné.
   Helyette a szöveg marad #2c2c2c (12.50:1), és a márkaszín az aláhúzásra
   kerül, vastagabban — ugyanaz a visszajelzés, mérhetően olvashatóan. */
.report__value:hover {
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .report {
    padding-left: 0;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* --------------------------------------------------------------------------
   Effra-revízió (2026-09-09) — betűvágat és betűköz a terv szerint

   Az Effra webfont megérkezésével a két szövegblokk vágata mérhetővé vált, és
   mindkettő eltért a tervtől. A javítás itt, oldalszinten történik, mert a
   .phero__lead és a .prose közös komponens (pages.css) — a többi aloldal saját
   Figma-node-ját nem mértem, így nem írhatom felül helyettük.

   1. Hero bevezető (678:1896): a Figma-node-on NINCS tracking, a projekt
      body-alapértelmezése viszont .2px-et örökít rá. 18px-en, 626px-es
      sorhosszon ez soronként ~13px, és a 2. sor pont ettől csúszik át:
      „…működését szakképzett," 633.7px-re nő a 626-os oszlopban, tehát
      „szakképzett," lekerül a következő sorba, és onnantól MINDEN sortörés
      eltér a tervtől. Nullázva a hat sor mérve 582 / 619 / 613 / 551 / 587 /
      195 px — a terv sortörései karakterre.

   2. A 0-24 órás blokk folyószövege (678:1902) a tervben Effra **Regular**,
      nem Light. A közös .prose alapértelmezése 300; a különbség 18px-en jól
      látszik (a terv törzsszövege érezhetően testesebb). 400-zal a leghosszabb
      listaelem 519px a rendelkezésre álló 580-ból, tehát mind a négy tétel egy
      sor marad, és a blokk magassága 144px (6 × 24) — változatlan.
   -------------------------------------------------------------------------- */
.phero__lead { letter-spacing: 0; }
.psec .lede .prose { font-weight: 400; }