/* ═══════════════════════════════════════════════════════════════════════════
   LKW STORE v3 – SZAVATOSSÁG ÉS GARANCIA (oldal-specifikus)
   ---------------------------------------------------------------------------
   A közös terv.css NINCS átírva. Itt csak az áll, ami EZEN a lapon kell, és
   amit a terv.css nem ismer: ez az egyetlen lap, amelynek folyószövege van
   (szavatossági és garanciális feltételek – ezt végig kell olvasni, nem
   átfutni). Minden szabály ugyanabból a nyelvből dolgozik: 0 lekerekítés,
   fekete vonal, hajszálvonal, sorszám. PIROS NINCS BENNE – a lapon a piros a
   hívásé és a nyitócím kiemelt szaváé marad.
   Minden szelektor .o-garancia alá van kötve, tehát egyetlen közös osztály
   viselkedése sem változik meg más lapon.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A SOR VEZÉRMONDATA ───────────────────────────────────────────────────
   A v1-en ez a négy kártya egy-egy mondata volt. Itt a sor nyitómondata:
   sötét és félkövér, hogy a hosszabb kifejtés fölött megálljon magában –
   aki csak átfut a lapon, ebből a négy mondatból is megkapja a lényeget. */
.o-garancia .szolg-mot{
  color:var(--ink);font-weight:700;font-size:16.5px;line-height:1.5;
  margin-bottom:14px;max-width:62ch;
}

/* a kifejtés több bekezdés – a terv.css egy bekezdésre volt méretezve */
.o-garancia .szolg-fo p + p{margin-top:14px}
.o-garancia .szolg-fo strong{color:var(--ink);font-weight:800}

/* ── A SZERZŐDÉSES MONDAT ─────────────────────────────────────────────────
   A v1-en ez egy külön hátterű „callout" doboz volt. Doboz helyett VONAL: a
   .big-num bal szegélyének ugyanaz a mozdulata, csak a törzsszövegben. */
.o-garancia .gar-kiemelt{
  border-left:4px solid var(--ink);
  padding:2px 0 2px 20px;
  margin:20px 0 4px;
  max-width:60ch;
}
.o-garancia .gar-kiemelt p{
  color:var(--ink);font-size:17px;font-weight:600;line-height:1.56;max-width:none;
}
/* a kiemelés után következő bekezdés ne tapadjon a vonalhoz
   (a p + p szabály nem éri el, mert a kiemelés egy <div>) */
.o-garancia .gar-kiemelt + p{margin-top:18px}

/* ── FOLYÓSZÖVEG a szakaszokban (a .szolg sorokon kívül) ─────────────────── */
.o-garancia .gar-torzs{max-width:66ch}
.o-garancia .gar-torzs p{color:var(--gray);font-size:16.5px;line-height:1.66}
.o-garancia .gar-torzs p + p{margin-top:14px}
.o-garancia .gar-torzs strong{color:var(--ink);font-weight:800}
.o-garancia .gar-torzs-zaro{margin-top:clamp(26px,3vw,34px)}

/* ── „ÉRDEMES TISZTÁZNI" – a négy kérdés ──────────────────────────────────
   Nem pipás lista: sorszám + hajszálvonal, ugyanaz a ritmus, mint a .lp
   adatsávban, csak világos alapon. Két hasáb, mert négy rövid tétel egy
   sorban szétesne, egymás alatt pedig fölöslegesen nyújtaná a lapot. */
.o-garancia .gar-kerdesek{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px;margin-top:clamp(22px,2.6vw,30px);max-width:1000px;
  list-style:none;padding:0;counter-reset:gk;
}
.o-garancia .gar-kerdesek li{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 14px;
  align-items:baseline;padding:16px 0 18px;border-top:2px solid var(--ink);
  counter-increment:gk;
}
/* A sorszám CSS-ből jön: a lapon a négy kérdés EGYBEFÜGGŐ szöveg marad. */
.o-garancia .gar-kerdesek li::before{
  content:counter(gk,decimal-leading-zero);
  font-size:12.5px;font-weight:900;letter-spacing:.1em;color:var(--gray-2);
  font-variant-numeric:tabular-nums;
}
.o-garancia .gar-kerdesek b{font-size:16px;font-weight:700;line-height:1.45}

/* ── A 4 LÉPCSŐS ADATSÁV CÍMSORA ──────────────────────────────────────────
   Ezen a lapon a négy lépcső a V1 TELJES címét viseli („SafeControl® –
   vásárlás előtti állapotfelmérés"), nem a főoldal rövidített változatát –
   így az első cím két sorba fut, a másik három egybe. Magyarázó szöveg
   nélkül ettől az első hasáb egy sorral lejjebb kezdődik, és a sáv alja
   rongyos lesz. Két sornyi hely fenntartása mindegyiknek egy vonalra hozza
   a magyarázatokat; a min-height nem vág le semmit, ha egy cím hosszabb.
   Csak ott kell, ahol a sáv tényleg négy hasáb (1240 px fölött). */
@media (min-width:1241px){
  .o-garancia .lepcso-row .lp b{min-height:2.5em}
}

/* ── A SÖTÉT SZAKASZ FOTÓJA ───────────────────────────────────────────────
   A csarnokfotó nagyon széles (1600×711). Teljes magasságában a szakasz
   feléből fotó lenne, ezért sávra vágjuk – a vágás SZÁNDÉKOS (object-fit),
   nem nyújtás, tehát a kép aránya érintetlen marad. */
.o-garancia .gar-td{margin:clamp(28px,3.4vw,40px) 0 0}
/* A kép <picture>-ben ül, ezért NEM gyereke a .td-img-nek: a terv.css
   `.td-img>img` szabálya nem éri el. Leszármazott szelektorral viszont igen –
   és ez nem csak dizájn: fix magasság nélkül a lusta kép betöltéskor 574 px-t
   növesztett a lapon (mérve), vagyis a lap magassága görgetés közben ugrott. */
.o-garancia .gar-td .td-img img{
  width:100%;height:clamp(220px,26vw,380px);
  object-fit:cover;object-position:50% 46%;
}

/* a két sáv közé ugyanaz a térköz kerüljön, mint a lépcső fölé */
.o-garancia .sc-cta{margin-top:clamp(28px,3.4vw,40px)}

/* ── SZŰKÜLŐ KÉPERNYŐ ─────────────────────────────────────────────────── */
@media (max-width:1000px){
  /* a pecsét a sor akció-hasábjában áll; szűkebb nézetben a hasáb a szöveg
     alá kerül (terv.css), ott ne nyúljon a teljes szélességre */
  .o-garancia .szolg-akcio .pecset{max-width:420px}
}
@media (max-width:720px){
  .o-garancia .gar-kerdesek{grid-template-columns:1fr;gap:0}
  .o-garancia .gar-kiemelt{padding-left:16px;margin:18px 0 2px}
  .o-garancia .gar-kiemelt p{font-size:16px}
  .o-garancia .szolg-mot{font-size:15.5px}
  .o-garancia .gar-torzs p{font-size:15.5px}
}