.hero-banner {
  position: relative;
  width: 100%;
  height: 100svh;
  height: var(--banner-h, 100svh);
  min-height: 500px;
  overflow: hidden;
  background: #0a1a09;
}

.hero-banner__viewport {
  grid-area: banner;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  /* Swipe-to-change-slide (main.js). pan-y lets the page still scroll
     vertically while horizontal gestures come through to the handler. */
  touch-action: pan-y;
  cursor: grab;
}

.hero-banner__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* The counter used to own the absolute positioning. It now sits inside
   .hero-banner__pager together with the dash rail, so the wrapper is what
   gets pinned to the bottom of the hero and the two children just lay out
   inside it. Desktop looks unchanged: the rail is display:none there. */
.hero-banner__pager {
  position: absolute;
  bottom: 6.25rem;
  right: clamp(1.25rem, 5vw, 5rem);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-banner__counter {
  display: flex;
  align-items: baseline;
  color: #ffffff;
  line-height: 1;
  pointer-events: none;
}

/* Phone only — see the max-width: 767px block at the end of this file. */
.hero-banner__dots {
  display: none;
}

.hero-banner__current,
.hero-banner__sep,
.hero-banner__total {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 500;
}

.hero-banner__sep {
  opacity: 0.44;
}

.hero-banner__track {
  position: relative;
  height: 100%;
}

.hero-banner__track > .hero-banner__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;

  display: grid;
  grid-template-areas: "stack";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.hero-banner__track > .hero-banner__slide.is-active {
  opacity: 1;
  z-index: 5;
}

.hero-banner__media,
.hero-banner__overlay,
.hero-banner__content {
  grid-area: stack;
  width: 100%;
  height: 100%;
}

.hero-banner__media {
  z-index: 1;
}

.hero-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-banner__overlay {
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(10, 26, 9, 0.15) 0%,
    rgba(10, 26, 9, 0.00) 40%,
    rgba(10, 26, 9, 0.60) 100%
  );
  pointer-events: none;
}

.hero-banner__content {
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(2rem, 9vh, 6.25rem);
}

.hero-banner__text {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 2.5rem);
}

.hero-banner__heading {
  color: #ffffff;
  font-family: var(--font-heading, 'Forum', serif);
  line-height: .85;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 2px 24px rgba(10, 26, 9, 0.25);
}

.hero-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #ffffff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(1rem, 1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: gap 0.3s ease, opacity 0.3s ease;
}

.hero-banner__cta:hover {
  gap: 1rem;
  opacity: 0.85;
}

.hero-banner__arrow {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.hero-banner__cta:hover .hero-banner__arrow {
  transform: translateX(4px);
}

.relative{
  position: relative;
}

/* ── Stays Detail Banner ── */

.stays-banner {
  position: relative;
  width: 100%;
  height: clamp(480px, 759px, 100svh);
  min-height: 480px;
  overflow: hidden;
  background: #0a1a09;
  display: grid;
  grid-template-areas: "stack";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.stays-banner__media,
.stays-banner__overlay,
.stays-banner__body {
  grid-area: stack;
  width: 100%;
  height: 100%;
}

.stays-banner__media {
  z-index: 1;
}

.stays-banner__img {
  width: 100%;
  height: 168.62%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-top: -29.61%;
}

.stays-banner__overlay {
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 18%,
    rgba(0, 0, 0, 0.50) 100%
  );
  pointer-events: none;
}

/* Body: stacks title (center) + bar (bottom) */
.stays-banner__body {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: clamp(5rem, 10vw, 9.625rem); /* room for the bar */
}

/* Title */
.stays-banner__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9375rem;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
}

.stays-banner__label {
  font-family: var(--font-sans);
  /* Hardcoded rather than reading --text-base, so the small-screen step-down
     has to be repeated here — see the media query at the end of this file and
     the token override in src/sections.css. */
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.stays-banner__heading {
  font-family: var(--font-heading);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 24px rgba(10, 26, 9, 0.25);
}

/* Availability bar — pinned to bottom of the banner */
.stays-banner__bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1304px);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: 1.125rem clamp(1.25rem, 5.4vw, 5.4375rem) 1.875rem;
}

.stays-banner__bar-title {
  font-family: var(--font-heading);
  color: #fff;
  white-space: nowrap;
  line-height: 0.9;
  padding-top: 1.5rem;
  flex-shrink: 0;
}

/* Fields row */
.stays-banner__fields {
  display: flex;
  align-items: flex-end;
  gap: 0.625rem;
  flex: 1 1 0;
  min-width: 0;
}

