/* GEESPARK.CSS - Géppark oldalspecifikus stílusok */
/* ================================================= */

/* Géppark hero */
#hero-geppark {
    height: 40vh;
    background: url('images/unnamed.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
}

#hero-geppark::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
}

#hero-geppark .hero-content {
    position: relative;
    z-index: 1;
}

#hero-geppark .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px;
    background-color: #ff6600;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255,102,0,0.5);
}

#hero-geppark .btn:hover {
    background-color: #cc5200;
    box-shadow: 0 0 20px rgba(255,102,0,0.8), 0 0 30px rgba(255,102,0,0.5);
    transform: scale(1.05);
}

/* Gépkategória szekció */
#geppark-cards {
    padding: 80px 20px;
    background-color: rgba(255, 217, 167, 1);
    text-align: center;
}

/* -------------------- Géppark Grid (Fő kategóriák) -------------------- */
.geppark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dinamikus oszlopok - 200px minimum a jobb megjelenéshez */
    gap: 40px; /* kisebb térköz mobilon */
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 10px;
}

.geppark-card {
    background: #fff; 
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    
    display: flex;
    flex-direction: column;
    height: 100%;
}


.geppark-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(255,102,0,0.3);
    border-color: #ff6600;
}


.geppark-card h3 {
    margin: 0;
    color: #ff6600;
}

.geppark-card img {
    margin-bottom: 10px;
    border: 2px solid #ddd;
    transition: border-color 0.3s;
    border-radius: 5px; /* opcionális, hogy a kép is lekerekedjen */
}
.geppark-card:hover img {
    border-color: #ff6600;
}
.geppark-card span {
    border-bottom: 3px solid #ff6600;
    padding-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #222;
    text-shadow: 0 1px 0 #fff;
}


/* Vissza gomb */
.back-button {
    text-align: center;
    padding: 40px;
}

/* -------------------- Gépek Listája Grid (4 oszlop!) -------------------- */
.machines-grid {
    display: grid;
    /* 💥 4 oszlopos elrendezés a kártyáknak */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.machine-card {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    width: 380px;   /* 💥 hozzáadva: szélesség növelése */
    height: 480px;  /* 💥 hozzáadva: nagyobb magasság */
}

.machine-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 15px;
    transition: transform 0.5s ease;
}

.machine-card h3 {
    color: #ff6600;
    margin-bottom: 10px;
}

.machine-card p {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.machine-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.machine-card:hover img {
    transform: scale(1.1);
}

.specs-btn {
    padding: 10px 15px;
    background-color: #ff6600;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.specs-btn:hover {
    background-color: #cc5200; /* Hover szín fixálása a gombokhoz */
}

/* -------------------- Reszponzív beállítások a Gépparkhoz -------------------- */
@media screen and (max-width: 1200px) {
    /* Nagyobb képernyőkön 4 helyett 3 oszlop, ha a hely szűkös */
    .geppark-grid, .machines-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}





/* -------------------- ÚJ: Vissza Gomb Stílus A Modálon Belül -------------------- */
.back-button-container {
    display: flex; /* Hogy a gomb balra tudjon kerülni */
    justify-content: flex-start; /* Balra igazítás */
    width: 100%;
    margin-bottom: 20px; /* Térköz a rácstól */
    margin-top: -10px; /* Kicsit feljebb húzzuk, a h2 alá */
}

/* Finomítás a gomb stílusán, hogy a tartályon belül legyen jól látható */
.back-button-container .spec-button {
    margin-bottom: 0; /* Eltávolítjuk az előző margin-t */
    margin-right: 0; 
    margin-left: 0; 
    /* Áttetszőbb gomb, ha a fókusz a tartalomra van */
    background-color: #f0f0f0; 
    color: #ff6600; 
    border: 1px solid #ff6600;
}
.back-button-container .spec-button:hover {
    background-color: #ff6600;
    color: white;
}

/* ================== Hamburger menü mobil ================== */
@media(max-width: 768px) {
    header nav ul {
        display: none; /* alapból rejtve */
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 60px; /* vagy a header magassága */
        right: 0;
        width: 200px;
        padding: 20px;
        gap: 10px;
        z-index: 1001;
    }

    header nav ul.active {
        display: flex; /* amikor JS hozzáadja az 'active'-t */
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 1002; /* mindig a menü felett legyen */
    }

    .hamburger div {
        width: 25px;
        height: 3px;
        background-color: white;
        transition: all 0.3s ease;
    }
}






.subcategory-card {
    width: 100%;
    max-width: 250px; /* kisebb mobilon is kezelhető */
    height: auto; /* a kép és tartalom határozza meg a magasságot */
}

.flip-card-front img, .flip-card-back img {
    width: 100%;
    height: auto;
    object-fit: cover;
}



/* Mobile / tablet fixes: header alignment and card responsiveness */
@media (max-width: 1024px) {
    /* make sure grid adapts progressively */
    .geppark-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 768px) {
    /* Header: ensure logo stays left, hamburger right and don't overlap */
    header nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        position: relative;
    }
    .logo {
        flex: 0 0 auto; /* don't shrink */
        margin-right: auto; /* Automatikus margin a jobb oldalon */
        display: flex;
        align-items: center;
        z-index: 1200;
    }
    .logo img {
        height: 38px; /* smaller logo on phones */
        width: auto;
        display: block;
    }
    .hamburger {
        display: flex !important;
        margin-left: auto;
        z-index: 1300; /* above header content */
    }
    /* hide the main UL by default on mobile; JS will toggle .active or .open */
    header nav ul {
        display: none;
    }
    header nav ul.active,
    header nav ul.open {
        display: flex;
        position: absolute;
        top: 60px; /* just under header */
        right: 0;
        left: 0;
        background: #333;
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
        z-index: 1200;
    }

    /* Cards: two columns on phones in portrait, one on very small */
    .geppark-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 12px;
    }

    .geppark-card {
        min-height: auto; /* let content define height */
        padding: 12px;
        border-radius: 10px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #ddd;
        display: flex;
        flex-direction: column;
    }

    .geppark-card img {
        width: 100%;
        height: 150px; /* fix magasság, mint a hidraulika kártyáknál */
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 10px;
    }

    .geppark-card h3,
    .geppark-card span {
        font-size: 1em;
        text-align: center;
    }
}

/* ==================== INTERACTION SPEED TUNING ==================== */
:root {
    --ui-fast-response: 0.14s;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

a,
button,
.btn,
.spec-button,
.geppark-card,
.machine-card,
header nav ul li a,
#nav-links li a,
.hamburger,
.flag-btn {
    transition-duration: var(--ui-fast-response) !important;
    transition-delay: 0s !important;
}

a,
button,
.btn,
.spec-button,
.geppark-card,
.machine-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

a,
button,
.btn,
.spec-button,
.hamburger,
.flag-btn {
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@media (max-width: 480px) {
    .geppark-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 10px;
    }
    .logo img { height: 36px; }
    .geppark-card img { 
        height: 180px; /* fix magasság kis képernyőn */
    }
}

#hero-geppark {
    position: relative;
    overflow: hidden; /* fontos az átmenethez */
}

/* Alsó átmenet az oldal színébe */
#hero-geppark::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* az átmenet magassága */
    background: linear-gradient(
        to bottom,
        rgba(255, 217, 167, 0) 0%,
        #ffd9a7 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Géppark – H2 cím stílus (Gépkategóriák) */
#geppark-cards h2 {
  position: relative;
  z-index: 2;
  font-size: 3rem;
  color: #ff6a00;
  text-shadow: 0 0 15px rgba(255,106,0,0.7);
  margin-bottom: 40px;
}