/* home/hero.css — auto-split from home.css */

.home-hero {
  --home-hero-copy-x: clamp(65px, calc(26.25vw - 313px), 191px);
  --home-hero-copy-y: clamp(345px, calc(13.542vw + 150px), 410px);
  --home-hero-copy-width: 413px;
  --home-hero-title-width: 408px;
  --home-hero-title-size: 70px;
  --home-hero-title-line: 60px;
  --home-hero-text-size: 24px;
  --home-hero-text-line: 1.34;
  --home-hero-booking-width: clamp(1312px, calc(45.417vw + 658px), 1531px);
  --hero-booking-banner-width: clamp(532px, calc(14.167vw + 328px), 600px);
  --hero-booking-date-track: clamp(275px, calc(7.292vw + 170px), 310px);
  --hero-booking-guest-track: clamp(260px, calc(10.417vw + 110px), 310px);
  --hero-booking-widget-pad: clamp(20px, calc(-0.833vw + 36px), 24px);
  display: flex;
  position: sticky;
  top: 0;
  z-index: 0;
  background: #081412;
  color: #f7f1e7;
}

.home-hero__media,
.home-hero__overlay {
  position: absolute;
  inset: 0;
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: var(--home-hero-copy-y) var(--home-hero-copy-x) 82px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.home-main.is-story-active .home-hero__inner {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 920px) {
  .home-hero__content {
    padding-left: 0;
    margin-bottom: 64px;
  }
}

@media (max-width: 640px) {
  .home-hero__inner {
    padding-top: calc(var(--header-height) + 84px);
  }

  .home-hero__content {
    padding-left: 0;
  }
}

@media (min-width: 1367px) and (max-width: 1440px) {
  .home-hero {
    height: 100svh;
    min-height: 100svh;
    color: #fff;
  }

  .home-hero__media {
    inset: 0;
    width: auto;
    height: 100%;
    background-position: calc(50% - 61px) center;
    background-size: 1859px 100%;
  }

  .home-hero__inner {
    width: var(--site-content-width);
    min-height: 100svh;
    padding: clamp(190px, 36.9186046512svh, 381px) 0 clamp(24px, 5.4263565891svh, 56px);
  }

  .home-hero__content {
    max-width: 415px;
    margin: 0 0 auto;
  }
}

@media (min-width: 1025px) {
  .home-hero__inner {
    padding-top: calc(var(--header-height) + 278px);
  }
}

@media (min-width: 1180px) and (max-width: 1440px) {
  .home-hero__inner {
    width: var(--site-content-width);
    padding-top: var(--header-height);
    padding-bottom: clamp(48px, 3.89vw, 56px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .home-hero__content {
    max-width: 415px;
    align-self: center;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .home-hero__media {
    background-position: center top;
    background-size: cover;
  }

  .home-hero__inner {
    width: min(100vw - 28px, 1530px);
    min-height: 720px;
    padding-top: calc(var(--header-height) + 96px);
    padding-bottom: 42px;
  }
}

@media (max-width: 1179px) {
  .home-hero {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .home-hero__inner {
    width: 342px;
    padding: 299px 0 0;
  }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .home-hero__media {
    background-position: center top;
    background-size: cover;
  }

  .home-hero__inner {
    width: 100%;
    max-width: none;
    min-height: 100svh;
    height: 100svh;
    margin: 0;
    padding: 0;
    display: grid;
    align-items: center;
    justify-items: start;
    box-sizing: border-box;
  }

  .home-hero__content {
    width: min(520px, calc(100vw - 96px));
    max-width: 520px;
    margin: 0 0 0 48px;
    padding: 0;
  }
}

@media (min-width: 600px) and (max-width: 767px) and (max-height: 480px) and (orientation: landscape) {
  .home-hero {
    height: 100svh;
    min-height: 100svh;
  }

  .home-hero__media {
    background-position: center;
    background-size: cover;
  }

  .home-hero__inner {
    width: 100%;
    max-width: none;
    height: 100svh;
    min-height: 100svh;
    margin: 0;
    padding: var(--header-height) 32px 24px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
  }

  .home-hero__content {
    width: min(520px, calc(100vw - 64px));
    max-width: 520px;
    margin: 0 auto;
    padding-left: 0;
    text-align: center;
  }
}

.home-hero {
  --home-hero-copy-x: clamp(65px, calc(26.25vw - 313px), 191px);
  --home-hero-copy-y: clamp(345px, calc(13.542vw + 150px), 410px);
  --home-hero-copy-width: 413px;
  --home-hero-title-width: 408px;
  --home-hero-title-size: 70px;
  --home-hero-title-line: 60px;
  --home-hero-title-gap: 34px;
  --home-hero-text-size: 24px;
  --home-hero-text-line: 1.34;
  --home-hero-booking-width: clamp(1312px, calc(45.417vw + 658px), 1531px);
  --home-hero-booking-height: clamp(120px, 6.563vw, 126px);
  --home-hero-booking-field-height: clamp(79px, 4.479vw, 86px);
  --hero-booking-banner-width: clamp(532px, calc(14.167vw + 328px), 600px);
  --hero-booking-date-track: clamp(275px, calc(7.292vw + 170px), 310px);
  --hero-booking-guest-track: clamp(260px, calc(10.417vw + 110px), 310px);
  --hero-booking-widget-pad: clamp(20px, calc(-0.833vw + 36px), 24px);
  height: 100svh;
  min-height: 100svh;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
}

.home-hero__media {
  inset: 0;
  width: auto;
  height: auto;
  background: #081412 url("../images/figma/home-hero-main-20260626.webp") center / cover no-repeat;
}

.home-hero__overlay {
  display: block;
  background: linear-gradient(104deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 74.5%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.home-hero__inner {
  width: 100vw;
  max-width: none;
  min-height: 100svh;
  height: 100svh;
  margin: 0;
  padding: var(--home-hero-copy-y) var(--home-hero-copy-x) 82px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
}

.home-hero__content {
  width: min(var(--home-hero-copy-width), 100%);
  max-width: var(--home-hero-copy-width);
  margin: 0;
  padding: 0;
  text-align: left;
}

@media (min-width: 1180px) and (max-width: 1440px) {
  .home-hero {
    --home-hero-copy-y: clamp(190px, calc(47.8svh - 145px), 345px);
    --home-hero-copy-width: 409px;
    --home-hero-title-width: 455px;
    --home-hero-title-size: 70px;
    --home-hero-title-line: 70px;
    --home-hero-title-gap: 24px;
    --home-hero-text-line: normal;
    --home-hero-booking-width: calc(100vw - (var(--home-hero-copy-x) * 2));
  }

  .home-hero__inner {
    width: 100vw;
    padding: var(--home-hero-copy-y) var(--home-hero-copy-x) 54px;
    display: flex;
  }

  .home-hero__content {
    align-self: flex-start;
  }
}

@media (min-width: 1441px) {
  .home-hero__inner {
    width: min(100vw, 1920px);
    max-width: 1920px;
    margin: 0 auto;
    padding: var(--home-hero-copy-y) var(--home-hero-copy-x) 82px;
  }
}

@media (max-width: 1179px) {
  /* Bottom-dark scrim (Figma "Shadow"): on tablet & mobile the hero copy moves to
     the bottom, so darken the bottom — the desktop left-dark gradient doesn't
     cover it. mix-blend-multiply is inherited from the base .home-hero__overlay. */
  .home-hero__overlay {
    background: linear-gradient(-5.99deg, #000 5.57%, rgba(0, 0, 0, 0) 75.54%);
  }

  .home-hero {
    --home-hero-copy-width: 452px;
    --home-hero-title-width: 452px;
    --home-hero-title-size: 65px;
    --home-hero-title-line: 55px;
    --home-hero-title-gap: 16px;
    --home-hero-text-size: 22px;
    --home-hero-text-line: 26px;
    /* stay sticky so the next screen rides over the hero on tablet & mobile too */
    position: sticky;
    top: 0;
  }

  .home-hero__media {
    background-position: center top;
    background-size: cover;
  }

  .home-hero__inner {
    width: 100vw;
    max-width: none;
    min-height: 100svh;
    height: 100svh;
    margin: 0;
    padding: 60px 48px 72px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .home-hero__content {
    width: min(var(--home-hero-copy-width), 100%);
    max-width: var(--home-hero-copy-width);
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .home-hero {
    --home-hero-copy-width: 431px;
    --home-hero-title-width: 431px;
  }

  .home-hero__inner {
    padding-right: 32px;
    padding-left: 32px;
    padding-bottom: 71px;
  }
}

@media (max-width: 767px) {
  .home-hero {
    --home-hero-copy-width: 342px;
    --home-hero-title-width: 342px;
    --home-hero-title-size: 60px;
    --home-hero-title-line: 55px;
    --home-hero-title-gap: 16px;
    --home-hero-text-size: 20px;
    --home-hero-text-line: 26px;
  }

  .home-hero__inner {
    width: 100vw;
    min-height: 100svh;
    height: 100svh;
    padding: 60px 16px 72px;
  }
}

@media (max-width: 374px) {
  .home-hero {
    --home-hero-copy-width: calc(100vw - 32px);
    --home-hero-title-width: calc(100vw - 32px);
    --home-hero-title-size: 54px;
    --home-hero-title-line: 50px;
  }
}

.home-hero .home-display-title {
  width: min(var(--home-hero-title-width, 100%), 100%);
  margin: 0 0 var(--home-hero-title-gap, 16px);
  font-size: var(--home-hero-title-size, 60px);
  line-height: var(--home-hero-title-line, 1.1);
  letter-spacing: 0;
}

.home-hero__text {
  max-width: min(431px, var(--home-hero-copy-width, 100%));
  margin: 0;
  color: #fff;
  font-size: var(--home-hero-text-size, 20px);
  line-height: var(--home-hero-text-line, 1.3);
  hyphens: manual;
}