/* =============================================================
   hero.css - SECTION 2 styles
   ============================================================= */

.hero {
  position: relative;
  isolation: isolate;
  height: calc((var(--space-9) * 4) + var(--space-7) + var(--space-3));
  min-height: calc((var(--space-9) * 4) + var(--space-7) + var(--space-3));
  margin-bottom: calc(var(--space-8) + var(--space-3));
  overflow: visible;
  background: var(--color-dark);
}

.hero__slides,
.hero__shade {
  position: absolute;
  inset: 0;
}

.hero__slides {
  overflow: hidden;
  z-index: -3;
}

.hero__slide {
  position: absolute;
  inset: calc(var(--space-2) * -1);
  background-position: center center;
  background-size: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__shade {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(14, 14, 14, 0.76) 0%, rgba(14, 14, 14, 0.52) 28%, rgba(14, 14, 14, 0.08) 58%, rgba(14, 14, 14, 0) 100%),
    linear-gradient(0deg, rgba(14, 14, 14, 0.12), rgba(14, 14, 14, 0.12));
}

.hero__inner {
  height: 100%;
  display: flex;
  align-items: flex-start;
}

.hero__content {
  max-width: calc(var(--space-9) * 6);
  margin-left: 0;
  margin-top: calc(var(--space-8) + var(--space-2));
  color: var(--color-white);
}

.hero__eyebrow {
  margin-bottom: var(--space-4);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.14em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.hero__title {
  display: grid;
  gap: 0;
  margin-bottom: var(--space-4);
  color: var(--color-white);
  font-size: calc(var(--fs-xl) + var(--space-2));
  font-weight: var(--fw-extrabold);
  letter-spacing: 0;
  line-height: var(--lh-tight);
}

.hero__title span {
  display: block;
}

.hero__text {
  max-width: calc(var(--space-9) * 5);
  margin-bottom: var(--space-5);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

.hero__cta {
  min-height: calc(var(--space-6) + var(--space-2));
  min-width: calc(var(--space-9) * 2);
  justify-content: center;
  padding: 0 var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-dark);
}

.hero__cta i {
  font-size: var(--fs-xs);
}

.hero__booking-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc((var(--space-6) + var(--space-2)) * -1);
  z-index: 2;
  width: calc(var(--space-9) * 10);
  max-width: calc(100% - (var(--container-pad) * 2));
  padding-inline: 0;
}

.hero-booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--space-9) + var(--space-8));
  gap: var(--space-3);
  align-items: center;
  min-height: calc(var(--space-8) + var(--space-5));
  padding: var(--space-3);
  border: 1px solid rgba(230, 231, 234, 0.72);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.hero-booking__fields {
  display: grid;
  grid-template-columns: 1.45fr 1.15fr 0.85fr 1.15fr 0.85fr;
  align-items: center;
}

.hero-booking__field {
  min-width: 0;
  padding: 0 calc(var(--space-2) + var(--space-1));
  border-right: 1px solid var(--color-border);
}

.hero-booking__field:first-child {
  padding-left: calc(var(--space-2) + var(--space-1));
}

.hero-booking__field:last-child {
  border-right: 0;
}

.hero-booking__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-heading);
  font-size: calc(var(--fs-xs) - 0.125rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.hero-booking__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-heading);
}

.hero-booking__control > i:first-child {
  flex: 0 0 auto;
  width: var(--space-3);
  color: var(--color-heading);
  font-size: var(--fs-xs);
  text-align: center;
}

.hero-booking__native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hero-booking__select {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--color-heading);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  outline: 0;
  padding: 0;
  cursor: pointer;
}

.hero-booking__select span {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-booking__select:focus-visible {
  color: var(--color-primary);
}

.hero-booking__chevron {
  flex: 0 0 auto;
  color: var(--color-heading);
  font-size: calc(var(--fs-xs) - 0.125rem);
  pointer-events: none;
  transition: transform var(--transition), color var(--transition);
}

.hero-booking__control.is-open .hero-booking__chevron {
  color: var(--color-primary);
  transform: rotate(180deg);
}

.hero-booking__menu {
  position: absolute;
  left: calc((var(--space-4) + var(--space-2)) * -1);
  right: 0;
  top: calc(100% + var(--space-3));
  z-index: var(--z-dropdown);
  display: grid;
  gap: var(--space-1);
  min-width: calc(var(--space-9) * 2);
  max-height: calc(var(--space-9) * 2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  overflow-y: auto;
  pointer-events: none;
  transform: translateY(calc(var(--space-2) * -1));
  transition: opacity var(--transition), transform var(--transition);
}

.hero-booking__control.is-open .hero-booking__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hero-booking__option {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  transition: background var(--transition), color var(--transition);
}

.hero-booking__option:hover,
.hero-booking__option:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-dark);
  outline: 0;
}

