/* STANDARD premium hero + enquiry - NE Himalayan Tourism.
   Same 3 banner images + same 6 backend fields.
   Logo palette only: blue #0B6CB4 / dark #073A5E, green #8CC63F. */
.ne-hero { position: relative; background: #073a5e; overflow: hidden; }
/* The frame always matches the artwork's native 1600x416 ratio at EVERY
   breakpoint. Because frame ratio == image ratio, object-fit: cover behaves
   exactly like an undistorted fill: nothing is cropped, nothing is stretched,
   and there is no letterbox gap. This is the whole fix. */
.ne-hero__slider .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.ne-hero__slider .carousel-item {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1600 / 416;
    background-color: #073a5e; /* solid fallback while the art loads */
    /* Instant painted backdrop from the same asset, sized/positioned identically
       to the <img> so the slide looks complete before the bitmap decodes and
       if the image is still fetching on a slow mobile connection. */
    background-image: var(--ne-hero-bg, none);
    background-repeat: no-repeat;
    background-size: cover;          /* same as the <img> object-fit  */
    background-position: center center;
    overflow: hidden;
}
.ne-hero__slider .hero-slide-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: block;
    z-index: 1;
    /* frame ratio == image ratio  =>  no crop, no stretch */
    object-fit: cover;
    object-position: center center;
}
/* soft bottom blend into enquiry card; does not cover banner text */
.ne-hero__blend {
    position: absolute; inset: auto 0 0 0; z-index: 2; height: 120px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7,58,94,0) 0%, rgba(7,58,94,.35) 100%);
}
/* keep bootstrap arrows premium + above image */
.ne-hero__slider .carousel-control-prev, .ne-hero__slider .carousel-control-next { z-index: 4; }
.ne-hero__slider .carousel-control-prev-icon, .ne-hero__slider .carousel-control-next-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background-color: rgba(7,58,94,.55);
    background-size: 1.1rem 1.1rem; border: 1px solid rgba(255,255,255,.4);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ne-hero__slider .carousel-indicators { z-index: 4; bottom: 1.2rem; justify-content: center; margin-left: 0; margin-right: 0; }
.ne-hero__slider .carousel-indicators [data-bs-target] {
    width: 26px; height: 6px; border-radius: 999px; border: 0;
    background: rgba(255,255,255,.45);
}
.ne-hero__slider .carousel-indicators .active { width: 42px; background: #8cc63f; }
/* enquiry bar overlapping hero bottom */
.ne-enquiry { position: relative; z-index: 5; margin-top: 0rem; padding-bottom: 1rem; }
.ne-enquiry__card {
    background: #fff; border-radius: 18px;
    box-shadow: 0 30px 60px -30px rgba(7,58,94,.55);
    border: 1px solid rgba(11,108,180,.14);
    padding: 1.1rem 1.1rem .9rem;
}
.ne-enquiry__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.ne-enquiry__head h2 { margin: 0; font-size: 1.02rem; font-weight: 800; color: #073a5e; }
.ne-enquiry__head p { margin: 0; font-size: .85rem; color: #5b7c93; }
.ne-enquiry__head p i { color: #0b6cb4; margin-right: .3rem; }
.ne-enquiry__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr auto; gap: .65rem; align-items: end; }
.ne-field label { display: block; margin-bottom: .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0b6cb4; }
.ne-field .form-control, .ne-field .form-select {
    height: 48px; border-radius: 12px; border: 1.5px solid #d8e5ef;
    font-size: .92rem; color: #123; box-shadow: none;
}
.ne-field .form-control:focus, .ne-field .form-select:focus { border-color: #0b6cb4; box-shadow: 0 0 0 4px rgba(11,108,180,.15); }
.ne-enquiry__btn {
    height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 0 1.6rem; border-radius: 12px; border: 0; white-space: nowrap;
    background: linear-gradient(135deg, #5d9a1f, #8cc63f); color: #0a2a12;
    font-weight: 800; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase;
    box-shadow: 0 14px 26px -14px rgba(90,140,20,.9); cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ne-enquiry__btn:hover { transform: translateY(-2px); color: #0a2a12; box-shadow: 0 20px 32px -14px rgba(90,140,20,.9); }
@media (max-width: 991.98px) {
    /* Ratio stays native so the artwork is never cropped or letterboxed. */
    .ne-hero__slider .carousel-item { aspect-ratio: 1600 / 416; }
    .ne-hero__slider .hero-slide-img { object-fit: cover; object-position: center center; }
    .ne-hero__slider .carousel-control-prev-icon, .ne-hero__slider .carousel-control-next-icon { width: 38px; height: 38px; }
    .ne-hero__slider .carousel-indicators { bottom: .8rem; }
    .ne-hero__blend { height: 80px; }
    .ne-enquiry { margin-top: -3.2rem; }
    .ne-enquiry__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    /* Native ratio on phones too => the complete banner is always visible.
       Only the controls shrink, and the enquiry card pulls up just enough to
       feel connected without covering the banner artwork. */
    .ne-hero__slider .carousel-item { aspect-ratio: 1600 / 416; }
    .ne-hero__slider .hero-slide-img { object-fit: cover; object-position: center center; }
    .ne-hero__slider .carousel-control-prev,
    .ne-hero__slider .carousel-control-next {
        top: auto; bottom: .55rem; width: auto; height: auto; padding: 0;
    }
    .ne-hero__slider .carousel-control-prev { left: .5rem; }
    .ne-hero__slider .carousel-control-next { right: .5rem; }
    .ne-hero__slider .carousel-control-prev-icon, .ne-hero__slider .carousel-control-next-icon { width: 30px; height: 30px; background-size: .9rem .9rem; }
    .ne-hero__slider .carousel-indicators { display: none; }
    .ne-hero__blend { display: none; }
    .ne-enquiry { margin-top: 0rem; padding-bottom: 1.5rem; }
    .ne-enquiry__grid { grid-template-columns: 1fr; }
    .ne-enquiry__btn { width: 100%; }
    .ne-enquiry__head { flex-direction: column; gap: .15rem; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .ne-enquiry__btn { transition: none; }
    .ne-enquiry__btn:hover { transform: none; }
}

