/* ═══════════════════════════════════════════════════════════════════════════
   LKW STORE v3 – SZERVIZ ÉS MŰSZAKI VIZSGAÁLLOMÁS: OLDAL-SPECIFIKUS STÍLUS
   ---------------------------------------------------------------------------
   Csak az, amit a terv.css még nem ismer. A terv.css-t NEM írjuk át:
   az img{height:auto} és a .pg{object-fit:contain} érintetlen marad.
   A fej.php ezt a fájlt magától betölti ($oldal = 'szerviz').
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A szolgáltatás-sor VEZÉRMONDATA ──────────────────────────────────────
   A v1 kártyáin a cím alatt egy félkövér vezérmondat állt (.svz-lead), alatta
   a leírás. A .szolg-fo p alapból szürke; ez az egy sor a címhez tartozik,
   ezért sötét és félkövér. Két osztály kell, különben a terv.css
   `.szolg-fo p` szabálya (típusszelektorral) erősebb volna. */
.szolg-fo .szolg-mot{color:var(--ink);font-weight:700;margin-bottom:10px}

/* ── A CSOMAG ALCÍME a cím mellett ────────────────────────────────────────
   Ugyanaz a nyelv, amit a lap a lépések h3 > em-jénél már használ – nem új
   dizájn, csak ugyanaz a megoldás egy másik soron. */
.szolg-fo h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.szolg-fo h3 em{
  font-style:normal;font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gray-2);
}

/* ── „Legnépszerűbb" – a v1 csomagjelölése (pkg-badge) ────────────────────
   FEKETE, nem piros: a piros a telefonszámé, a nyitócím kiemelt szaváé és a
   SafeControlé. Ugyanaz a tömb, mint a lépések sorszámdobozánál. */
.szolg-jel{
  display:inline-block;background:var(--ink);color:#fff;
  font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;line-height:1.3;
}

/* ── DOKUMENTÁLT SZERVIZMUNKA: szöveg és fotó egymás mellett ──────────────
   A fotó hasábja korlátos (520px), hogy a 1400×933-as felvétel ne nőjön a
   szakasz fölé. A kép aránya érintetlen: a width/height a fájlból jön. */
.dok{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(24px,3.4vw,52px);align-items:stretch;
}
/* A szöveghasáb 206 px, a fotó 389 px: `align-items:start` mellett 183 px ÜRES SÁV
   maradt a sötét szakaszban a szöveg alatt. Nem a fotót kicsinyítjük (az a lap
   bizonyítéka), hanem a hasáb KÉT VÉGÉT rögzítjük: a bekezdés a fotó tetejével,
   a dokumentációs sor a fotó aljával egy vonalban zár. Mobilon (egy hasáb) a
   sormagasság a tartalomé, ezért a `margin-top:auto` ott nem tesz semmit. */
.dok-szoveg{display:flex;flex-direction:column}
.dok-szoveg p{font-size:17px;line-height:1.62;color:#a8aeb6;max-width:52ch}
.dok-szoveg .claims{margin-top:auto;padding-top:24px}
@media (max-width:900px){
  .dok{grid-template-columns:1fr}
  .dok-szoveg .claims{margin-top:0}
}

/* A WebP-készlet kerekített mérete (sc-tablet-440.webp 440×293, arány 1,501706)
   egy hajszállal más, mint a JPEG-é (1400×933, arány 1,500536). A .td keretben
   a kép magassága automatikus, ezért a WebP megérkezése MÉRHETŐEN mozdított a
   lapon: 390×844-en bodyH 8587 → 8586. A doboz arányát ezért a CSS rögzíti –
   így a lap magassága attól független, melyik változat jön meg –, a képet pedig
   object-fit:cover illeszti bele, tehát egyik változat sem torzulhat.
   (A többi fotónak a terv.css amúgy is fix magasságot ad object-fit:cover-rel,
   ezért ott ez a gond elő sem áll.)
   FIGYELEM a szelektorra: a kép a picture elemen BELÜL áll, és bár a terv.css
   picture{display:contents}-szel kiveszi az elrendezésből, a CSS gyerek-
   kombinátora (>) ettől még NEM lépi át – ezért leszármazott-szelektor kell.
   A kiírt arány sem lehet "auto 1400/933": az auto kulcsszóval a betöltött
   fájl saját aránya nyer, és pontosan ezt akarjuk kizárni. */
.dok .td-img img{width:100%;aspect-ratio:1400 / 933;object-fit:cover}

/* ── A CSOMAGSOR ZÁRÁSA ───────────────────────────────────────────────────
   A .steps-end a saját 2 px-es felső vonalával zár, az ol.szolg utolsó sora
   viszont a maga 1 px-es alsó vonalával – így KÉT vonal állt egymás alatt,
   40 px üres sávval közöttük. Az utolsó sor vonalát vesszük le: a szakaszt
   egyetlen, vastag vonal zárja, pontosan úgy, ahogy a főoldalon. */
#csomagok .szolg-row:last-child{border-bottom:0}

/* ── GOMBSOR a záró szakaszban ────────────────────────────────────────────
   Nem a nyitány .hero-cta-ja: ahhoz a belépő kulcskockák (html.mz-intro
   .hero-cta > *) vannak kötve, és azok csak a nyitányra valók. */
.cta-sor{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}

/* ── A ZÁRÓ SZAKASZ négy ténye a .claims nyelvét használja ────────────────
   Ott a szakaszfej alatt közvetlenül áll, ezért nem kell a .claims saját
   22px-es felső térköze. */
#kapcsolat .claims{margin-top:0}
#kapcsolat .people-more{margin-top:clamp(30px,3.4vw,44px)}