/* ===== Minimal hero: egyszínű zöld + kép a jobb oldalon (refined) ===== */

:root {
    /* márkazöld – fallback hex-szel */
    --hero-solid: var(--brand-green, #1F5A22);
}

/* alap hero blokk — semmi extra dísz, egyszínű háttér */
.hero {
    position: relative;
    isolation: isolate;
    border-radius: inherit;
}

/* egyszínű zöld háttér + világos tipó */
.hero--solid {
    background: var(--hero-solid);
    color: #fff;
    min-height: clamp(320px, 44vw, 500px);
    display: grid;
    align-items: center;
}

/* rács: balra szöveg, jobbra kép (fix, karcsúbb képoszlop) */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr clamp(360px, 34vw, 500px);
    gap: clamp(16px, 3vw, 28px);
    align-items: center;
    padding: clamp(24px, 5vw, 44px) 0;
}

/* szövegblokk */
.hero-title {
    color: #fff;
    margin: 0 0 .35rem;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

.hero-sub {
    /* ha nincs color-mix támogatás, a fallback a 85% fehér árnyalat */
    color: color-mix(in srgb, #ffffff 85%, transparent);
    margin: 0 0 1rem;
}

@supports not (color: color-mix(in srgb, #fff 85%, transparent)) {
    .hero-sub {
        color: rgba(255, 255, 255, .85);
    }
}

/* gombok: inverz a zöld hátteren */
.hero--solid .btn.primary {
    background: #fff;
    color: var(--hero-solid);
    border-color: transparent;
}

.hero--solid .btn.primary:hover {
    background: #f2f5f3;
}

.hero--solid .btn.outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.hero--solid .btn.outline:hover {
    background: rgba(255, 255, 255, .08);
}

/* képblokk (stabil arány, finom árnyék) */
.hero-media {
    margin: 0;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0, 0, 0, .08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    aspect-ratio: 4 / 3;
    /* gyors layout */
}

.hero-media>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* reszponzív: egymás alá; kép a szöveg alá kerül */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-media {
        order: 2;
        /* szöveg felül */
        aspect-ratio: 16 / 10;
        /* szélesebb arány mobilon */
        border-radius: 14px;
    }

    .hero-copy {
        text-align: center;
    }
}

/* mozgáscsökkentés – animációk elhagyása, ha a rendszer kéri */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}



/* iOS 100vh barát */
.use-vh {
    height: calc(var(--vh, 1vh) * 100);
}

/* Parallax off mobilon */
.no-parallax {
    background-attachment: scroll !important;
    transform: none !important;
}

/* Reduced motion */
.reduced-motion * {
    animation: none !important;
    transition-duration: .001s !important;
}

/* Ha volt overlay a scroll-zoomhoz: takarjuk le */
.scroll-zoom.is-clean-overlay::after {
    background: none !important;
}