/* HERO */
.hero {
    /* promenne pro nastaveni velikost v breakpoints */
    --hero-scale: 1;
    --hero-bottom-shift: 0px;
    /* posun dolu */
    /* nastaveni obrazu na pozadi */
    background-image: url('../img/hero/hero_meadow1.svg');
    background-repeat: no-repeat;
    background-position: right calc(100% + var(--hero-bottom-shift));
    background-size: 1920px auto;
    overflow: hidden;
}

/* === HERO – přerušení globálního gridu a absolutní layout obsahu ========= */

/* Zruš globální grid layoutu pro tuto stránku a vytvoř „plátno“ pro umístění */
.hero .hero-wrap {
    position: relative;
    display: block; /* zruší grid z layout.css */
    width: 100%;
    max-width: 1024px;
    margin-inline: auto;
    padding: 0 16px;
    height: calc(95vh - 100px);
    z-index: 80;
}

/* Absolutní umístění textu a vizuálu */
.hero .hero-text {
    position: absolute;
    left: clamp(16px, 8%, 120px);
    top: max(70px, calc(20% - var(--hero-bottom-shift)));
    width: min(50ch, 75vw);
    text-align: left;
    line-height: 1.35;
    z-index: 80;
    /* jemná čitelnost nad pozadím */
    text-shadow: 0 2px 0 rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .12);
    font-size: calc(2em * var(--hero-scale));
}

.hero .hero-visual {
    position: absolute;
    right: clamp(25px, 10%, 300px);
    bottom: min(5%, 150px);
    width: clamp(300px, calc(500px * var(--hero-scale)), 90%);
    z-index: 70;
    pointer-events: none;
}

.hero .hero-visual img {
    width: 100%;
    height: auto;
}


/* zakladni rozmery plovoucich prvku
meadow1 - 1920x600 - ukotvit vlevo
meadow2 - 1920x600 - ukotvit uprostřed
tree1 - 350x500
tree2 - 325x300
flower - 100x120
sun - 120x120
cloud1 - 250x80
cloud2 - 250x70
cloud3 - 120x35
*/


/* všechny vrstvy */
.hero-layer {
    position: absolute;
    inset: 0;
    pointer-events: none; /* neblokují klikání */
}

/* druhá vrstva pozadí ------------------------------ */
.bg-layer {
    z-index: 50;
}

.bg-layer img {
    position: absolute;
    width: max(1920px, 100vw);
    display: block;
    bottom: calc(0px - var(--hero-bottom-shift));
    left: 50%;
    transform: translateX(-50%) scale(var(--hero-scale));
    transform-origin: center bottom;
}


/* prvky v popředí ------------------------------ */

.fg-layer-top {
    transform: scale(var(--hero-scale));
    transform-origin: right 15%;
    z-index: 40;
}

.fg-layer-top img {
    position: absolute;
    height: auto;
    z-index: 40;
    border-radius: 0 !important;
}


.fg-layer-bottom img {
    position: absolute;
    height: auto;
    z-index: 100;
    border-radius: 0 !important;
    transform: scale(var(--hero-scale));
    transform-origin: center bottom;
}

/* slunce */
.fg-layer-top .sun {
    top: clamp(100px, 12vh, 120px);/* 120px; */
    right: 25%;
    width: 120px;
    animation: pulse 2s ease-in-out infinite alternate;
}

/* mraky */
.fg-layer-top .cloud1 {
    top: 110px;
    left: 20%;
    width: 250px;
    animation: float 15s ease-in-out infinite alternate;
}

.fg-layer-top .cloud2 {
    top: 18%;
    right: 18%;
    width: 250px;
    animation: float 15s ease-in-out infinite alternate;
}

.fg-layer-top .cloud3 {
    top: 100px;
    left: 50%;
    width: 120px;
    animation: float-distant 15s ease-in-out infinite alternate;
}

/* stromy */
.fg-layer-bottom .tree1 {
    bottom: 250px;
    left: 5%;
    width: 350px;
    z-index: 60;
}

.fg-layer-bottom .tree2 {
    bottom: max(calc(340px * var(--hero-scale) - var(--hero-bottom-shift)), 22vw);
    right: 2%;
    width: 325px;
    z-index: 60;
}

.fg-layer-bottom .flower {
    bottom: 5%;
    right: 10%;
    width: 100px;
}

/* animace ----------------------------------------- */
@keyframes float {
    from {translate: 0 0;/* transform: translateX(0); */}

    to {translate: 80px 0;/* transform: translateX(60px); */}
}

@keyframes float-distant {
    from {translate: 0 0;/* transform: translateX(0); */}

    to {translate: 30px 0;/* transform: translateX(30px); */}
}

@keyframes pulse {
    from {scale: 1;/* transform: scale(1); */}

    to {scale: 1.05;/* transform: scale(1.05); */}
}

/*  breake pointy --------------------------- */
/* -- landscape -- */
@media (orientation: landscape) and (min-width: 1920px) {
    .hero {
        --hero-scale: 1.1;
        --hero-bottom-shift: 0px;
        background-size: 100vw auto; /* roztáhne na šířku viewportu, výšku zachová */
    }
    /* .bg-layer img {
        width: 100vw;
    } */
}

@media (orientation: landscape) and (max-height: 959px) and (max-width: 1200px) {
    .hero {
        --hero-scale: 0.9;
    }
    .no-large {
        display: none !important;
    }
}

@media (orientation: landscape) and (max-height: 767px) {
    .hero {
        --hero-scale: 0.8;
        --hero-bottom-shift: 150px;
    }
    .no-medium {
        display: none !important;
    }
}

@media (orientation: landscape) and (max-height: 640px) {
    .hero {
        --hero-bottom-shift: 200px;
        background-image: none;
    }
    .no-small {
        display: none !important;
    }
}

@media (orientation: landscape) and (max-height: 450px) {       /* mobil na šířku */
    .hero {
        --hero-bottom-shift: 100px;
        --hero-scale: 0.7;
    }
    .hero .hero-text {
        top:10%;
    }
    .hero .hero-visual {
        height: calc(100% - 150px);
        width: auto;
        bottom: var(--hero-bottom-shift);
    }
    .fg-layer-top {
        display: none !important
    }
}


/* -- portrait -- */
@media (orientation: portrait) {
    .hero .hero-wrap {
        top: 5vh;
    }
    .hero .hero-visual {
        right: 50%;
        transform: translateX(50%);
    }
}

@media (orientation: portrait) and (max-width: 959px) {
    .no-large {
        display: none !important;
    }
}


@media (orientation: portrait) and (max-width: 639px) {
    .hero {
        --hero-scale: 0.8;
    }
    .no-medium {
        display: none !important;
    }
}


@media (orientation: portrait) and (max-width: 450px) {
    .hero {
        --hero-scale: 0.7;
    }
    .no-small {
        display: none !important;
    }
}

@media (orientation: portrait) and (max-height: 600px) {
    .hero {
        background-image: none;
    }
    .no-small {
        display: none !important;
    }
}


@media (prefers-reduced-motion: reduce) {
  .fg-layer-top .cloud1,
  .fg-layer-top .cloud2,
  .fg-layer-top .cloud3,
  .fg-layer-top .sun {
    animation: none !important;
  }
}