/* Individual field */
.stays-banner__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 0;
  min-width: 0;
}

.stays-banner__field-label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
}

.stays-banner__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.stays-banner__input {
  width: 100%;
  height: 46px;
  background: transparent;
  border: 1px solid #6b6c6c;
  padding: 0.75rem 2.75rem 0.75rem 1.0625rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
}

.stays-banner__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.stays-banner__input:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

.stays-banner__field-icon {
  position: absolute;
  right: 0.875rem;
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
  pointer-events: none;
  flex-shrink: 0;
}

/* Guests stepper */
.stays-banner__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  border: 1px solid #6b6c6c;
  padding: 0.75rem 1.0625rem;
  gap: 0.5rem;
}

.stays-banner__step {
  background: none;
  border: none;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.5625rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.stays-banner__step:hover {
  opacity: 0.7;
}

.stays-banner__step-val {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: #fff;
  white-space: nowrap;
}

/* CTA button override — inherit .btn .btn-primary sizing */
.stays-banner__cta {
  flex-shrink: 0;
  height: 48px;
  white-space: nowrap;
}

/* Responsive: stack bar on small screens */
/* 16px → 14px on small screens, matching the --text-base override in
   src/sections.css. This rule is hardcoded to 1rem so it misses that token. */
@media (max-width: 639.98px) {
  .stays-banner__label {
    font-size: 0.875rem;
  }
}

@media (max-width: 767px) {
  /* Hero counter vs heading.
     The counter is absolutely positioned at bottom:6.25rem, and the content's
     own bottom padding lands at roughly the same height on a phone — so the
     "04 | 04" sat straight on top of the heading's last line.
     Drop the counter into its own band at the very bottom and lift the text
     above it, rather than padding the heading sideways (which would only
     force more wrapping on a narrow screen). */
  .hero-banner__pager {
    bottom: 1.75rem;
    right: 1.25rem;
    left: 1.25rem;
    justify-content: flex-start;
    gap: 0.875rem;
  }

  .hero-banner__counter {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
  }

  /* Overrides the fs-45 utility the markup puts on each span. */
  .hero-banner__current,
  .hero-banner__sep,
  .hero-banner__total {
    font-size: inherit;
  }

  /* "01 | 04" reads as "01 / 04" next to the dashes. Collapsing the span to
     font-size 0 also swallows its two   so the slash controls its own
     spacing; the separator character itself is markup-agnostic, and desktop
     keeps the pipe. */
  .hero-banner__sep {
    font-size: 0;
    opacity: 1;
  }

  .hero-banner__sep::after {
    content: "/";
    font-size: 0.875rem;
    padding: 0 0.375rem;
    opacity: 0.5;
  }

  /* Dash rail: short muted ticks, the current slide stretched and solid.
     The pager is pointer-events:none via the counter only, so the rail is
     tappable and each dash jumps straight to its slide. */
  .hero-banner__dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .hero-banner__dot {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    border: 0;
    border-radius: 1px;
    width: 0.875rem;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
  }

  .hero-banner__dot.is-active {
    width: 1.75rem;
    background-color: #ffffff;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-banner__dot {
      transition: none;
    }
  }

  .hero-banner__content {
    padding-bottom: 5rem;
  }

  .stays-banner__bar {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1rem 1.5rem;
  }

  .stays-banner__bar-title {
    padding-top: 0;
  }

  .stays-banner__fields {
    flex-direction: column;
    gap: 0.75rem;
  }

  .stays-banner__cta {
    width: 100%;
    justify-content: center;
  }
}

/* Hero vs the fixed mobile nav.
 *
 * The banner is sized to the viewport, so the bar sits on top of its bottom
 * 64px — which is exactly where the slide counter, the dash rail and the CTA
 * live. body's padding-bottom cannot help: a fixed element is out of flow and
 * covers whatever the viewport shows there.
 *
 * Take the bar's height off the banner instead, so it ends where the nav
 * begins. --banner-h is the exact innerHeight main.js writes onto <html>;
 * reading it here and assigning to height (rather than redeclaring the
 * variable) avoids a self-referential cycle. The 0px fallback keeps this a
 * no-op if the nav is ever removed.
 *
 * Breakpoint matches the one that defines --mobile-nav-h in src/components.css.
 * ──────────────────────────────────────────────────────────────────── */
@media (max-width: 47.999rem) {
  .hero-banner {
    height: calc(var(--banner-h, 100svh) - var(--mobile-nav-h, 0px));
  }
}