#hero {
  min-height: clamp(35rem, 69svh, 48rem);
}

#hero .seo-hero-image {
  object-position: center 54%;
}

#hero .seo-hero-tint {
  background: linear-gradient(to top, rgb(0 0 0 / 77%), transparent 72%),
              linear-gradient(to right, rgb(0 0 0 / 52%), transparent 77%);
}

html[dir="rtl"] #hero .seo-hero-tint {
  background: linear-gradient(to top, rgb(0 0 0 / 77%), transparent 72%),
              linear-gradient(to left, rgb(0 0 0 / 52%), transparent 77%);
}

#hero .preview-hero-copy {
  padding-block: 7rem 1.35rem;
}

#hero .preview-hero-copy h1 {
  font-size: clamp(2.625rem, 5.6vw, 5rem) !important;
  max-inline-size: 16ch;
}

#hero .preview-hero-copy .v3-eyebrow {
  color: #fff !important;
}

#rooms {
  padding-block-start: clamp(1.75rem, 4vw, 3.5rem);
}

#rooms > .page-wrap > div:first-child {
  margin-bottom: 1.5rem !important;
}

.preview-stay {
  background: #ede9df;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.preview-stay .page-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 4rem;
}

.preview-stay h2 {
  margin: 0 0 .5rem;
}

.preview-stay p {
  margin: 0;
  color: #4a4a4a;
}

.preview-book {
  background: #ede9df;
  padding: 1.5rem;
  text-align: center;
}

@media (max-width: 600px) {
  #hero {
    min-height: 0;
  }

  #hero .seo-hero-image {
    object-position: 86% center;
  }

  #hero .seo-hero-tint, html[dir="rtl"] #hero .seo-hero-tint {
    background: linear-gradient(to top, rgb(0 0 0 / 82%), rgb(0 0 0 / 54%) 55%, rgb(0 0 0 / 14%));
  }

  #hero .preview-hero-copy {
    padding-block: 5.75rem .5rem;
  }

  .preview-stay .page-wrap {
    grid-template-columns: 1fr;
  }
}

nav.fixed img[src="/images/dariana-logo-dark.png"] {
  height: clamp(34px, 4.5vw, 46px) !important;
}

/* The hero action needs a light surface against the photograph. */
#hero #lodgify-search-bar a.primary {
  background-color: #f4e8d4;
  color: #32281f;
  box-shadow: inset 0 0 0 1px #dec6a4;
  font-weight: 600;
}

#hero #lodgify-search-bar a.primary svg {
  color: inherit;
  fill: currentColor;
}

#hero #lodgify-search-bar a.primary:hover {
  background-color: #ead9bd;
}

#hero #lodgify-search-bar a.primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Booking links on the room and visitor-information pages. */
.book {
  background-color: #4a4a4a;
  color: #fff;
}

.book:hover {
  background-color: #333;
}

.cta .book,
.info-footer .book,
.info-hero .book {
  background-color: #f4e8d4;
  color: #32281f;
}

.cta .book:hover,
.info-footer .book:hover,
.info-hero .book:hover {
  background-color: #ead9bd;
}