/* =============================================
   HERO SZEKCIÓ – Főoldal
   ============================================= */

/* A --header-h-t a js/header-height.js írja ki élőben, a sticky #head
   tényleges (mért) magasságára – így a hero mindig pontosan a fejléc
   alatti szabad helyet tölti ki, kijelzőtől függetlenül. A min-height
   kétszer szerepel: az első a tartalék régebbi böngészőknek, amik nem
   ismerik az svh egységet (ilyenkor a második sor érvénytelen deklaráció
   marad, a böngésző az elsőt tartja meg) – a var() második paramétere a
   tartalék addig, amíg a JS le nem futott / ha kikapcsolt a JS. */
.hero {
    background: linear-gradient(180deg, #334B44 0%, #3D5A52 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    min-height: 400px;
    min-height: max(400px, calc(100svh - var(--header-h, 140px)));
}

/* Tartalom: bal oldalon, felülre igazítva. A padding-bottom mostantól
   mindig szerény/állandó (4rem) – korábban ez adta mesterségesen a
   szekció magasságát (a .hero__img helyéül), amíg a .hero saját
   min-height-je (ld. fent, --header-h alapján) ezt át nem vette. A
   padding-top értékek breakpointonként változnak, ezek a tényleges,
   szándékosan hangolt vizuális pozícionálást adják, változatlanok. */
.hero__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    padding: 10rem 0 4rem;
    flex-shrink: 0;
}

/* H1 */
.hero__title {
    font-family: 'Syne', sans-serif;
    font-size: 68px;
    font-weight: 700;
    line-height: 60px;
    color: var(--color-text-inv);
    margin: 0 0 24px 0;
}

/* "polikarbonát" szó kiemelve */
.hero__accent {
    color: var(--color-terracotta);
}

/* Alcím */
.hero__subtitle {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-inv);
    margin: 0 0 28px 0;
    max-width: 380px;
}

/* Terracotta vonal */
.hero__line {
    display: block;
    width: 96px;
    height: 3px;
    background-color: #D97E4A;
    border-radius: 2px;
}

/* Hero kép – jobb oldal, aljára igazítva */
.hero__img {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 70%;
    height: auto;
    display: block;
    user-select: none;
    transition: transform 0.5s ease;
}

.hero__img:hover {
    transform: scale(1.05);
}

@media only screen and (min-width: 2560px) {
    .hero__img {
        bottom: 0;
        max-width: 100%;
    }

    .hero__title {
        font-size: 120px;
        line-height: 120px;
    }

    .hero__content {
        max-width: 1480px;
    }

    .hero__subtitle {
        font-size: 38px;
        max-width: 680px;
    }
}

@media only screen and (min-width: 3400px) {
    .hero__img {
        max-width: 120%;
    }
}

@media only screen and (min-width: 1520px) {
    .hero__content {
        padding: 12rem 0 4rem;
    }
}

@media only screen and (max-width: 1520px) {
    .hero__content {
        padding: 14rem 0 4rem;
    }
}

/* Az .hero__img alap max-width:70%-a (ld. fent) enélkül a szabály nélkül
   is érvényesül 0-tól ~2560px-ig (kivéve a mobil és a lentebbi 2560/3400px
   feletti felülírásokat) – nem kell külön kiírni azokban a tartományokban,
   ahol csak a bottom-ot kell módosítani. */
@media only screen and (min-width: 1180px) and (max-width: 1280px) {
    .hero__content {
        padding: 10rem 0 4rem;
    }
}

@media only screen and (min-width: 1280px) and (max-width: 1366px) {
    .hero__content {
        padding: 8rem 0 4rem;
    }
}

@media only screen and (min-width: 1180px) and (max-width: 1920px) {
    .hero__img {
        bottom: -7rem;
    }
}

@media only screen and (max-width: 1180px) {
    .hero__content {
        padding: 10rem 0 4rem;
    }

    .hero__title {
        font-size: 52px;
        line-height: 50px;
    }

    .hero__subtitle {
        font-size: 20px;
    }
}

/* Terracotta vonal – scroll-animáció JS állítja a width-et */


/* ── Tablet ───────────────────────────────── */
@media only screen and (max-width: 980px) {}

/* ── Mobil ────────────────────────────────── */
@media only screen and (max-width: 799px) {
    .hero__content {
        padding: 6rem 0 4rem;
        max-width: 100%;
    }

    .hero__img {
        max-width: 150%;
        left: -5rem;
        right: auto;
    }
}

@media only screen and (max-width: 680px) {
    .hero__title {
        font-size: 36px;
        line-height: 38px;
    }

    .hero__subtitle {
        font-size: 16px;
        max-width: 100%;
    }

    .hero__content {
        padding: 5rem 0 4rem;
    }
}