/* =====================================================================
   responsive-fixes.css  ·  Klein Park Kft.
   Egységes reszponzív korrekciós réteg – 2026
   ---------------------------------------------------------------------
   HÁTTÉR
   A weboldal az évek során felhalmozott, egymásnak ellentmondó és
   többszörösen ismételt CSS-szabályokat tartalmazott (több külső
   stíluslap + oldalankénti beágyazott <style> blokkok). A legfőbb
   következmény: a "mobil" töréspont (max-width: 768px) a TABLET-méretű
   kijelzőkre is a telefonos elrendezést erőltette, amely a kártyákat
   és a szolgáltatás-gombokat egyetlen, ~360px-re szűkített, középre
   zárt oszlopba préselte – így a 481–768px közötti eszközökön a
   vízszintes hely nagy része kihasználatlan maradt. Emellett a
   hidraulika oldal kártyái rossz doboz-modell miatt ~6px-es
   vízszintes túlcsordulást (görgetősávot) okoztak minden méreten.

   MIT JAVÍT EZ A RÉTEG
     1) Doboz-modell: a kártyák szegélye/paddingja többé nem lóg ki a
        rács-sávból  ->  megszűnik a vízszintes túlcsordulás.
     2) Tablet-tartomány (481–768px): visszaáll a több oszlopos, teljes
        szélességű elrendezés. Az auto-fit + minmax "ugrásmentes"
        átmenetet ad az oszlopszámok között (1 -> 2 -> 3).
     3) A telefonos nézet (<=480px) és az asztali elrendezés (>768px)
        érintetlen marad.

   BETÖLTÉS
   A fájlt minden érintett oldal a </body> előtt, UTOLSÓ stíluslapként
   tölti be, hogy a forrásrend szerint megbízhatóan felülírja a korábbi
   (akár !important) szabályokat is.
   ===================================================================== */


/* ------------------------------------------------------------------
   1) DOBOZ-MODELL – a szegély és a belső margó (padding) a kártya
      szélességén BELÜL számítson, ne toljon ki a rács-sávból.
      Ez szünteti meg a hidraulika oldal kártyáinak ~6px-es
      vízszintes túlcsordulását (content-box -> border-box).
   ------------------------------------------------------------------ */
.geppark-card,
.category-card,
.subcategory-card,
.machine-card,
.sale-card,
.service-card,
.service-btn {
    box-sizing: border-box !important;
}

/* A kártyaképek soha ne lépjék túl a szülő konténerüket. */
.geppark-card img,
.category-card img,
.subcategory-card img,
.machine-card img,
.sale-card img,
.service-card img {
    max-width: 100% !important;
    height: auto;
}


/* ------------------------------------------------------------------
   2) TABLET-TARTOMÁNY (481–768px)
      A kártyarácsok kihasználják a rendelkezésre álló szélességet,
      több oszlopban – nem szűkülnek egyetlen 360px-es oszlopra.
   ------------------------------------------------------------------ */
@media (min-width: 481px) and (max-width: 768px) {

    /* Gép-/kategóriakártya rácsok: a 360px-es szélesség-zár feloldása,
       folyamatosan igazodó oszlopszám (auto-fit). */
    .geppark-grid {
        width: auto !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important;
    }

    /* Szolgáltatás-gombok konténere. Fontos: egyes oldalakon ez GRID
       (epitoipar), máshol FLEX (hidraulika-főoldal) elrendezésű, és a
       korábbi szabályok mindkettőt egyetlen keskeny oszlopra
       kényszerítették. Itt egységesen grid + auto-fit lesz, így tableten
       két oszlop jelenik meg, középre igazítva. */
    #hero-services .service-button-container,
    .service-button-container,
    .service-cards {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
        gap: clamp(16px, 3vw, 28px) !important;
        width: auto !important;
        max-width: 920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-items: center !important;
        flex-wrap: wrap !important;      /* biztonsági tartalék flex-módra */
    }

    /* A gombok/kártyák töltsék ki a rács-sávot (de ne legyenek túl szélesek). */
    #hero-services .service-btn,
    .service-button-container > .service-btn,
    .service-cards > .service-card {
        width: 100% !important;
        max-width: 360px !important;
        height: auto !important;
    }
}