/* ==========================================
   HOME HERO – NADAČNÍ FOND

   Světlá a vzdušná varianta

   Fotografie: hero-list.png
   Lístky pouze na fotografii
   Jemná krémová vlna bez žluté linky

   Barvy:
   Tmavě zelená: #003f20
   Zelená:        #0e7441
   Žlutá:         #f6b400
   Krémová:       #faf8f0
========================================== */


/* ==================================
   ZÁKLAD
================================== */

#hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #003f20;
}


/* ==================================
   FOTOGRAFIE

   Přirozenější světlo a barvy.
   Lístky jsou součástí obrázku.
================================== */

#hero .hero-photo {
    object-position: 65% 40%;

    filter:
        brightness(1.09)
        saturate(1.06)
        contrast(1.01);
}


/* ==================================
   HLAVNÍ ZELENÝ PŘECHOD

   Tmavé pozadí pouze tam,
   kde potřebujeme čitelný text.

   Vpravo výrazně světlejší.
================================== */

#hero .hero-overlay {
    background: linear-gradient(
        90deg,

        rgba(0, 29, 17, 0.90) 0%,
        rgba(0, 39, 23, 0.78) 23%,
        rgba(0, 39, 23, 0.55) 40%,
        rgba(0, 39, 23, 0.20) 57%,
        rgba(0, 29, 17, 0.03) 75%,
        transparent 100%
    );
}


/* ==================================
   SPODNÍ ZTMAVENÍ

   Pouze jemná ochrana spodního
   textu a scrollovací šipky.
================================== */

#hero .hero-bottom-shade {
    height: 34%;

    background: linear-gradient(
        to top,

        rgba(0, 25, 13, 0.55) 0%,
        rgba(0, 25, 13, 0.18) 42%,
        transparent 100%
    );
}


/* ==================================
   HLAVNÍ OBSAH
================================== */

#hero .hero-inner {
    position: relative;
    z-index: 2;
}

#hero .hero-content {
    position: relative;
    min-width: 0;
}


/* ==================================
   SPODNÍ LIŠTA

   Prostor navíc pro krémovou vlnu,
   aby nezakrývala text a šipku.
================================== */

#hero .hero-footer {
    position: relative;
    z-index: 2;
    padding-bottom: 36px;
}


/* ==================================
   SPODNÍ ORGANICKÁ VLNA

   Bez žluté čáry.
   Pouze krémová plocha.
================================== */

#hero .hero-wave {
    position: absolute;
    z-index: 4;

    left: 0;
    bottom: -1px;

    display: block;
    width: 100%;
    height: clamp(35px, 4.5vw, 65px);

    pointer-events: none;
}


/* ==================================
   MENŠÍ DESKTOP
   1101–1440 px
================================== */

@media (min-width: 1101px) and (max-width: 1440px) {

    #hero .hero-content {
        max-width: 790px;
    }

    #hero .hero-title {
        font-size: clamp(
            3.7rem,
            4.9vw,
            5.3rem
        );
    }

    #hero .hero-script {
        font-size: clamp(
            4.3rem,
            5.9vw,
            6.4rem
        );
    }

}


/* ==================================
   TABLET NA VÝŠKU
   600–1100 px
================================== */

@media (min-width: 600px)
       and (max-width: 1100px)
       and (orientation: portrait) {

    #hero {
        min-height: max(880px, 94svh);
    }

    #hero .hero-photo {
        object-position: 65% 38%;
    }

    #hero .hero-overlay {
        background: linear-gradient(
            90deg,

            rgba(0, 29, 17, 0.92) 0%,
            rgba(0, 39, 23, 0.76) 37%,
            rgba(0, 45, 25, 0.35) 68%,
            rgba(0, 45, 25, 0.05) 100%
        );
    }

    #hero .hero-bottom-shade {
        height: 42%;
    }

    #hero .hero-inner {
        padding: 70px 32px 48px;
    }

    #hero .hero-content {
        max-width: 800px;
    }

    #hero .hero-title {
        font-size: clamp(
            3.8rem,
            7vw,
            5.7rem
        );

        line-height: 1.04;
    }

    #hero .hero-script {
        font-size: clamp(
            4.6rem,
            8.5vw,
            6.8rem
        );

        line-height: 1.12;
    }

    #hero .hero-description {
        font-size: clamp(
            1.25rem,
            2.1vw,
            1.55rem
        );

        line-height: 1.75;
    }

    #hero .hero-action {
        min-height: 64px;
        font-size: 1rem;
    }

    #hero .hero-footer-title {
        font-size: 1.3rem;
    }

    #hero .hero-footer-description {
        font-size: 1rem;
    }

}


