/* Hero and booking bar */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  max-width: none;
  padding: 0;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ph {
  position: absolute;
  inset: -6%;
  background-image: url("../../assets/images/hero/hero-trav.webp");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  animation: kb 28s ease-in-out infinite alternate;
}
.hero .c {
  position: relative;
  z-index: 2;
  padding: 0 7vw clamp(20px, 3vh, 36px);
  max-width: 1300px;
  margin: 0 auto;
  margin-top: auto;
  margin-bottom: clamp(8px, 1.5vh, 20px);
  width: 100%;
}
.hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 7.5rem);
  max-width: 20ch;
  font-weight: 500;
}
.hero h1 span {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: in 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero h1 span:nth-child(2) {
  animation-delay: 0.25s;
}
.hero p {
  color: #dbe8df;
  font-size: 1.1rem;
  margin: 22px 0 32px;
  opacity: 0;
  animation: in 1.4s 0.6s forwards;
}
.bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1px;
  background: #ffffff33;
  max-width: 1300px;
  width: calc(100% - 14vw);
  margin: 0 auto 5vh;
  backdrop-filter: blur(12px);
}
.bar label {
  background: #000000;
  padding: 14px 20px;
  font-size: 0.75rem;
  color: #cfe0d5;
}
.bar input {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: #fff;
  font: 400 1rem Manrope;
  padding: 2px 0;
  color-scheme: dark;
}
.bar select {
  display: block;
  width: 100%;
  background: #000000;
  border: 0;
  color: #ffffff;
  font: 400 1rem Manrope;
  padding: 2px 0;
  color-scheme: dark;
}
.bar select option {
  background: #000000;
  color: #ffffff;
}
.bar select option:checked,
.bar select option:hover {
  background-color: var(--brass, #b8945a);
  color: #ffffff;
}
.bar .btn {
  padding: 0 38px;
}
@media (max-width: 860px) {
  .hero {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .ph {
    background-position: center 30%;
  }
  .hero .c {
    padding: 0 5vw;
    padding-top: max(48px, 6.5vh);
    padding-bottom: 0;
    margin-top: auto;
    margin-bottom: clamp(6px, 1.2vh, 12px);
  }
  .hero h1 {
    font-size: clamp(1.95rem, 6.2vw, 2.45rem);
    line-height: 1.05;
    max-width: 18ch;
  }
  .hero p {
    font-size: clamp(0.82rem, 2.5vw, 0.9rem);
    line-height: 1.42;
    margin: clamp(5px, 0.9vh, 9px) 0 clamp(9px, 1.5vh, 14px);
    max-width: 38ch;
  }
  .hero .c .btn {
    padding: 8px 22px;
    font-size: 0.82rem;
  }
  .bar {
    width: calc(100% - 10vw);
    max-width: 480px;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto clamp(8px, 1.8vh, 16px);
  }
  .bar label {
    padding: 8px 12px;
    font-size: 0.68rem;
    line-height: 1.2;
  }
  .bar input,
  .bar select {
    font-size: 0.88rem;
    padding: 2px 0;
  }
  .bar .btn {
    grid-column: 1/-1;
    padding: 10px 16px;
    font-size: 0.88rem;
  }
}
@media (min-width: 861px) {
  .hero h1 {
    font-size: clamp(3.4rem, 5.4vw, 6.2rem);
    max-width: none;
  }
}

/* Tablet enquiry bar: stretch horizontally only in tablet viewport */
@media (min-width: 768px) and (max-width: 860px) {
  .bar {
    max-width: none;
  }
}