/* ORWAK — the five service pages
   ingyenes-konzultacio · markaszerviz · balazogep-berles · garancia · akciok

   The reconcile pass concluded these are one template with different content,
   so they share one stylesheet. Everything structural — .phero, .split (in all
   four configurations), .list-check, .lede-lg, .stats, .hcontact, .pill,
   .section-head — comes from shared.css. What is left here is the three bands
   that genuinely belong to one page each (.steps, .report, .promo), the
   below-the-field CTA slot the artboards draw on two of them, and four small
   corrections to shared components that the service artboards need.

   Loaded after shared.css on all five pages. */

/* ============================================================ CORRECTIONS
   to shared components, scoped by "only pages that load this file". */

/* Hungarian floor. .section-head h2 ships line-height:1 — below the 1.12
   hard floor. Every h2 on these pages is 50px with acutes (Így, Hibabejelentés)
   and two of them wrap. */
.section-head h2{ line-height: var(--lh-head); }

/* The hero CTA pill. Only Országos márkaszerviz draws one (Figma 678:1895, a
   193×46 pill 29px under the lede); no other .phero instance has one. It stays
   inside .phero__copy so it inherits the white focus ring the :where() rule in
   shared.css flips on for dark grounds. */
.phero__cta{
  margin: 29px 0 0;
  display: flex;              /* so the pill hugs its label instead of the column */
  justify-content: flex-start;
}

/* Ranges that must not break across lines: "(240 l – 1100 l)", "1:4 – 1:8". */
.nowrap{ white-space: nowrap; }

/* ============================================================ STEPS
   ingyenes-konzultacio.html — the numbered process band (Figma 678:1664/67/68).
   Three flat #EFEEEE panels, 2-then-1, on a centred 1057px inner column while
   the h2 above stays at --pad-x. The panels separate from the page ground at
   1.03:1, so the boundary conveys nothing: the grouping is carried by the <ol>
   and the ordinal, and the design deliberately has no border and no shadow —
   do not add either. */