/* ==================================
   TABLET NA ŠÍŘKU
   769–1100 px
================================== */

@media (min-width: 769px)
       and (max-width: 1100px)
       and (orientation: landscape) {

    #hero {
        min-height: 700px;
    }

    #hero .hero-photo {
        object-position: 68% 40%;
    }

    #hero .hero-overlay {
        background: linear-gradient(
            90deg,

            rgba(0, 29, 17, 0.92) 0%,
            rgba(0, 39, 23, 0.80) 38%,
            rgba(0, 45, 25, 0.34) 65%,
            rgba(0, 29, 17, 0.04) 100%
        );
    }

    #hero .hero-content {
        max-width: 680px;
    }

    #hero .hero-title {
        font-size: clamp(
            3.2rem,
            5vw,
            4.8rem
        );
    }

    #hero .hero-script {
        font-size: clamp(
            3.8rem,
            5.8vw,
            5.7rem
        );
    }

    #hero .hero-description {
        font-size: 1.12rem;
    }

}


/* ==================================
   MENŠÍ TABLET NA ŠÍŘKU
   600–768 px
================================== */

@media (min-width: 600px)
       and (max-width: 768px)
       and (orientation: landscape) {

    #hero {
        min-height: 680px;
    }

    #hero .hero-photo {
        object-position: 68% center;
    }

    #hero .hero-overlay {
        background: linear-gradient(
            90deg,

            rgba(0, 29, 17, 0.93) 0%,
            rgba(0, 39, 23, 0.82) 48%,
            rgba(0, 45, 25, 0.32) 100%
        );
    }

    #hero .hero-title {
        font-size: clamp(
            3rem,
            6vw,
            4rem
        );
    }

    #hero .hero-script {
        font-size: clamp(
            3.6rem,
            7vw,
            4.8rem
        );
    }

    #hero .hero-description {
        font-size: 1.1rem;
    }

}


/* ==================================
   MOBIL
   Do 599 px

   Fotografie může být světlejší,
   ale text potřebuje tmavé pozadí.
================================== */

@media (max-width: 599px) {

    #hero {
        min-height: max(640px, 88svh);
    }

    #hero .hero-photo {
        object-position: 68% center;

        filter:
            brightness(1.07)
            saturate(1.05);
    }

    #hero .hero-overlay {
        background: linear-gradient(
            180deg,

            rgba(0, 29, 17, 0.20) 0%,
            rgba(0, 35, 20, 0.42) 26%,
            rgba(0, 35, 20, 0.77) 62%,
            rgba(0, 29, 17, 0.94) 100%
        );
    }

    #hero .hero-bottom-shade {
        height: 32%;
    }

    #hero .hero-wave {
        height: 32px;
    }

    #hero .hero-footer {
        padding-bottom: 24px;
    }

}


/* ==================================
   VELMI MALÉ MOBILY
   Do 380 px
================================== */

@media (max-width: 380px) {

    #hero .hero-wave {
        height: 26px;
    }

}


/* ==================================
   NÍZKÉ DISPLEJE NA ŠÍŘKU
================================== */

@media (max-height: 650px)
       and (orientation: landscape) {

    #hero {
        min-height: 680px;
    }

}


/* ==================================
   OMEZENÝ POHYB
================================== */

@media (prefers-reduced-motion: reduce) {

    #hero [data-aos] {
        transform: none !important;
        opacity: 1 !important;
    }

    #hero .hero-action,
    #hero .hero-scroll {
        transition: none;
    }

    #hero .hero-action:hover,
    #hero .hero-scroll:hover {
        transform: none;
    }

}