/*
 * Homepage scaffold styles for the next design pass.
 */

.hero-section {
    background-image:
        linear-gradient(110deg, rgba(10, 18, 33, 0.82) 0%, rgba(10, 18, 33, 0.48) 42%, rgba(10, 18, 33, 0.18) 100%),
        url("../images/hero/booking-bg.jpg");
    background-position: 38% center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 760px;
}

.hero-grid {
    align-items: stretch;
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 500px);
    min-height: 760px;
    padding: 76px 0;
    position: relative;
    z-index: 1;
}

.hero-copy {
    align-self: center;
    max-width: 660px;
}

.hero-kicker {
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-title {
    text-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.hero-text {
    max-width: 590px;
}

.hero-badges span {
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.booking-card {
    align-self: center;
    border: 1px solid rgba(255, 255, 255, 0.54);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.32);
}

.feature-card,
.service-card,
.route-card,
.testimonial-card {
    height: 100%;
}

.route-card {
    border: 1px solid rgba(16, 36, 63, 0.08);
}

.route-card .button-link {
    width: 100%;
}

@media (max-width: 768px) {
    .hero-section,
    .hero-grid {
        min-height: auto;
    }

    .hero-section {
        background-position: center;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        padding: 56px 0;
    }
}