/* Keep the destination photo visible. The sunrise belongs only to the landing
   page; it is never used as a fallback behind the destination heading. */
body:is(.home-page,.destination-page) .destination-hero{
  --hero-top:76px;
  --hero-photo-height:184px;
  min-height:calc(var(--hero-top) + var(--hero-photo-height));
  padding:calc(var(--hero-top) + 34px) 0 34px;
  background:#103e60;
  border-bottom:0;
}
body:is(.home-page,.destination-page) .destination-hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:var(--hero-top) 0 0;
  width:100%;
  max-width:none;
  height:auto;
  background:var(--destination-hero) var(--destination-position,center 48%)/cover no-repeat;
  mask-image:none;
  -webkit-mask-image:none;
  filter:none;
  transition:none;
  /* The HTML already supplies the heading photo. Display it immediately;
     site.js replaces its URL only after the next photo has decoded. */
  opacity:1;
}
body:is(.home-page,.destination-page) .destination-hero[data-hero-image-ready]::before{opacity:1}
body:is(.home-page,.destination-page) .destination-hero .destination-hero-shade{
  display:block;
  inset:var(--hero-top) 0 0;
  background:linear-gradient(90deg,rgba(3,25,44,.66),rgba(3,25,44,.24) 75%),linear-gradient(0deg,rgba(3,25,44,.28),transparent);
}
body:is(.home-page,.destination-page) .destination-hero .destination-hero-content{color:#fff}
body:is(.home-page,.destination-page) .destination-hero .destination-title-row{
  align-items:center;
  flex-direction:row;
  gap:16px;
}
body:is(.home-page,.destination-page) .destination-hero h1{
  max-width:none;
  min-width:0;
  font-size:clamp(30px,3vw,38px);
  line-height:1.12;
  letter-spacing:-.7px;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
  text-wrap:balance;
  overflow-wrap:anywhere;
}
body:is(.home-page,.destination-page) .destination-hero .destination-hero-content>p:last-child{
  max-width:850px;
  margin:6px 0 0;
  color:#fff;
  font-size:16px;
  line-height:1.4;
  font-weight:500;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
body:is(.home-page,.destination-page) .destination-hero .destination-all-targets{
  flex-shrink:0;
  min-height:40px;
  padding:0 16px;
  background:rgba(5,30,50,.4);
  color:#fff;
  border:1px solid rgba(255,255,255,.7);
  font-size:14px;
  font-weight:650;
  text-shadow:none;
}
body:is(.home-page,.destination-page) .destination-hero .destination-all-targets:hover{background:rgba(5,30,50,.65)}
body:is(.home-page,.destination-page) .destination-hero .destination-all-targets:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}
/* The search form follows the header, without floating over its text. */
body.destination-page .destination-search-shell{margin-top:20px}
/* Offer details retain a smaller header than the destination overview. */
body.results-mode:not(.destination-browse-mode) .tbe-context-hero,
body.destination-results-mode:not(.destination-browse-mode) .destination-hero{
  --hero-photo-height:132px;
  padding:calc(var(--hero-top) + 24px) 0 24px;
}
body.results-mode:not(.destination-browse-mode) .tbe-context-hero h1,
body.destination-results-mode:not(.destination-browse-mode) .destination-hero h1{font-size:28px}
@media(max-width:680px){
  body:is(.home-page,.destination-page) .destination-hero{
    --hero-top:64px;
    --hero-photo-height:184px;
    padding:calc(var(--hero-top) + 28px) 0 28px;
  }
  body:is(.home-page,.destination-page) .destination-hero::before{
    background-position:var(--destination-position-mobile,center 48%);
  }
  body:is(.home-page,.destination-page) .destination-hero h1{font-size:28px;letter-spacing:-.5px}
  body:is(.home-page,.destination-page) .destination-hero .destination-title-row{gap:12px;flex-wrap:wrap}
  body:is(.home-page,.destination-page) .destination-hero .destination-title-row h1{flex:1 1 150px}
  body:is(.home-page,.destination-page) .destination-hero .destination-hero-content>p:last-child{
    max-width:100%;
    font-size:15px;
    line-height:1.4;
  }
  body:is(.home-page,.destination-page) .destination-hero .destination-all-targets{
    position:static;
    min-height:40px;
    padding:0 12px;
    font-size:13px;
  }
  body.results-mode:not(.destination-browse-mode) .tbe-context-hero,
  body.destination-results-mode:not(.destination-browse-mode) .destination-hero{
    --hero-photo-height:132px;
    padding:calc(var(--hero-top) + 22px) 0 22px;
  }
  body.results-mode:not(.destination-browse-mode) .tbe-context-hero h1,
  body.destination-results-mode:not(.destination-browse-mode) .destination-hero h1{font-size:25px}
}