/**
 * Homepage hero: positioning for the reservation bar.
 *
 * Layout only. Everything visual — width, padding, colours, shadow, gaps —
 * lives on the "Reservation Bar" widget's own Elementor style controls, so it
 * stays editable in the editor.
 *
 * The bar is centred on the hero's bottom edge with translateY(50%), which is
 * the one thing Elementor's offset controls cannot express: it depends on the
 * bar's own height.
 */

.aila-hero {
  position: relative;
  z-index: 2;
}

.aila-hero-booking {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 5;
  transform: translateY(50%);
}

/* Tablet and below the form reflows to 2 / 1 columns and grows too tall to
   hang off the hero, so it drops into the flow just under the video. */
@media (max-width: 980px) {
  .aila-hero-booking {
    position: static;
    transform: none;
    margin-top: -40px;
  }
}

@media (max-width: 640px) {
  .aila-hero-booking {
    margin-top: -28px;
  }
}