/* Safari booking banner only; keep existing safari-booking.css and shared header intact. */
/* Header in normal flow on this page, so banner begins below it. */
.kanha-topbar { position:relative; z-index:110; }
.main-header { position:relative !important; top:auto !important; z-index:109; }
.main-header .header-sticky { position:relative; }
.ksb-banner { position:relative; display:block; width:100%; aspect-ratio:2172 / 539; min-height:220px; background:#102a1c url('../images/kanha-safari-banner.jpg') center center / 100% 100% no-repeat; overflow:hidden; isolation:isolate; }
.ksb-screenreader { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.ksb-mobile-content { display:none; }
/* Tablet: preserve the banner's baked-in title and tiger without vertical clipping. */
@media(max-width:991px) and (min-width:641px) { .ksb-banner { min-height:170px; } }
@media(max-width:640px) {
  .ksb-banner { aspect-ratio:auto; min-height:300px; padding:32px 20px; display:flex; align-items:flex-end; background-image:linear-gradient(90deg,rgba(5,28,18,.97),rgba(5,28,18,.80)),url('../images/kanha-safari-banner.jpg'); background-size:cover,auto 100%; background-position:center,72% center; }
  .ksb-banner:before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,25,15,.65),transparent 80%); pointer-events:none; }
  .ksb-mobile-content { display:block; position:relative; z-index:1; color:#fff; max-width:400px; }
  .ksb-kicker { display:block; color:#ffd36d; font:700 12px/1.4 Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
  .ksb-mobile-content h2 { color:#fff; font:700 clamp(26px,8vw,38px)/1.12 Georgia,serif; margin:0 0 10px; }
  .ksb-mobile-content h2 span { color:#f6c968; }
  .ksb-mobile-content p { color:#f0f5ef; font:15px/1.5 Arial,sans-serif; margin:0 0 15px; }
  .ksb-mobile-content nav { font:600 13px/1.4 Arial,sans-serif; color:#f6c968; }
  .ksb-mobile-content nav a { color:#fff; text-decoration:none; }
}

/* Mobile banner correction: compact height and clear tiger image */
@media (max-width:640px) {
  .ksb-banner {
    box-sizing:border-box;
    height:228px !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    padding:18px 16px !important;
    display:flex;
    align-items:flex-end;
    background-image:linear-gradient(90deg,rgba(4,25,16,.83) 0%,rgba(4,25,16,.49) 49%,rgba(4,25,16,.04) 100%),url('../images/kanha-safari-banner-mobile.webp') !important;
    background-size:cover,cover !important;
    background-position:center,center center !important;
  }
  .ksb-banner:before {background:linear-gradient(0deg,rgba(4,25,16,.37),transparent 60%) !important;}
  .ksb-mobile-content {max-width:68%;}
  .ksb-kicker {font-size:10px;letter-spacing:.07em;margin-bottom:5px;}
  .ksb-mobile-content h2 {font-size:clamp(21px,5.8vw,29px);line-height:1.1;margin-bottom:6px;}
  .ksb-mobile-content p {font-size:12px;line-height:1.3;margin-bottom:7px;}
  .ksb-mobile-content nav {font-size:11px;}
}
@media(max-width:360px) {
  .ksb-banner {height:210px !important;}
  .ksb-mobile-content {max-width:70%;}
  .ksb-mobile-content h2 {font-size:20px;}
}

/* LCP improvement: actual image is in initial HTML, not CSS background. */
.ksb-banner { background-image:none !important; }
.ksb-banner__picture { position:absolute; inset:0; display:block; width:100%; height:100%; z-index:0; pointer-events:none; }
.ksb-banner__image { display:block; width:100%; height:100%; object-fit:fill; object-position:center; }
@media (max-width:640px) {
  .ksb-banner { background-image:none !important; }
  .ksb-banner__image { object-fit:cover; object-position:center center; }
  .ksb-banner__picture { z-index:0; }
  .ksb-banner:before { z-index:1; background:linear-gradient(90deg,rgba(4,25,16,.83) 0%,rgba(4,25,16,.49) 49%,rgba(4,25,16,.04) 100%),linear-gradient(0deg,rgba(4,25,16,.37),transparent 60%) !important; }
  .ksb-mobile-content { z-index:2; }
}