/* Common hero presentation for all public inner pages. */

.hero,
.cave-hero,
.history-hero,
.booking-hero,
.visit-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding: 160px clamp(24px, 9vw, 175px) 85px;
    overflow: hidden;
    isolation: isolate;
}

.hero-background,
.cave-hero-background,
.history-hero-background,
.booking-hero-background {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: url("../images/login/login-cave-bg.jpg");
    background-position: center 45%;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.02);
}

.visit-hero {
    background-image: url("../images/login/login-cave-bg.jpg");
    background-position: center 45%;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-shadow,
.cave-hero-overlay,
.history-hero-overlay,
.booking-hero-overlay,
.visit-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(3, 4, 3, 0.91), rgba(3, 4, 3, 0.50) 58%, rgba(3, 4, 3, 0.20)),
        linear-gradient(180deg, rgba(3, 4, 3, 0.24), rgba(3, 4, 3, 0.92));
}

.hero-content,
.cave-hero-content,
.history-hero-content,
.booking-hero-content,
.visit-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
}

@media (max-width: 767.98px) {
    .hero,
    .cave-hero,
    .history-hero,
    .booking-hero,
    .visit-hero {
        min-height: 620px;
        padding: 130px 20px 65px;
        background-position: 55% center;
    }

    .hero-background,
    .cave-hero-background,
    .history-hero-background,
    .booking-hero-background {
        background-position: 55% center;
    }

    .hero-shadow,
    .cave-hero-overlay,
    .history-hero-overlay,
    .booking-hero-overlay,
    .visit-hero-overlay {
        background: linear-gradient(180deg, rgba(3, 4, 3, 0.35), rgba(3, 4, 3, 0.94) 74%);
    }
}
@media (max-width: 767.98px) {
    .hero,
    .cave-hero,
    .history-hero,
    .booking-hero,
    .visit-hero {
        width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
    }

    .hero-background,
    .cave-hero-background,
    .history-hero-background,
    .booking-hero-background {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        background-size: cover;
        background-position: center;
    }

    .visit-hero {
        background-size: cover;
        background-position: center;
    }
}