.hero-booking__option.is-selected {
  background: var(--color-primary);
  color: var(--color-dark);
  font-weight: var(--fw-semibold);
}

.hero-booking__submit {
  width: 100%;
  min-height: calc(var(--space-6) + var(--space-2));
  justify-content: center;
  border: 0;
  font-size: calc(var(--fs-xs) - 0.0625rem);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  cursor: pointer;
}

.hero__content.is-animating .hero__eyebrow,
.hero__content.is-animating .hero__title,
.hero__content.is-animating .hero__text,
.hero__content.is-animating .hero__cta {
  animation: heroTextIn 700ms ease both;
}

.hero__content.is-animating .hero__title {
  animation-delay: 80ms;
}

.hero__content.is-animating .hero__text {
  animation-delay: 160ms;
}

.hero__content.is-animating .hero__cta {
  animation-delay: 240ms;
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateY(var(--space-4));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 899px) {
  .hero {
    height: calc((var(--space-9) * 4) + var(--space-7) + var(--space-3));
    min-height: calc((var(--space-9) * 4) + var(--space-7) + var(--space-3));
    margin-bottom: calc(var(--space-9) * 3);
  }

  .hero__shade {
    background:
      linear-gradient(90deg, rgba(14, 14, 14, 0.82) 0%, rgba(14, 14, 14, 0.62) 42%, rgba(14, 14, 14, 0.14) 100%),
      linear-gradient(0deg, rgba(14, 14, 14, 0.2), rgba(14, 14, 14, 0.2));
  }

  .hero__content {
    max-width: calc(var(--space-9) * 4);
    margin-left: calc(var(--space-5) + var(--space-2));
  }

  .hero__title {
    font-size: calc(var(--fs-xl) + var(--space-1));
  }

  .hero__booking-wrap {
    bottom: calc(((var(--space-9) * 2) + var(--space-5)) * -1);
  }

  .hero-booking {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-3);
  }

  .hero-booking__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-3);
  }

  .hero-booking__field {
    padding-inline: var(--space-4);
  }

  .hero-booking__field:nth-child(2n) {
    border-right: 0;
  }

  .hero-booking__field:first-child {
    padding-left: var(--space-4);
  }

  .hero-booking__submit {
    min-height: calc(var(--space-6) + var(--space-3));
  }
}

@media (max-width: 599px) {
  .hero {
    height: calc(var(--space-9) * 4);
    min-height: calc(var(--space-9) * 4);
    margin-bottom: calc((var(--space-9) * 4) + var(--space-5));
  }

  .hero__slide {
    background-position: 62% center;
  }

  .hero__shade {
    background:
      linear-gradient(90deg, rgba(14, 14, 14, 0.86) 0%, rgba(14, 14, 14, 0.72) 58%, rgba(14, 14, 14, 0.28) 100%),
      linear-gradient(0deg, rgba(14, 14, 14, 0.22), rgba(14, 14, 14, 0.22));
  }

  .hero__content {
    max-width: 100%;
    margin-left: 0;
  }

  .hero__eyebrow {
    font-size: var(--fs-xs);
    margin-bottom: var(--space-3);
  }

  .hero__title {
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    font-size: calc(var(--fs-xl) - var(--space-1));
  }

  .hero__text {
    max-width: 100%;
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
  }

  .hero__cta {
    min-height: calc(var(--space-6) + var(--space-2));
    padding-inline: var(--space-5);
  }

  .hero__booking-wrap {
    bottom: calc(((var(--space-9) * 4) + var(--space-5)) * -1);
  }

  .hero-booking {
    padding: var(--space-3);
  }

  .hero-booking__fields {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .hero-booking__field,
  .hero-booking__field:nth-child(2n),
  .hero-booking__field:first-child {
    padding: 0 0 var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .hero-booking__field:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .hero-booking__control select {
    font-size: var(--fs-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__content.is-animating .hero__eyebrow,
  .hero__content.is-animating .hero__title,
  .hero__content.is-animating .hero__text,
  .hero__content.is-animating .hero__cta {
    animation: none;
    transition: none;
  }
}