.steps{ margin-top: var(--section-y); }
.steps__grid{
  box-sizing: border-box;
  /* 1057px of content between --pad-x gutters reproduces the artboard's
     x191 / x1248 column edges at 1440 exactly. */
  max-width: calc(1057px + 2 * var(--pad-x));
  margin: 0 auto;
  padding-inline: var(--pad-x);
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.step{
  background: var(--bg-2);
  padding: var(--sp-7) var(--sp-7) var(--sp-8);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: var(--sp-2);
  row-gap: var(--sp-5);
}
.step--wide{ grid-column: 1 / -1; }
.step__num{
  /* --primary-text, not --primary-2: #F76C4E on the #EFEEEE card measures
     2.52:1, under even the 3:1 large-text bar. #B23C18 is 5.10:1. */
  font: 500 50px/var(--lh-display) var(--font-display);
  letter-spacing: .2px;
  color: var(--primary-text);
}
.step__t{
  margin: 0;
  align-self: center;
  font: 400 var(--t-h4)/var(--lh-head) var(--font-display);
  letter-spacing: .2px;
  color: var(--dark);
  text-wrap: balance;
}
.step__d{
  grid-column: 1 / -1;
  margin: 0;
  font: 300 var(--t-body-lg)/var(--lh-snug) var(--font-sans);
  letter-spacing: .2px;
  color: var(--dark);
  text-wrap: pretty;
}
@media (max-width: 860px){
  .steps__grid{ grid-template-columns: 1fr; }
  .step{ padding: var(--sp-6) var(--sp-5) var(--sp-7); }
  .step__num{ font-size: 40px; }
}

/* ============================================================ REPORT
   markaszerviz.html — the three fault-reporting routes under "Hibabejelentés".
   The artboard hand-places them at x191/516/840 with 323px of dead margin to
   the right; rebuilt as an even three-column grid across the container, which
   is what the live site's markup does too.

   The rows themselves are .cside-row from shared.css — same icon + label +
   value shape as the contact block — with the icon moved off --primary-2
   (2.61:1 on the light ground) onto --primary-text (5.29:1). */
.report{ margin-top: var(--section-y); }
.report__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.report .cside-icon{ color: var(--primary-text); }
.report .cside-row__d a{
  /* the underline is the only affordance in the design — keep it */
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h);
  border-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.report .cside-row__d a:hover{ color: var(--primary-text); }
@media (max-width: 860px){ .report__grid{ grid-template-columns: 1fr; } }

/* ============================================================ PROMO
   akciok.html — the "10% KEDVEZMÉNY" lead-in: a display figure beside the
   terms paragraph (which is .lede-lg). Arguably .split with a text cell in the
   media slot; kept separate until a second page wants it. */
.promo{ margin-top: var(--section-y); }
.promo__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.promo__figure{
  margin: 0;
  font: 700 var(--t-h1)/var(--lh-display) var(--font-display);
  /* the artboard sets -2px at 50px = -0.04em, past the -0.03em guard rail */
  letter-spacing: var(--tr-h1);
  /* --primary-text, not --primary: #DF5129 on --bg is 3.52:1, which only
     clears the bar while this stays large text. */
  color: var(--primary-text);
  overflow-wrap: normal;
  hyphens: none;
}
.promo__text{ max-width: 517px; margin: 0; }
@media (max-width: 860px){
  .promo__inner{ grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ============================================================ BAND CTA
   balazogep-berles (orange band A) and akciok (the ORWAK 3110 offer) both put
   their pill BELOW the orange field, on the page ground — 36px under the band
   on the Akciók artboard, 35px on Bérlés. .split--field's ::before is inset
   from the section bottom by --field-bottom, so the pill clears it:
     36 (gap) + 46 (pill) + 48 (.split--field padding-bottom) = 130px. */
.svc-band{ --field-bottom: 130px; }
.svc-band__cta{ margin: var(--sp-9) auto 0; }

/* shared.css flattens every field to top:0/bottom:0 below 1180px, which would
   put the pill back on the orange. Hold the inset so the pill stays on the
   page ground at every width. */
@media (max-width: 1180px){
  .svc-band.split--field::before{ top: var(--field-top); bottom: var(--field-bottom); }
}

/* ============================================================ OFFER
   akciok.html — the ORWAK 3110 media cell. The artboard's signature detail is
   a transparent cut-out hanging past the bottom edge of the orange band onto
   the grey page ground. The first export was a JPG, which painted a white
   rectangle over both; it has been re-exported from node 678:2039 as PNG-24
   with alpha, so the cut-out can do what it was drawn to do. The field already
   stops --field-bottom above the section end, which is the room it hangs into. */
.offer__media{
  background-size: contain;
  background-position: center bottom;
  align-self: end;
  margin-bottom: calc(-1 * var(--field-bottom, 0px) + var(--sp-4));
}

/* ============================================================ STATS — NARROW
   LOCAL WORKAROUND, not this page's own component. shared.css's .stats__grid is
   a hard repeat(4, 1fr) with `white-space: nowrap` 52px figures and no
   responsive rule at all, so below ~900px the four columns are narrower than
   "1,7 millió" and the row pushes a horizontal scrollbar on the whole document
   (measured: +25px at 768, +148px at 375). index.html draws the same component
   and has the same overflow — the fix belongs in shared.css, not here. Scoped
   to .svc-stats so it cannot reach any page that does not load this file. */
.svc-stats .stats__grid{ row-gap: var(--sp-7); }
@media (max-width: 980px){
  .svc-stats .stats__grid{ grid-template-columns: repeat(2, 1fr); }
  .svc-stats .stats__grid .stat{ border-left: 0; padding-left: 0; }
  .svc-stats .stat__num{ font-size: 42px; }
  .svc-stats .stat__num-suf{ font-size: 30px; }
}
@media (max-width: 560px){
  .svc-stats .stats__grid{ grid-template-columns: 1fr; }
  .svc-stats .stat__num{ font-size: 38px; }
}

/* ============================================================ CONTACT — SHORT
   ingyenes-konzultacio.html is the one service artboard whose closing block has
   no contact-details column at all: heading + a 726px form on the page ground,
   nothing to the right of x917. Everything else is the shared .hcontact.
   NOTE: .hcontact--short belongs in shared.css (page-specs/_plan.json names it
   as a shared component); it is defined here only because this build may not
   edit shared.css. */
.hcontact--short .hcontact__inner{ grid-template-columns: minmax(0, 1fr); }
.hcontact--short .hcontact__form{ max-width: 726px; }